Création et implémentation d'une snackbar

public/css/general.css

@@ -15,6 +15,7 @@ img {
 body {
     margin: 0;
     padding-top: 60px;
+    height: 100%;
 }
 
 ul {

public/css/snackbar.css

@@ -0,0 +1,42 @@
+.snackbar {
+    position: fixed;
+    bottom: 0;
+    background-color: #FF563C;
+    color: #fff;
+    width: 100%;
+    padding: 5px 0;
+}
+
+.snackbar-is-closed {
+    display: none;
+}
+
+.snackbarWrapper {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    justify-content: space-between;
+    line-height: 100%;
+}
+
+span {
+    margin: 10px 10px 10px 0;
+    font-size: 0.75rem;
+    /*12px*/
+    font-family: 'Poppins';
+    font-weight: 600;
+    /*semi-bold*/
+}
+
+@media screen and (min-width: 375px) {
+    span {
+        font-size: 1rem;
+        /*16px*/
+    }
+}
+
+.snackbarFermer {
+    height: 30px;
+    width: 30px;
+    cursor: pointer;
+}

public/icones/fermer.svg

@@ -0,0 +1,10 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1412_1060)">
+<path d="M256 16C123.45 16 16 123.45 16 256C16 388.55 123.45 496 256 496C388.55 496 496 388.55 496 256C496 123.45 388.55 16 256 16ZM256 76C355.41 76 436 156.59 436 256C436 355.41 355.41 436 256 436C156.59 436 76 355.41 76 256C76 156.59 156.59 76 256 76ZM175.375 136C174.405 135.995 173.369 136.112 172.312 136.313V136.281C154.015 139.717 127.048 171.024 138.937 182.907L212.094 256.032L138.938 329.158C124.308 343.783 168.213 387.692 182.844 373.064L256 299.906L329.156 373.062C343.786 387.69 387.693 343.782 373.062 329.156L299.906 256.031L373.062 182.907C387.692 168.282 343.787 124.407 329.156 139.032L256 212.157L182.844 139.032C180.784 136.986 178.284 136.017 175.374 136.002L175.375 136Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_1412_1060">
+<rect width="512" height="512" fill="white"/>
+</clipPath>
+</defs>
+</svg>

templates/html/documentation.gohtml

@@ -17,7 +17,6 @@
             {{ $bucket_display_name := .DisplayName }}
             <details class="documentationCategorie">
             <summary class="documentationDescription">{{ $bucket_display_name }}</summary>
-            
             <ul class="documentationListe">
             {{ range .Documents }}
                 <a class ="documentationLien" href="/public/documentation/{{ $bucket_name }}/{{ . }}"><li class="documentationDocument">{{ . }}</li></a>
@@ -27,6 +26,7 @@
           {{ end }}
         </p>
       </div>
+      {{ template "snackbar-html" }}   
     </body>
   </html>
 {{ end }}

templates/html/index.gohtml

@@ -13,6 +13,7 @@
         <h1 class="heading1">AGECEM</h1>
         <h2 class="heading2">Association Générale Étudiante du Cégep Édouard-Montpetit</h2>
       </div>
+      {{ template "snackbar-html" }}      
     </body>
   </html>
 {{ end }}

templates/html/snackbar.gohtml

@@ -0,0 +1,15 @@
+{{ define "snackbar-html" }}
+    <link rel="stylesheet" href="/public/css/snackbar.css">
+    <script>
+        function closeSnackbar() {
+            var snackbar = document.querySelector(".snackbar");
+            snackbar.classList.add('snackbar-is-closed');
+            }
+    </script>
+    <div class="snackbar">
+        <div class="wrapper snackbarWrapper">
+            <span class="snackbarTexte">Ce site web est présentement en construction.</span>
+            <img src="/public/icones/fermer.svg" class="snackbarFermer" onclick="closeSnackbar()"></img>
+        </div>
+    </div>
+{{ end }}

templates/html/vie-etudiante.gohtml

@@ -11,6 +11,7 @@
       <div class="wrapper vieEtudianteWrapper">
         <h1 class="heading1">Vie étudiante</h1>
       </div>
+      {{ template "snackbar-html" }}   
     </body>
   </html>
 {{ end }}