Add language selector and magazine topics on mobile devices

diff --git a/app/static/src/js/modules/lang-selector.js b/app/static/src/js/modules/lang-selector.js
index 954ae62c709350c476a89fc0a370fe5595e4e753..8b252a6f67cb957bd450d71a3ef892c83532d081 100644 (file)
--- 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 255e27457e3af1210cec79771ec40a97103cdacc..14aff3538ea3c1c3acde96ce6ff5d3bac4218cc7 100644 (file)
--- 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 33c140672fcef6c1c52089e477c9064c42990d59..5e0982aaa460d9302c55a7b963e8450be912b524 100644 (file)
--- 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 289d27620f362311788076df0f796f441936760e..97fa6da37a134adf8aac5703abcc472c97a26a0c 100644 (file)
--- 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 82d60d585f7af8b372a9d1a2de1c6d4c2eace796..376599e5e2474b672d33a7102a74b953f0e2f3d0 100644 (file)
--- 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 a722e056a4aa7ca7f013a9bbe7b5a87ecab20e1a..db5f589ccfc16a17263bee15d62bd5dbc053d785 100644 (file)
--- 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>