Merge pull request 'Ajouter responsiveness au header' (#93) from feature/responsive-header into main

Reviewed-on: #93

public/css/fonts.css

@@ -16,7 +16,6 @@
     font-style: italic;
 }
 
-
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-extralight.woff2') format('woff2'),
@@ -44,7 +43,6 @@
     font-style: normal;
 }
 
-
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-light-italic.woff2') format('woff2'),
@@ -106,7 +104,6 @@
         url('/public/fonts/Poppins/poppins-semibold-italic.otf') format('otf');
     font-weight: 600;
     font-style: italic;
-
 }
 
 @font-face {
@@ -116,7 +113,6 @@
         url('/public/fonts/Poppins/poppins-bold.otf') format('otf');
     font-weight: 700;
     font-style: normal;
-
 }
 
 @font-face {
@@ -126,7 +122,6 @@
         url('/public/fonts/Poppins/poppins-bold-italic.otf') format('otf');
     font-weight: 700;
     font-style: italic;
-
 }
 
 @font-face {
@@ -136,10 +131,8 @@
         url('/public/fonts/Poppins/poppins-extrabold.otf') format('otf');
     font-weight: 800;
     font-style: normal;
-
 }
 
-
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-extrabold-italic.woff2') format('woff2'),

public/css/general.css

@@ -1,35 +1,74 @@
-.header {
+html {
-    width: 100%;
+    box-sizing: border-box;
 }
 
-.headerMenu {
+*,
-    font-family: "Poppins";
+*:before,
-    font-weight: 400; /*regular*/ 
+*:after {
-    font-size: 1.25rem; /*20px*/
+    box-sizing: inherit;
-    color: #000;  /*Noir pur*/
-    display: flex;
-    flex-flow: row;
-    justify-content: space-around;
-    align-items: center;
 }
 
-.headerMenuElement:hover {
+img {
-    border-bottom: 5px #FF563C solid; /*Orange Highlight*/
+    max-width: 100%;
-    cursor: pointer;
+}
+
+body {
+    margin: 0;
+    padding-top: 60px;
+}
+
+ul {
+    margin: 0;
+}
+
+.wrapper {
+    max-width: 375px;
+    width: calc(100% - var(5px));
+    margin: 0 auto;
 }
 
 .heading1 {
     font-family: "Poppins";
-    font-weight: 600; /*semi-bold*/ 
+    font-weight: 600;
-    font-size: 6rem; /*96px*/
+    /*semi-bold*/
-    color: #394596;  /*Bleu AGECEM*/
+    font-size: 3rem;
+    /*48px*/
+    color: #394596;
+    /*Bleu AGECEM*/
     text-align: center;
 }
 
 .heading2 {
     font-family: "Poppins";
-    font-weight: 600; /*semi-bold*/ 
+    font-weight: 300;
-    font-size: 1.5rem; /*24px*/
+    /*light*/
-    color: #394596; /*Bleu AGECEM*/   
+    font-size: 1rem;
+    /*16px*/
+    color: #394596;
+    /*Bleu AGECEM*/
     text-align: center;
 }
+
+@media screen and (min-width: 768px) {
+    .wrapper {
+        max-width: 768px;
+        width: calc(100% - var(15px));
+    }
+
+    .heading1 {
+        font-size: 4rem;
+        /*64px*/
+    }
+
+    .heading2 {
+        font-size: 1.5rem;
+        /*24px*/
+    }
+}
+
+@media screen and (min-width: 1140px) {
+    .wrapper {
+        max-width: 1140px;
+        width: calc(100% - var(30px));
+    }
+}

public/css/header.css

@@ -0,0 +1,107 @@
+.header {
+    position: fixed;
+    z-index: 20;
+    width: 100%;
+    top: 0;
+    background-color: #fff;
+    height: 60px;
+}
+
+.headerWrapper {
+    display: flex;
+    flex-flow: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px;
+}
+
+a {
+    color: #000;
+    text-decoration: none;
+}
+
+a:visited {
+    color: #000;
+    text-decoration: none;
+}
+
+.headerMenu {
+    background-color: #fff;
+    font-family: "Poppins";
+    font-weight: 400;
+    /*regular*/
+    font-size: 1.25rem;
+    /*20px*/
+    list-style: none;
+    display: none;
+    width: 100%;
+}
+
+.headerMenuElement {
+    padding-bottom: 5px;
+    margin: 0;
+}
+
+.headerMenuElement:hover {
+    border-bottom: 5px #FF563C solid;
+    /*Orange Highlight*/
+    cursor: pointer;
+    padding-bottom: 0;
+}
+
+.headerMenuHamburger {
+    height: 50px;
+    width: 50px;
+    cursor: pointer;
+}
+
+.headerMenuMobile {
+    font-family: "Poppins";
+    font-weight: 400;
+    /*regular*/
+    font-size: 2rem;
+    /*32px*/
+    list-style: none;
+    display: none;
+}
+
+.nav-is-active {
+    background-color: #fff;
+    display: flex;
+    flex-flow: column;
+    justify-content: center;
+    align-items: center;
+    text-align: left;
+    position: fixed;
+    top: 75px;
+    width: 100%;
+    height: 90%;
+    margin: 0;
+    padding: auto;
+}
+
+/* Le header s'affiche en menu hamburger pour les breakpoints téléphone et tablette */
+@media screen and (min-width: 778px) {
+    .nav-is-active {
+        font-size: 2rem;
+        /*32px*/
+    }
+}
+
+/* Les éléments du header s'affichent pour le breakpoint ordinateur */
+@media screen and (min-width: 1140px) {
+    .headerMenu {
+        display: flex;
+        flex-flow: row;
+        justify-content: space-around;
+        align-items: center;
+    }
+
+    .headerMenuHamburger {
+        display: none;
+    }
+
+    .nav-is-active {
+        display: none;
+    }
+}

public/icones/hamburger-menu.svg

@@ -0,0 +1,10 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1405_1060)">
+<path d="M3.125 9.375V15.625H46.875V9.375H3.125ZM3.125 21.875V28.125H46.875V21.875H3.125ZM3.125 34.375V40.625H46.875V34.375H3.125Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_1405_1060">
+<rect width="50" height="50" fill="white"/>
+</clipPath>
+</defs>
+</svg>

public/public.go

@@ -10,7 +10,7 @@ package public
 
 import "embed"
 
-//go:embed css/*.css js/*.js fonts/*
+//go:embed css/*.css js/*.js fonts/* icones/*
 var publicFS embed.FS
 
 func GetPublicFS() embed.FS {

templates/html/admin-upload.gohtml

@@ -11,7 +11,6 @@
       <h1 class="heading1">Upload</h1>
       <form class="form adminUploadForm" action="/admin/documents/upload" method="post" enctype="multipart/form-data">
         <label class="formLabel" for="bucket">Type de document:</label>
-
         <select class="formSelect" name="bucket" id="bucket">
           {{ range .Buckets }}
             <option class="formOption" value="{{ .Name }}">{{ .DisplayName }}</option>

templates/html/documentation.gohtml

@@ -8,6 +8,7 @@
     </head>
     <body>
       {{ template "header-html" }}
+      <div class="wrapper documentationWrapper">
         <h1 class="heading1">Documentation</h1>
         <p>
           {{ range . }}
@@ -24,6 +25,7 @@
             </details>
           {{ end }}
         </p>
+      </div>
     </body>
   </html>
 {{ end }}

templates/html/general.gohtml

@@ -1,4 +1,11 @@
 {{ define "general-html" }}
     <link rel="stylesheet" href="/public/css/general.css">
     <link rel="stylesheet" href="/public/css/fonts.css">
+    <link rel="stylesheet" href="/public/css/header.css">
+    <script>
+        function onToggleNav() {
+            var menu = document.querySelector(".headerMenuMobile");
+            menu.classList.toggle('nav-is-active');
+        }
+    </script>
 {{ end }}

templates/html/header.gohtml

@@ -1,13 +1,20 @@
 {{ define "header-html" }}
-
     <div class="header">   
+        <div class="wrapper headerWrapper">
+            <a class="headerLink" href="/"><img class="headerMenuLogo" src="/public/icones/agecem-logo.svg"></img></a>
             <ul class="headerMenu">
                 <li class="headerMenuElement"><a href="/">AGECEM</a></li>
                 <li class="headerMenuElement"><a href="/vie-etudiante">Vie étudiante</a></li>
                 <li class="headerMenuElement"><a href="/documentation">Documentation</a></li>
                 <li class="headerMenuElement"><a href="/admin">admin</a></li>
             </ul>
+            <img class="headerMenuHamburger" src="/public/icones/hamburger-menu.svg" onclick="onToggleNav()"></img>
+        </div>
+        <ul class="headerMenuMobile">
+            <li class="headerMenuElement"><a href="/">AGECEM</a></li>
+            <li class="headerMenuElement"><a href="/vie-etudiante">Vie étudiante</a></li>
+            <li class="headerMenuElement"><a href="/documentation">Documentation</a></li>
+            <li class="headerMenuElement"><a href="/admin">admin</a></li>
+        </ul>
     </div>
-
-
 {{ end }}

templates/html/index.gohtml

@@ -9,7 +9,10 @@
     </head>
     <body>
       {{ template "header-html" }}
-    <h1 class="heading1">Association Générale Étudiante du Cégep Édouard-Montpetit</h1>
+      <div class="wrapper indexWrapper">
+        <h1 class="heading1">AGECEM</h1>
+        <h2 class="heading2">Association Générale Étudiante du Cégep Édouard-Montpetit</h2>
+      </div>
     </body>
   </html>
 {{ end }}

templates/html/vie-etudiante.gohtml

@@ -8,7 +8,9 @@
     </head>
     <body>
       {{ template "header-html" }}
+      <div class="wrapper vieEtudianteWrapper">
         <h1 class="heading1">Vie étudiante</h1>
+      </div>
     </body>
   </html>
 {{ end }}