Merge pull request #1140 from Juknum/feature/update-footer-on-mobile

Màj du footer sur mobile

core/static/core/footer.scss

@@ -0,0 +1,89 @@
+@import "colors";
+@import "devices";
+
+footer.bottom-links {
+  @media (max-width: $small-devices) {
+    margin-top: 0.6em;
+    padding: 1.25em;
+    background-color: $primary-neutral-dark-color;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    gap: 1.25em;
+
+    >section {
+
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 0.8em;
+
+    }
+
+    a {
+      color: $white-color;
+      width: auto;
+
+      &:hover {
+        color: $white-color;
+        text-shadow: 0.5px 0.5px 0.5px $shadow-color;
+      }
+    }
+
+    .fa-github {
+      color: $white-color;
+    }
+
+    hr {
+      width: 100%;
+      height: 0px;
+      border: none;
+      border-top: 0.5px solid $white-color;
+    }
+  }
+
+  @media (min-width: $small-devices) {
+    width: 90%;
+    margin: 2em auto;
+
+    font-size: 90%;
+    text-align: center;
+    vertical-align: middle;
+
+    section:first-of-type {
+      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 {
+        color: $white-color;
+        width: auto;
+        padding: 0.8em;
+        flex: 1;
+        font-weight: bold;
+
+        &:hover {
+          color: $white-color;
+          text-shadow: 0.5px 0.5px 0.5px $shadow-color;
+        }
+      }
+    }
+
+    .fa-github {
+      color: $githubblack;
+    }
+
+    hr {
+      border: none;
+      height: 5px;
+    }
+  }
+}

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 {

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>
+      {% include "core/base/footer.jinja" %}
-          <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 script %}
       <script>

core/templates/core/base/footer.jinja

@@ -0,0 +1,16 @@
+<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>
+  </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>