Jean-Marie Favreau
parent
9b75172a3d
commit
2fafc092a2
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -39,7 +39,7 @@
|
||||
{% endwith %}
|
||||
</div>
|
||||
<div class="right">
|
||||
{% with day|shift_day:1 as next_day %}
|
||||
{% with day|shift_day:1 as next_day %}
|
||||
<a role="button" href="{% url 'day_view' next_day.year next_day.month next_day.day %}?{{ filter.get_url }}">suivant
|
||||
{% picto_from_name "chevron-right" %}
|
||||
</a>
|
||||
|
||||
@ -37,7 +37,7 @@
|
||||
{% picto_from_name "chevron-left" %} précédent</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
<a role="button" href="{% url 'month_view' calendar.next_month.year calendar.next_month.month %}?{{ filter.get_url }}">suivant
|
||||
<a role="button" href="{% url 'month_view' calendar.next_month.year calendar.next_month.month %}?{{ filter.get_url }}">suivant
|
||||
{% picto_from_name "chevron-right" %}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -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">
|
||||
<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 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>
|
||||
</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">
|
||||
<ul>
|
||||
<li><a href="{% url 'view_all_tags' %}">Toutes les étiquettes</a></li>
|
||||
<li><a href="{% url 'mentions_legales' %}">Mentions légales</a></li>
|
||||
</ul>
|
||||
<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>
|
||||
{% else %}
|
||||
<li><a href="{% url 'login' %}?next={% url 'view_all_events' %}">connexion</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
|
||||
<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 '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>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user