app.kluk.fr/app/views/moods/index.html.erb

<main data-controller="mood" class="columns m-auto">
  <section class="is-hidden-mobile mode section column m-auto">
    <%= image_tag(@mode + ".jpg", "data-mood-target": "image") %>
  </section>
  <section class="is-hidden-desktop section column m-auto current-day">
    <h1 class="title is-1 is-spaced">Comment ça KLUK ?</h1>
    <div class="block subtitle" data-mood-target="mode"><%= @mode %></div>
    <div class="block subtitle" data-mood-target="day">Aujourd'hui</div>
  </section>
  <section class="tracker section column has-background-primary-light my-0 mx-auto">
    <h1 class="title is-1 mt-6 is-hidden-mobile">Comment ça KLUK aujourd'hui ?</h1>
    <div class="subtitle is-hidden-mobile" data-mood-target="day">Aujourd'hui</div>
    <div>
      <div class="is-flex is-flex-wrap-wrap">
        <% @mood_log.each do |week| %>
          <div class="is-flex is-flex-direction-column is-flex-wrap-wrap mb-3">
            <% week.each do |d| %>
              <% if d[1] %>
                <div data-image="<%= asset_path(d[1] + ".jpg") %>" data-mode="<%= d[1] %>" data-day="<%= d[0] %>" data-action="click->mood#updateDayInfo mouseover->mood#updateDayInfo mouseleave->mood#updateDayInfo" title="<%= d[0] %> : <%= d[1] %>" class="day <%= d[1] %>"></div>
              <% else %>
                <div class="day"></div>
              <% end %>
            <% end %>
          </div>
        <% end %>
      </div>
    </div>
    <div class="level m-auto">
      <div class="level-item has-text-centered">
          <span class="bar-frigo"></span>
          <div class="bar-explain">Triste</div>
      </div>
      <div class="level-item has-text-centered">
        <span class="bar-en-charge"></span>
        <div class="bar-explain">En charge</div>
      </div>
      <div class="level-item has-text-centered">
        <span class="bar-croisiere"></span>
        <div class="bar-explain">Croisiere</div>
      </div>
      <div class="level-item has-text-centered">
        <span class="bar-creatif"></span>
        <div class="bar-explain">Créatif</div>
      </div>
      <div class="level-item has-text-centered">
        <span class="bar-afond"></span>
        <div class="bar-explain">A fond</div>
      </div>
    </div>
  </section>
</main>