DGNum/annuaire-eleves
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

On rajoute un menu déroulant

Browse source
This commit is contained in:
Tom Hubrecht 2021-02-05 17:36:10 +01:00
parent 2078790076
commit fcabe88016
5 changed files with 90 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
fiches/static/fiches/css/annuaire.css
View file

@ -51,6 +51,15 @@ a:focus,
grid-template-rows: auto auto auto auto 120px; grid-template-rows: auto auto auto auto 120px;
grid-template-areas: "title" "language" "search" "menu" "account"; 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 { #title {
grid-area: title; grid-area: title;
@ -535,8 +544,9 @@ body {
z-index: 5; z-index: 5;
} }
@media only screen and (max-width: 900px) { @media screen and (max-width: 900px), (orientation: portrait) {
body { body {
grid-template-rows: max-content auto;
grid-template-areas: "aside" "main"; grid-template-areas: "aside" "main";
} }
@ -552,9 +562,27 @@ body {
width: auto; width: auto;
} }
#content-home form input[type=submit] {
grid-column: 1/3;
}
#footer,
.content {
max-width: 100%;
}
#menu { #menu {
width: auto; width: auto;
float: none; 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 { #search-area {

32
fiches/static/fiches/scss/_common.scss
View file

@ -42,8 +42,9 @@ body {
} }
// Pour les vues mobile // Pour les vues mobile
@media only screen and (max-width: 900px) { @media screen and (max-width: 900px), (orientation: portrait) {
body { body {
grid-template-rows: max-content auto;
grid-template-areas: grid-template-areas:
"aside" "aside"
"main"; "main";
@ -61,9 +62,38 @@ body {
width: auto; width: auto;
} }
#content-home {
form {
input[type="submit"] {
grid-column: 1/3;
}
}
}
#footer,
.content {
max-width: 100%;
}
#menu { #menu {
width: auto; width: auto;
float: none; 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 { #search-area {

10
fiches/static/fiches/scss/_header.scss
View file

@ -19,6 +19,16 @@ $account-area-height: 120px;
"search" "search"
"menu" "menu"
"account"; "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 { #title {

24
fiches/templates/fiches/base.html
View file

@ -17,6 +17,11 @@
<body> <body>
<div id="aside"> <div id="aside">
<div id="menu"> <div id="menu">
<h1 id="title">
{% block title %} <a href='{% url "home" %}'>{% trans "Annuaire des élèves de l'ENS" %}</a>{% endblock %}
</h1>
<a id="hamburger" href="javascript:void(0);" onclick="toggleMenu()"></a>
<div id="language_switch"> <div id="language_switch">
<form action="{% url 'set_language' %}" method="post"> <form action="{% url 'set_language' %}" method="post">
{% csrf_token %} {% csrf_token %}
@ -32,11 +37,6 @@
<button type="submit">{% trans "Rechercher" %}</button> <button type="submit">{% trans "Rechercher" %}</button>
</form> </form>
<h1 id="title">
{% block title %} <a href='{% url "home" %}'>{% trans "Annuaire des élèves de l'ENS" %}</a>{% endblock %}
</h1>
<div id="main-menu"> <div id="main-menu">
<nav> <nav>
<a href='{% url "home" %}'>{% trans "Accueil" %}</a> <a href='{% url "home" %}'>{% trans "Accueil" %}</a>
@ -78,6 +78,20 @@
{% endblock %} {% endblock %}
</div> </div>
</div> </div>
<script>
function toggleMenu() {
var menu = document.getElementById("main-menu");
var account = document.getElementById("account-area");
if (menu.style.display === "none") {
menu.style.display = "grid"
account.style.display = "grid"
} else {
menu.style.display = "none"
account.style.display = "none"
}
}
</script>
{% block extra_js %}{% endblock %} {% block extra_js %}{% endblock %}
</body> </body>