From 2fafc092a20fbfd355f7bee05838f1932060bfea Mon Sep 17 00:00:00 2001 From: Jean-Marie Favreau Date: Wed, 29 Nov 2023 20:11:02 +0100 Subject: [PATCH] =?UTF-8?q?Am=C3=A9lioration=20de=20la=20pr=C3=A9sentation?= =?UTF-8?q?,=20notamment=20sur=20smartphone?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fix #10 --- src/agenda_culturel/static/style.scss | 157 +++++++++++++++++- .../templates/agenda_culturel/page-day.html | 2 +- .../templates/agenda_culturel/page-month.html | 2 +- .../templates/agenda_culturel/page.html | 82 +++++---- 4 files changed, 197 insertions(+), 46 deletions(-) diff --git a/src/agenda_culturel/static/style.scss b/src/agenda_culturel/static/style.scss index 02b2da4..e27a203 100644 --- a/src/agenda_culturel/static/style.scss +++ b/src/agenda_culturel/static/style.scss @@ -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); + } + } +} \ No newline at end of file diff --git a/src/agenda_culturel/templates/agenda_culturel/page-day.html b/src/agenda_culturel/templates/agenda_culturel/page-day.html index 86da489..0f24715 100644 --- a/src/agenda_culturel/templates/agenda_culturel/page-day.html +++ b/src/agenda_culturel/templates/agenda_culturel/page-day.html @@ -39,7 +39,7 @@ {% endwith %}
- {% with day|shift_day:1 as next_day %} + {% with day|shift_day:1 as next_day %} suivant {% picto_from_name "chevron-right" %} diff --git a/src/agenda_culturel/templates/agenda_culturel/page-month.html b/src/agenda_culturel/templates/agenda_culturel/page-month.html index 90708ab..4f29e89 100644 --- a/src/agenda_culturel/templates/agenda_culturel/page-month.html +++ b/src/agenda_culturel/templates/agenda_culturel/page-month.html @@ -37,7 +37,7 @@ {% picto_from_name "chevron-left" %} précédent
- suivant + suivant {% picto_from_name "chevron-right" %}
diff --git a/src/agenda_culturel/templates/agenda_culturel/page.html b/src/agenda_culturel/templates/agenda_culturel/page.html index 1bcdb80..07ea533 100644 --- a/src/agenda_culturel/templates/agenda_culturel/page.html +++ b/src/agenda_culturel/templates/agenda_culturel/page.html @@ -25,7 +25,7 @@ {% load event_extra %} {% load utils_extra %} -