Ajustements de mise en page

This commit is contained in:
Jean-Marie Favreau 2025-03-09 21:16:57 +01:00
parent f1ec525c5f
commit a8a40ae72c
2 changed files with 16 additions and 1 deletions

View File

@ -8,19 +8,25 @@ function displayButtons() {
grid = agenda.querySelector(".grid"); grid = agenda.querySelector(".grid");
buttonLeft = navigation.querySelector(".slider-button-inside.button-left"); buttonLeft = navigation.querySelector(".slider-button-inside.button-left");
buttonRight = navigation.querySelector(".slider-button-inside.button-right"); buttonRight = navigation.querySelector(".slider-button-inside.button-right");
buttonPageLeft = navigation.querySelector(".slider-button-page.button-left");
buttonPageRight = navigation.querySelector(".slider-button-page.button-right");
if (agenda.offsetWidth < grid.offsetWidth) { if (agenda.offsetWidth < grid.offsetWidth) {
if (agenda.scrollLeft < delta) { if (agenda.scrollLeft < delta) {
buttonLeft.classList.add("hidden"); buttonLeft.classList.add("hidden");
buttonPageLeft.classList.remove("hidden");
} }
else { else {
buttonLeft.classList.remove("hidden"); buttonLeft.classList.remove("hidden");
buttonPageLeft.classList.add("hidden");
} }
if (agenda.scrollLeft + agenda.offsetWidth - grid.offsetWidth >= -2) { if (agenda.scrollLeft + agenda.offsetWidth - grid.offsetWidth >= -2) {
buttonRight.classList.add("hidden"); buttonRight.classList.add("hidden");
buttonPageRight.classList.remove("hidden");
} }
else { else {
buttonRight.classList.remove("hidden"); buttonRight.classList.remove("hidden");
buttonPageRight.classList.add("hidden");
} }
@ -28,6 +34,8 @@ function displayButtons() {
else { else {
buttonLeft.classList.add("hidden"); buttonLeft.classList.add("hidden");
buttonRight.classList.add("hidden"); buttonRight.classList.add("hidden");
buttonPageLeft.classList.remove("hidden");
buttonPageRight.classList.remove("hidden");
} }
} }

View File

@ -461,6 +461,7 @@ header .title {
position: sticky; position: sticky;
top: 0; top: 0;
display: grid; display: grid;
height: fit-content;
grid-template-columns: fit-content(6em) 3fr fit-content(6em); grid-template-columns: fit-content(6em) 3fr fit-content(6em);
@ -481,6 +482,12 @@ header .title {
margin: 0; margin: 0;
} }
@media only screen and (min-width: 450px) { @media only screen and (min-width: 450px) {
hgroup {
font-size: 80%;
}
}
@media only screen and (min-width: 250px) {
.title { .title {
grid-column: 2/3; grid-column: 2/3;
@ -1545,7 +1552,7 @@ img.preview {
.a-venir { .a-venir {
#navigation { #navigation {
height: 4.5em; /*height: 4.5em;*/
z-index: 11; z-index: 11;
padding-top: 1em; padding-top: 1em;
.title.deuxlignes { .title.deuxlignes {