agecem/agecem-org
4
1
Fork 0
Code Issues 30 Pull requests Activity

Ajouter responsiveness au header #93

Merged
vlbeaudoin merged 21 commits from feature/responsive-header into main 2023-08-16 13:43:50 -04:00
Conversation 0 Commits 21 Files changed 15 +355 -177
15 changed files with 355 additions and 177 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

107
public/css/fonts.css
View file

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

87
public/css/general.css
View file

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

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

9
public/icones/agecem-logo.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 27 KiB

10
public/icones/hamburger-menu.svg Normal file
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>
Side by side

After

Width:  |  Height:  |  Size: 396 B

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

2
public/public.go
View file

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

31
templates/html/admin-upload.gohtml
View file

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

28
templates/html/admin.gohtml
View file

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

34
templates/html/documentation.gohtml
View file

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

24
templates/html/formulaires.gohtml
View file

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

7
templates/html/general.gohtml
View file

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

29
templates/html/header.gohtml
View file

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

29
templates/html/index.gohtml
View file

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

26
templates/html/vie-etudiante.gohtml
View file

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