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

Reviewed-on: #93

public/css/fonts.css

@@ -1,168 +1,161 @@
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-thin.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-thin.woff') format('woff'),
-	     url('/public/fonts/Poppins/poppins-thin.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-thin.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-thin.otf') format('otf');
     font-weight: 100;
     font-style: normal;
-    }
+}
 
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-thin-italic.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-thin-italic.woff') format('woff'),
-	     url('/public/fonts/Poppins/poppins-thin-italic.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-thin-italic.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-thin-italic.otf') format('otf');
     font-weight: 100;
     font-style: italic;
-    }
-
+}
 
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-extralight.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-extralight.woff') format('woff'),
-	    url('/public/fonts/Poppins/poppins-extralight.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-extralight.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-extralight.otf') format('otf');
     font-weight: 200;
     font-style: normal;
-    }
+}
 
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-extralight-italic.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-extralight-italic.woff') format('woff'),
-         url('/public/fonts/Poppins/poppins-extralight-italic.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-extralight-italic.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-extralight-italic.otf') format('otf');
     font-weight: 200;
     font-style: italic;
-    }
+}
 
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-light.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-light.woff') format('woff'),
-         url('/public/fonts/Poppins/poppins-light.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-light.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-light.otf') format('otf');
     font-weight: 300;
     font-style: normal;
-    }
-
+}
 
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-light-italic.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-light-italic.woff') format('woff'),
-         url('/public/fonts/Poppins/poppins-light-italic.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-light-italic.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-light-italic.otf') format('otf');
     font-weight: 300;
     font-style: italic;
-    }
+}
 
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-regular.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-regular.woff') format('woff'),
-         url('/public/fonts/Poppins/poppins-regular.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-regular.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-regular.otf') format('otf');
     font-weight: 400;
     font-style: normal;
-    }
+}
 
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-regular-italic.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-regular-italic.woff') format('woff'),
-         url('/public/fonts/Poppins/poppins-regular-italic.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-regular-italic.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-regular-italic.otf') format('otf');
     font-weight: 400;
     font-style: italic;
-    }
+}
 
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-medium.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-medium.woff') format('woff'),
-         url('/public/fonts/Poppins/poppins-medium.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-medium.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-medium.otf') format('otf');
     font-weight: 500;
     font-style: normal;
-    }
+}
 
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-medium-italic.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-medium-italic.woff') format('woff'),
-         url('/public/fonts/Poppins/poppins-medium-italic.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-medium-italic.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-medium-italic.otf') format('otf');
     font-weight: 500;
     font-style: italic;
-    }
+}
 
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-semibold.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-semibold.woff') format('woff'),
-         url('/public/fonts/Poppins/poppins-semibold.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-semibold.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-semibold.otf') format('otf');
     font-weight: 600;
     font-style: normal;
-    }
+}
 
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-semibold-italic.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-semibold-italic.woff') format('woff'),
-         url('/public/fonts/Poppins/poppins-semibold-italic.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-semibold-italic.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-semibold-italic.otf') format('otf');
     font-weight: 600;
     font-style: italic;
-
 }
 
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-bold.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-bold.woff') format('woff'),
-         url('/public/fonts/Poppins/poppins-bold.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-bold.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-bold.otf') format('otf');
     font-weight: 700;
     font-style: normal;
-
 }
 
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-bold-italic.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-bold-italic.woff') format('woff'),
-         url('/public/fonts/Poppins/poppins-bold-italic.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-bold-italic.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-bold-italic.otf') format('otf');
     font-weight: 700;
     font-style: italic;
-
 }
 
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-extrabold.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-extrabold.woff') format('woff'),
-         url('/public/fonts/Poppins/poppins-extrabold.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-extrabold.woff') format('woff'),
+        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'),
-         url('/public/fonts/Poppins/poppins-extrabold-italic.woff') format('woff'),
-         url('/public/fonts/Poppins/poppins-extrabold-italic.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-extrabold-italic.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-extrabold-italic.otf') format('otf');
     font-weight: 800;
     font-style: italic;
-    }
+}
 
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-black.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-black.woff') format('woff'),
-         url('/public/fonts/Poppins/poppins-black.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-black.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-black.otf') format('otf');
     font-weight: 900;
     font-style: normal;
-    }
+}
 
 @font-face {
     font-family: "Poppins";
     src: url('/public/fonts/Poppins/poppins-black-italic.woff2') format('woff2'),
-         url('/public/fonts/Poppins/poppins-black-italic.woff') format('woff'),
-         url('/public/fonts/Poppins/poppins-black-italic.otf') format('otf');
+        url('/public/fonts/Poppins/poppins-black-italic.woff') format('woff'),
+        url('/public/fonts/Poppins/poppins-black-italic.otf') format('otf');
     font-weight: 900;
     font-style: italic;
-    }
+}

public/css/general.css

@@ -1,35 +1,74 @@
-.header {
-    width: 100%;
-    }
+html {
+    box-sizing: border-box;
+}
 
-.headerMenu {
-    font-family: "Poppins";
-    font-weight: 400; /*regular*/ 
-    font-size: 1.25rem; /*20px*/
-    color: #000;  /*Noir pur*/
-    display: flex;
-    flex-flow: row;
-    justify-content: space-around;
-    align-items: center;
-    }
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
 
-.headerMenuElement:hover {
-    border-bottom: 5px #FF563C solid; /*Orange Highlight*/
-    cursor: pointer;
-    }
+img {
+    max-width: 100%;
+}
+
+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-size: 6rem; /*96px*/
-    color: #394596;  /*Bleu AGECEM*/
+    font-weight: 600;
+    /*semi-bold*/
+    font-size: 3rem;
+    /*48px*/
+    color: #394596;
+    /*Bleu AGECEM*/
     text-align: center;
-    }
+}
 
 .heading2 {
     font-family: "Poppins";
-    font-weight: 600; /*semi-bold*/ 
-    font-size: 1.5rem; /*24px*/
-    color: #394596; /*Bleu AGECEM*/   
+    font-weight: 300;
+    /*light*/
+    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

@@ -1,17 +1,16 @@
 {{ define "admin-upload-html" }}
-<!DOCTYPE html>
-<html lang="fr">
-  <head>
-    <meta charset="utf-8">
-    <title>AGECEM</title>
-    {{ template "general-html" }}
-  </head>
-  <body>
-  {{ template "header-html" }}
-    <h1 class="heading1">Upload</h1>
-    <form class="form adminUploadForm" action="/admin/documents/upload" method="post" enctype="multipart/form-data">
+  <!DOCTYPE html>
+  <html lang="fr">
+    <head>
+      <meta charset="utf-8">
+      <title>AGECEM</title>
+      {{ template "general-html" }}
+    </head>
+    <body>
+      {{ template "header-html" }}
+      <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>
@@ -22,8 +21,8 @@
         <br>
         <br>
         <input class="formSubmit" type="submit" value="Submit">
-    </form>
-    <p>{{ .Message }}</p>
-  </body>
-</html>
+      </form>
+      <p>{{ .Message }}</p>
+    </body>
+  </html>
 {{ end }}

templates/html/admin.gohtml

@@ -1,17 +1,17 @@
 {{ define "admin-html" }}
-<!DOCTYPE html>
-<html lang="fr">
-  <head>
-    <meta charset="utf-8">
-    <title>AGECEM</title>
-    {{ template "general-html" }}
-  </head>
-  <body>
-  {{ template "header-html" }}
-    <h1 class="heading1">Admin</h1>
-    <ul>
+  <!DOCTYPE html>
+  <html lang="fr">
+    <head>
+      <meta charset="utf-8">
+      <title>AGECEM</title>
+      {{ template "general-html" }}
+    </head>
+    <body>
+      {{ template "header-html" }}
+      <h1 class="heading1">Admin</h1>
+      <ul>
         <li><a href="/admin/documents/upload">Ajout de document</a></li>
-    </ul>
-  </body>
-</html>
+      </ul>
+    </body>
+  </html>
 {{ end }}

templates/html/documentation.gohtml

@@ -1,16 +1,17 @@
 {{ define "documentation-html" }}
-<!DOCTYPE html>
-<html lang="fr">
-  <head>
-    <meta charset="utf-8">
-    <title>AGECEM | Documentation</title>
-    {{ template "general-html" }}
-  </head>
-  <body>
-    {{ template "header-html" }}
-    <h1 class="heading1">Documentation</h1>
-    <p>
-        {{ range . }}
+  <!DOCTYPE html>
+  <html lang="fr">
+    <head>
+      <meta charset="utf-8">
+      <title>AGECEM | Documentation</title>
+      {{ template "general-html" }}
+    </head>
+    <body>
+      {{ template "header-html" }}
+      <div class="wrapper documentationWrapper">
+        <h1 class="heading1">Documentation</h1>
+        <p>
+          {{ range . }}
             {{ $bucket_name := .Name }}
             {{ $bucket_display_name := .DisplayName }}
             <details>
@@ -22,8 +23,9 @@
             {{ end}}
             </ul>
             </details>
-        {{ end }}
-    </p>
-  </body>
-</html>
+          {{ end }}
+        </p>
+      </div>
+    </body>
+  </html>
 {{ end }}

templates/html/formulaires.gohtml

@@ -1,14 +1,14 @@
 {{ define "formulaires-html" }}
-<!DOCTYPE html>
-<html lang="fr">
-  <head>
-    <meta charset="utf-8">
-    <title>AGECEM | Formulaires</title>
-    {{ template "general-html" }}
-  </head>
-  <body>
-    {{ template "header-html" }}
-    <h1 class="heading1">Formulaires</h1>
-  </body>
-</html>
+  <!DOCTYPE html>
+  <html lang="fr">
+    <head>
+      <meta charset="utf-8">
+      <title>AGECEM | Formulaires</title>
+      {{ template "general-html" }}
+    </head>
+    <body>
+      {{ template "header-html" }}
+      <h1 class="heading1">Formulaires</h1>
+    </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">   
-    <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>
-</div>
-
-
+    <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

@@ -1,15 +1,18 @@
 {{ define "index-html" }}
-<!DOCTYPE html>
-<html lang="fr">
-  <head>
-    <meta charset="utf-8">
-    <title>AGECEM</title>
-    {{ template "general-html" }}
-    <link rel="stylesheet" href="/public/css/index.css">
-  </head>
-  <body>
-  {{ template "header-html" }}
-    <h1 class="heading1">Association Générale Étudiante du Cégep Édouard-Montpetit</h1>
-  </body>
-</html>
+  <!DOCTYPE html>
+  <html lang="fr">
+    <head>
+      <meta charset="utf-8">
+      <title>AGECEM</title>
+      {{ template "general-html" }}
+      <link rel="stylesheet" href="/public/css/index.css">
+    </head>
+    <body>
+      {{ template "header-html" }}
+      <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

@@ -1,14 +1,16 @@
 {{ define "vie-etudiante-html" }}
-<!DOCTYPE html>
-<html lang="fr">
-  <head>
-    <meta charset="utf-8">
-    <title>AGECEM | Vie étudiante</title>
-    {{ template "general-html" }}
-  </head>
-  <body>
-    {{ template "header-html" }}
-    <h1 class="heading1">Vie étudiante</h1>
-  </body>
-</html>
+  <!DOCTYPE html>
+  <html lang="fr">
+    <head>
+      <meta charset="utf-8">
+      <title>AGECEM | Vie étudiante</title>
+      {{ template "general-html" }}
+    </head>
+    <body>
+      {{ template "header-html" }}
+      <div class="wrapper vieEtudianteWrapper">
+        <h1 class="heading1">Vie étudiante</h1>
+      </div>
+    </body>
+  </html>
 {{ end }}