Skip to content

Bug 970449 - Add a link to YouTube to the footer #1750

Merged
merged 1 commit into from Apr 17, 2014

7 participants

@kyoshino
Mozilla member
kyoshino commented Mar 4, 2014

This PR introduces new strings, so the l10n needs an update. cc @flodolo

@alexgibson
Mozilla member

I'm seeing some breakage on certain pages (on quite a few of the /firefox pages, e.g. /os /fx, etc).

footer

@alexgibson
Mozilla member

Please disregard my last comment, was my cache that needed clearing!

@alexgibson alexgibson and 1 other commented on an outdated diff Mar 5, 2014
bedrock/base/templates/includes/site-footer.html
+ <footer id="colophon" class="{% block footer_class %}{% endblock %}">
+ <nav class="row">
+ <div class="col col-1">
+ <h1 class="logo"><a href="{{ url('mozorg.home') }}"><img src="{{ media('img/sandstone/footer-mozilla.png') }}" alt="Mozilla"></a></h1>
+ <p class="license">
+ {%- trans url=url('foundation.licensing.website-content') -%}
+ Portions of this content are ©1998–{{ current_year }} by individual
+ mozilla.org contributors. Content available under
+ a <a href="{{ url }}">Creative Commons license</a>.
+ {%- endtrans -%}
+ </p>
+ </div>
+ <div class="col col-2">
+ <ul class="links-join">
+ <li><a href="{{ url('mozorg.contact.spaces.spaces-landing') }}">{{ _('Contact Us') }}</a> &middot; <a href="{{ url('mozorg.partnerships') }}">{{ _('Partner with Us' ) }}</a></li>
+ <li><a href="{{ donate_url() }}?source=mozillaorg_footer&amp;amount=20" class="donate">{{ _('Donate') }}</a> &middot; <a href="https://affiliates.mozilla.org/">{{ _('Firefox Affiliates') }}</a></li>
@alexgibson
Mozilla member
alexgibson added a note Mar 5, 2014

I really like the new layout, much cleaner and more concise! :+1:

It's a nit, but I wonder if the semantics could be improved here slightly? We have a single list item with two links in it, separated by a &middot in the markup. It might be slightly more to rework, but maybe it would be cleaner to have each link as an inline list item?

Update - another thought, perhaps the first suggestion might be a bit too long-winded to warrant the extra markup and styling. I wonder if we could just add <span role="presentation">&middot;</span> to the separator?

@kyoshino
Mozilla member
kyoshino added a note Mar 6, 2014

Good question! I have improved the markup as you suggested. :smiley_cat:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@icaaq
icaaq commented Mar 6, 2014

The <span> element has no semantic value, so there is no need to add role="presentation" to it
http://www.w3.org/TR/wai-aria/roles#presentation

@kyoshino
Mozilla member
kyoshino commented Mar 6, 2014

We have 3 new strings: Mozilla on %s, Firefox on %s and YouTube. Twitter and Facebook are already there, and we could probably reuse the current strings: Mozilla on Twitter and Mozilla on Twitter. And looks like YouTube is not officially translated, though our localizers can later do that if needed. So I think we don't have to call for localizers here. @flodolo @pascalchevrel Thoughts?

@alexgibson alexgibson and 1 other commented on an outdated diff Mar 11, 2014
bedrock/base/templates/includes/site-footer.html
@@ -0,0 +1,37 @@
+ <footer id="colophon" class="{% block footer_class %}{% endblock %}">
+ <nav class="row">
+ <div class="col col-1">
+ <h1 class="logo"><a href="{{ url('mozorg.home') }}"><img src="{{ media('img/sandstone/footer-mozilla.png') }}" alt="Mozilla"></a></h1>
+ <p class="license">
+ {%- trans url=url('foundation.licensing.website-content') -%}
+ Portions of this content are ©1998–{{ current_year }} by individual
+ mozilla.org contributors. Content available under
+ a <a href="{{ url }}">Creative Commons license</a>.
+ {%- endtrans -%}
+ </p>
+ </div>
+ <div class="col col-2">
+ <ul class="links-join">
+ <li class="link-spaces"><a href="{{ url('mozorg.contact.spaces.spaces-landing') }}">{{ _('Contact Us') }}</a></li>
@alexgibson
Mozilla member
alexgibson added a note Mar 11, 2014

I wonder if we could use some more generic CSS class names here, so they're not quite as closely tied to the content should it change in the future?

@kyoshino
Mozilla member
kyoshino added a note Mar 11, 2014

:+1:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@alexgibson alexgibson and 1 other commented on an outdated diff Mar 11, 2014
bedrock/base/templates/includes/site-footer.html
+ <ul class="links-join">
+ <li class="link-spaces"><a href="{{ url('mozorg.contact.spaces.spaces-landing') }}">{{ _('Contact Us') }}</a></li>
+ <li class="link-partnerships"><a href="{{ url('mozorg.partnerships') }}">{{ _('Partner with Us' ) }}</a></li>
+ <li class="link-donate"><a href="{{ donate_url() }}?source=mozillaorg_footer&amp;amount=20" class="donate">{{ _('Donate') }}</a></li>
+ <li class="link-affiliates"><a href="https://affiliates.mozilla.org/">{{ _('Firefox Affiliates') }}</a></li>
+ <li class="link-website"><a href="{{ url('mozorg.contribute_page') }}">{{ _('Contribute to this page') }}</a></li>
+ </ul>
+ <ul class="links-legal">
+ <li class="link-privacy"><a href="{{ url('privacy.index') }}">{{ _('Privacy Policy') }}</a></li>
+ <li class="link-notices"><a href="{{ php_url('/about/legal.html') }}">{{ _('Legal Notices') }}</a></li>
+ <li class="link-fraud"><a href="{{ url('legal.fraud-report') }}">{{ _('Report Trademark Abuse') }}</a></li>
+ </ul>
+ </div>
+ <div class="col col-3">
+ <ul class="links-social">
+ <li class="links-mozilla">{{ _('Mozilla on %s')|format((['<a href="%s">%s</a>'] * 2)|join(' &middot; ')|format('https://twitter.com/mozilla', _('Twitter'), 'https://www.facebook.com/mozilla', _('Facebook'))|safe) }}</li>
@alexgibson
Mozilla member
alexgibson added a note Mar 11, 2014

Could we eliminate the &middot; here as well maybe? Perhaps a simple comma , separator would do here considering this reads more like a typical sentence?

@icaaq
icaaq added a note Mar 11, 2014

as discussed on IRC it would be great if the twitter and facebook links would make sense out of context.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@kyoshino
Mozilla member

So I have modified the markup for a11y. The social link now looks like <li><a href="">Twitter<span> (@firefox)</span></a></li> and the <span> is visually hidden.

I think the &middot; here is okay (I have changed it as a CSS generated content though) as it consists with other links in the center column.

I still keep the string Mozilla on %s for l10n flexibility.

@kyoshino
Mozilla member

Here's a screenshot when I use VoiceOver:
voiceover-links

@icaaq
icaaq commented Mar 11, 2014

A.some!

@kyoshino
Mozilla member

Thanks!

@kyoshino
Mozilla member

@flodolo @pascalchevrel what do you think of #1750 (comment)?

@flodolo
flodolo commented Mar 14, 2014

Sorry, this approach is not going to work.

People may not translate the name "X", but they could need to adapt it to the case or just transliterate it.

Take a look at how "Firefox on Twitter" is translated and you'll get the picture (Transvision Beta searches also www.mozilla.org strings :+1: )
http://transvision-beta.mozfr.org/string/?entity=mozilla_org/main.lang:677a7b03&repo=mozilla_org

@kyoshino
Mozilla member

Hmm, so do I have to provide a new string to include everything? I (and probably localizers) don't want to update the entire string every time a new social service (e.g. Google+) is added.

Mozilla on <a href="%(twitter)s">Twitter</a> ・ <a href="%(facebook)s">Facebook</a>
Firefox on <a href="%(twitter)s">Twitter</a> ・ <a href="%(facebook)s">Facebook</a> ・ <a href="%(youtube)s">YouTube</a>

@kyoshino
Mozilla member

Or can we just avoid using "on" after "Mozilla" and "Firefox" like this?

{{ _('Mozilla') }}: <a href="{{ twitter }}">{{ _('Twitter') }} ・ <a href="{{ facebook }}">{{ _('Facebook') }}
{{ _('Firefox') }}: <a href="{{ twitter }}">{{ _('Twitter') }} ・ <a href="{{ facebook }}">{{ _('Facebook') }} ・ <a href="{{ youtube }}">{{ _('YouTube') }}

@kyoshino
Mozilla member

Maybe the last one (removing "on") is better in terms of l10n and maintainability?

@flodolo
flodolo commented Mar 20, 2014

How often do you see us adding new services? I hope it's not that frequent. We currently have almost 1500 strings on mozilla.org, I wouldn't consider it a burden to add a couple of strings from now and then for new services.

In general: hard-coding positions (name: service), or characters (: ・), is not a good choice.

I know it's going to be a silly question, but why can't we use logos+alt/title localized text? Like
Mozilla: [T] [F]
Firefox: [T] [F] [Y]

Logos copyright issues, accessibility, unwanted distracting images in the footer?

@m-alexis

Flod, we would need significant review and discussion with the Creative team re: logos in the footer. Let's move forward with what we currently have and we can iterate on that if necessary.

@kyoshino
Mozilla member

@flodolo Folks in the bug have chosen text over icons, not to promote their services nor break their logo guidelines. Accessibility is also considered. Those strings won't be updated frequently, but there's still a chance.

The position is not hard-coded; localizers can alter _('Mozilla on %s') or _('Mozilla: %s') if needed. And &middot; might be a language-neutral separator? I see it on Twitter profiles.

@flodolo
flodolo commented Mar 25, 2014

Mozilla/Firefox on %s

I don't see this working: let's suppose you add this string and _('Twitter'), this needs to be adapted to the grammar case for "on something" (ablative). This will prevent us from having "Twitter" used as a name (nominative).

If you want to use a variable in this context, I guess the only way is what you proposed a couple of comments above

{{ _('Mozilla :') }} <a href="{{ twitter }}">{{ _('Twitter') }} ・ <a href="{{ facebook }}">{{ _('Facebook') }}

@pascalchevrel
Opinions on this?

@kyoshino
Mozilla member

Changed the strings as @flodolo suggested. Does this work?

@flodolo
flodolo commented Mar 27, 2014

Yes, this works. Let me know when/if I can extract these strings to start the localization process (we'll need to wait for a good coverage before pushing it to prod).

@alexgibson
Mozilla member

@flod - I think we're good here with the strings now, so please begin l10n

@alexgibson alexgibson and 1 other commented on an outdated diff Apr 3, 2014
media/css/sandstone/sandstone.less
@@ -1,3 +1,4 @@
+@import "lib.less";
@alexgibson
Mozilla member
alexgibson added a note Apr 3, 2014

I don't think this should need lib.less, as much of the content is already provided in variables.less and would be duplicated.

@kyoshino
Mozilla member
kyoshino added a note Apr 3, 2014

OK, I'll remove it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@craigcook craigcook and 2 others commented on an outdated diff Apr 10, 2014
bedrock/base/templates/includes/site-footer.html
+ <li class="clear"><a href="{{ donate_url() }}?source=mozillaorg_footer" class="donate">{{ _('Donate') }}</a></li>
+ <li class="wrap"><a href="https://affiliates.mozilla.org/">{{ _('Firefox Affiliates') }}</a></li>
+ <li class="clear"><a href="{{ url('mozorg.contribute_page') }}">{{ _('Contribute to this page') }}</a></li>
+ </ul>
+ <ul class="links-legal">
+ <li><a href="{{ url('privacy.index') }}">{{ _('Privacy Policy') }}</a></li>
+ <li class="wrap"><a href="{{ php_url('/about/legal.html') }}">{{ _('Legal Notices') }}</a></li>
+ <li class="clear"><a href="{{ url('legal.fraud-report') }}">{{ _('Report Trademark Abuse') }}</a></li>
+ </ul>
+ </div>
+ <div class="col col-3">
+ <ul class="links-social">
+ <li>
+ {{ _('Mozilla:') }}
+ <ul>
+ <li><a href="https://twitter.com/mozilla">{{ _('Twitter') }}<span> (@mozillla)</span></a></li>
@craigcook
Mozilla member
craigcook added a note Apr 10, 2014

three ls in "mozillla"... should fix that :)

@sgarrity
sgarrity added a note Apr 10, 2014

Or we could keep the three Ls in "mozillla" and add a third T to "twittter".

@kyoshino
Mozilla member
kyoshino added a note Apr 10, 2014

oops :smile_cat:

@kyoshino
Mozilla member
kyoshino added a note Apr 10, 2014

Then faceboook!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@kyoshino
Mozilla member

@flodolo Those new strings are basically service names like Twitter or Facebook, so could we get this merged without waiting further l10n?

@flodolo
flodolo commented Apr 10, 2014

Yes, you can merge this. I'll discuss with Pascal if we want to eventually expose all or just some of these strings.

@kyoshino
Mozilla member

Thanks @flodolo. I just fixed the typos so it's ready to be merged?

@alexgibson alexgibson commented on the diff Apr 14, 2014
media/css/sandstone/sandstone.less
+ &:first-child:before {
+ content: "";
+ }
+
+ span {
+ .visually-hidden; /* for a11y */
@alexgibson
Mozilla member
alexgibson added a note Apr 14, 2014

This is throwing an error when less is compiling: NameError: .visually-hidden is undefined

@kyoshino
Mozilla member
kyoshino added a note Apr 15, 2014

Ah oh... .visually-hidden is missing in sandstone.less as it's in lib.css. I have just copied it to mixins.less so it should work now. Tested with the /firefox/features/ page.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
@alexgibson
Mozilla member

Thanks for the update @kyoshino, but looks like this one needs a rebase.

@kyoshino
Mozilla member

Thanks! Just rebased.

@alexgibson
Mozilla member

Tested with the /firefox/features/ page.

Looks like the new footer isn't spanning the full width of the page on non-responsive pages like this one? ^

@kyoshino
Mozilla member

This is a screenshot on /firefox/channel/ (with the lang switcher). I guess it's a proper layout, almost the same as responsive pages.

screen shot 2014-04-05 at 14 31 21

@alexgibson
Mozilla member

Gah, the cache hit me again - sorry @kyoshino I needed to flush my css files. Looking good now :+1:

@alexgibson alexgibson merged commit 451cb6d into mozilla:master Apr 17, 2014

1 check passed

Details default Jenkins build 'bedrock_github' #3840 has succeeded
@kyoshino kyoshino deleted the kyoshino:bug-970449-footer-youtube branch Apr 17, 2014
@kyoshino
Mozilla member

Thanks! :smile_cat:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.