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; font-style: normal;
} }
main {
height: 100vh;
}
.tracker {
align-content: center;
}
.logs {
height: 60vh;
overflow: scroll;
scrollbar-width: none;
}
.current-day { .current-day {
background-color: white; background-color: white;
position: sticky; position: sticky;
top: 0 top: 0;
align-content: center;
} }
.bar-afond { .bar-afond {

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

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

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

@ -1,16 +1,21 @@
<main data-controller="mood" class="columns m-auto"> <main data-controller="mood" class="columns m-auto">
<section class="is-hidden-mobile mode section column 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") %> <%= image_tag(@mode + ".jpg", "data-mood-target": "image") %>
</figure>
</section> </section>
<section class="is-hidden-tablet section column m-auto current-day"> </div>
<h1 class="title is-1 is-spaced">Comment ça KLUK ?</h1> <section class="section column has-background-primary-light is-flex is-flex-direction-column is-justify-content-space-around">
<div class="block subtitle" data-mood-target="mode"><%= @mode %></div> <div class="is-hidden-mobile mb-4">
<div class="block subtitle" data-mood-target="dayMobile">Aujourd'hui</div> <div class="title is-3" data-mood-target="modeDay">Aujourd'hui</div>
</section> </div>
<section class="tracker section column has-background-primary-light my-0 mx-auto"> <div class="tracker">
<h1 class="title is-1 mt-6 is-hidden-mobile">Comment ça KLUK ?</h1> <div class="legend is-flex is-flex-wrap-wrap mb-5">
<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="is-flex is-align-items-center mr-4">
<div class="bar-frigo mr-1"></div> <div class="bar-frigo mr-1"></div>
<div class="">Triste</div> <div class="">Triste</div>
@ -32,6 +37,7 @@
<div class="">A fond</div> <div class="">A fond</div>
</div> </div>
</div> </div>
<div class="logs">
<div class="is-flex is-flex-wrap-wrap"> <div class="is-flex is-flex-wrap-wrap">
<% @mood_log.each do |week| %> <% @mood_log.each do |week| %>
<div class="is-flex is-flex-direction-column is-flex-wrap-wrap mb-3"> <div class="is-flex is-flex-direction-column is-flex-wrap-wrap mb-3">
@ -45,5 +51,7 @@
</div> </div>
<% end %> <% end %>
</div> </div>
</div>
</div>
</section> </section>
</main> </main>