Improve visuals of minute previous and next buttons and add bottom pa…

…dding to page
fsr-de · Feb 13, 2024 · 3884161 · 3884161
1 parent 8bc30c7
commit 3884161
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 13 deletions.
diff --git a/myhpi/core/templates/core/minutes.html b/myhpi/core/templates/core/minutes.html
@@ -3,6 +3,7 @@
 {% load core_extras %}
 {% load minutes_tags %}
 {% load i18n %}
+{% load bootstrap_icons %}
 
 {% block content %}
     <div class="row minutes-container">
@@ -64,16 +65,16 @@ <h1 class="side-panel-title">{% translate "Labels" %}</h1>
         </div>
         <div id="minutes-footer" class="d-none d-print-block"></div>
         <div id="minutes-navigation" class="row d-print-none">
-            <div class="col-6">
+            <div class="col-4">
                 {%  prev_minutes page as prev %}
                 {% if prev %}
-                    <a href="{{ prev.url }}">< {% translate "Previous minutes" %}</a>
+                    <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-6">
+            <div class="col-5 text-end">
                 {%  next_minutes page as next %}
                 {% if next %}
-                    <a href="{{ next.url }}"> {% translate "Next minutes" %} ></a>
+                    <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>

diff --git a/myhpi/static/scss/myHPI.scss b/myhpi/static/scss/myHPI.scss
@@ -228,6 +228,19 @@ img {
     flex-direction: column-reverse;
 }
 
+.minutes-navigation-button {
+    display: inline-flex;
+    align-items: center;
+
+    &:hover {
+      color: white;
+    }
+}
+
+.minutes-navigation-icon {
+    margin: 0 5px;
+}
+
 @import "./navbar.scss";
 @import "./footer.scss";
 

diff --git a/myhpi/templates/base.html b/myhpi/templates/base.html
@@ -126,7 +126,7 @@
         </div>
     </nav>
 
-    <div id="page" class="container-lg page bg-white">
+    <div id="page" class="container-lg page bg-white pb-3">
         <div class="page-content">
             <div id="messages">
                 {% for message in messages %}

diff --git a/myhpi/tests/core/test_minutes.py b/myhpi/tests/core/test_minutes.py
@@ -7,8 +7,8 @@ def test_minutes_links_to_neighboring_minutes(self):
         minutes = self.client.get(
             "/en/student-representation/fsr/minutes/second-minutes", follow=True
         )
-        self.assertInHTML("< Previous minutes", minutes.rendered_content)
-        self.assertInHTML("Next minutes >", minutes.rendered_content)
+        self.assertIn("Previous minutes", minutes.rendered_content)
+        self.assertIn("Next minutes", minutes.rendered_content)
 
         self.assertIn("first-minutes", minutes.rendered_content)
         self.assertNotIn("private-minutes", minutes.rendered_content)
@@ -20,8 +20,8 @@ def test_minutes_links_to_neighboring_minutes_for_student_representatives(self):
         minutes = self.client.get(
             "/en/student-representation/fsr/minutes/second-minutes", follow=True
         )
-        self.assertInHTML("< Previous minutes", minutes.rendered_content)
-        self.assertInHTML("Next minutes >", minutes.rendered_content)
+        self.assertIn("Previous minutes", minutes.rendered_content)
+        self.assertIn("Next minutes", minutes.rendered_content)
 
         self.assertIn("first-minutes", minutes.rendered_content)
         self.assertIn("private-minutes", minutes.rendered_content)
@@ -33,13 +33,13 @@ def test_most_recent_minutes_does_not_have_link_to_next_minutes(self):
         minutes = self.client.get(
             "/en/student-representation/fsr/minutes/recent-minutes", follow=True
         )
-        self.assertNotIn("Next minutes >", minutes.rendered_content)
-        self.assertInHTML("< Previous minutes", minutes.rendered_content)
+        self.assertNotIn("Next minutes", minutes.rendered_content)
+        self.assertIn("Previous minutes", minutes.rendered_content)
 
     def test_oldest_minutes_does_not_have_link_to_previous_minutes(self):
         self.sign_in_as_student()
         minutes = self.client.get(
             "/en/student-representation/fsr/minutes/first-minutes", follow=True
         )
-        self.assertNotIn("< Previous minutes", minutes.rendered_content)
-        self.assertInHTML("Next minutes >", minutes.rendered_content)
+        self.assertNotIn("Previous minutes", minutes.rendered_content)
+        self.assertIn("Next minutes", minutes.rendered_content)