diff --git a/app/assets/stylesheets/app.css b/app/assets/stylesheets/app.css index 1e28c6c..272ea27 100644 --- a/app/assets/stylesheets/app.css +++ b/app/assets/stylesheets/app.css @@ -358,28 +358,39 @@ button.jour:focus-visible { /* ---------- 7. Page publique ---------- */ -/* Sur ordinateur, tout tient dans le premier écran : l'illustration à gauche, - l'humeur du jour et les derniers mois à droite. */ +/* Le nom de la personne en titre. Sur ordinateur, tout tient dans le premier écran : + l'illustration à gauche, le jour choisi et les derniers mois à droite. */ .public { max-width: var(--largeur-entete); margin: 0 auto; - padding: 0.5rem var(--gouttiere) 4rem; + padding: 0 var(--gouttiere) 4rem; display: grid; - gap: 1.75rem; + gap: 1.5rem; } + +.public-nom { + margin: 0; + font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4rem); + line-height: 1.05; + overflow-wrap: anywhere; +} + .carte-humeur-grande { width: 100%; max-width: 22rem; } -.public-qui { +.public-date { margin: 0; - font-size: 1.1rem; - color: var(--encre-douce); + font-size: 1.25rem; } +.public-date::first-letter { text-transform: uppercase; } .public-mode { - margin: 0.2rem 0 0.6rem; - font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.25rem); + margin: 0.15rem 0 0.5rem; + font-family: var(--serif); + font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); + line-height: 1.15; + text-wrap: balance; } .public-depuis { margin: 0; @@ -389,19 +400,29 @@ button.jour:focus-visible { .public-autre-jour .detail-statut:not(:empty) { margin-right: 0.75rem; } .public-historique h2 { - margin: 2.5rem 0 0.75rem; + margin: 2rem 0 0.75rem; font-size: 1.35rem; } .public-historique .annee-mois { margin-top: 1rem; } @media (min-width: 52rem) { .public { - grid-template-columns: min(20rem, 48vh) minmax(0, 1fr); - gap: 3.5rem; + grid-template-columns: min(19rem, 42vh) minmax(0, 1fr); + column-gap: 3.5rem; + row-gap: 1.25rem; align-items: start; - padding-top: 1rem; } - .carte-humeur-grande { max-width: none; } + .public-nom { grid-column: 1 / -1; } + .carte-humeur-grande { max-width: none; margin-top: 0.4rem; } +} + +/* Changement de jour : bref fondu du détail */ +@media (prefers-reduced-motion: no-preference) { + .apparition { animation: apparition 0.35s ease-out; } +} +@keyframes apparition { + from { opacity: 0.1; } + to { opacity: 1; } } /* ---------- 8. Page d'un jour (journal) ---------- */ diff --git a/app/helpers/moods_helper.rb b/app/helpers/moods_helper.rb index 759cad2..729a83e 100644 --- a/app/helpers/moods_helper.rb +++ b/app/helpers/moods_helper.rb @@ -38,6 +38,11 @@ module MoodsHelper l(date, format: "%A %-d %B %Y") end + # « de robi », mais « d’Anne » : élision devant une voyelle ou un h muet + def de_nom(nom) + nom.match?(/\A[aeiouyhàâéèêëîïôöùûü]/i) ? "d’#{nom}" : "de #{nom}" + end + def libelle_statut(status) case status when :guessed then "supposé" diff --git a/app/javascript/controllers/calendrier_controller.js b/app/javascript/controllers/calendrier_controller.js index f0f62d1..3b6188a 100644 --- a/app/javascript/controllers/calendrier_controller.js +++ b/app/javascript/controllers/calendrier_controller.js @@ -5,8 +5,8 @@ import { Controller } from "@hotwired/stimulus" // chaque cible est facultative. // Au clavier, les flèches se déplacent d'un jour (haut, bas) ou d'une semaine (gauche, droite). export default class extends Controller { - static targets = [ "carte", "image", "date", "qui", "mode", "statut", "depuis", "retour", "journal", "lien" ] - static values = { nom: String, aujourdhui: String, aujourdhuiMode: String, aujourdhuiImage: String, aujourdhuiCouleur: String } + static targets = [ "carte", "image", "date", "mode", "statut", "depuis", "retour", "journal", "lien", "anime" ] + static values = { aujourdhui: String, aujourdhuiDate: String, aujourdhuiMode: String, aujourdhuiImage: String, aujourdhuiCouleur: String } connect() { const selectionne = this.element.querySelector(".jour[aria-pressed='true']") @@ -47,6 +47,7 @@ export default class extends Controller { } jour.setAttribute("aria-pressed", "true") jour.tabIndex = 0 + this.animer() // Sur la page publique, aujourd'hui montre la dernière tasse posée et depuis quand if (jour.dataset.day === this.aujourdhuiValue && this.hasDepuisTarget) { @@ -60,8 +61,7 @@ export default class extends Controller { this.modeTarget.textContent = mode || "Pas de tasse posée" this.statutTarget.textContent = mode ? (statut || "") : "" - if (this.hasDateTarget) this.dateTarget.textContent = date - if (this.hasQuiTarget) this.quiTarget.textContent = `Le ${date} chez ${this.nomValue}` + this.dateTarget.textContent = date if (this.hasDepuisTarget) this.depuisTarget.hidden = true if (this.hasRetourTarget) this.retourTarget.hidden = false @@ -81,9 +81,18 @@ export default class extends Controller { this.carteTarget.style.setProperty("--humeur", this.aujourdhuiCouleurValue) this.imageTarget.src = this.aujourdhuiImageValue this.modeTarget.textContent = this.aujourdhuiModeValue - this.quiTarget.textContent = `Aujourd’hui chez ${this.nomValue}` + this.dateTarget.textContent = this.aujourdhuiDateValue this.depuisTarget.hidden = false this.retourTarget.hidden = true history.replaceState({}, "", window.location.pathname) } + + // Un bref fondu signale que le détail a changé, même quand le mode est le même + animer() { + this.animeTargets.forEach((element) => { + element.classList.remove("apparition") + void element.offsetWidth + element.classList.add("apparition") + }) + } } diff --git a/app/views/moods/index.html.erb b/app/views/moods/index.html.erb index 922a060..46ed02c 100644 --- a/app/views/moods/index.html.erb +++ b/app/views/moods/index.html.erb @@ -13,10 +13,10 @@