From 20787900761a32f0aa0758af4a2bc75a1f97c340 Mon Sep 17 00:00:00 2001 From: Tom Hubrecht Date: Thu, 4 Feb 2021 23:26:28 +0100 Subject: [PATCH 1/9] Mobile friendly --- fiches/static/fiches/css/annuaire.css | 115 ++++++++++++++---------- fiches/static/fiches/scss/_common.scss | 37 ++++++-- fiches/static/fiches/scss/annuaire.scss | 2 +- 3 files changed, 95 insertions(+), 59 deletions(-) diff --git a/fiches/static/fiches/css/annuaire.css b/fiches/static/fiches/css/annuaire.css index e05b3b8..b1c4783 100644 --- a/fiches/static/fiches/css/annuaire.css +++ b/fiches/static/fiches/css/annuaire.css @@ -28,65 +28,21 @@ font-weight: 400; src: local("Source Code Pro Regular"), local("SourceCodePro-Regular"), url("../fonts/source-code-pro/source-code-pro-v12-latin-regular.woff2") format("woff2"), url("../fonts/source-code-pro/source-code-pro-v12-latin-regular.woff") format("woff"); } -#main-menu a a, #account-area a, a { +a, #main-menu a a, #account-area a { text-decoration: none; color: #FFDC00; } -#main-menu a a:hover, #account-area a:hover, a:hover, +a:hover, #main-menu a a:hover, #account-area a:hover, +a:active, #main-menu a a:active, #account-area a:active, -a:active, +a:focus, #main-menu a a:focus, -#account-area a:focus, -a:focus { +#account-area a:focus { color: #ffbb00; } -* { - box-sizing: border-box; -} - -body, html { - height: 100%; -} - -body { - display: grid; - grid-template-columns: auto auto; - grid-template-areas: "aside main"; - background-color: #301827; - color: #FFFFFF; - font-family: "Fira Sans", "Roboto", sans-serif; -} - -#aside { - grid-area: aside; - padding: 0 0 0 10vw; - background-color: #1f0e19; - box-shadow: 4px 0 0 rgba(31, 14, 25, 0.3); - z-index: 10; -} - -#main { - grid-area: main; - padding: 0 10vw 0 0; - display: flex; - flex-direction: column; - justify-content: space-between; - background-color: #301827; - z-index: 5; -} - -@media only screen and (max-width: 1200px) { - #header { - margin: 0; - } - - #main { - margin: 0; - } -} #menu { display: grid; float: right; @@ -545,4 +501,65 @@ body { text-align: center; } +* { + box-sizing: border-box; +} + +body, html { + height: 100%; +} + +body { + display: grid; + grid-template-areas: "aside main"; + background-color: #301827; + color: #FFFFFF; + font-family: "Fira Sans", "Roboto", sans-serif; +} + +#aside { + grid-area: aside; + padding: 0 0 0 10vw; + background-color: #1f0e19; + box-shadow: 4px 0 0 rgba(31, 14, 25, 0.3); + z-index: 10; +} + +#main { + grid-area: main; + padding: 0 10vw 0 0; + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: #301827; + z-index: 5; +} + +@media only screen and (max-width: 900px) { + body { + grid-template-areas: "aside" "main"; + } + + #aside, +#main { + padding: 0; + } + + #content-home, +#content-birthdays, +#content-view-profile, +#content-edit-profile { + width: auto; + } + + #menu { + width: auto; + float: none; + } + + #search-area { + width: auto; + } +} + /*# sourceMappingURL=annuaire.css.map */ diff --git a/fiches/static/fiches/scss/_common.scss b/fiches/static/fiches/scss/_common.scss index 4149a58..5471ad0 100644 --- a/fiches/static/fiches/scss/_common.scss +++ b/fiches/static/fiches/scss/_common.scss @@ -15,7 +15,6 @@ body, html { body { display: grid; - grid-template-columns: auto auto; grid-template-areas: "aside main"; @@ -42,13 +41,33 @@ body { z-index: 5; } -@media only screen and (max-width: 1200px) { - #header { - margin: 0; - } +// Pour les vues mobile +@media only screen and (max-width: 900px) { + body { + grid-template-areas: + "aside" + "main"; + } + + #aside, + #main { + padding: 0; + } + + #content-home, + #content-birthdays, + #content-view-profile, + #content-edit-profile { + width: auto; + } + + #menu { + width: auto; + float: none; + } + + #search-area { + width: auto; + } - #main { - margin: 0; - } } - diff --git a/fiches/static/fiches/scss/annuaire.scss b/fiches/static/fiches/scss/annuaire.scss index 09cfe85..69bffcb 100644 --- a/fiches/static/fiches/scss/annuaire.scss +++ b/fiches/static/fiches/scss/annuaire.scss @@ -1,4 +1,4 @@ -@use "common"; @use "header"; @use "content"; @use "footer"; +@use "common"; From fcabe88016065870e69d3d2e9fdc5cc97923df52 Mon Sep 17 00:00:00 2001 From: Tom Hubrecht Date: Fri, 5 Feb 2021 17:36:10 +0100 Subject: [PATCH 2/9] =?UTF-8?q?On=20rajoute=20un=20menu=20d=C3=A9roulant?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fiches/static/fiches/css/annuaire.css | 30 +++++++++++++++++++++++- fiches/static/fiches/scss/_common.scss | 32 +++++++++++++++++++++++++- fiches/static/fiches/scss/_footer.scss | 2 +- fiches/static/fiches/scss/_header.scss | 10 ++++++++ fiches/templates/fiches/base.html | 24 +++++++++++++++---- 5 files changed, 90 insertions(+), 8 deletions(-) diff --git a/fiches/static/fiches/css/annuaire.css b/fiches/static/fiches/css/annuaire.css index b1c4783..13eda0d 100644 --- a/fiches/static/fiches/css/annuaire.css +++ b/fiches/static/fiches/css/annuaire.css @@ -51,6 +51,15 @@ a:focus, grid-template-rows: auto auto auto auto 120px; grid-template-areas: "title" "language" "search" "menu" "account"; } +#menu #hamburger { + display: none; + grid-area: hamburger; + background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TS1VaHOwg4pChOlkoKuKoVShChVIrtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEzc1J0UVK/F9SaBHjwXE/3t173L0DhGaVqWZPHFA1y8gkE2IuvyoGXyEggD6EEZeYqc+l0yl4jq97+Ph6F+NZ3uf+HGGlYDLAJxLPMt2wiDeIpzctnfM+cYSVJYX4nHjcoAsSP3JddvmNc8lhgWdGjGxmnjhCLJa6WO5iVjZU4iniqKJqlC/kXFY4b3FWq3XWvid/YaigrSxzneYIkljEEtIQIaOOCqqwEKNVI8VEhvYTHv5hx58ml0yuChg5FlCDCsnxg//B727N4uSEmxRKAIEX2/4YBYK7QKth29/Htt06AfzPwJXW8deawMwn6Y2OFj0CBraBi+uOJu8BlzvA0JMuGZIj+WkKxSLwfkbflAcGb4H+Nbe39j5OH4AsdZW6AQ4OgbESZa97vLu3u7d/z7T7+wEsq3KLN3ZkxAAAAAlwSFlzAAAA7AAAAOwBeShxvQAAADNJREFUWMPt1EERAEAIA7Ee/h0hjpPBg0RBp49NrnvTmc0Btf2AARVAipVQikGKpdgArvsZZAhH7c55ywAAAABJRU5ErkJggg=="); + height: 30px; + width: 30px; + float: right; + margin-top: 20px; +} #title { grid-area: title; @@ -535,8 +544,9 @@ body { z-index: 5; } -@media only screen and (max-width: 900px) { +@media screen and (max-width: 900px), (orientation: portrait) { body { + grid-template-rows: max-content auto; grid-template-areas: "aside" "main"; } @@ -552,9 +562,27 @@ body { width: auto; } + #content-home form input[type=submit] { + grid-column: 1/3; + } + + #footer, +.content { + max-width: 100%; + } + #menu { width: auto; float: none; + grid-template-columns: auto 50px; + grid-template-areas: "title hamburger" "language language" "search search" "menu menu" "account account"; + } + #menu #hamburger { + display: grid; + } + #menu #main-menu, +#menu #account-area { + display: none; } #search-area { diff --git a/fiches/static/fiches/scss/_common.scss b/fiches/static/fiches/scss/_common.scss index 5471ad0..e011dde 100644 --- a/fiches/static/fiches/scss/_common.scss +++ b/fiches/static/fiches/scss/_common.scss @@ -42,8 +42,9 @@ body { } // Pour les vues mobile -@media only screen and (max-width: 900px) { +@media screen and (max-width: 900px), (orientation: portrait) { body { + grid-template-rows: max-content auto; grid-template-areas: "aside" "main"; @@ -61,9 +62,38 @@ body { width: auto; } + #content-home { + form { + input[type="submit"] { + grid-column: 1/3; + } + } + } + + #footer, + .content { + max-width: 100%; + } + #menu { width: auto; float: none; + grid-template-columns: auto 50px; + grid-template-areas: + "title hamburger" + "language language" + "search search" + "menu menu" + "account account"; + + #hamburger { + display: grid; + } + + #main-menu, + #account-area { + display: none; + } } #search-area { diff --git a/fiches/static/fiches/scss/_footer.scss b/fiches/static/fiches/scss/_footer.scss index 7c6513a..08eaffb 100644 --- a/fiches/static/fiches/scss/_footer.scss +++ b/fiches/static/fiches/scss/_footer.scss @@ -5,7 +5,7 @@ padding: 20px; color: colors.$page-text-secondary; text-align: center; - + .thanks { display: block; text-align: center; diff --git a/fiches/static/fiches/scss/_header.scss b/fiches/static/fiches/scss/_header.scss index d701a21..efc8e01 100644 --- a/fiches/static/fiches/scss/_header.scss +++ b/fiches/static/fiches/scss/_header.scss @@ -19,6 +19,16 @@ $account-area-height: 120px; "search" "menu" "account"; + + #hamburger { + display: none; + grid-area: hamburger; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAABhGlDQ1BJQ0MgcHJvZmlsZQAAKJF9kT1Iw0AcxV9TS1VaHOwg4pChOlkoKuKoVShChVIrtOpgcukXNGlIUlwcBdeCgx+LVQcXZ10dXAVB8APEzc1J0UVK/F9SaBHjwXE/3t173L0DhGaVqWZPHFA1y8gkE2IuvyoGXyEggD6EEZeYqc+l0yl4jq97+Ph6F+NZ3uf+HGGlYDLAJxLPMt2wiDeIpzctnfM+cYSVJYX4nHjcoAsSP3JddvmNc8lhgWdGjGxmnjhCLJa6WO5iVjZU4iniqKJqlC/kXFY4b3FWq3XWvid/YaigrSxzneYIkljEEtIQIaOOCqqwEKNVI8VEhvYTHv5hx58ml0yuChg5FlCDCsnxg//B727N4uSEmxRKAIEX2/4YBYK7QKth29/Htt06AfzPwJXW8deawMwn6Y2OFj0CBraBi+uOJu8BlzvA0JMuGZIj+WkKxSLwfkbflAcGb4H+Nbe39j5OH4AsdZW6AQ4OgbESZa97vLu3u7d/z7T7+wEsq3KLN3ZkxAAAAAlwSFlzAAAA7AAAAOwBeShxvQAAADNJREFUWMPt1EERAEAIA7Ee/h0hjpPBg0RBp49NrnvTmc0Btf2AARVAipVQikGKpdgArvsZZAhH7c55ywAAAABJRU5ErkJggg=='); + height: 30px; + width: 30px; + float: right; + margin-top: 20px; + } } #title { diff --git a/fiches/templates/fiches/base.html b/fiches/templates/fiches/base.html index fbb4a95..6bdd893 100644 --- a/fiches/templates/fiches/base.html +++ b/fiches/templates/fiches/base.html @@ -17,6 +17,11 @@