use materialcss method

schoolapps/schoolapps/settings.py

@@ -55,7 +55,7 @@ INSTALLED_APPS = [
     'django.contrib.staticfiles',
     'material',
     'django_react_templatetags',
-    'django_user_agents',
+    #'django_user_agents',
 ]
 
 MIDDLEWARE = [
@@ -67,7 +67,7 @@ MIDDLEWARE = [
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
     'django_pdb.middleware.PdbMiddleware',
-    'django_user_agents.middleware.UserAgentMiddleware',
+    #'django_user_agents.middleware.UserAgentMiddleware',
 ]
 
 ROOT_URLCONF = 'schoolapps.urls'

schoolapps/timetable/templates/timetable/plan.html

@@ -37,21 +37,31 @@
 
 
         </div>
-        {% if not request.user_agent.is_mobile %}
             {# 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">
-            <a class="waves-effect waves-teal btn-flat btn-flat-medium right" id="print">
+        <div class="col s12 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>
-        {% endif %}
     </div>
     <div class="row">
         {% if smart %}
             {# Show if smart #}
 
             {# Toggle button to regular and smart plan badge #}
-            <div class="col s12 m6">
+            <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;
+
+                <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>
+            </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;
@@ -61,12 +71,10 @@
                     <i class="material-icons left">slideshow</i>
                     Regelplan anzeigen
                 </a>
-                {% if request.user_agent.is_mobile %}
                     {# 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>
                 </a>
-                {% endif %}
             </div>
 
             {# Week select #}
@@ -76,7 +84,7 @@
                         <i class="material-icons center">navigate_before</i>
                     </a>
                 </div>
-                <div class="input-field col s8 no-margin">
+                <div class="input-field col s8 no-margin hide-on-med-and-up">
                     <select id="calendar-week">
                         {% for week in weeks %}
                             <option value="{{ week.calendar_week }}" {% if week.calendar_week == selected_week %}
@@ -85,6 +93,15 @@
                         {% endfor %}
                     </select>
                 </div>
+                <div class="input-field col s8 no-margin hide-on-small-and-down">
+                    <select id="calendar-week">
+                        {% for week in weeks %}
+                            <option value="{{ week.calendar_week }}" {% if week.calendar_week == selected_week %}
+                                    selected {% endif %}> KW {{ week.calendar_week }} ({{ week.first_day|date:"j.n.Y" }}–{{ week.last_day|date:"j.n.Y" }})
+                            </option>
+                        {% endfor %}
+                    </select>
+                </div>
                 <div class="col s2 no-print">
                     <a class="waves-effect waves-teal btn-flat btn-flat-medium left" id="week-next">
                         <i class="material-icons center">navigate_next</i>
@@ -108,10 +125,9 @@
             <div class="col s2">
 
             </div>
-            {% if request.user_agent.is_mobile %}
                 {# Show short weekdays on mobiles #}
             {% for short_week_day in short_week_days %}
-                <div class="col s2">
+                <div class="col s2 hide-on-med-and-up">
                     <div class="card timetable-title-card">
                         <div class="card-content">
                     <span class="card-title">
@@ -121,10 +137,9 @@
                     </div>
                 </div>
             {% endfor %}
-            {% else %}
                 {# Show long weekdays elsewere #}
             {% for long_week_day in long_week_days %}
-                <div class="col s2">
+                <div class="col s2 hide-on-small-and-down">
                     <div class="card timetable-title-card">
                         <div class="card-content">
                     <span class="card-title">
@@ -134,7 +149,6 @@
                     </div>
                 </div>
             {% endfor %}
-            {% endif %}
         </div>
 
         {#  Lessons #}