Discussion:
[Design] An Agora button and a Wikiglyph in Commons
Susanna Ånäs
11 years ago
Permalink
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
11 years ago
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>
...
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20140924/a592b0ee/attachment.html>
Jon Robson
11 years ago
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 <
...
--
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
11 years ago
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
...
--
*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
11 years ago
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>
...
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20140924/0b87168f/attachment-0001.html>
Susanna Ånäs
11 years ago
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
...
--
*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/275ca243/attachment.html>
Jared Zimmerman
11 years ago
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?
Failed to load image: https://www.dropbox.com/s/86m93gpfy1ooyh3/Screenshot%202014-09-24%2023.06.46.png?dl=0



*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>
...
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.wikimedia.org/pipermail/design/attachments/20140924/d1f114ae/attachment-0001.html>
Susanna Ånäs
11 years ago
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
...
--
*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/8a66f89a/attachment.html>
Susanna Ånäs
11 years ago
Permalink
Ping. HTML created. I hope you don't mind if this turns out to be a lesson
for a novice...

Cheers,
Susanna
...
--
*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/e337e015/attachment-0001.html>
Matthew Flaschen
11 years ago
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
11 years ago
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
10 years ago
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
10 years ago
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
11 years ago
Permalink
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
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>
Loading...