From f5a822835809896a9c572f6ea649c87c1f442a78 Mon Sep 17 00:00:00 2001
From: Julien Constant <julienconstant190@gmail.com>
Date: Sun, 22 Jun 2025 15:51:00 +0200
Subject: [PATCH 1/2] Rework footer's UX on small devices
---
core/static/core/footer.scss | 80 +++++++++++++++++++++++++++
core/static/core/style.scss | 41 --------------
core/templates/core/base.jinja | 20 ++-----
core/templates/core/base/footer.jinja | 13 +++++
4 files changed, 97 insertions(+), 57 deletions(-)
create mode 100644 core/static/core/footer.scss
create mode 100644 core/templates/core/base/footer.jinja
diff --git a/core/static/core/footer.scss b/core/static/core/footer.scss
new file mode 100644
index 00000000..be27a2e3
--- /dev/null
+++ b/core/static/core/footer.scss
@@ -0,0 +1,80 @@
+@import "colors";
+@import "devices";
+
+@media (max-width: $small-devices) {
+ footer {
+ margin-top: 0.6em;
+ padding: 1.25em;
+ background-color: $primary-neutral-dark-color;
+
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+
+ gap: 1.25em;
+
+ > div {
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ justify-content: center;
+ gap: 0.8em;
+
+ > a {
+ color: $white-color !important;
+ width: auto;
+ }
+ }
+
+ > a {
+ color: $primary-neutral-color !important;
+ }
+
+ .fa-github {
+ color: $primary-neutral-color;
+ }
+ }
+}
+
+@media (min-width: $small-devices) {
+ footer {
+ width: 90%;
+ margin: 2em auto;
+
+ font-size: 90%;
+ text-align: center;
+ vertical-align: middle;
+
+ div {
+ margin: 0.6em 0;
+ color: $white-color;
+ border-radius: 5px;
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ background-color: $primary-neutral-dark-color;
+ box-shadow: $shadow-color 0 0 15px;
+
+ a {
+ padding: 0.8em;
+ flex: 1;
+ font-weight: bold;
+ color: $white-color !important;
+
+ &:hover {
+ color: $primary-dark-color;
+ }
+ }
+ }
+
+ > .version {
+ margin-top: 3px;
+ color: rgba(0, 0, 0, 0.3);
+ }
+
+ .fa-github {
+ color: $githubblack;
+ }
+ }
+}
\ No newline at end of file
diff --git a/core/static/core/style.scss b/core/static/core/style.scss
index 2cff3dff..2baf42a6 100644
--- a/core/static/core/style.scss
+++ b/core/static/core/style.scss
@@ -713,47 +713,6 @@ textarea {
margin-top: 10px;
}
-/*--------------------------------FOOTER-------------------------------*/
-
-footer {
- width: 90%;
- margin: 2em auto;
-
- font-size: 90%;
- text-align: center;
- vertical-align: middle;
-
- div {
- margin: 0.6em 0;
- color: $white-color;
- border-radius: 5px;
- display: flex;
- flex-wrap: wrap;
- align-items: center;
- background-color: $primary-neutral-dark-color;
- box-shadow: $shadow-color 0 0 15px;
-
- a {
- padding: 0.8em;
- flex: 1;
- font-weight: bold;
- color: $white-color !important;
-
- &:hover {
- color: $primary-dark-color;
- }
- }
- }
-
- >.version {
- margin-top: 3px;
- color: rgba(0, 0, 0, 0.3);
- }
-
- .fa-github {
- color: $githubblack;
- }
-}
.ui-dialog .ui-dialog-buttonpane {
diff --git a/core/templates/core/base.jinja b/core/templates/core/base.jinja
index 9b50463c..225abcfd 100644
--- a/core/templates/core/base.jinja
+++ b/core/templates/core/base.jinja
@@ -11,6 +11,7 @@
<link rel="stylesheet" href="{{ static('core/markdown.scss') }}">
<link rel="stylesheet" href="{{ static('core/header.scss') }}">
<link rel="stylesheet" href="{{ static('core/navbar.scss') }}">
+ <link rel="stylesheet" href="{{ static('core/footer.scss') }}">
<link rel="stylesheet" href="{{ static('core/pagination.scss') }}">
<link rel="stylesheet" href="{{ static('core/accordion.scss') }}">
@@ -89,22 +90,9 @@
</div>
</div>
- <footer>
- {% block footer %}
- <div>
- <a href="{{ url('core:page', 'contacts') }}">{% trans %}Contacts{% endtrans %}</a>
- <a href="{{ url('core:page', 'legals') }}">{% trans %}Legal notices{% endtrans %}</a>
- <a href="{{ url('core:page', 'copyright_agent') }}">{% trans %}Intellectual property{% endtrans %}</a>
- <a href="{{ url('core:page', 'docs') }}">{% trans %}Help & Documentation{% endtrans %}</a>
- <a href="{{ url('core:page', 'rd') }}">{% trans %}R&D{% endtrans %}</a>
- </div>
- <a rel="nofollow" href="https://github.com/ae-utbm/sith" target="#">
- <i class="fa-brands fa-github"></i>
- {% trans %}Site created by the IT Department of the AE{% endtrans %}
- </a>
- {% endblock %}
- <br>
- </footer>
+ {% block footer %}
+ {% include "core/base/footer.jinja" %}
+ {% endblock %}
{% block script %}
<script>
diff --git a/core/templates/core/base/footer.jinja b/core/templates/core/base/footer.jinja
new file mode 100644
index 00000000..198a6550
--- /dev/null
+++ b/core/templates/core/base/footer.jinja
@@ -0,0 +1,13 @@
+<footer>
+ <div>
+ <a href="{{ url('core:page', 'contacts') }}">{% trans %}Contacts{% endtrans %}</a>
+ <a href="{{ url('core:page', 'legals') }}">{% trans %}Legal notices{% endtrans %}</a>
+ <a href="{{ url('core:page', 'copyright_agent') }}">{% trans %}Intellectual property{% endtrans %}</a>
+ <a href="{{ url('core:page', 'docs') }}">{% trans %}Help & Documentation{% endtrans %}</a>
+ <a href="{{ url('core:page', 'rd') }}">{% trans %}R&D{% endtrans %}</a>
+ </div>
+ <a rel="nofollow" href="https://github.com/ae-utbm/sith" target="#">
+ <i class="fa-brands fa-github"></i>
+ {% trans %}Site created by the IT Department of the AE{% endtrans %}
+ </a>
+</footer>
\ No newline at end of file
From f474edc84f2cde7a742feab5f91091a0af5b33a9 Mon Sep 17 00:00:00 2001
From: Sli <antoine@bartuccio.fr>
Date: Tue, 24 Jun 2025 17:03:56 +0200
Subject: [PATCH 2/2] Style adjustment on the new footer
---
core/static/core/footer.scss | 51 ++++++++++++++++-----------
core/templates/core/base/footer.jinja | 17 +++++----
2 files changed, 40 insertions(+), 28 deletions(-)
diff --git a/core/static/core/footer.scss b/core/static/core/footer.scss
index be27a2e3..52cd317d 100644
--- a/core/static/core/footer.scss
+++ b/core/static/core/footer.scss
@@ -1,8 +1,8 @@
@import "colors";
@import "devices";
-@media (max-width: $small-devices) {
- footer {
+footer.bottom-links {
+ @media (max-width: $small-devices) {
margin-top: 0.6em;
padding: 1.25em;
background-color: $primary-neutral-dark-color;
@@ -13,7 +13,7 @@
gap: 1.25em;
- > div {
+ >section {
display: flex;
flex-direction: row;
@@ -21,24 +21,31 @@
justify-content: center;
gap: 0.8em;
- > a {
- color: $white-color !important;
- width: auto;
+ }
+
+ a {
+ color: $white-color;
+ width: auto;
+
+ &:hover {
+ color: $white-color;
+ text-shadow: 0.5px 0.5px 0.5px $shadow-color;
}
}
- > a {
- color: $primary-neutral-color !important;
+ .fa-github {
+ color: $white-color;
}
- .fa-github {
- color: $primary-neutral-color;
+ hr {
+ width: 100%;
+ height: 0px;
+ border: none;
+ border-top: 0.5px solid $white-color;
}
}
-}
-@media (min-width: $small-devices) {
- footer {
+ @media (min-width: $small-devices) {
width: 90%;
margin: 2em auto;
@@ -46,7 +53,7 @@
text-align: center;
vertical-align: middle;
- div {
+ section:first-of-type {
margin: 0.6em 0;
color: $white-color;
border-radius: 5px;
@@ -57,24 +64,26 @@
box-shadow: $shadow-color 0 0 15px;
a {
+ color: $white-color;
+ width: auto;
padding: 0.8em;
flex: 1;
font-weight: bold;
- color: $white-color !important;
&:hover {
- color: $primary-dark-color;
+ color: $white-color;
+ text-shadow: 0.5px 0.5px 0.5px $shadow-color;
}
}
}
- > .version {
- margin-top: 3px;
- color: rgba(0, 0, 0, 0.3);
- }
-
.fa-github {
color: $githubblack;
}
+
+ hr {
+ border: none;
+ height: 5px;
+ }
}
}
\ No newline at end of file
diff --git a/core/templates/core/base/footer.jinja b/core/templates/core/base/footer.jinja
index 198a6550..63917d31 100644
--- a/core/templates/core/base/footer.jinja
+++ b/core/templates/core/base/footer.jinja
@@ -1,13 +1,16 @@
-<footer>
- <div>
+<footer class="bottom-links">
+ <section>
<a href="{{ url('core:page', 'contacts') }}">{% trans %}Contacts{% endtrans %}</a>
<a href="{{ url('core:page', 'legals') }}">{% trans %}Legal notices{% endtrans %}</a>
<a href="{{ url('core:page', 'copyright_agent') }}">{% trans %}Intellectual property{% endtrans %}</a>
<a href="{{ url('core:page', 'docs') }}">{% trans %}Help & Documentation{% endtrans %}</a>
<a href="{{ url('core:page', 'rd') }}">{% trans %}R&D{% endtrans %}</a>
- </div>
- <a rel="nofollow" href="https://github.com/ae-utbm/sith" target="#">
- <i class="fa-brands fa-github"></i>
- {% trans %}Site created by the IT Department of the AE{% endtrans %}
- </a>
+ </section>
+ <hr>
+ <section>
+ <a rel="nofollow" href="https://github.com/ae-utbm/sith" target="#">
+ <i class="fa-brands fa-github"></i>
+ {% trans %}Site created by the IT Department of the AE{% endtrans %}
+ </a>
+ </section>
</footer>
\ No newline at end of file