put legend on top of the log
This commit is contained in:
parent
f328f3a10d
commit
4e25f9936a
2 changed files with 35 additions and 41 deletions
|
|
@ -52,10 +52,6 @@ body {
|
|||
height: 10px;
|
||||
}
|
||||
|
||||
.bar-explain {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.day {
|
||||
border: 1px;
|
||||
margin: 4px;
|
||||
|
|
|
|||
|
|
@ -2,50 +2,48 @@
|
|||
<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">
|
||||
<section class="is-hidden-tablet 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>
|
||||
<div class="block subtitle" data-mood-target="dayMobile">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>
|
||||
<h1 class="title is-1 mt-6 is-hidden-mobile">Comment ça KLUK ?</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 class="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="">Tristoune</div>
|
||||
</div>
|
||||
<div class="is-flex is-align-items-center mr-4">
|
||||
<div class="bar-en-charge mr-1"></div>
|
||||
<div class="">En chargement</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="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 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>
|
||||
</section>
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue