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

show legend based on custom modes

Browse source
This commit is contained in:
Christophe Robillard 2026-03-15 19:26:52 +01:00
parent 820d31b3e5
commit 2ea386e557
3 changed files with 8 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/assets/stylesheets/kluk.css
View file

@ -42,32 +42,7 @@ main {
align-content: center;
}
.bar-afond {
background: black;
width: 10px;
height: 10px;
}
.bar-creatif {
background: red;
width: 10px;
height: 10px;
}
.bar-frigo {
background: gray;
width: 10px;
height: 10px;
}
.bar-croisiere {
background: green;
width: 10px;
height: 10px;
}
.bar-en-charge {
background: orange;
.bar {
width: 10px;
height: 10px;
}

1
app/models/user.rb
View file

@ -2,6 +2,7 @@ class User < ApplicationRecord
has_secure_password
has_many :sessions, dependent: :destroy
has_many :moods, -> { order "recorded_at" }
has_many :modes
normalizes :email_address, with: ->(e) { e.strip.downcase }

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

@ -12,26 +12,12 @@
<div class="is-flex is-align-items-center mr-4">
<div class=""><strong>Légende</strong></div>
</div>
<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>
<% @user.modes.each do |mode| %>
<div class="is-flex is-align-items-center mr-4">
<div class="bar mr-1" style="<%= style_for_mode(mode) %>"></div>
<div class=""><%= mode.label %></div>
</div>
<% end %>
</div>
<div class="container mb-4 p-3 has-background-white day-info">
<div class="title is-4">