Merge lp:~deadlight/canonical-identity-provider/language into lp:~deadlight/canonical-identity-provider/vanilla

[Karl Williams]

Converted the language selection page to Vanilla

QA:
- npm i
- ./node_modules/gulp/bin/gulp.js sass
- source env/bin/activate
- make start-db
- make run
- Visit http://[CONTAINER IP]:8000/set_language

[lp:~deadlight/canonical-identity-provider/language]

1712. By Karl Williams on 2019-08-22

Styled selct language page with Vnailla Framework

[Karl Williams (deadlight)]

QA'd in person

[Anthony Dillon (ya-bo-ng)]

Two small suggestions

review: Needs Fixing

[lp:~deadlight/canonical-identity-provider/language]

1713. By Karl Williams on 2019-08-23

Fix button style and add external link class

[Karl Williams (deadlight)]

Fixed issues raised in comments

[Anthony Dillon (ya-bo-ng)]

LGTM +1

review: Approve

=== modified file 'src/webui/templates/select_language.html'
--- src/webui/templates/select_language.html	2014-12-09 21:41:56 +0000
+++ src/webui/templates/select_language.html	2019-08-23 13:39:12 +0000
@@ -1,78 +1,59 @@
-{% extends "base.html" %}
+{% extends "vanilla/base.html" %}
 {% load i18n %}
 
 {% comment %}
-Copyright 2010 Canonical Ltd.  This software is licensed under the
+Copyright 2010-2019 Canonical Ltd.  This software is licensed under the
 GNU Affero General Public License version 3 (see the file  LICENSE).
 {% endcomment %}
 
 {% block title %}
-    {% trans "Choose your language" %}
+  {% trans "Choose your language" %}
 {% endblock %}
 
 {% block text_title %}
-    <h1 class="u1-h-main">{% trans "Choose your language" %}</h1>
+  <h1>{% trans "Choose your language" %}</h1>
 {% endblock %}
 
 {% block bodyclass %}set-language{% endblock %}
 {% block menu %}{% endblock %}
 
 {% block extra_css %}
-<style type="text/css">
+  <style type="text/css">
     .set-language footer .language {
-        display: none;
+      display: none;
     }
-</style>
+  </style>
 {% endblock %}
 
+{% block content_class %}{% endblock %}
+
 {% block content %}
-
-<div class="yui3-g-r">
-
-    <div class="yui3-u-1-2 language-select">
-
-        <form action="" method="post">
-
-            {% csrf_token %}
-            <input type="hidden" name="next" value="{{next}}">
-
-            {% for lang in supported_languages %}
-                <p>
-                    <input id="lang-{{lang.0}}" type="radio" name="language"
-                        {% if LANGUAGE_CODE == lang.0 %}checked="checked"{% endif %}
-                        value="{{lang.0}}">
-
-                    <label for="lang-{{lang.0}}">
-                        {{lang.1}}
-                    </label>
-                </p>
-            {% endfor %}
-
-            <button type="submit" name="submit" data-qa-id="choose_language" class="btn cta">
-                {% trans "Choose language" %}
-            </button>
-        </form>
-
-    </div>
-
-    <div class="yui3-u-1-3 cannot-find-language">
-
-        <div class="box">
-
-            <div class="title">
-                <h3>{% trans "Can't find your language?" %}</h3>
-            </div>
-
-            <div class="body">
-
-                <p>{% blocktrans %}We welcome volunteers to help us translate this site to new languages. If you are able to help, please visit our <a href="https://translations.launchpad.net/canonical-identity-provider">translations site</a> to get started.{% endblocktrans %}
-                </p>
-
-            </div>
-
-        </div>
-
-    </div>
-
-</div>
+  <div class="row">
+    <div class="col-8">
+      <form action="" method="post">
+        {% csrf_token %}
+        <input type="hidden" name="next" value="{{next}}">
+        <ul class="p-list is-split">
+        {% for lang in supported_languages %}
+          <li class="p-list__item">
+            <input id="lang-{{lang.0}}" type="radio" name="language" {% if LANGUAGE_CODE == lang.0 %}checked="checked"{% endif %} value="{{lang.0}}">
+            <label for="lang-{{lang.0}}">
+              {{lang.1}}
+            </label>
+          </li>
+        {% endfor %}
+        </ul>
+        <button type="submit" name="submit" data-qa-id="choose_language" class="p-button--positive">
+          {% trans "Choose language" %}
+        </button>
+      </form>
+    </div>
+    <div class="col-4">
+      <div class="p-card">
+        <h3>{% trans "Can't find your language?" %}</h3>
+        <p>{% blocktrans %}We welcome volunteers to help us translate this site to new languages. If you are able to help, please visit our <a class="p-link--external" href="https://translations.launchpad.net/canonical-identity-provider">translations site</a> to get started.{% endblocktrans %}
+        </p>
+      </div>
+    </div>
+  </div>
 {% endblock %}