From d3b336dd4811476432deeb999b58779e22bb26a3 Mon Sep 17 00:00:00 2001
From: Silvan Verhoeven <silvan.verhoeven@student.hpi.de>
Date: Thu, 22 Feb 2024 12:48:59 +0100
Subject: [PATCH] chore: Improve print layout

---
 myhpi/core/templates/core/minutes.html | 146 +++++++++++++------------
 myhpi/settings.py                      |   4 +-
 myhpi/static/scss/myHPI.scss           |  10 ++
 myhpi/templates/base.html              |   2 +-
 4 files changed, 88 insertions(+), 74 deletions(-)

diff --git a/myhpi/core/templates/core/minutes.html b/myhpi/core/templates/core/minutes.html
index 6d6ddfd5..2d5fb297 100644
--- a/myhpi/core/templates/core/minutes.html
+++ b/myhpi/core/templates/core/minutes.html
@@ -6,82 +6,86 @@
 {% load bootstrap_icons %}
 
 {% block content %}
-    <div class="row minutes-container">
-        {% with page.body|markdown as parsed_md %}
-        <div class="d-none d-print-block minutes-title">
-            <h1>{{  page.title }}</h1>
-        </div>
-        <div class="col-9 minutes-text">
-            {{ parsed_md.0|touchify_abbreviations|tag_external_links }}
-        </div>
-        <div class="col-3 minutes-meta">
-            <aside class="side-panel border-accent">
-                <h1 class="side-panel-title">{% translate "Date" %}</h1>
-                <p>{{ page.date }}</p>
-            </aside>
-            <aside class="side-panel border-accent">
-                <h1 class="side-panel-title">{% translate "Moderator" %}</h1>
-                <p>{{ page.moderator.get_full_name }}</p>
-            </aside>
-            <aside class="side-panel border-accent">
-                <h1 class="side-panel-title">{% translate "Minutes taker" %}</h1>
-                <p>{{ page.author.get_full_name }}</p>
-            </aside>
-            <aside class="side-panel border-accent">
-                <h1 class="side-panel-title">{% translate "Participants" %}</h1>
-                <ul>
-                    {% for participant in page.participants.all %}
-                        <li>{{ participant.get_full_name }}</li>
-                    {% endfor %}
-                </ul>
-            </aside>
-            <aside class="side-panel border-accent">
-                <h1 class="side-panel-title">{% translate "Guests" %}</h1>
-                {% if page.guests %}
-                    <ul>
-                    {% for guest in page.guests %}
-                        <li>{{ guest }}</li>
-                    {% endfor %}
-                    </ul>
-                {% else %}
-                    <i>{% translate "No guests" %}</i>
-                {% endif %}
-            </aside>
-            {% if page.location %}
-            <aside class="side-panel border-accent">
-              <h1 class="side-panel-title">{% translate "Location" %}</h1>
-              <p>{{ page.location }}</p>
-            </aside>
+<div class="row minutes-container">
+    {% with page.body|markdown as parsed_md %}
+    <h1 class="page-title">
+        <span class="underline">
+            {{ page.title }}
+        </span>
+    </h1>
+    <div class="col-9 minutes-text">
+        {{ parsed_md.0|touchify_abbreviations|tag_external_links }}
+    </div>
+    <div class="col-lg-3 minutes-meta">
+        <aside class="side-panel border-accent">
+            <h1 class="side-panel-title">{% translate "Date" %}</h1>
+            <p>{{ page.date }}</p>
+        </aside>
+        <aside class="side-panel border-accent">
+            <h1 class="side-panel-title">{% translate "Moderator" %}</h1>
+            <p>{{ page.moderator.get_full_name }}</p>
+        </aside>
+        <aside class="side-panel border-accent">
+            <h1 class="side-panel-title">{% translate "Minutes taker" %}</h1>
+            <p>{{ page.author.get_full_name }}</p>
+        </aside>
+        <aside class="side-panel border-accent">
+            <h1 class="side-panel-title">{% translate "Participants" %}</h1>
+            <ul>
+                {% for participant in page.participants.all %}
+                <li>{{ participant.get_full_name }}</li>
+                {% endfor %}
+            </ul>
+        </aside>
+        <aside class="side-panel border-accent">
+            <h1 class="side-panel-title">{% translate "Guests" %}</h1>
+            {% if page.guests %}
+            <ul>
+                {% for guest in page.guests %}
+                <li>{{ guest }}</li>
+                {% endfor %}
+            </ul>
+            {% else %}
+            <i>{% translate "No guests" %}</i>
+            {% endif %}
+        </aside>
+        {% if page.location %}
+        <aside class="side-panel border-accent">
+            <h1 class="side-panel-title">{% translate "Location" %}</h1>
+            <p>{{ page.location }}</p>
+        </aside>
+        {% endif %}
+        <aside class="side-panel border-accent">
+            <h1 class="side-panel-title">{% translate "Labels" %}</h1>
+            {% if page.labels.all %}
+            <p>{% include "core/label.html" with minutes=page %}</p>
+            {% else %}
+            <i>{% translate "No labels"%}</i>
+            {% endif %}
+        </aside>
+        {% include "core/sidebar.html" %}
+    </div>
+    <div id="minutes-footer" class="d-none d-print-block"></div>
+    <div id="minutes-navigation" class="row d-print-none">
+        <div class="col-4">
+            {% prev_minutes page as prev %}
+            {% if prev %}
+            <a href="{{ prev.url }}" class="btn btn-outline-primary minutes-navigation-button">{% bs_icon 'arrow-left'
+                extra_classes='minutes-navigation-icon' %} {% translate "Previous minutes" %}</a>
             {% endif %}
-            <aside class="side-panel border-accent">
-                <h1 class="side-panel-title">{% translate "Labels" %}</h1>
-                {%  if page.labels.all %}
-                    <p>{% include "core/label.html" with minutes=page %}</p>
-                {% else %}
-                    <i>{% translate "No labels"%}</i>
-                {% endif %}
-            </aside>
-            {% include "core/sidebar.html" %}
         </div>
-        <div id="minutes-footer" class="d-none d-print-block"></div>
-        <div id="minutes-navigation" class="row d-print-none">
-            <div class="col-4">
-                {%  prev_minutes page as prev %}
-                {% if prev %}
-                    <a href="{{ prev.url }}" class="btn btn-outline-primary minutes-navigation-button">{% bs_icon 'arrow-left' extra_classes='minutes-navigation-icon' %} {% translate "Previous minutes" %}</a>
-                {%  endif %}
-            </div>
-            <div class="col-5 text-end">
-                {%  next_minutes page as next %}
-                {% if next %}
-                    <a href="{{ next.url }}" class="btn btn-outline-primary minutes-navigation-button"> {% translate "Next minutes" %} {% bs_icon 'arrow-right' extra_classes='minutes-navigation-icon' %}</a>
-                {%  endif %}
-            </div>
+        <div class="col-5 text-end">
+            {% next_minutes page as next %}
+            {% if next %}
+            <a href="{{ next.url }}" class="btn btn-outline-primary minutes-navigation-button"> {% translate "Next
+                minutes" %} {% bs_icon 'arrow-right' extra_classes='minutes-navigation-icon' %}</a>
+            {% endif %}
         </div>
-        {% endwith %}
     </div>
+    {% endwith %}
+</div>
 {% endblock %}
 
 {% block extra_js %}
 <script type="text/javascript" src="{% static 'js/print_processor.js' %}"></script>
-{% endblock %}
+{% endblock %}
\ No newline at end of file
diff --git a/myhpi/settings.py b/myhpi/settings.py
index 54b5cba5..63948f2c 100644
--- a/myhpi/settings.py
+++ b/myhpi/settings.py
@@ -276,9 +276,9 @@
     "extension_configs": {
         "toc": {
             "permalink": "#",
-            "permalink_class": "toc-permalink ms-2",
+            "permalink_class": "toc-permalink ms-2 d-print-none",
         }
-    }
+    },
 }
 
 ENABLE_MAILING_LISTS = env.bool("ENABLE_MAILING_LISTS", False)
diff --git a/myhpi/static/scss/myHPI.scss b/myhpi/static/scss/myHPI.scss
index a6bdcec2..094f79ab 100644
--- a/myhpi/static/scss/myHPI.scss
+++ b/myhpi/static/scss/myHPI.scss
@@ -340,12 +340,22 @@ img {
         flex-direction: column;
     }
 
+    .page-title .underline {
+        border-bottom: none;
+    }
+
+    .side-panel {
+        border: none !important;
+        padding: 0;
+    }
+
     .minutes-title {
         order: 0
     }
 
     .minutes-meta {
         order: 1;
+        margin-bottom: 2rem;
     }
 
     .minutes-text {
diff --git a/myhpi/templates/base.html b/myhpi/templates/base.html
index 2f7598e2..9c511bd0 100644
--- a/myhpi/templates/base.html
+++ b/myhpi/templates/base.html
@@ -150,7 +150,7 @@
             </nav>
             {% endif %}
 
-            <div id="sidebar-toggle" class="d-grid d-lg-none">
+            <div id="sidebar-toggle" class="d-grid d-lg-none d-print-none">
                 <button type="button" data-bs-toggle="offcanvas" data-bs-target="#sidebar-offcanvas"
                     aria-controls="sidebar-offcanvas" class="btn btn-light mb-3" aria-label="{% translate " Table of
                     contents" %}">