[Design] An Agora button and a Wikiglyph in Commons

Discussion:

Susanna Ånäs

2014-09-24 16:49:49 UTC

We have been rehearsing with applying styles in Commons. While not keeping
up-to-date with the implementation of the styles across sites, I presume
they are not yet in use in Commons.

But if anyone feels like it, please tell us what our chances are to create
the kind of infobox on a Commons File page, as described here:

https://commons.wikimedia.org/wiki/Template_talk:Map/Proposal#Georeferencing_box

Thanks!

Cheers,
Susanna
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20140924/5ff4e9bb/attachment.html>

Jared Zimmerman

2014-09-24 18:27:09 UTC

Permalink

Oh, there is some weirdness on the buttons on that page, for the current
state of the mediawiki.ui buttons you can take a look here
http://tools.wmflabs.org/styleguide/desktop/index.html

I think it would be best if you didn't override the styles on a per control
basis

*Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation

M +1 415 609 4043 \\ @jaredzimmerman <http://loo.ms/g0>

On Wed, Sep 24, 2014 at 9:49 AM, Susanna ÃnÃ€s <susanna.anas at wikimedia.fi>

Post by Susanna ÃnÃ¤s
We have been rehearsing with applying styles in Commons. While not keeping
up-to-date with the implementation of the styles across sites, I presume
they are not yet in use in Commons.
But if anyone feels like it, please tell us what our chances are to create
https://commons.wikimedia.org/wiki/Template_talk:Map/Proposal#Georeferencing_box
Thanks!
Cheers,
Susanna
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20140924/a592b0ee/attachment.html>

Jon Robson

2014-09-24 18:38:26 UTC

Permalink

Hey Susanna
Check out "Standardising icons across projects" on design-l for a low down
on the current state of things.
We just added icon support to mediawiki ui.
The styleguide that Jared posted is a good place to keep up to date on
recommended markup.
Jon

On Wed, Sep 24, 2014 at 11:27 AM, Jared Zimmerman <

Post by Jared Zimmerman
Oh, there is some weirdness on the buttons on that page, for the current
state of the mediawiki.ui buttons you can take a look here
http://tools.wmflabs.org/styleguide/desktop/index.html
I think it would be best if you didn't override the styles on a per
control basis
*Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation
On Wed, Sep 24, 2014 at 9:49 AM, Susanna ÃnÃ€s <susanna.anas at wikimedia.fi>

Post by Susanna ÃnÃ¤s
We have been rehearsing with applying styles in Commons. While not
keeping up-to-date with the implementation of the styles across sites, I
presume they are not yet in use in Commons.
But if anyone feels like it, please tell us what our chances are to
https://commons.wikimedia.org/wiki/Template_talk:Map/Proposal#Georeferencing_box
Thanks!
Cheers,
Susanna
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

--
Jon Robson
* http://jonrobson.me.uk
* https://www.facebook.com/jonrobson
* @rakugojon
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20140924/7d72e049/attachment.html>

Susanna Ånäs

2014-09-25 05:47:54 UTC

Permalink

Thanks for the answers!

The problem is: No matter how hard we try, we cannot get the Agora styles
work, we can only get some of the other stuff. We need help accomplishing
that in wikicode.

If you are happy stylewise with the png showing the desired element, that's
what we are striving for. Any comments for that are also welcome!

Cheers,
Susanna

Post by Jon Robson
Hey Susanna
Check out "Standardising icons across projects" on design-l for a low down
on the current state of things.
We just added icon support to mediawiki ui.
The styleguide that Jared posted is a good place to keep up to date on
recommended markup.
Jon
On Wed, Sep 24, 2014 at 11:27 AM, Jared Zimmerman <

Post by Susanna ÃnÃ¤s
We have been rehearsing with applying styles in Commons. While not
keeping up-to-date with the implementation of the styles across sites, I
presume they are not yet in use in Commons.
But if anyone feels like it, please tell us what our chances are to
https://commons.wikimedia.org/wiki/Template_talk:Map/Proposal#Georeferencing_box
Thanks!
Cheers,
Susanna
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

--
Jon Robson
* http://jonrobson.me.uk
* https://www.facebook.com/jonrobson
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

--
*Susanna ÃnÃ€s *KÃ€yttÃ€jÃ€:Susannaanas
Wikimedia Suomi <http://wikimedia.fi/> â Wikimaps
<http://wikimaps.wikimedia.fi/> â GLAM
<http://fi.wikipedia.org/wiki/Wikipedia:GLAM>
@ <https://twitter.com/WMFinland>WMFinland <https://twitter.com/WMFinland>
/ Facebook <https://www.facebook.com/WikimediaSuomi> / Liity jÃ€seneksi!
<http://fi.wikimedia.org/wiki/Liity_j%C3%A4seneksi>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20140925/f54f6003/attachment.html>

Jared Zimmerman

2014-09-25 05:53:06 UTC

Permalink

Definitely don't use pngs, they're only acceptable as fallback. You'll need to start with svg. Since the Mediawiki icon work is finalizing now their should be documentation soon.

On Wed, Sep 24, 2014 at 10:48 PM, Susanna ÃnÃ€s <susanna.anas at wikimedia.fi>

Post by Susanna ÃnÃ¤s
Thanks for the answers!
The problem is: No matter how hard we try, we cannot get the Agora styles
work, we can only get some of the other stuff. We need help accomplishing
that in wikicode.
If you are happy stylewise with the png showing the desired element, that's
what we are striving for. Any comments for that are also welcome!
Cheers,
Susanna

Post by Susanna ÃnÃ¤s
We have been rehearsing with applying styles in Commons. While not
keeping up-to-date with the implementation of the styles across sites, I
presume they are not yet in use in Commons.
But if anyone feels like it, please tell us what our chances are to
https://commons.wikimedia.org/wiki/Template_talk:Map/Proposal#Georeferencing_box
Thanks!
Cheers,
Susanna
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20140924/0b87168f/attachment-0001.html>

Susanna Ånäs

2014-09-25 06:04:10 UTC

Permalink

Misunderstanding: There is a png illustration in the beginning of the
caption, a picture to show what kind of output we are after.

Cheers,
Susanna

Post by Jared Zimmerman
Definitely don't use pngs, they're only acceptable as fallback. You'll
need to start with svg. Since the Mediawiki icon work is finalizing now
their should be documentation soon.
On Wed, Sep 24, 2014 at 10:48 PM, Susanna ÃnÃ€s <susanna.anas at wikimedia.fi>

Post by Susanna ÃnÃ¤s
Thanks for the answers!
The problem is: No matter how hard we try, we cannot get the Agora styles
work, we can only get some of the other stuff. We need help accomplishing
that in wikicode.
If you are happy stylewise with the png showing the desired element,
that's what we are striving for. Any comments for that are also welcome!
Cheers,
Susanna

Post by Jon Robson
Hey Susanna
Check out "Standardising icons across projects" on design-l for a low
down on the current state of things.
We just added icon support to mediawiki ui.
The styleguide that Jared posted is a good place to keep up to date on
recommended markup.
Jon
On Wed, Sep 24, 2014 at 11:27 AM, Jared Zimmerman <

Post by Jared Zimmerman
Oh, there is some weirdness on the buttons on that page, for the
current state of the mediawiki.ui buttons you can take a look here
http://tools.wmflabs.org/styleguide/desktop/index.html
I think it would be best if you didn't override the styles on a per
control basis
*Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation
On Wed, Sep 24, 2014 at 9:49 AM, Susanna ÃnÃ€s <

Post by Susanna ÃnÃ¤s
We have been rehearsing with applying styles in Commons. While not
keeping up-to-date with the implementation of the styles across sites, I
presume they are not yet in use in Commons.
But if anyone feels like it, please tell us what our chances are to
https://commons.wikimedia.org/wiki/Template_talk:Map/Proposal#Georeferencing_box
Thanks!
Cheers,
Susanna
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

Jared Zimmerman

2014-09-25 06:08:21 UTC

Permalink

This is button class="mw-ui-button mw-ui-progressive" Jon, do you think
someone could help troubleshoot why this isn't working?

take a look at this image, is this different from what you're looking for?
Loading Image...

*Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation

M +1 415 609 4043 \\ @jaredzimmerman <http://loo.ms/g0>

On Wed, Sep 24, 2014 at 11:04 PM, Susanna ÃnÃ€s <susanna.anas at wikimedia.fi>

Post by Susanna ÃnÃ¤s
Misunderstanding: There is a png illustration in the beginning of the
caption, a picture to show what kind of output we are after.
Cheers,
Susanna

Post by Susanna ÃnÃ¤s
Thanks for the answers!
The problem is: No matter how hard we try, we cannot get the Agora
styles work, we can only get some of the other stuff. We need help
accomplishing that in wikicode.
If you are happy stylewise with the png showing the desired element,
that's what we are striving for. Any comments for that are also welcome!
Cheers,
Susanna

Post by Jon Robson
Hey Susanna
Check out "Standardising icons across projects" on design-l for a low
down on the current state of things.
We just added icon support to mediawiki ui.
The styleguide that Jared posted is a good place to keep up to date on
recommended markup.
Jon
On Wed, Sep 24, 2014 at 11:27 AM, Jared Zimmerman <

Post by Jared Zimmerman
Oh, there is some weirdness on the buttons on that page, for the
current state of the mediawiki.ui buttons you can take a look here
http://tools.wmflabs.org/styleguide/desktop/index.html
I think it would be best if you didn't override the styles on a per
control basis
*Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation
On Wed, Sep 24, 2014 at 9:49 AM, Susanna ÃnÃ€s <

Post by Susanna ÃnÃ¤s
We have been rehearsing with applying styles in Commons. While not
keeping up-to-date with the implementation of the styles across sites, I
presume they are not yet in use in Commons.
But if anyone feels like it, please tell us what our chances are to
https://commons.wikimedia.org/wiki/Template_talk:Map/Proposal#Georeferencing_box
Thanks!
Cheers,
Susanna
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

--
*Susanna ÃnÃ€s *KÃ€yttÃ€jÃ€:Susannaanas
Wikimedia Suomi <http://wikimedia.fi/> â Wikimaps
<http://wikimaps.wikimedia.fi/> â GLAM
<http://fi.wikipedia.org/wiki/Wikipedia:GLAM>
@ <https://twitter.com/WMFinland>WMFinland <https://twitter.com/WMFinland>
/ Facebook <https://www.facebook.com/WikimediaSuomi> / Liity jÃ€seneksi!
<http://fi.wikimedia.org/wiki/Liity_j%C3%A4seneksi>
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20140924/d1f114ae/attachment-0001.html>

Susanna Ånäs

2014-09-25 06:19:05 UTC

Permalink

That's approximately how it should be. I will create the box on that page
to see if it works there and to see exactly what problems arise. The final
destination is inside a template, using markup, so it may be inheriting
some of those styles. I'll alert when I've done this.

Thanks!

Susanna

Post by Jared Zimmerman
This is button class="mw-ui-button mw-ui-progressive" Jon, do you think
someone could help troubleshoot why this isn't working?
take a look at this image, is this different from what you're looking for?
https://www.dropbox.com/s/86m93gpfy1ooyh3/Screenshot%202014-09-24%2023.06.46.png?dl=0
*Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation
On Wed, Sep 24, 2014 at 11:04 PM, Susanna ÃnÃ€s <susanna.anas at wikimedia.fi>

Post by Susanna ÃnÃ¤s
Misunderstanding: There is a png illustration in the beginning of the
caption, a picture to show what kind of output we are after.
Cheers,
Susanna

Post by Susanna ÃnÃ¤s
Thanks for the answers!
The problem is: No matter how hard we try, we cannot get the Agora
styles work, we can only get some of the other stuff. We need help
accomplishing that in wikicode.
If you are happy stylewise with the png showing the desired element,
that's what we are striving for. Any comments for that are also welcome!
Cheers,
Susanna

Post by Jon Robson
Hey Susanna
Check out "Standardising icons across projects" on design-l for a low
down on the current state of things.
We just added icon support to mediawiki ui.
The styleguide that Jared posted is a good place to keep up to date on
recommended markup.
Jon
On Wed, Sep 24, 2014 at 11:27 AM, Jared Zimmerman <

Post by Jared Zimmerman
Oh, there is some weirdness on the buttons on that page, for the
current state of the mediawiki.ui buttons you can take a look here
http://tools.wmflabs.org/styleguide/desktop/index.html
I think it would be best if you didn't override the styles on a per
control basis
*Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation
On Wed, Sep 24, 2014 at 9:49 AM, Susanna ÃnÃ€s <

Post by Susanna ÃnÃ¤s
We have been rehearsing with applying styles in Commons. While not
keeping up-to-date with the implementation of the styles across sites, I
presume they are not yet in use in Commons.
But if anyone feels like it, please tell us what our chances are to
https://commons.wikimedia.org/wiki/Template_talk:Map/Proposal#Georeferencing_box
Thanks!
Cheers,
Susanna
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

--
*Susanna ÃnÃ€s *KÃ€yttÃ€jÃ€:Susannaanas
Wikimedia Suomi <http://wikimedia.fi/> â Wikimaps
<http://wikimaps.wikimedia.fi/> â GLAM
<http://fi.wikipedia.org/wiki/Wikipedia:GLAM>
@ <https://twitter.com/WMFinland>WMFinland
<https://twitter.com/WMFinland> / Facebook
<https://www.facebook.com/WikimediaSuomi> / Liity jÃ€seneksi!
<http://fi.wikimedia.org/wiki/Liity_j%C3%A4seneksi>
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

Susanna Ånäs

2014-09-25 06:32:13 UTC

Permalink

Ping. HTML created. I hope you don't mind if this turns out to be a lesson
for a novice...

Cheers,
Susanna

Post by Susanna ÃnÃ¤s
That's approximately how it should be. I will create the box on that page
to see if it works there and to see exactly what problems arise. The final
destination is inside a template, using markup, so it may be inheriting
some of those styles. I'll alert when I've done this.
Thanks!
Susanna

Post by Susanna ÃnÃ¤s
Misunderstanding: There is a png illustration in the beginning of the
caption, a picture to show what kind of output we are after.
Cheers,
Susanna

Post by Susanna ÃnÃ¤s
Thanks for the answers!
The problem is: No matter how hard we try, we cannot get the Agora
styles work, we can only get some of the other stuff. We need help
accomplishing that in wikicode.
If you are happy stylewise with the png showing the desired element,
that's what we are striving for. Any comments for that are also welcome!
Cheers,
Susanna

Post by Jon Robson
Hey Susanna
Check out "Standardising icons across projects" on design-l for a low
down on the current state of things.
We just added icon support to mediawiki ui.
The styleguide that Jared posted is a good place to keep up to date
on recommended markup.
Jon
On Wed, Sep 24, 2014 at 11:27 AM, Jared Zimmerman <

Post by Jared Zimmerman
Oh, there is some weirdness on the buttons on that page, for the
current state of the mediawiki.ui buttons you can take a look here
http://tools.wmflabs.org/styleguide/desktop/index.html
I think it would be best if you didn't override the styles on a per
control basis
*Jared Zimmerman * \\ Director of User Experience \\ Wikimedia Foundation
On Wed, Sep 24, 2014 at 9:49 AM, Susanna ÃnÃ€s <

Post by Susanna ÃnÃ¤s
We have been rehearsing with applying styles in Commons. While
not keeping up-to-date with the implementation of the styles across sites,
I presume they are not yet in use in Commons.
But if anyone feels like it, please tell us what our chances are to
https://commons.wikimedia.org/wiki/Template_talk:Map/Proposal#Georeferencing_box
Thanks!
Cheers,
Susanna
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

--
*Susanna ÃnÃ€s *KÃ€yttÃ€jÃ€:Susannaanas
Wikimedia Suomi <http://wikimedia.fi/> â Wikimaps
<http://wikimaps.wikimedia.fi/> â GLAM
<http://fi.wikipedia.org/wiki/Wikipedia:GLAM>
@ <https://twitter.com/WMFinland>WMFinland
<https://twitter.com/WMFinland> / Facebook
<https://www.facebook.com/WikimediaSuomi> / Liity jÃ€seneksi!
<http://fi.wikimedia.org/wiki/Liity_j%C3%A4seneksi>
_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

_______________________________________________
Design mailing list
Design at lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design

Matthew Flaschen

2014-10-03 04:52:36 UTC

Permalink

Post by Susanna ÃnÃ¤s
Ping. HTML created. I hope you don't mind if this turns out to be a
lesson for a novice...

mediawiki.ui.button is enabled. However, if you use only wikitext, you
have some limitations (e.g. link styling, you have to click on the text).

But you can see
https://commons.wikimedia.org/w/index.php?title=User:Mattflaschen_%28WMF%29/Sandbox&oldid=135998179

Matt Flaschen

Erwin Dokter

2014-10-03 06:18:20 UTC

Permalink

Post by Matthew Flaschen
mediawiki.ui.button is enabled. However, if you use only wikitext, you
have some limitations (e.g. link styling, you have to click on the text).

I added two examples to show the buttons as intended, which reveals a
design glitch...

When the button is focused or active, the text color is almost the same
as the background color, and the text becomes illegible. This applies to
mw-ui-progressive, mw-ui-construvtive and mw-ui-destructive.

Regards,

--
Erwin Dokter

Matthew Flaschen

2014-10-03 21:52:28 UTC

Permalink

Post by Erwin Dokter

Post by Matthew Flaschen
mediawiki.ui.button is enabled. However, if you use only wikitext, you
have some limitations (e.g. link styling, you have to click on the text).

I added two examples to show the buttons as intended, which reveals a
design glitch...
When the button is focused or active, the text color is almost the same
as the background color, and the text becomes illegible. This applies to
mw-ui-progressive, mw-ui-construvtive and mw-ui-destructive.

Thanks. I forgot that it worked better this way (span inside). See
https://bugzilla.wikimedia.org/show_bug.cgi?id=61886 .

What's wrong with button 3 on the page (first one you added)? Also,
what browser are you testing?

Matt

Erwin Dokter

2014-10-04 06:28:07 UTC

Permalink

Post by Matthew Flaschen
What's wrong with button 3 on the page (first one you added)? Also,
what browser are you testing?
When the button is focused or active, the text color is almost the same
as the background color, and the text becomes illegible. This applies to
mw-ui-progressive, mw-ui-construvtive and mw-ui-destructive.

That is what I was trying to point out. That is a design flaw in the
button's CSS, not related to its use.

Regards,

--
Erwin Dokter

S Page

2014-09-25 20:48:52 UTC

Permalink

On Wed, Sep 24, 2014 at 9:49 AM, Susanna ÃnÃ€s <susanna.anas at wikimedia.fi>

Sure, I think your problem is existing templates like {{Clickable
button}} are outputing jquery UI classes that conflict.

Either update Template:Clickable_button or create a new better template and
migrate to its usage. Other wikis have wrestled with this. I think a while
ago Steven Walling managed to update some of enwiki's button templates.

--
=S Page Features engineer
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20140925/25ba9c07/attachment.html>