Ajouter responsiveness au header #93

Merged
vlbeaudoin merged 21 commits from feature/responsive-header into main 2023-08-16 13:43:50 -04:00
15 changed files with 355 additions and 177 deletions

View file

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

View file

@ -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 { .heading1 {
font-family: "Poppins"; 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; text-align: center;
} }
.heading2 { .heading2 {
font-family: "Poppins"; 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; 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));
}
}

107
public/css/header.css Normal file
View file

@ -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;
}
}

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 27 KiB

View file

@ -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>

After

Width:  |  Height:  |  Size: 396 B

0
public/js/header.js Normal file
View file

View file

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

View file

@ -1,17 +1,16 @@
{{ define "admin-upload-html" }} {{ define "admin-upload-html" }}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>AGECEM</title> <title>AGECEM</title>
{{ template "general-html" }} {{ template "general-html" }}
</head> </head>
<body> <body>
{{ template "header-html" }} {{ template "header-html" }}
<h1 class="heading1">Upload</h1> <h1 class="heading1">Upload</h1>
<form class="form adminUploadForm" action="/admin/documents/upload" method="post" enctype="multipart/form-data"> <form class="form adminUploadForm" action="/admin/documents/upload" method="post" enctype="multipart/form-data">
<label class="formLabel" for="bucket">Type de document:</label> <label class="formLabel" for="bucket">Type de document:</label>
<select class="formSelect" name="bucket" id="bucket"> <select class="formSelect" name="bucket" id="bucket">
{{ range .Buckets }} {{ range .Buckets }}
<option class="formOption" value="{{ .Name }}">{{ .DisplayName }}</option> <option class="formOption" value="{{ .Name }}">{{ .DisplayName }}</option>
@ -22,8 +21,8 @@
<br> <br>
<br> <br>
<input class="formSubmit" type="submit" value="Submit"> <input class="formSubmit" type="submit" value="Submit">
</form> </form>
<p>{{ .Message }}</p> <p>{{ .Message }}</p>
</body> </body>
</html> </html>
{{ end }} {{ end }}

View file

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

View file

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

View file

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

View file

@ -1,4 +1,11 @@
{{ define "general-html" }} {{ define "general-html" }}
<link rel="stylesheet" href="/public/css/general.css"> <link rel="stylesheet" href="/public/css/general.css">
<link rel="stylesheet" href="/public/css/fonts.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 }} {{ end }}

View file

@ -1,13 +1,20 @@
{{ define "header-html" }} {{ define "header-html" }}
<div class="header">
<div class="header"> <div class="wrapper headerWrapper">
<ul class="headerMenu"> <a class="headerLink" href="/"><img class="headerMenuLogo" src="/public/icones/agecem-logo.svg"></img></a>
<li class="headerMenuElement"><a href="/">AGECEM</a></li> <ul class="headerMenu">
<li class="headerMenuElement"><a href="/vie-etudiante">Vie étudiante</a></li> <li class="headerMenuElement"><a href="/">AGECEM</a></li>
<li class="headerMenuElement"><a href="/documentation">Documentation</a></li> <li class="headerMenuElement"><a href="/vie-etudiante">Vie étudiante</a></li>
<li class="headerMenuElement"><a href="/admin">admin</a></li> <li class="headerMenuElement"><a href="/documentation">Documentation</a></li>
</ul> <li class="headerMenuElement"><a href="/admin">admin</a></li>
</div> </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 }} {{ end }}

View file

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

View file

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