From 823b13e46fd21c4da2f1ac68be2fa54fbab9b2fd Mon Sep 17 00:00:00 2001
From: =?utf8?q?Je=CC=81re=CC=81my=20Fabre?= <Jeremy@iMac-de-Jeremy.local>
Date: Mon, 24 Oct 2016 10:57:12 +0200
Subject: [PATCH] Add language selector and magazine topics on mobile devices

---
 app/static/src/js/modules/lang-selector.js    | 10 +++++++++
 .../src/sass/modules/_lang-switcher.scss      | 19 ++++++++++++++++
 .../src/sass/modules/_role-switcher.scss      |  2 +-
 app/static/src/sass/modules/_sidebar.scss     | 11 ++++++++++
 app/static/src/sass/pages/_home.scss          | 13 +++++++++++
 app/templates/includes/sidebar.html           | 22 +++++++++++++++++++
 6 files changed, 76 insertions(+), 1 deletion(-)

diff --git a/app/static/src/js/modules/lang-selector.js b/app/static/src/js/modules/lang-selector.js
index 954ae62c..8b252a6f 100644
--- a/app/static/src/js/modules/lang-selector.js
+++ b/app/static/src/js/modules/lang-selector.js
@@ -1,6 +1,7 @@
 var LangSelector = function() {
 
     this.$element = null;
+    this.$elementMobile = null;
 
     //
     // Init
@@ -39,6 +40,15 @@ LangSelector.prototype.init = function() {
 
     });
 
+    that.$elementMobile = $('#langSelectorMobile');
+    that.$elementMobile.find('a').click(function(e) {
+
+        e.preventDefault();
+        that.changeLanguage($(this).attr('data-lang'));
+        return false;
+
+    });
+
 };
 
 LangSelector.prototype.changeLanguage = function(lang) {
diff --git a/app/static/src/sass/modules/_lang-switcher.scss b/app/static/src/sass/modules/_lang-switcher.scss
index 255e2745..14aff353 100644
--- a/app/static/src/sass/modules/_lang-switcher.scss
+++ b/app/static/src/sass/modules/_lang-switcher.scss
@@ -66,4 +66,23 @@ $module: ".lang-switcher";
         @include transition(all 0.2s ease-in-out);
     }
 
+    .sidebar & {
+
+        top: 15px;
+
+        #{$module}__item {
+
+            display: inline-block;
+            @include padding(0 .25);
+
+            >a {
+
+                color: black;
+
+            }
+
+        }
+
+    }
+
 }
diff --git a/app/static/src/sass/modules/_role-switcher.scss b/app/static/src/sass/modules/_role-switcher.scss
index 33c14067..5e0982aa 100644
--- a/app/static/src/sass/modules/_role-switcher.scss
+++ b/app/static/src/sass/modules/_role-switcher.scss
@@ -114,7 +114,7 @@ $module: ".role-switcher";
             background: black;
             width: 240px;
             height: 6px;
-            @include margin(1.5 0 .5 0);
+            @include margin(1.5 0 1 0);
 
         }
 
diff --git a/app/static/src/sass/modules/_sidebar.scss b/app/static/src/sass/modules/_sidebar.scss
index 289d2762..97fa6da3 100644
--- a/app/static/src/sass/modules/_sidebar.scss
+++ b/app/static/src/sass/modules/_sidebar.scss
@@ -29,4 +29,15 @@ $module: ".sidebar";
 
     }
 
+    .col-xs-3 {
+        &:first-of-type {
+            margin-top: 10px;
+        }
+        padding-left: 0;
+        padding-right: 0;
+        width: 100%;
+        display: block;
+        @include margin(0 0 .5 0);
+    }
+
 }
diff --git a/app/static/src/sass/pages/_home.scss b/app/static/src/sass/pages/_home.scss
index 82d60d58..376599e5 100644
--- a/app/static/src/sass/pages/_home.scss
+++ b/app/static/src/sass/pages/_home.scss
@@ -133,6 +133,19 @@ $module: ".home";
             text-decoration: underline;
         }
 
+        .sidebar & {
+
+            >h2 {
+                @include font-size(m);
+                @include line-height(1);
+                @include margin(0 0 0 0);
+            }
+            >p {
+                display: none;
+            }
+
+        }
+
     }
 
     &__menu-item {
diff --git a/app/templates/includes/sidebar.html b/app/templates/includes/sidebar.html
index a722e056..db5f589c 100644
--- a/app/templates/includes/sidebar.html
+++ b/app/templates/includes/sidebar.html
@@ -8,10 +8,32 @@
     <ul class="sidebar__menu">
         <li class="sidebar__menu-item">
             <a href="#" title="{% trans "Magazine" %}">{% trans "Magazine" %}</a>
+            {% page_menu "pages/menus/magazine.html" %}
         </li>
         <li class="sidebar__menu-item">
             <a href="{% url 'organization-playlist-list' %}" title="{% trans "Medias" %}">{% trans "Medias" %}</a>
         </li>
     </ul>
 
+    <ul class="lang-switcher" id="langSelectorMobile">
+        {% for language in languages %}
+            {% if language.code == LANGUAGE_CODE %}
+                <li class="lang-switcher__item active">
+                    <a href="#">
+                      {{ language.code|title }}
+                    </a>
+                </li>
+            {% endif %}
+        {% endfor %}
+        {% for language in languages %}
+            {% if language.code != LANGUAGE_CODE %}
+                <li class="lang-switcher__item">
+                    <a href="#" data-lang="{{ language.code }}">
+                      {{ language.code|title }}
+                    </a>
+                </li>
+            {% endif %}
+        {% endfor %}
+    </ul>
+
 </div>
-- 
2.39.5