スケジュール画面のモバイル対応

app/controllers/plans_controller.rb

@@ -162,9 +162,9 @@ def set_attributes_for_turbo_stream
 
     @row, @track_list = catch(:abort) do
       @schedule_table.days.each do |day|
-        table = @schedule_table[day]
-        table.rows.each do |row|
-          throw :abort, [row, table.track_list] if row.schedules.map(&:id).include?(target_schedule_id)
+        @table = @schedule_table[day]
+        @table.rows.each do |row|
+          throw :abort, [row, @table.track_list] if row.schedules.map(&:id).include?(target_schedule_id)
         end
       end
     end

app/models/schedule/table.rb

@@ -2,9 +2,10 @@
 
 class Schedule
   class Table
-    attr_reader :track_list, :rows
+    attr_reader :track_list, :rows, :day
 
-    def initialize(schedules)
+    def initialize(schedules, day = nil)
+      @day = day
       @track_list = schedules.map(&:track).uniq.sort_by(&:position).map(&:name)
 
       grouped_schedules = schedules.group_by do |s|

app/models/schedule/tables.rb

@@ -6,8 +6,8 @@ class Tables
 
     def initialize(schedules)
       @schedules = schedules
-      @map = @schedules.group_by { _1.start_at.strftime(DATE_FORMAT) }.transform_values do |v|
-        Schedule::Table.new(v)
+      @map = @schedules.group_by { _1.start_at.strftime(DATE_FORMAT) }.to_h do |k, v|
+        [k, Schedule::Table.new(v, k)]
       end
     end
 

app/views/plans/update.turbo_stream.erb

@@ -1,3 +1,8 @@
 <%= turbo_stream.replace @row.turbo_stream_id do %>
   <%= render partial: 'schedules/table_row', locals: { row: @row, plan: @plan, track_list: @track_list} %>
 <% end %>
+<%= turbo_stream.update "mobile-table-#{@table.day}" do %>
+  <% @table.rows.each do |row| %>
+    <%= render partial: 'schedules/mobile_table_row', locals: { row: row, plan: @plan, track_list: @table.track_list } %>
+  <% end %>
+<% end %>

app/views/schedules/_card.html.erb

@@ -1,6 +1,6 @@
 <%= turbo_frame_tag schedule do %>
   <div class="flex h-full">
-    <div class="w-full min-w-[400px] h-fit p-4 shadow-[0_1px_2px_0_rgba(3,3,2,0.3)] rounded-md bg-white">
+    <div class="w-full sm:min-w-[400px] h-fit p-4 shadow-[0_1px_2px_0_rgba(3,3,2,0.3)] rounded-md bg-white">
       <div class="flex flex-col justify-between items-start">
         <% schedule.speakers.each do |speaker| %>
           <div class="flex items-center m-w-80 mb-2">
@@ -10,11 +10,11 @@
         <% end %>
 
         <% unless mode == :team %>
-          <div class="flex">
-            <div class="flex flex-row justify-center items-center px-3 mr-2 h-6 bg-[rgb(248,247,246)] border border-solid border-[rgb(214,211,208)] box-border rounded-[100px] text-sm text-[rgb(35,34,31)]">
+          <div class="flex flex-wrap gap-2">
+            <div class="flex flex-row justify-center items-center px-3 h-6 bg-[rgb(248,247,246)] border border-solid border-[rgb(214,211,208)] box-border rounded-[100px] text-sm text-[rgb(35,34,31)]">
               <span class="text-[rgb(112,109,101)]">Lang: </span><span class="ml-2"><%= schedule.language %></span>
             </div>
-            <div class="flex flex-row justify-center items-center px-3 mr-2 h-6 bg-[rgb(248,247,246)] border border-solid border-[rgb(214,211,208)] box-border rounded-[100px] text-sm text-[rgb(35,34,31)]">
+            <div class="flex flex-row justify-center items-center px-3 h-6 bg-[rgb(248,247,246)] border border-solid border-[rgb(214,211,208)] box-border rounded-[100px] text-sm text-[rgb(35,34,31)]">
               <span class="text-[rgb(112,109,101)]">Track: </span><span class="ml-2"><%= schedule.track.name %></span>
             </div>
           </div>
@@ -48,7 +48,7 @@
         <% end %>
       </div>
 
-      <div class="flex justify-end">
+      <div class="flex justify-end flex-wrap-reverse gap-2">
         <% if mode == :plan && @plan.schedules.include?(schedule) %>
           <div class="mr-auto" data-controller="dialog" data-dialog-element-id-value="edit-<%= schedule.id %>-memo-dialog">
             <button
@@ -141,7 +141,7 @@
           </div>
         <% end %>
 
-        <div class="ml-2">
+        <div>
           <a
             class="show-detail-button p-2 text-sm bg-transparent hover:bg-[rgb(242,242,242)] text-[rgb(35,34,30)] box-border inline-flex justify-center items-center text-center rounded-md font-bold"
             href="<%= event_schedule_dialog_url(schedule, event_name: @plan.event.name) %>"

app/views/schedules/_mobile_table_row.html.erb

@@ -0,0 +1,7 @@
+<% @selected = @plan.plan_schedules.map(&:schedule).any? { row.schedules.include?(_1) } %>
+<p class="text-xl font-normal mr-4 shrink-0"><%= row.start_end %></p>
+<% track_list.each do |track| %>
+  <% if row.tracks[track] %>
+    <div class="p-2"><%= render("schedules/card", schedule: row.tracks[track], mode: :schedule, inactive: @selected) %></div>
+  <% end %>
+<% end %>

app/views/schedules/_table_row.html.erb

@@ -2,16 +2,20 @@
 <tr class="align-baseline" id="<%= row.turbo_stream_id %>">
   <th class="py-2 px-0 align-baseline">
     <div class="flex flex-col gap-1">
-      <div class="flex items-center">
+      <div class="flex items-center my-4">
         <p class="text-xl font-normal mr-4 shrink-0"><%= row.start_end %></p>
         <hr class="w-full h-[1px] mr-4 bg-[rgb(214,211,208)] border-none">
       </div>
-      <p class="text-sm font-bold text-[rgb(112,109,101)] text-left"><%= row.timezone %></p>
+      <p class="hidden sm:block text-sm font-bold text-[rgb(112,109,101)] text-left"><%= row.timezone %></p>
     </div>
   </th>
   <% track_list.each do |track| %>
-      <td>
-        <div class="p-2"><%= row.tracks[track] ? render("schedules/card", schedule: row.tracks[track], mode: :schedule, inactive: @selected) : nil %></div>
-      </td>
+    <td>
+      <% if row.tracks[track] %>
+        <div class="p-2"><%= render("schedules/card", schedule: row.tracks[track], mode: :schedule, inactive: @selected) %></div>
+      <% else %>
+        <div class="sm:p-2"></div>
+      <% end %>
+    </td>
   <% end %>
 </tr>

app/views/schedules/index.html.erb

@@ -39,7 +39,7 @@
   <div class="mt-4 overflow-y-auto">
     <% @schedule_table.days.each do |day| %>
       <div id="schedule-<%= day %>" class="schedule-table hidden">
-        <table class="h-full w-full border-collapse border-spacing-0">
+        <table class="hidden sm:table h-full w-full border-collapse border-spacing-0">
           <thead>
             <th class="p-4 text-sm leading-4 border border-solid border-[rgb(214,211,208)] w-auto min-w-[184px] text-left"><%= I18n.t('table.start_end') %></th>
             <% @schedule_table[day].track_list.each do |track| %>
@@ -52,6 +52,11 @@
             <% end %>
           </tbody>
         </table>
+        <div class="sm:hidden" id="mobile-table-<%= day %>">
+          <% @schedule_table[day].rows.each do |row| %>
+            <%= render partial: 'mobile_table_row', locals: { row: row, plan: @plan, track_list: @schedule_table[day].track_list } %>
+          <% end %>
+        </div>
       </div>
     <% end %>
   </div>