timeline wotking, renmed left column

app/views/layouts/_mobile_menu.haml

@@ -1,4 +1,4 @@
-#mobile-menu.absolute.top-0.left-0.w-full.hidden.z-10
+#mobile-menu.absolute.top-0.leaving-0.w-full.hidden.z-10
   .p-5.bg-white.border.rounded.shadow-sm
     .flex.items-center.justify-between.mb-4
       %div

app/views/members/edit.html.haml

@@ -15,8 +15,8 @@
           .text-red-700= f.error_notification
           = f.input :name
           .grid.grid-cols-2.gap-10
-            = f.input :arrived
-            = f.input :left
+            = f.input :arriving
+            = f.input :leaving
           .flex.h-16.mt-2.col-span-2
             = image_tag(@member.picture_url , class: "align-middle mr-4") if @member.picture?
             .w-full= f.input :picture , as: :file ,

app/views/members/timeline.haml

@@ -1,9 +0,0 @@
-= paginate @members
-
-.flex.flex-col.mx-10
-  - @members.each_with_index do |member , index|
-    .flex
-      .w-60= member.name
-      .mx-1= index + 1
-      .mx-1= distance_of_time_in_words_to_now member.arrived
-      .name= member.left - member.arrived

app/views/pictures/_picture.haml

@@ -9,5 +9,5 @@
         "data-glightbox" => "title: #{picture.text}" } do
       = picture_for( picture , "absolute top-0 left-0 w-full h-full inset-0 object-cover hover:scale-105 ease-in duration-500")
   -unless picture.text.blank?
-    .absolute.bottom-0.left-0.right-0.px-4.pb-1.bg-gray-800.opacity-70.transition-colors.group-hover:bg-black.group-hover:opacity-100
+    .absolute.bottom-0.leaving-0.right-0.px-4.pb-1.bg-gray-800.opacity-70.transition-colors.group-hover:bg-black.group-hover:opacity-100
       .text-center.mt-2.text-white= picture.text

app/views/timeline/index.haml

@@ -0,0 +1,20 @@
+= paginate @members
+.flex.flex-col.mx-10
+  .flex
+    .w-60 Weekly
+    - (0..12).each do |week|
+      %div{class: bg_for(week) , style: "width: #{7*day_pixels}px;"}
+        = (Date.today.at_beginning_of_month + week.weeks).day.to_s + "."
+        = (Date.today.at_beginning_of_month + week.weeks).month
+  .flex
+    .w-60 Weekly
+    - weekly.each do |week , amount|
+      %div{class: bg_for(week) , style: "width: #{7*day_pixels}px;"}= amount
+  - @members.each_with_index do |member , index|
+    .flex
+      .w-60= member.name
+      .bg-white{style: "width: #{day_pixels*started_days(member)}px;"}
+      .flex.inline.justify-between.bg-yellow-100{style: "width: #{day_pixels*stay_days(member)}px;"}
+        %div= small_date(member.arriving)
+        %div= small_date(member.leaving)
+      .name