Add language selection page (Fixes #5827)

bedrock/mozorg/templates/mozorg/locales.html

@@ -0,0 +1,118 @@
+{# This Source Code Form is subject to the terms of the Mozilla Public
+ # License, v. 2.0. If a copy of the MPL was not distributed with this
+ # file, You can obtain one at http://mozilla.org/MPL/2.0/. -#}
+
+{% extends "base-protocol.html" %}
+
+{% block page_title %}Choose your language or locale to browse Mozilla.org{% endblock %}
+
+{% block page_desc %}
+  Select your country or region to indicate your preferred language. Learn how Mozilla puts people before profit, making products designed to keep the internet open to all.
+{% endblock %}
+
+{% block canonical_urls %}
+  {# This page should have a self referencing canonical URL but no hreflang entries #}
+  <link rel="canonical" href="{{ settings.CANONICAL_URL + '/locales/' }}">
+{% endblock %}
+
+{% block page_css %}
+  {{ css_bundle('locales') }}
+{% endblock %}
+
+{% block content %}
+<main role="main" class="mzp-l-content">
+  <header class="c-simple-header">
+    <h1 class="c-simple-header-title">Choose your language</h1>
+  </header>
+  <section class="c-block-list">
+    <h2 class="c-block-list-title">America</h2>
+    <ul>
+      <li lang="cak"><a href="/cak/">Maya Kaqchikel</a></li>
+      <li lang="en-CA"><a href="/en-CA/">English (Canadian)</a></li>
+      <li lang="en-US"><a href="/en-US/">English (US)</a></li>
+      <li lang="es-AR"><a href="/es-AR/">Español (de Argentina)</a></li>
+      <li lang="es-CL"><a href="/es-CL/">Español (de Chile)</a></li>
+      <li lang="es-MX"><a href="/es-MX/">Español (de México)</a></li>
+      <li lang="gn"><a href="/gn/">Avañe'ẽ</a></li>
+      <li lang="pt-BR"><a href="/pt-BR/">Português (do Brasil)</a></li>
+      <li lang="trs"><a href="/trs/">Triqui</a></li>
+    </ul>
+  </section>
+  <section class="c-block-list">
+    <h2 class="c-block-list-title">Asia Pacific</h2>
+    <ul>
+      <li lang="gu-IN"><a href="/gu-IN/">જરાતી (ભારત)</a></li>
+      <li lang="hi-IN"><a href="/hi-IN/">हिन्दी (भारत)</a></li>
+      <li lang="id"><a href="/id/">Bahasa Indonesia</a></li>
+      <li lang="ja"><a href="/ja/">日本語</a></li>
+      <li lang="ko"><a href="/ko/">한국어</a></li>
+      <li lang="ml"><a href="/ml/">മലയാളം</a></li>
+      <li lang="mr"><a href="/mr/">मराठी</a></li>
+      <li lang="ms"><a href="/ms/">Melayu</a></li>
+      <li lang="pa-IN"><a href="/pa-IN/">ਪੰਜਾਬੀ (ਭਾਰਤ)</a></li>
+      <li lang="ta"><a href="/ta/">தமிழ்</a></li>
+      <li lang="th"><a href="/th/">ไทย</a></li>
+      <li lang="zh-CN"><a href="/zh-CN/">中文 (简体)</a></li>
+      <li lang="zh-TW"><a href="/zh-TW/">正體中文 (繁體)</a></li>
+    </ul>
+  </section>
+  <section class="c-block-list">
+    <h2 class="c-block-list-title">Europe</h2>
+    <ul>
+      <li lang="an"><a href="/an/">aragonés</a></li>
+      <li lang="ast"><a href="/ast/">Asturianu</a></li>
+      <li lang="be"><a href="/be/">Беларуская</a></li>
+      <li lang="bg"><a href="/bg/">Български</a></li>
+      <li lang="bs"><a href="/bs/">Bosanski</a></li>
+      <li lang="ca"><a href="/ca/">Català</a></li>
+      <li lang="cs"><a href="/cs/">Čeština</a></li>
+      <li lang="cy"><a href="/cy/">Cymraeg</a></li>
+      <li lang="da"><a href="/da/">Dansk</a></li>
+      <li lang="de"><a href="/de/">Deutsch</a></li>
+      <li lang="dsb"><a href="/dsb/">Dolnoserbšćina</a></li>
+      <li lang="el"><a href="/el/">Ελληνικά</a></li>
+      <li lang="en-GB"><a href="/en-GB/">English (British)</a></li>
+      <li lang="eo"><a href="/eo/">Esperanto</a></li>
+      <li lang="es-ES"><a href="/es-ES/">Español (de España)</a></li>
+      <li lang="et"><a href="/et/">Eesti keel</a></li>
+      <li lang="eu"><a href="/eu/">Euskara</a></li>
+      <li lang="fi"><a href="/fi/">suomi</a></li>
+      <li lang="fr"><a href="/fr/">Français</a></li>
+      <li lang="fy-NL"><a href="/fy-NL/">Frysk</a></li>
+      <li lang="gl"><a href="/gl/">Galego</a></li>
+      <li lang="hsb"><a href="/hsb/">Hornjoserbsce</a></li>
+      <li lang="hu"><a href="/hu/">magyar</a></li>
+      <li lang="hy-AM"><a href="/hy-AM/">Հայերեն</a></li>
+      <li lang="ia"><a href="/ia/">Interlingua</a></li>
+      <li lang="it"><a href="/it/">Italiano</a></li>
+      <li lang="ka"><a href="/ka/">ქართული</a></li>
+      <li lang="lij"><a href="/lij/">Ligure</a></li>
+      <li lang="lt"><a href="/lt/">Lietuvių</a></li>
+      <li lang="nb-NO"><a href="nb-NO">Norsk bokmål</a></li>
+      <li lang="nl"><a href="/nl/">Nederlands</a></li>
+      <li lang="nn-NO"><a href="/nn-NO/">Norsk nynorsk</a></li>
+      <li lang="pl"><a href="/pl/">Polski</a></li>
+      <li lang="pt-PT"><a href="/pt-PT/">Português (Europeu)</a></li>
+      <li lang="rm"><a href="/rm/">rumantsch</a></li>
+      <li lang="ro"><a href="/ro/">Română</a></li>
+      <li lang="ru"><a href="/ru/">Русский</a></li>
+      <li lang="sk"><a href="/sk/">slovenčina</a></li>
+      <li lang="sl"><a href="/sl/">Slovenščina</a></li>
+      <li lang="sq"><a href="/sq/">Shqip</a></li>
+      <li lang="sr"><a href="/sr/">Српски</a></li>
+      <li lang="sv-SE"><a href="/sv-SE/">Svenska</a></li>
+      <li lang="tr"><a href="/tr/">Türkçe</a></li>
+      <li lang="uk"><a href="/uk/">Українська</a></li>
+    </ul>
+  </section>
+  <section class="c-block-list">
+    <h2 class="c-block-list-title">Middle East and Africa</h2>
+    <ul>
+      <li lang="ar"><a href="/ar/">عربي</a></li>
+      <li lang="az"><a href="/az/">Azərbaycanca</a></li>
+      <li lang="fa"><a href="/fa/">فارسی</a></li>
+      <li lang="kab"><a href="/kab/">Taqbaylit</a></li>
+    </ul>
+  </section>
+</main>
+{% endblock %}

bedrock/mozorg/urls.py

@@ -317,4 +317,6 @@
     url(r'^microsummaries/0\.1$', views.namespaces, {'namespace': 'microsummaries'}),
     url(r'^projects/xforms/2005/type$', views.namespaces, {'namespace': 'xforms-type'}),
     url(r'^xbl$', views.namespaces, {'namespace': 'xbl'}),
+
+    page('locales', 'mozorg/locales.html'),
 )

bedrock/settings/base.py

@@ -263,6 +263,7 @@ def lazy_langs():
     'csp-violation-capture',
     'country-code.json',
     'revision.txt',
+    'locales',
 ]
 
 # Pages that we don't want to be indexed by search engines.

media/css/mozorg/locales.scss

@@ -0,0 +1,91 @@
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+$font-path: '/media/fonts';
+$image-path: '/media/protocol/img';
+
+@import '../../protocol/css/includes/lib';
+
+.c-simple-header {
+    @include at2x('/media/img/mozorg/locales/world-map.png', 179px, 90px);
+    background-position: top center;
+    background-repeat: no-repeat;
+    padding-top: 90px + $spacing-md;
+    margin-top: $layout-xs;
+    text-align: center;
+
+    .c-simple-header-title {
+        @include text-display-md;
+    }
+
+    @media #{$mq-md} {
+        margin-top: $layout-lg;
+    }
+}
+
+.c-block-list {
+    margin: $layout-md 0;
+
+    .c-block-list-title {
+        @include text-display-sm;
+        border-bottom: 1px solid $color-gray-30;
+        padding-bottom: $spacing-md;
+    }
+
+    a:link,
+    a:visited {
+        color: $color-black;
+        text-decoration: none;
+    }
+
+    a:hover,
+    a:visited,
+    a:focus {
+        text-decoration: underline;
+    }
+
+    ul {
+        margin: $spacing-xl 0;
+
+        li {
+            margin-bottom: $spacing-lg;
+        }
+    }
+
+    @media #{$mq-sm} {
+        ul {
+            @include grid-gap($spacing-lg $spacing-xl);
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+        }
+
+        @supports (display: grid) {
+            ul li {
+                margin-bottom: 0;
+            }
+        }
+    }
+
+    @media #{$mq-md} {
+        margin: $layout-lg 0;
+
+        ul {
+            grid-template-columns: repeat(4, 1fr);
+        }
+    }
+
+    @media #{$mq-lg} {
+        margin: $layout-xl 0;
+
+        ul {
+            grid-template-columns: repeat(5, 1fr);
+        }
+    }
+
+    @media #{$mq-xl} {
+        ul {
+            grid-template-columns: repeat(6, 1fr);
+        }
+    }
+}

media/static-bundles.json

@@ -25,6 +25,12 @@
       ],
       "name": "nightly_whatsnew"
     },
+    {
+      "files": [
+        "css/mozorg/locales.scss"
+      ],
+      "name": "locales"
+    },
     {
       "files": [
         "css/base/mozilla-video-poster.less",