From 3c6734261b08f65d509ae5c3a688fad97148f216 Mon Sep 17 00:00:00 2001 From: Guillaume Bertholon Date: Sun, 27 Dec 2020 00:07:09 +0100 Subject: [PATCH] Responsive navigation bar for small screens --- mainsite/scss/header.scss | 72 +++++++++++++++++++++---- mainsite/static/css/style.css | 61 ++++++++++++++++----- mainsite/static/js/gestiojeux.js | 33 +++++++----- mainsite/templates/partials/header.html | 38 +++++++------ 4 files changed, 152 insertions(+), 52 deletions(-) diff --git a/mainsite/scss/header.scss b/mainsite/scss/header.scss index b83708f..26fe964 100644 --- a/mainsite/scss/header.scss +++ b/mainsite/scss/header.scss @@ -1,33 +1,76 @@ header { display: flex; - justify-content: space-between; - align-items: center; align-content: stretch; background-color: $header_bg_color; color: $header_text_color; padding: 0 30px; + gap: 20px; border-bottom: 4px solid $header_border_color; + @media (max-width: 800px) { + padding: 0 10px; + flex-direction: column; + gap: 0; + } + + @media (max-width: 500px) { + padding: 0; + } + h1 { + display: flex; + align-items: center; + justify-content: center; margin: 0; - padding: 0 20px; + padding: 5px 20px; color: $header_text_color; font-size: 1em; + + @media (max-width: 700px) { + font-size: 1.25em; + } + } + + #mobile_nav_trigger { + display: none; + text-align: center; + border-top: 4px solid $header_border_color; + padding: 5px 10px; } nav { display: flex; - justify-content: left; - margin: 0 20px; - flex: 1 1 100px; + justify-content: space-between; + flex: 1 1 auto; + + @media (max-width: 500px) { + flex-direction: column; + } + + div { + display: flex; + + @media (max-width: 500px) { + flex-direction: column; + } + } + } + + .links { + display: flex; + flex: 1 0 auto; } a { - display: block; - margin: 0; + display: flex; padding: 10px 20px; + } + + a, #mobile_nav_trigger { + align-items: center; + margin: 0; border-radius: 0; color: $header_text_color; @@ -47,7 +90,16 @@ header { } } - .username { - font-size: 0.7em; + #account { + flex-direction: row; + justify-content: end; + + a { + padding: 10px; + } + + .username { + font-size: 0.7em; + } } } diff --git a/mainsite/static/css/style.css b/mainsite/static/css/style.css index 52bd2c0..5850af4 100644 --- a/mainsite/static/css/style.css +++ b/mainsite/static/css/style.css @@ -1,41 +1,76 @@ @import url(fonts.css); header { display: flex; - justify-content: space-between; - align-items: center; align-content: stretch; background-color: #6bb8c4; color: #f6fbfd; padding: 0 30px; + gap: 20px; border-bottom: 4px solid #51808c; } + @media (max-width: 800px) { + header { + padding: 0 10px; + flex-direction: column; + gap: 0; } } + @media (max-width: 500px) { + header { + padding: 0; } } header h1 { + display: flex; + align-items: center; + justify-content: center; margin: 0; - padding: 0 20px; + padding: 5px 20px; color: #f6fbfd; font-size: 1em; } + @media (max-width: 700px) { + header h1 { + font-size: 1.25em; } } + header #mobile_nav_trigger { + display: none; + text-align: center; + border-top: 4px solid #51808c; + padding: 5px 10px; } header nav { display: flex; - justify-content: left; - margin: 0 20px; - flex: 1 1 100px; } + justify-content: space-between; + flex: 1 1 auto; } + @media (max-width: 500px) { + header nav { + flex-direction: column; } } + header nav div { + display: flex; } + @media (max-width: 500px) { + header nav div { + flex-direction: column; } } + header .links { + display: flex; + flex: 1 0 auto; } header a { - display: block; + display: flex; + padding: 10px 20px; } + header a, header #mobile_nav_trigger { + align-items: center; margin: 0; - padding: 10px 20px; border-radius: 0; color: #f6fbfd; text-decoration: none; } - header a:hover { + header a:hover, header #mobile_nav_trigger:hover { background-color: #48a6b4; color: #1e464c; } - header a.current { + header a.current, header #mobile_nav_trigger.current { background-color: #51808c; } - header a:focus { + header a:focus, header #mobile_nav_trigger:focus { background-color: #48a6b4; box-shadow: none; color: #1e464c; } - header .username { - font-size: 0.7em; } + header #account { + flex-direction: row; + justify-content: end; } + header #account a { + padding: 10px; } + header #account .username { + font-size: 0.7em; } form { display: flex; diff --git a/mainsite/static/js/gestiojeux.js b/mainsite/static/js/gestiojeux.js index 9fdf679..ff0af2d 100644 --- a/mainsite/static/js/gestiojeux.js +++ b/mainsite/static/js/gestiojeux.js @@ -1,25 +1,30 @@ -const MOBILE_NAV_PAGE_SIZE = 475; // px +const MOBILE_NAV_PAGE_SIZE = 500; // px const MOBILE_NAV_TOGGLE_TIME = 300; // msec const TEXTAREA_MIN_SIZE = 120; // px -function mobile_nav_toggle() { - $("nav > a").slideToggle(MOBILE_NAV_TOGGLE_TIME); +function toggle_mobile_nav() { + $("nav").slideToggle(MOBILE_NAV_TOGGLE_TIME); } -$(window).resize(function () { +function check_mobile_nav_window_size() { if(window.innerWidth > MOBILE_NAV_PAGE_SIZE) { - $("nav > a").show(0); + $("nav").show(0); + $("#mobile_nav_trigger").hide(0); } else { - $("nav > a").hide(0); + $("nav").hide(0); + $("#mobile_nav_trigger").show(0); } -}); +} -$('textarea').each(function () { - this.style.height = Math.max(this.scrollHeight, TEXTAREA_MIN_SIZE) + 'px'; - this.style.resize = 'none'; - this.style.overflowY = 'hidden'; -}).on('input', function () { - this.style.height = 'auto'; - this.style.height = Math.max(this.scrollHeight, TEXTAREA_MIN_SIZE) + 'px'; +$(window).resize(check_mobile_nav_window_size); +check_mobile_nav_window_size(); + +$("textarea").each(function () { + this.style.height = Math.max(this.scrollHeight, TEXTAREA_MIN_SIZE) + "px"; + this.style.resize = "none"; + this.style.overflowY = "hidden"; +}).on("input", function () { + this.style.height = "auto"; + this.style.height = Math.max(this.scrollHeight, TEXTAREA_MIN_SIZE) + "px"; }); diff --git a/mainsite/templates/partials/header.html b/mainsite/templates/partials/header.html index d0e8861..318dcf0 100644 --- a/mainsite/templates/partials/header.html +++ b/mainsite/templates/partials/header.html @@ -1,20 +1,28 @@

GestioJeux

- {% with url_name=request.resolver_match.url_name %} +
+ Menu +
+ - {% if request.user.is_authenticated %} - {{ request.user }} - - {% else %} - Connexion - {% endif %} - {% endwith %} + {% with url_name=request.resolver_match.url_name %} +
+ + Inventaire + Suggestions + {% if request.user.is_staff %} + Admin + {% endif %} +
+
+ {% if request.user.is_authenticated %} + {{ request.user }} + + {% else %} + Connexion + {% endif %} +
+ {% endwith %} +