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

pimp ui

Browse source
This commit is contained in:
Christophe Robillard 2026-01-08 13:36:58 +01:00
parent 9c7e61b55e
commit 7397c4b13d
5 changed files with 71 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/assets/images/en-charge-old.jpg Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 49 KiB

BIN
app/assets/images/en-charge.jpg
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 44 KiB

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

@ -16,10 +16,25 @@ body {
font-style: normal;
}
main {
height: 100vh;
}
.tracker {
align-content: center;
}
.logs {
height: 60vh;
overflow: scroll;
scrollbar-width: none;
}
.current-day {
background-color: white;
position: sticky;
top: 0
top: 0;
align-content: center;
}
.bar-afond {

13
app/javascript/controllers/mood_controller.js
View file

@ -1,16 +1,15 @@
import { Controller } from '@hotwired/stimulus'
export default class extends Controller {
static targets = [ "image", "day", "dayMobile", "mode" ]
static targets = [ "image", "modeDay", "modeDayMobile" ]
updateDayInfo(event) {
const image = this.imageTarget;
const day = this.dayTarget;
const dayMobile = this.dayMobileTarget;
const mode = this.modeTarget;
const modeDay = this.modeDayTarget;
const modeDayMobile = this.modeDayMobileTarget;
const modeDayContent = event.target.dataset.day + ' : ' + event.target.dataset.mode;
image.src = event.target.dataset.image;
day.textContent = event.target.dataset.day;
dayMobile.textContent = event.target.dataset.day;
mode.textContent = event.target.dataset.mode;
modeDayMobile.textContent = modeDayContent;
modeDay.textContent = modeDayContent;
}
}

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

@ -1,49 +1,57 @@
<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-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="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 ?</h1>
<div class="subtitle is-hidden-mobile" data-mood-target="day">Aujourd'hui</div>
<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="">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 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="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 %>
<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>
<% end %>
</div>
</div>
</section>
</main>