display five individual timetables for every day instead of one timetable for...

display five individual timetables for every day instead of one timetable for every day on mobile devices

.gitignore

@@ -7,6 +7,6 @@ secure*
 *.log
 class.pdf
 class.tex
-.idea/
-media/
+.idea
+media
 node_modules
\ No newline at end of file

.idea/misc.xml

 <?xml version="1.0" encoding="UTF-8"?>
 <project version="4">
-  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.6 (school-apps)" project-jdk-type="Python SDK" />
+  <component name="ProjectRootManager" version="2" project-jdk-name="Python 3.7 (SchoolApps)" project-jdk-type="Python SDK" />
   <component name="PyCharmProfessionalAdvertiser">
     <option name="shown" value="true" />
   </component>

.idea/school-apps.iml

@@ -17,7 +17,7 @@
       <sourceFolder url="file://$MODULE_DIR$/schoolapps" isTestSource="false" />
       <excludeFolder url="file://$MODULE_DIR$/venv" />
     </content>
-    <orderEntry type="jdk" jdkName="Python 3.6 (school-apps)" jdkType="Python SDK" />
+    <orderEntry type="jdk" jdkName="Python 3.7 (SchoolApps)" jdkType="Python SDK" />
     <orderEntry type="sourceFolder" forTests="false" />
     <orderEntry type="library" name="jquery-3.2.1" level="application" />
     <orderEntry type="library" name="react.production" level="application" />

schoolapps/schoolapps/settings.py

@@ -55,7 +55,6 @@ INSTALLED_APPS = [
     'django.contrib.staticfiles',
     'material',
     'django_react_templatetags',
-    #'django_user_agents',
 ]
 
 MIDDLEWARE = [
@@ -67,7 +66,6 @@ MIDDLEWARE = [
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
     'django_pdb.middleware.PdbMiddleware',
-    #'django_user_agents.middleware.UserAgentMiddleware',
 ]
 
 ROOT_URLCONF = 'schoolapps.urls'
@@ -169,7 +167,7 @@ TIMETABLE_HEIGHT = 10
 LESSONS = [('8:00', '1.'), ('8:45', '2.'), ('9:45', '3.'), ('10:35', '4.'), ('11:35', '5.'),
            ('12:25', '6.'), ('13:15', '7.'), ('14:05', '8.'), ('14:50', '9.')]
 SHORT_WEEK_DAYS = ["Mo", "Di", "Mi", "Do", "Fr"]
-LONG_WEEK_DAYS = ["Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag"]
+LONG_WEEK_DAYS = [("Montag", 0), ("Dienstag", 1), ("Mittwoch", 2), ("Donnerstag", 3), ("Freitag", 4)]
 
 ########
 # LDAP #

schoolapps/static/common/style.css

@@ -160,6 +160,26 @@ span.badge.new {
     width: 100%;
 }
 
+.timetable-mobile-title-card{
+    margin-top: 50px;
+    margin-bottom: .60rem;
+}
+
+.timetable-mobile-title-card:first-child{
+    margin-top: -10px;
+    margin-bottom: .60rem;
+}
+
+.timetable-mobile-title-card .card-content{
+    padding: 10px;
+    text-align: center;
+    width: 100%;
+}
+
+.timetable-mobile-title-card .card-content .card-title{
+    font-weight: bold;
+}
+
 table.substitutions td, table.substitutions th {
     padding: 10px 5px;
 }

schoolapps/timetable/templates/timetable/datepicker.html

@@ -57,7 +57,7 @@
 </script>
 
 
-<div class="col s2">
+<div class="col s2" style="display: initial;">
     <a class="waves-effect waves-teal btn-flat btn-flat-medium left" id="date-before">
         <i class="material-icons center">navigate_before</i>
     </a>

schoolapps/timetable/templates/timetable/lesson.html

@@ -25,10 +25,12 @@
 
                             {# Class or room > Display teacher #}
                             {% if type == 2 or type == 1 %}
+                                {% if element_container.element.teacher %}
                                 <span data-position="bottom" class="tooltipped"
                                       data-tooltip="{{ element_container.element.teacher }}"><a
                                         href="{% url "timetable_smart_plan" "teacher" element_container.element.teacher.id %}">{{ element_container.element.teacher.shortcode }}</a></span>
                                 <br>
+                                {% endif %}
                             {% endif %}
 
                             {# Badge #}
@@ -81,12 +83,14 @@
 
                         {# Class or room > Display teacher #}
                         {% if type == 2 or type == 1 %}
+                            {% if element_container.element.teacher %}
                             <span data-position="bottom" class="tooltipped"
                                   data-tooltip="{{ element_container.element.teacher }}">
                                 <a href="{% url "timetable_smart_plan" "teacher" element_container.element.teacher.id %}">
                                     {{ element_container.element.teacher.shortcode }}
                                 </a>
                             </span>
+                            {% endif %}
                         {% endif %}
 
                         {# Display subject #}

schoolapps/timetable/templates/timetable/plan.html

@@ -118,7 +118,8 @@
             </a>
         {% endif %}
     </div>
-    <div class="timetable-plan">
+    {# show full timetable on tablets, laptops and pcs #}
+    <div class="timetable-plan hide-on-small-and-down">
 
         {#  Week days #}
         <div class="row">
@@ -143,7 +144,7 @@
                     <div class="card timetable-title-card">
                         <div class="card-content">
                     <span class="card-title">
-                        {{ long_week_day }}
+                        {{ long_week_day.0 }}
                     </span>
                         </div>
                     </div>
@@ -181,6 +182,48 @@
             </div>
         {% endfor %}
     </div>
+    {# show 5 seperate ones on mobiles #}
+    <div class="timetable-plan hide-on-med-and-up">
+        {% for long_week_day in long_week_days %}
+            <div class="card timetable-mobile-title-card">
+                <div class="card-content">
+                    <span class="card-title">
+                        {{ long_week_day.0 }}
+                    </span>
+                </div>
+            </div>
+            {% for row, time in plan %}
+                <div class="row">
+                    <div class="col s4">
+                        <div class="card timetable-title-card">
+                            <div class="card-content">
+
+                                {# Lesson number #}
+                                <span class="card-title left">
+                                {{ time.number_format }}
+                             </span>
+
+                                {# Time dimension of lesson #}
+                                <div class="right timetable-time grey-text text-darken-2">
+                                    <span>{{ time.start|date:"H:i" }}</span><br>
+                                    <span>{{ time.end|date:"H:i" }}</span>
+                                </div>
+                            </div>
+                        </div>
+
+                    </div>
+                    {% for col in row %}
+                        {% if forloop.counter0 == long_week_day.1 %}
+                            <div class="col s8">
+                                {# A lesson #}
+                                {% include "timetable/lesson.html" %}
+                            </div>
+                        {% endif %}
+                    {% endfor %}
+                </div>
+            {% endfor %}
+        {% endfor %}
+    </div>
 </main>
 
 {% include 'partials/footer.html' %}

schoolapps/timetable/views.py

@@ -166,7 +166,6 @@ def my_plan(request, year=None, day=None, month=None):
         "el": el,
         "times": parse_lesson_times(),
         "week_day": date.isoweekday() - 1,
-        "week_days": WEEK_DAYS,
         "date": date,
         "date_js": int(date.timestamp()) * 1000,
         "display_date_only": True