added switch language button to mobile menu (#494)

UTNkar · Oct 24, 2020 · 7910083 · 7910083
1 parent 33c917c
commit 7910083
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 23 deletions.
diff --git a/src/moore/static/sass/partials/layout/_navigation.scss b/src/moore/static/sass/partials/layout/_navigation.scss
@@ -24,6 +24,24 @@ $logo-width: 214px;
     }
   }
 
+  #set_language_form > button {
+    @media #{$medium-and-down}{
+        background: none;
+        border: none;
+        width: 100%;
+        text-align: left;
+        padding: 0;
+
+        i {
+            float: left;
+            margin: 0 32px 0 0;
+            line-height: 48px;
+            height: 48px;
+            color: rgba(0, 0, 0, 0.54);
+        }
+    }
+  }
+
   .collapsible-body{
     padding-left: 1.4em;
   }
@@ -117,4 +135,4 @@ $logo-width: 214px;
       left: 100% !important;
     }
   }
-}
+}
diff --git a/src/moore/templates/partials/navigation.html b/src/moore/templates/partials/navigation.html
@@ -27,8 +27,16 @@
         </li>
         <li><a href="{% pageurl site_root %}">{% trans 'Home' %}</a></li>
         {% menu_items parent=site_root sidenav=True top_level=True %}
+
+        <li><div class="divider"></div></li>
+        <li>
+            <a>
+                {% include "partials/switch_language_button.html" with mobile=True %}
+            </a>
+        </li>
+
         {% if user.is_authenticated %}
-            <li><div class="divider"></div></li>
+            <li><div class="divider" style="margin:0;"></div></li>
             <li><a href="{% url 'profile' %}"><i class="material-icons">face</i>{% trans 'account' %}</a></li>
             <li><a href="{% url 'password_change' %}"><i class="material-icons">lock</i>{% trans 'password' %}</a></li>
             <li><a href="{% url 'logout' %}"><i class="material-icons">cancel</i>{% trans 'Log out' %}</a></li>
@@ -42,26 +50,7 @@
 
     <ul class="right hide-on-med-and-down">
         <li>
-            <form action="{% url 'set_language' %}" id="set_language_form" method="post">
-                {% csrf_token %}
-                <input name="next" type="hidden" value="{{ request.path }}" />
-                <input 
-                    type="hidden"
-                    name="language"
-                    value="{% if LANGUAGE_CODE == 'sv'%}en{% else %}sv{% endif %}"
-                />
-                <button 
-                    class="btn btn-inverse"
-                    type="submit"
-                >
-                    <i class="material-icons">language</i>
-                    {% if LANGUAGE_CODE == 'sv'%}
-                        English
-                    {% else %}
-                        Svenska
-                    {% endif %}
-                </button>
-            </form>
+            {% include "partials/switch_language_button.html" %}
         </li>
         {% if not user.is_authenticated %}
             <li>
@@ -83,4 +72,4 @@
             </li>
         {% endif %}
     </ul>
-</nav>
+</nav>
diff --git a/src/moore/templates/partials/switch_language_button.html b/src/moore/templates/partials/switch_language_button.html
@@ -0,0 +1,17 @@
+<form action="{% url 'set_language' %}" id="set_language_form" method="post">
+    {% csrf_token %}
+    <input name="next" type="hidden" value="{{ request.path }}" />
+    <input
+        type="hidden"
+        name="language"
+        value="{% if LANGUAGE_CODE == 'sv'%}en{% else %}sv{% endif %}"
+    />
+    <button type="submit" {% if not mobile %}class="btn btn-inverse waves-effect waves-primary"{% endif %}>
+        <i class="material-icons">language</i>
+        {% if LANGUAGE_CODE == 'sv'%}
+            English
+        {% else %}
+            Svenska
+        {% endif %}
+    </button>
+</form>