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

<main data-controller="mood" class="columns m-auto">
  <div class="current-day column">
    <section class="m-4">
      <h1 class="title is-3 is-spaced">Comment ça KLUK ?</h1>
      <div class="is-hidden-tablet mb-4">
        <div class="" data-mood-target="modeDayMobile">Aujourd'hui</div>
      </div>
      <figure class="image is-hidden-mobile has-ratio ">
        <%= image_tag(@mode + ".jpg", "data-mood-target": "image") %>
      </figure>
    </section>
  </div>
  <section class="section column has-background-primary-light is-flex is-flex-direction-column is-justify-content-space-around">
    <div class="is-hidden-mobile mb-4">
      <div class="title is-3" data-mood-target="modeDay">Aujourd'hui</div>
    </div>
    <div class="tracker">
      <div class="legend is-flex is-flex-wrap-wrap mb-5">
        <div class="is-flex is-align-items-center mr-4">
          <div class="bar-frigo mr-1"></div>
          <div class="">Triste</div>
        </div>
        <div class="is-flex is-align-items-center mr-4">
          <div class="bar-en-charge mr-1"></div>
          <div class="">En charge</div>
        </div>
        <div class="is-flex is-align-items-center mr-4">
          <div class="bar-croisiere mr-1"></div>
          <div class="">Croisiere</div>
        </div>
        <div class="is-flex is-align-items-center mr-4">
          <div class="bar-creatif mr-1"></div>
          <div>Creatif</div>
        </div>
        <div class="is-flex is-align-items-center mr-4">
          <div class="bar-afond mr-1"></div>
          <div class="">A fond</div>
        </div>
      </div>
      <div class="logs">
        <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>
  </section>
</main>