Responsive navigation bar for small screens
This commit is contained in:
Guillaume Bertholon
parent
c836f642fa
commit
3c6734261b
4 changed files with 152 additions and 52 deletions
|
|
@ -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 {
|
|||
}
|
||||
}
|
||||
|
||||
#account {
|
||||
flex-direction: row;
|
||||
justify-content: end;
|
||||
|
||||
a {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,40 +1,75 @@
|
|||
@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 {
|
||||
header #account {
|
||||
flex-direction: row;
|
||||
justify-content: end; }
|
||||
header #account a {
|
||||
padding: 10px; }
|
||||
header #account .username {
|
||||
font-size: 0.7em; }
|
||||
|
||||
form {
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,20 +1,28 @@
|
|||
<header>
|
||||
<h1>GestioJeux</h1>
|
||||
|
||||
{% with url_name=request.resolver_match.url_name %}
|
||||
<div id="mobile_nav_trigger" onclick="toggle_mobile_nav()">
|
||||
<i class="fa fa-fw fa-bars" aria-hidden="true"></i> Menu
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
{% with url_name=request.resolver_match.url_name %}
|
||||
<div>
|
||||
<a {% if url_name == "home" %}class="current"{% endif %} href="{% url "mainsite:home" %}"><i class="fa fa-home" aria-hidden="true"></i></a>
|
||||
<a {% if url_name == "inventory" %}class="current"{% endif %} href="{% url "inventory:inventory" %}">Inventaire</a>
|
||||
<a {% if url_name == "suggestions" %}class="current"{% endif %} href="">Suggestions</a>
|
||||
{% if request.user.is_staff %}
|
||||
<a href="{% url "admin:index" %}">Admin</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
</div>
|
||||
<div id="account">
|
||||
{% if request.user.is_authenticated %}
|
||||
<a class="username" href="{% url "accounts:account_settings" %}">{{ request.user }}</a>
|
||||
<a class="login" href="{% url "accounts:logout" %}?next={{ request.get_full_path }}"><i class="fa fa-sign-out" aria-hidden="true"></i></a>
|
||||
<a class="logout" href="{% url "accounts:logout" %}?next={{ request.get_full_path }}"><i class="fa fa-sign-out" aria-hidden="true"></i></a>
|
||||
{% else %}
|
||||
<a class="login{% if url_name == "login" %} current{% endif %}" href="{% url "accounts:login" %}?next={{ request.get_full_path }}">Connexion</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endwith %}
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
Loading…
Reference in a new issue