From f13abf5c445d4b76bfc4e22e3332708d3a6afd3a Mon Sep 17 00:00:00 2001
From: Julien Constant <julienconstant190@gmail.com>
Date: Mon, 13 Mar 2023 12:16:10 +0100
Subject: [PATCH] add padding on all edited page

---
 core/static/sas/album.scss                 |   6 +
 core/static/user/user_detail.scss          |   3 +
 core/static/user/user_preferences.scss     |  10 +-
 core/static/user/user_tools.scss           |   5 +-
 core/templates/core/user_pictures.jinja    |   2 +
 core/templates/core/user_preferences.jinja |  97 ++++++++--------
 sas/templates/sas/main.jinja               | 124 +++++++++++----------
 7 files changed, 135 insertions(+), 112 deletions(-)

diff --git a/core/static/sas/album.scss b/core/static/sas/album.scss
index 2b176d2d..88272792 100644
--- a/core/static/sas/album.scss
+++ b/core/static/sas/album.scss
@@ -1,3 +1,7 @@
+.main {
+  box-sizing: border-box;
+  padding: 10px;
+}
 
 .navbar {
   margin-top: 10px;
@@ -131,6 +135,7 @@
 
     @media (max-width: 500px) {
       width: calc(50% - 5px);
+      height: 108px;
     }
 
     @media (max-width: 300px) {
@@ -170,6 +175,7 @@
 
       @media (max-width: 500px) {
         width: 100%;
+        height: 100%;
       }
 
       &:hover > .text {
diff --git a/core/static/user/user_detail.scss b/core/static/user/user_detail.scss
index 1c7b663a..043d7d7f 100644
--- a/core/static/user/user_detail.scss
+++ b/core/static/user/user_detail.scss
@@ -1,8 +1,11 @@
 .main {
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  margin-top: 0 !important;
+  padding: 10px;
   width: 100%;
 }
 
diff --git a/core/static/user/user_preferences.scss b/core/static/user/user_preferences.scss
index bf481d17..715fbf05 100644
--- a/core/static/user/user_preferences.scss
+++ b/core/static/user/user_preferences.scss
@@ -4,7 +4,7 @@
   gap: 2px;
 
   &-general {
-    >p {
+    > p {
       display: flex;
       flex-direction: row-reverse;
       justify-content: left;
@@ -38,4 +38,12 @@
     margin-top: 10px !important;
     max-width: 100px;
   }
+}
+
+.justify {
+  text-align: justify;
+}
+
+.main {
+  padding: 10px;
 }
\ No newline at end of file
diff --git a/core/static/user/user_tools.scss b/core/static/user/user_tools.scss
index ede8eb7e..fb10c042 100644
--- a/core/static/user/user_tools.scss
+++ b/core/static/user/user_tools.scss
@@ -1,5 +1,6 @@
 main {
   box-sizing: border-box;
+  padding: 10px;
 }
 
 .container {
@@ -9,9 +10,7 @@ main {
   justify-content: center;
   gap: 10px;
 
-
-  >div {
-    padding: 10px;
+  > div {
     border-radius: 10px;
     background-color: rgba(0, 0, 0, .05);
     width: 210px;
diff --git a/core/templates/core/user_pictures.jinja b/core/templates/core/user_pictures.jinja
index 830590e4..7621394e 100644
--- a/core/templates/core/user_pictures.jinja
+++ b/core/templates/core/user_pictures.jinja
@@ -9,6 +9,7 @@
 {% endblock %}
 
 {% block content %}
+    <div class="main">
     {% if can_edit(profile, user) %}
         <button id="download_all_pictures", onclick=download_pictures()>{% trans %}Download all my pictures{% endtrans %}</button>
     {% endif %}
@@ -41,6 +42,7 @@
         </div>
         <br>
     {% endfor %}
+    </div>
 {% endblock %}
 
 {% block script %}
diff --git a/core/templates/core/user_preferences.jinja b/core/templates/core/user_preferences.jinja
index c69a432c..c1f54d1a 100644
--- a/core/templates/core/user_preferences.jinja
+++ b/core/templates/core/user_preferences.jinja
@@ -9,58 +9,61 @@
 {% endblock %}
 
 {% block content %}
-<h2>{% trans %}Preferences{% endtrans %}</h2>
-<h3>{% trans %}General{% endtrans %}</h3>
-<form class="form form-general" action="" method="post" enctype="multipart/form-data">
-    {% csrf_token %}
-    {{ form.as_p() }}
-    <input class="form-submit-btn" type="submit" value="{% trans %}Save{% endtrans %}" />
-</form>
+    <div class="main">
+        <h2>{% trans %}Preferences{% endtrans %}</h2>
+        <h3>{% trans %}General{% endtrans %}</h3>
+        <form class="form form-general" action="" method="post" enctype="multipart/form-data">
+            {% csrf_token %}
+            {{ form.as_p() }}
+            <input class="form-submit-btn" type="submit" value="{% trans %}Save{% endtrans %}" />
+        </form>
 
-<h3>{% trans %}Trombi{% endtrans %}</h3>
+        <h3>{% trans %}Trombi{% endtrans %}</h3>
 
-{% if trombi_form %}
-<form class="form form-trombi" action="{{ url('trombi:user_tools') }}" method="post" enctype="multipart/form-data">
-    {% csrf_token %}
-    {{ trombi_form.as_p() }}
-    <input class="form-submit-btn" type="submit" value="{% trans %}Save{% endtrans %}" />
-</form>
+        {% if trombi_form %}
+            <form class="form form-trombi" action="{{ url('trombi:user_tools') }}" method="post" enctype="multipart/form-data">
+                {% csrf_token %}
+                {{ trombi_form.as_p() }}
+                <input class="form-submit-btn" type="submit" value="{% trans %}Save{% endtrans %}" />
+            </form>
 
-{% else %}
-<p>{% trans trombi=user.trombi_user.trombi %}You already choose to be in that Trombi: {{ trombi }}.{% endtrans %}
-    <br />
-    <a href="{{ url('trombi:user_tools') }}">{% trans %}Go to my Trombi tools{% endtrans %}</a>
-</p>
-{% endif %}
+        {% else %}
+            <p>{% trans trombi=user.trombi_user.trombi %}You already choose to be in that Trombi: {{ trombi }}.{% endtrans %}
+                <br />
+                <a href="{{ url('trombi:user_tools') }}">{% trans %}Go to my Trombi tools{% endtrans %}</a>
+            </p>
+        {% endif %}
 
 
-{% if profile.customer %}
-<h3>{% trans %}Student cards{% endtrans %}</h3>
+        {% if profile.customer %}
+            <h3>{% trans %}Student cards{% endtrans %}</h3>
 
-{% if profile.customer.student_cards.exists() %}
-<ul>
-    {% for card in profile.customer.student_cards.all() %}
-    <li>
-        {{ card.uid }}
-        &nbsp;-&nbsp;
-        <a href="{{ url('counter:delete_student_card', customer_id=profile.customer.pk, card_id=card.id) }}">
-            {% trans %}Delete{% endtrans %}
-        </a>
-    </li>
-    {% endfor %}
-</ul>
-{% else %}
-<em>{% trans %}No student card registered.{% endtrans %}</em>
-<p align="justify">{% trans %}You can add a card by asking at a counter or add it yourself here. If you want to manually
-    add a student card yourself, you'll need a NFC reader. We store the UID of the card which is 14 characters long.{%
-    endtrans %}</p>
-{% endif %}
+            {% if profile.customer.student_cards.exists() %}
+                <ul>
+                    {% for card in profile.customer.student_cards.all() %}
+                    <li>
+                        {{ card.uid }}
+                        &nbsp;-&nbsp;
+                        <a href="{{ url('counter:delete_student_card', customer_id=profile.customer.pk, card_id=card.id) }}">
+                            {% trans %}Delete{% endtrans %}
+                        </a>
+                    </li>
+                    {% endfor %}
+                </ul>
+            {% else %}
+                <em>{% trans %}No student card registered.{% endtrans %}</em>
+                <p class="justify">
+                    {% trans %}You can add a card by asking at a counter or add it yourself here. If you want to manually
+                    add a student card yourself, you'll need a NFC reader. We store the UID of the card which is 14 characters long.{% endtrans %}
+                </p>
+            {% endif %}
 
-<form class="form form-cards" action="{{ url('counter:add_student_card', customer_id=profile.customer.pk) }}"
-    method="post">
-    {% csrf_token %}
-    {{ student_card_form.as_p() }}
-    <input class="form-submit-btn" type="submit" value="{% trans %}Save{% endtrans %}" />
-</form>
-{% endif %}
+            <form class="form form-cards" action="{{ url('counter:add_student_card', customer_id=profile.customer.pk) }}"
+                method="post">
+                {% csrf_token %}
+                {{ student_card_form.as_p() }}
+                <input class="form-submit-btn" type="submit" value="{% trans %}Save{% endtrans %}" />
+            </form>
+        {% endif %}
+    </div>
 {% endblock %}
\ No newline at end of file
diff --git a/sas/templates/sas/main.jinja b/sas/templates/sas/main.jinja
index 702a028b..242a091b 100644
--- a/sas/templates/sas/main.jinja
+++ b/sas/templates/sas/main.jinja
@@ -35,74 +35,76 @@
 {% endmacro %}
 
 {% block content %}
-    <h3>{% trans %}SAS{% endtrans %}</h3>
+    <div class="main">
+        <h3>{% trans %}SAS{% endtrans %}</h3>
 
-    {% if not user.is_authenticated %}
-        <p>{% trans %}You must be logged in to see the SAS.{% endtrans %}</p>
-    {% else %}
-        <br>
-        <h4>{% trans %}Latest albums{% endtrans %}</h4>
-
-        <div class="albums">
-            {% for a in latest %}
-                {{ display_album(a) }}
-            {% endfor %}
-        </div>
-
-        <br>
-
-        {% if edit_mode %}
-            <form action="" method="post" enctype="multipart/form-data">
-                {% csrf_token %}
-
-                <div class="navbar">
-                    <h4>{% trans %}All categories{% endtrans %}</h4>
-                
-                    {# <div class="toolbar">
-                        <input name="delete" type="submit" value="{% trans %}Delete{% endtrans %}">
-                    </div> #}
-                </div>
-
-                {% if clipboard %}
-                    <div class="clipboard">
-                        {% trans %}Clipboard: {% endtrans %}
-                        <ul>
-                            {% for f in clipboard %}
-                            <li>{{ f.get_full_path() }}</li>
-                            {% endfor %}
-                        </ul>
-                        <input name="clear" type="submit" value="{% trans %}Clear clipboard{% endtrans %}">
-                    </div>
-                {% endif %}
+        {% if not user.is_authenticated %}
+            <p>{% trans %}You must be logged in to see the SAS.{% endtrans %}</p>
         {% else %}
-            <h4>{% trans %}All categories{% endtrans %}</h4>
-        {% endif %}
+            <br>
+            <h4>{% trans %}Latest albums{% endtrans %}</h4>
 
-        <div class="albums">
-            {% for a in categories %}
-                {{ display_album(a, true) }}
-            {% endfor %}
-        </div>
-
-        {% if edit_mode %}
-            </form>
+            <div class="albums">
+                {% for a in latest %}
+                    {{ display_album(a) }}
+                {% endfor %}
+            </div>
 
             <br>
 
-            <form class="add-files" action="" method="post" enctype="multipart/form-data">
-                {% csrf_token %}
+            {% if edit_mode %}
+                <form action="" method="post" enctype="multipart/form-data">
+                    {% csrf_token %}
 
-                <div class="inputs">
-                    <div>
-                        <label for="{{ form.album_name.name }}">{{ form.album_name.label }}</label>
-                        {{ form.album_name }}
+                    <div class="navbar">
+                        <h4>{% trans %}All categories{% endtrans %}</h4>
+
+                        {# <div class="toolbar">
+                            <input name="delete" type="submit" value="{% trans %}Delete{% endtrans %}">
+                        </div> #}
                     </div>
-                    <input type="submit" value="{% trans %}Create{% endtrans %}" />
-                </div>
-                
-                {{ form.non_field_errors() }}
-                {{ form.album_name.errors }}
-            </form>
+
+                    {% if clipboard %}
+                        <div class="clipboard">
+                            {% trans %}Clipboard: {% endtrans %}
+                            <ul>
+                                {% for f in clipboard %}
+                                <li>{{ f.get_full_path() }}</li>
+                                {% endfor %}
+                            </ul>
+                            <input name="clear" type="submit" value="{% trans %}Clear clipboard{% endtrans %}">
+                        </div>
+                    {% endif %}
+            {% else %}
+                <h4>{% trans %}All categories{% endtrans %}</h4>
+            {% endif %}
+
+            <div class="albums">
+                {% for a in categories %}
+                    {{ display_album(a, true) }}
+                {% endfor %}
+            </div>
+
+            {% if edit_mode %}
+                </form>
+
+                <br>
+
+                <form class="add-files" action="" method="post" enctype="multipart/form-data">
+                    {% csrf_token %}
+
+                    <div class="inputs">
+                        <div>
+                            <label for="{{ form.album_name.name }}">{{ form.album_name.label }}</label>
+                            {{ form.album_name }}
+                        </div>
+                        <input type="submit" value="{% trans %}Create{% endtrans %}" />
+                    </div>
+
+                    {{ form.non_field_errors() }}
+                    {{ form.album_name.errors }}
+                </form>
+            {% endif %}
         {% endif %}
-    {% endif %}
+    </div>
 {% endblock %}