From 0db45d58340e5034c5362128274ab4f1e54df5af Mon Sep 17 00:00:00 2001
From: Torsten <torsten@villataika.fi>
Date: Sat, 10 Jun 2023 20:10:05 +0300
Subject: [PATCH] change timeline to tables for responsiveness

---
 app/helpers/timeline_helper.rb |  2 +-
 app/views/timeline/index.haml  | 50 ++++++++++++++++++++--------------
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/app/helpers/timeline_helper.rb b/app/helpers/timeline_helper.rb
index 0036bef..79a8038 100644
--- a/app/helpers/timeline_helper.rb
+++ b/app/helpers/timeline_helper.rb
@@ -30,7 +30,7 @@ module TimelineHelper
     data = {}
     week = 0
     while( week < @weeks ) do
-      data[ week ] = 0
+      data[ week ] = -1
       start_week = Date.today.at_beginning_of_month + week.weeks
       end_week = Date.today.at_beginning_of_month + (week + 1).weeks
       @members.each do |mem|
diff --git a/app/views/timeline/index.haml b/app/views/timeline/index.haml
index f792983..01f67cd 100644
--- a/app/views/timeline/index.haml
+++ b/app/views/timeline/index.haml
@@ -1,20 +1,30 @@
-.flex.flex-col.mx-10
-  .flex
-    - (5..25).each do |week|
-      .mx-2.mb-2{class: week == @weeks ? "bg-orange-100" : "bg-white"}
-        =link_to week.to_s , timeline_path( weeks: week)
-  .flex
-    - (0...@weeks).each do |week|
-      %div{class: bg_for(week) , style: "width: #{week_pixels}px;"}
-        = (Date.today.at_beginning_of_month + week.weeks).day.to_s + "."
-        = (Date.today.at_beginning_of_month + week.weeks).month
-  .flex
-    - weekly.each do |week , amount|
-      %div{class: bg_for(week) , style: "width: #{week_pixels}px;"}= amount
-  - @members.each_with_index do |member , index|
-    .flex
-      .bg-white{style: "width: #{day_pixels*started_days(member)}px;"}
-      .flex.pt-1.inline.justify-between{class: bg_for(index) ,style: "width: #{day_pixels*stay_days(member)}px;"}
-        %div= small_date(member.arriving) + " " + member.name
-        %div= small_date(member.leaving)
-      .name
+.mx-10
+  %table.table-fixed.w-full
+    %tr
+      - ((@weeks - 5)..(@weeks + 5)).each do |week|
+        %td.mx-2.mb-2{colspan: 4 , class: week == @weeks ? "bg-orange-100" : "bg-white"}
+          =link_to week.to_s , timeline_path( weeks: week)
+    %tr
+      - (0...@weeks*7).each do |week|
+        %td{width: 100.0 / (@weeks * 7)  }
+    %tr
+      - (0...@weeks).each do |week|
+        %td{colspan: 7 , class: bg_for(week + 2)  }
+          = small_date(Date.today.at_beginning_of_month + week.weeks)
+    %tr
+      - weekly.each do |week , amount|
+        %td{colspan: 7, class: bg_for(week + 2) , style: "width: #{week_pixels}px;"}= amount
+
+    - @members.each_with_index do |member , index|
+      %tr{class: bg_for(index)}
+        - if( (days = started_days(member)) > 0)
+          %td.bg-white{colspan: started_days(member)}
+        - if( (days = stay_days(member)) < 14)
+          %td{colspan: days}
+            = small_date(member.arriving)
+            = member.name
+            = small_date(member.leaving)
+        -else
+          %td.py-1{colspan: 4,}= small_date(member.arriving)
+          %td{colspan: days - 8}= member.name
+          %td{colspan: 4}= small_date(member.leaving)