krichtof/config
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pimp view

Browse source 
wip
This commit is contained in:
Christophe Robillard 2024-09-22 20:50:55 +02:00
parent 90bae72b87
commit 4caf937019
3 changed files with 62 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
mood.rb
View file

@ -1,4 +1,5 @@
class Mood < ActiveRecord::Base class Mood < ActiveRecord::Base
default_scope { order(:recorded_at) }
validates_presence_of :mode validates_presence_of :mode
validates_presence_of :recorded_at validates_presence_of :recorded_at

2
mood_app.rb
View file

@ -9,7 +9,7 @@ class MoodApp < Sinatra::Base
set :database, { adapter: 'sqlite3', database: "mood-#{ENV['RACK_ENV']}.sqlite3" } set :database, { adapter: 'sqlite3', database: "mood-#{ENV['RACK_ENV']}.sqlite3" }
get '/' do get '/' do
@last_mood = Mood.order(recorded_at: :desc).first @last_mood = Mood.last
@mood_log = Mood.log @mood_log = Mood.log
erb :index erb :index
end end

58
views/index.erb
View file

@ -1,15 +1,25 @@
<style> <style>
body {
margin: 0px;
font: 1.8rem "Fira Sans", sans-serif;
}
main { main {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-wrap: wrap;
} }
.mode { .mode {
height: 100vh; height: 100vh;
flex: 1 527px;
} }
img { img {
width: auto;
height: 100%; height: 100%;
width:100%;
// min-width: 527px;
object-fit: contain;
} }
table { table {
empty-cells: hide; empty-cells: hide;
@ -23,25 +33,52 @@ tbody tr td {
border-radius: 50%; border-radius: 50%;
margin: 5px; margin: 5px;
} }
.tracker {
display: flex;
flex: 1 527px;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: lightgoldenrodyellow;
height: 100vh;
width: 100%;
}
.info h1 {
margin-bottom: 40px;
font-weight: 350;
}
.tracks {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
margin: 30px;
}
.week { .week {
display: flex; display: flex;
flex-direction: column;
justify-items: start;
flex-wrap: wrap;
margin-bottom: 20px;
} }
.day { .day {
background-color: white;
border: 1px; border: 1px;
margin: 1px; margin: 4px;
min-width: 10px; min-width: 20px;
min-height: 10px; min-height: 20px;
} }
.creatif { .creatif {
background-color: purple; background-color: red;
} }
.en-charge { .en-charge {
background-color: orange; background-color: orange;
} }
.frigo-vide { .frigo-vide {
background-color: brown; background-color: grey;
} }
.croisiere { .croisiere {
background-color: green; background-color: green;
@ -51,7 +88,11 @@ tbody tr td {
<div class="mode"> <div class="mode">
<img src="<%= @last_mood.mode %>.png"> <img src="<%= @last_mood.mode %>.png">
</div> </div>
<div class="yearlog"> <div class="tracker">
<div class="info">
<h1>Humeurs 2024</h1>
</div>
<div class="tracks">
<% @mood_log.each do |week| %> <% @mood_log.each do |week| %>
<div class="week"> <div class="week">
@ -65,4 +106,5 @@ tbody tr td {
</div> </div>
<% end %> <% end %>
</div> </div>
</div>
</main> </main>