jmtrivial/agenda_culturel
4
4
Fork 0
Code Issues 62 Pull Requests 1 Projects 1 Releases Wiki Activity

on améliore l'apparence du menu

Browse Source
This commit is contained in:
Jean-Marie Favreau 2023-11-29 22:40:54 +01:00
parent 2fafc092a2
commit 716748a487
2 changed files with 35 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/agenda_culturel/static/style.scss
View File

@ -93,7 +93,7 @@ details[role="list"] summary + ul li.selected>a:hover {
color: var(--primary-inverse); color: var(--primary-inverse);
} }
body>nav { #main-nav {
box-shadow: 0 1px 0 rgba(115, 130, 140, 0.2); box-shadow: 0 1px 0 rgba(115, 130, 140, 0.2);
} }
@ -425,8 +425,15 @@ nav>div {
align-items: center; align-items: center;
} }
nav#main { #main-nav {
align-content: flex-start; display: block;
>nav {
position: absolute;
float: left;
top: 0;
left: 0;
padding-right: 4em;
}
ul, div { ul, div {
margin: 0 0 auto 0; margin: 0 0 auto 0;
@ -436,9 +443,12 @@ nav#main {
/* header */ /* header */
.header { .header {
float: left;
z-index: 3; z-index: 3;
position: relative;
text-align: right; text-align: right;
display: block; display: block;
width: 100%;
} }
.header ul { .header ul {
@ -446,11 +456,16 @@ nav#main {
padding: 0; padding: 0;
list-style: none; list-style: none;
overflow: hidden; overflow: hidden;
width: 100%;
} }
.header ul li { .header ul li {
clear: both; clear: both;
float: right; float: right;
padding: .4em .8em; padding: .4em .8em;
width: 100%;
a {
width: 100%;
}
} }
.header .logo { .header .logo {
@ -555,6 +570,7 @@ nav#main {
float: none; float: none;
display: inline-block; display: inline-block;
padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal); padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
width: auto;
} }
} }
} }

28
src/agenda_culturel/templates/agenda_culturel/page.html
View File

@ -25,18 +25,7 @@
{% load event_extra %} {% load event_extra %}
{% load utils_extra %} {% load utils_extra %}
<body> <body>
<nav id="main" class="container-fluid"> <div id="main-nav">
<ul>
<li>
<a href="{% url 'home' %}" aria-label="Retour accueil">
<img src="{% static 'images/favicon.svg' %}" />
</a>
</li>
<li>
<a href="{% url 'home' %}" aria-label="Retour accueil">Les nuits énimagmatiques</a>
</li>
</ul>
<div class="header"> <div class="header">
<input class="menu-btn" type="checkbox" id="menu-btn" /> <input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn">{% picto_from_name "menu" %}</label> <label class="menu-icon" for="menu-btn">{% picto_from_name "menu" %}</label>
@ -47,7 +36,20 @@
<li><a href="{% url 'ce_mois_ci' %}">Ce mois-ci</a></li> <li><a href="{% url 'ce_mois_ci' %}">Ce mois-ci</a></li>
</ul> </ul>
</div> </div>
</nav> <nav class="container-fluid">
<ul>
<li>
<a href="{% url 'home' %}" aria-label="Retour accueil">
<img src="{% static 'images/favicon.svg' %}" />
</a>
</li>
<li>
<a href="{% url 'home' %}" aria-label="Retour accueil">Les nuits énimagmatiques</a>
</li>
</ul>
</nav>
</div>
<main class="container{% block main-fluid %}{% endblock %}"> <main class="container{% block main-fluid %}{% endblock %}">
{% if messages %} {% if messages %}
{% for message in messages %} {% for message in messages %}