62 lines
2.7 KiB
Text
62 lines
2.7 KiB
Text
<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-direction-row is-flex-wrap-wrap mb-3">
|
|
<% @history.each do |month| %>
|
|
<div class="mr-3">
|
|
<div> <%= I18n.l(month[:month], format: "%B %Y").capitalize %></div>
|
|
<div class="is-flex is-flex-wrap-wrap">
|
|
<% month[:weeks].each do |week| %>
|
|
<div class="is-flex is-flex-direction-column is-flex-wrap-wrap mb-3">
|
|
<% week.each do |mood| %>
|
|
<% mode = mood[:mode] || mood[:guess] || "unknown" %>
|
|
<div data-image="<%= asset_path(mode + ".jpg") %>" data-mode="<%= mode %>" data-day="<%= l mood[:recorded_at] %>" data-action="click->mood#updateDayInfo mouseover->mood#updateDayInfo mouseleave->mood#removeFeedback" title="<%= mood[:recorded_at] %> : <%= mode %>" class="day <%= mode %>"></div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
<div id="end"></>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|