Hint view optimizations

schoolapps/static/common/helper.js

@@ -101,4 +101,8 @@ $(document).ready(function () {
     $("#print").click(function () {
         window.print();
     });
+
+    // Initialize collapsible [MAT]
+    $('.collapsible').collapsible();
+
 });
\ No newline at end of file

schoolapps/timetable/migrations/0005_auto_20190413_1413.py

+# Generated by Django 2.2 on 2019-04-13 12:13
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ('timetable', '0004_auto_20190411_1219'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='hint',
+            name='classes',
+            field=models.ManyToManyField(blank=True, related_name='hints', to='timetable.HintClass',
+                                         verbose_name='Klassen'),
+        ),
+        migrations.AlterField(
+            model_name='hint',
+            name='teachers',
+            field=models.BooleanField(blank=True, default=False, verbose_name='Lehrer?'),
+        ),
+    ]

schoolapps/timetable/templates/timetable/hints.html

@@ -24,40 +24,53 @@
         </form>
     </div>
 
-    <ul class="collection">
+    <ul class="collapsible">
         {% for hint in f.qs %}
-            <li class="collection-item row">
-                <div class="col s12 m4">
-                <span class="title">
-{#                    <i class="material-icons left">access_time</i>#}
-                    {{ hint.from_date }} &mdash; {{ hint.to_date }}
-                </span>
-                </div>
-                <div class="col s12 m4">
-                    <i class="material-icons left">people</i>
-                    {% for class in hint.classes.all %}
-                        {{ class }},
-                    {% endfor %}
-                    {% if hint.teachers %}
-                        <span class="badge new green no-float no-margin">Lehrkräfte</span>
-                    {% else %}
-                        <span class="badge new red no-float no-margin">Lehrkräfte</span>
-                    {% endif %}
-                </div>
+            <li>
+                <div class="collapsible-header row no-margin">
+                    <i class="material-icons">keyboard_arrow_down</i>
+
+                    <div class="col s10">
+                        <strong>{{ hint.from_date }} &mdash; {{ hint.to_date }}</strong> für
+                        <strong>
+                            {% for class in hint.classes.all %}
+                                {{ class }},
+                            {% endfor %}
+                        </strong>
+                        {% if hint.teachers %}
+                            <span class="badge new green no-float no-margin">Lehrkräfte</span>
+                        {% else %}
+                            <span class="badge new red no-float no-margin">Lehrkräfte</span>
+                        {% endif %}
+                    </div>
+                    <div class="col s2">
+                        <div class="right">
+                            {#                            <a class="btn-flat waves-effect waves-teal">#}
+                            <i class="material-icons center">more_vert</i>
+                            {#                            </a>#}
+                        </div>
+                    </div>
 
-                <div class="col s12 m4">
+                </div>
+                <div class="collapsible-body row">
+                    {#                    <div class="col s12 m4">#}
                     <div class="right">
-                        <a class="btn-flat waves-effect waves-teal"><i class="material-icons left">edit</i>
-                            Bearbeiten</a>
-                        <a class="btn-flat waves-effect waves-teal"><i class="material-icons left">delete</i>
-                            Löschen</a>
+                        <a class="btn-flat waves-effect waves-teal green-text">
+                            <i class="material-icons left">edit</i>
+                            <span class="hide-on-small-only">Bearbeiten</span>
+                        </a>
+                        <a class="btn-flat waves-effect waves-teal red-text">
+                            <i class="material-icons left">delete</i>
+                            <span class="hide-on-small-only">Löschen</span>
+                        </a>
 
                     </div>
-                </div>
-                <div class="col s12">
-                    <p>
-                        {#                    <i class="material-icons left">note</i>#}
-                        {{ hint.text|safe_markdown }}</p>
+                    {#                    </div>#}
+                    <div>
+                        <p>
+                            {#                    <i class="material-icons left">note</i>#}
+                            {{ hint.text|safe_markdown }}</p>
+                    </div>
                 </div>
             </li>
         {% endfor %}