krichtof/app.kluk.fr
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

display mood text for mobile

Browse source
This commit is contained in:
Christophe Robillard 2026-01-07 16:44:27 +01:00
parent 415abbe70f
commit d2d71468b4
2 changed files with 7 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
app/javascript/controllers/mood_controller.js
View file

@ -1,12 +1,14 @@
import { Controller } from '@hotwired/stimulus' import { Controller } from '@hotwired/stimulus'
export default class extends Controller { export default class extends Controller {
static targets = [ "image", "info" ] static targets = [ "image", "day", "mode" ]
updateDayInfo(event) { updateDayInfo(event) {
const image = this.imageTarget; const image = this.imageTarget;
const infoDay = this.infoTarget; const day = this.dayTarget;
const mode = this.modeTarget;
image.src = event.target.dataset.image; image.src = event.target.dataset.image;
infoDay.textContent = event.target.dataset.day; day.textContent = event.target.dataset.day;
mode.textContent = event.target.dataset.mode;
} }
} }

4
app/views/moods/index.html.erb
View file

@ -3,11 +3,11 @@
<%= image_tag(@mode + ".jpg", "data-mood-target": "image") %> <%= image_tag(@mode + ".jpg", "data-mood-target": "image") %>
</section> </section>
<section class="is-hidden-desktop section column m-auto current-day"> <section class="is-hidden-desktop section column m-auto current-day">
<h1><%= @mode %></h1> <div class="subtitle" data-mood-target="mode"><%= @mode %></div>
</section> </section>
<section class="tracker section column has-background-primary-light my-0 mx-auto"> <section class="tracker section column has-background-primary-light my-0 mx-auto">
<h1 class="title is-1 mt-6">Comment ça KLUK aujourd'hui ?</h1> <h1 class="title is-1 mt-6">Comment ça KLUK aujourd'hui ?</h1>
<div class="subtitle" data-mood-target="info">Aujourd'hui</div> <div class="subtitle" data-mood-target="day">Aujourd'hui</div>
<div> <div>
<div class="is-flex is-flex-wrap-wrap"> <div class="is-flex is-flex-wrap-wrap">
<% @mood_log.each do |week| %> <% @mood_log.each do |week| %>