mobile optimizations for timetable switch

schoolapps/static/common/style.css

@@ -123,6 +123,9 @@ span.badge.no-float {
 /*+++++++++++*/
 /* Timetable */
 /*+++++++++++*/
+.smart-plan-badge {
+    margin: 5px 20px 5px 0;
+}
 
 .timetable-plan .row, .timetable-plan .col {
     display: flex;

schoolapps/timetable/templates/timetable/plan.html

@@ -30,55 +30,34 @@
 </script>
 <main>
     <div class="row no-margin">
-        <div class="col s12 m6 l8 xl9">
+        <div class="col s8 m6 l8 xl9">
             <h3>
                 Stundenplan <i>{{ el }}</i>
             </h3>
-
-
         </div>
-            {# Show print button not in same row as smart plan if user is not on mobile #}
-        <div class="col s12 m6 l4 xl3 right align-right no-print">
+            {# Show print button only if not on mobile #}
+        <div class="col s1 m6 l4 xl3 right align-right no-print">
             <a class="waves-effect waves-teal btn-flat btn-flat-medium right hide-on-small-and-down" id="print">
                 <i class="material-icons center">print</i>
             </a>
         </div>
     </div>
-    <div class="row">
+    <div class="row" style="display: flex; flex-wrap: wrap;">
         {% if smart %}
             {# Show if smart #}
-
             {# Toggle button to regular and smart plan badge #}
-            <div class="col s12 m6 hide-on-small-and-down">
-                <p class="left" style="margin: 0;"><span
-                        class="badge new primary-color left-align">SMART PLAN</span>
-                </p>&nbsp;
+            <div class="row s12 m6 left">
+                <span class="badge new primary-color left smart-plan-badge">SMART PLAN</span>
 
-                <a class="waves-effect waves-light btn-flat no-print"
+                <a class="waves-effect waves-light btn-flat no-print" style="padding: 0px;"
                    href="{% url "timetable_regular_plan" raw_type id "regular" %}">
                     <i class="material-icons left">slideshow</i>
-                    Regelplan anzeigen
-                </a>
-            </div>
-
-            <div class="col s12 m6 hide-on-med-and-up">
-                <p class="left" style="margin: 0;"><span
-                        class="badge new primary-color left-align">SMART PLAN</span>
-                </p>&nbsp;
-
-                <a class="waves-effect waves-light btn-flat no-print"
-                   href="{% url "timetable_regular_plan" raw_type id "regular" %}">
-                    <i class="material-icons left">slideshow</i>
-                    Regelplan anzeigen
-                </a>
-                    {# Show print button in same row as smart plan if user is on mobile #}
-                <a class="waves-effect waves-teal btn-flat btn-flat-medium right" id="print">
-                    <i class="material-icons center">print</i>
+                    REGELPLAN ANZEIGEN
                 </a>
             </div>
 
             {# Week select #}
-            <div class="col s12 m6 right ">
+            <div class="col s12 m6 right">
                 <div class="col s2 no-print">
                     <a class="waves-effect waves-teal btn-flat btn-flat-medium right" id="week-before">
                         <i class="material-icons center">navigate_before</i>
@@ -127,6 +106,7 @@
             </a>
         {% endif %}
     </div>
+
     {# show full timetable on tablets, laptops and pcs #}
     <div class="timetable-plan hide-on-small-and-down">