make .flex-page .left-menu more responsive

static/css/style.css

@@ -342,26 +342,6 @@ table.admin-list tbody tr:last-child td { border-bottom: 0; }
 table.admin-list tbody tr:nth-child(even) { background: #eee; }
 
 
-@media screen and (max-width: 64em) {
-    .content {
-        padding: 0em 1em 3em 1em;
-    }
-
-    header{
-        height: 120px;
-    }
-    header nav{
-        float: left;
-        width: 100%;
-    }
-    header nav ul{
-        text-align: center;
-        padding-top: 0;
-    }
-}
-
-
-
 /***************************************************/
 /********************* Forms / Buttons             */
 
@@ -899,3 +879,53 @@ div.ticket-message-private {
 
 
 
+@media screen and (max-width: 64em) {
+    .content {
+        padding: 0em 1em 3em 1em;
+    }
+
+    header{
+        height: 120px;
+    }
+    header nav{
+        float: left;
+        width: 100%;
+    }
+    header nav ul{
+        text-align: center;
+        padding-top: 0;
+    }
+
+    .flex-page {
+        flex-direction: column;
+    }
+    .flex-page .left-menu {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+    }
+    .flex-page .left-menu ul {
+        padding: 1em 0.25em;
+    }
+
+    .install-guides {
+        padding-left: 0;
+    }
+    .install-guides li {
+        display: block;
+        padding: 0.25em 1.5em;
+        width: auto;
+        text-align: left;
+    }
+    .install-guides li a {
+        line-height: 1em;
+    }
+    .install-guides li i {
+        display: inline-block;
+        font-size: 1.4em;
+        width: 1.5em;
+    }
+}
+
+
+

templates/account_layout.html

@@ -6,6 +6,7 @@
 {% block content %}
 <div class="flex-page">
     <div class="left-menu">
+        <div class="submenu">
             <p class="menu-title">{% trans 'Account' %}</p>
             <ul>
                 <li><a href="/account/">
@@ -30,6 +31,7 @@
                 </a></li>
             </ul>
         </div>
+    </div>
     <div class="content-box">
         {% block account_content %}{% endblock %}
     </div>

templates/base_help.html

@@ -5,6 +5,7 @@
 {% block content %}
 <div class="flex-page">
     <div class="left-menu">
+        <div class="submenu">
             <p class="menu-title">{% trans 'Help' %}</p>
             <ul>
                 <li class="pure-menu-item">
@@ -30,7 +31,9 @@
                     {% trans 'Privacy' %}
                 </a></li>
             </ul>
+        </div>
 
+        <div class="submenu">
             <p class="menu-title">{% trans 'Installation' %}</p>
             <ul>
                 <li><a href="/page/install-android">
@@ -54,7 +57,9 @@
                     {% trans 'Chrome OS' %}
                 </a></li>
             </ul>
+        </div>
 
+        <div class="submenu">
             <p class="menu-title">{% trans 'Advanced' %}</p>
             <ul>
                 <li><a href="/page/advanced-tor">
@@ -63,6 +68,7 @@
                 </a></li>
             </ul>
         </div>
+    </div>
     <div class="content-box">
         {% if title %}
             <h2>{{ title }}</h2>

templates/tickets/layout.html

@@ -5,6 +5,7 @@
 {% block content %}
 <div class="flex-page">
     <div class="left-menu">
+        <div class="submenu">
             <p class="menu-title">{% trans 'Support' %}</p>
             <ul>
                 <li class="pure-menu-item">
@@ -27,6 +28,8 @@
                     </a>
                 </li>
             </ul>
+        </div>
+        <div class="submenu">
             {% if perms.tickets.view_any_ticket %}
                 <p class="menu-title">{% trans 'Staff' %}</p>
                 <ul>
@@ -46,6 +49,7 @@
                 </ul>
             {% endif %}
         </div>
+    </div>
     <div class="content-box">
         {% block tickets_content %}{% endblock %}
     </div>