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

Amélioration de la présentation, notamment sur smartphone

Browse Source 
Fix #10
This commit is contained in:
Jean-Marie Favreau 2023-11-29 20:11:02 +01:00
parent 9b75172a3d
commit 2fafc092a2
4 changed files with 197 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,6 +13,10 @@ $enable-responsive-typography: true;
// Import Pico
@import "./pico/pico";
[role="button"] {
margin: 0.1em 0;
}
:root {
--spacing: 0.4rem;
@ -222,9 +226,20 @@ article.day>ul {
padding: 0;
display: flex;
flex-direction: row;
gap: 0.2em;
div {
flex: auto;
width: 0;
flex: 1 1 0px;
a {
width: 100%;
}
@media only screen and (min-width: 992px) {
a {
width: 10em;
}
}
}
}
@ -403,3 +418,143 @@ $yellow-900: #616918 !default;
margin-left: 0;
padding-left: 3.7em;
}
nav>div {
display: flex;
justify-content: center;
align-items: center;
}
nav#main {
align-content: flex-start;
ul, div {
margin: 0 0 auto 0;
}
overflow: hidden;
/* header */
.header {
z-index: 3;
text-align: right;
display: block;
}
.header ul {
margin: 0.2em 0 0.35em 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.header ul li {
clear: both;
float: right;
padding: .4em .8em;
}
.header .logo {
display: block;
float: left;
font-size: 2em;
padding: 10px 20px;
text-decoration: none;
}
/* menu */
.header .menu {
clear: both;
max-height: 0;
transition: max-height .2s ease-out;
display: block;
float: right;
}
/* menu icon */
.header .menu-icon {
cursor: pointer;
display: block;
float: right;
padding: 28px 20px;
position: relative;
user-select: none;
}
.header .menu-icon .navicon {
background: #333;
display: block;
height: 2px;
position: relative;
transition: background .2s ease-out;
width: 18px;
}
.header .menu-icon .navicon:before,
.header .menu-icon .navicon:after {
background: #333;
content: '';
display: block;
height: 100%;
position: absolute;
transition: all .2s ease-out;
width: 100%;
}
.header .menu-icon .navicon:before {
top: 5px;
}
.header .menu-icon .navicon:after {
top: -5px;
}
/* menu btn */
.header .menu-btn {
display: none;
}
.header .menu-btn:checked ~ .menu {
max-height: 240px;
}
.header .menu-btn:checked ~ .menu-icon .navicon {
background: transparent;
}
.header .menu-btn:checked ~ .menu-icon .navicon:before {
transform: rotate(-45deg);
}
.header .menu-btn:checked ~ .menu-icon .navicon:after {
transform: rotate(45deg);
}
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before,
.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
top: 0;
}
@media only screen and (min-width: 992px) {
.header li {
float: left;
}
.header .menu {
clear: none;
float: right;
max-height: none;
}
.header .menu-icon {
display: none;
}
.header ul li {
clear: none;
float: none;
display: inline-block;
padding: var(--nav-element-spacing-vertical) var(--nav-element-spacing-horizontal);
}
}
}

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

@ -25,7 +25,7 @@
{% load event_extra %}
{% load utils_extra %}
<body>
<nav class="container-fluid">
<nav id="main" class="container-fluid">
<ul>
<li>
<a href="{% url 'home' %}" aria-label="Retour accueil">
@ -37,34 +37,16 @@
</li>
</ul>
<ul>
<li>
<a href="{% url 'event_search' %}">Rechercher {% picto_from_name "search" %}</a>
</li>
<li>
<details role="list" dir="rtl">
<summary aria-haspopup="listbox" role="link">Maintenant</summary>
<ul role="listbox">
<div class="header">
<input class="menu-btn" type="checkbox" id="menu-btn" />
<label class="menu-icon" for="menu-btn">{% picto_from_name "menu" %}</label>
<ul class="menu">
<li><a href="{% url 'event_search' %}">Rechercher {% picto_from_name "search" %}</a></li>
<li><a href="{% url 'aujourdhui' %}">Aujourd'hui</a></li>
<li><a href="{% url 'cette_semaine' %}">Cette semaine</a></li>
<li><a href="{% url 'ce_mois_ci' %}">Ce mois-ci</a></li>
</ul>
</details>
</li>
<li>
<details role="list" dir="rtl">
<summary aria-haspopup="listbox" role="link">Événements</summary>
<ul role="listbox">
<li><a href="{% url 'event_import_form' %}">Importer</a></li>
<li><a href="{% url 'add_event' %}">Créer</a></li>
<li><a>Exporter</a></li>
{% if user.is_authenticated %}
<li><a href="{% url 'view_all_events' %}">Gérer</a></li>
{% endif %}
</ul>
</details>
</li>
</ul>
</div>
</nav>
<main class="container{% block main-fluid %}{% endblock %}">
{% if messages %}
@ -78,20 +60,34 @@
<footer class="container{% block footer-fluid %}{% endblock %}">
<div class="grid">
<div>
<h3>Informations</h3>
<ul>
<li><a href="{% url 'view_all_tags' %}">Toutes les étiquettes</a></li>
<li><a href="{% url 'mentions_legales' %}">Mentions légales</a></li>
<li><a>Exporter</a></li>
</ul>
</div>
<div>
<h3>Contribuer</h3>
<ul>
<li><a href="{% url 'event_import_form' %}">Importer un événement</a></li>
<li><a href="{% url 'add_event' %}">Créer un événement</a></li>
</ul>
</div>
<div>
<h3>Administrer</h3>
<ul>
{% if user.is_authenticated %}
<li><a href="{% url 'admin:index' %}">administration</a></li>
<li><a href="{% url 'logout' %}?next={% url 'home' %}">déconnexion</a></li>
<li>vous êtes connecté(e) en tant que {{ user }}</li>
<li><a href="{% url 'view_all_events' %}">Gérer les événements</a></li>
<li><a href="{% url 'admin:index' %}">Administration</a></li>
<li><a href="{% url 'logout' %}?next={% url 'home' %}">Déconnexion</a></li>
<li>Vous êtes connecté(e) en tant que {{ user }}</li>
{% else %}
<li><a href="{% url 'login' %}?next={% url 'view_all_events' %}">connexion</a></li>
<li><a href="{% url 'login' %}?next={% url 'view_all_events' %}">Connexion</a></li>
{% endif %}
</ul>
</div>
</div>
</footer>