Merge pull request #177 from kufu/add-plans-page-mobile-ui

kufu · May 13, 2024 · 4c26fbc · 4c26fbc
2 parents 2e86e04 + 8b4ff44
commit 4c26fbc
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 13 deletions.
diff --git a/app/views/plans/show.html.erb b/app/views/plans/show.html.erb
@@ -98,9 +98,9 @@
     <% else %>
       <div data-controller="schedule-table" class="max-w-[1120px] mx-auto">
         <div class="flex overflow-x-auto overflow-y-hidden gap-2 p-0">
-          <div class="relative flex sm:block justify-between flex-grow shrink-0 basis-auto m-1 before:absolute before:left-0 before:right-0 before:bottom-0 before:border-b-[1px]">
+          <div class="relative flex sm:block justify-center flex-grow shrink-0 basis-auto m-1 before:absolute before:left-0 before:right-0 before:bottom-0 before:border-b-[1px]">
             <% @plans_table.keys.map do |k| %>
-              <button data-action="click->schedule-table#switch" value="<%= k %>" class="tab-button bg-transparent appearance-none font-bold font-base text-[rgb(112,109,101)] h-10 solid border-0 border-b-[3px] px-2 sm:px-6 box-border border-b-transparent hover:bg-[rgb(248,247,246)] hover:text-[rgb(35,34,30)]">
+              <button data-action="click->schedule-table#switch" value="<%= k %>" class="tab-button bg-transparent appearance-none font-bold font-base text-[rgb(112,109,101)] h-10 solid border-0 border-b-[3px] px-4 sm:px-6 box-border border-b-transparent hover:bg-[rgb(248,247,246)] hover:text-[rgb(35,34,30)]">
                 <%= k %>
               </button>
             <% end %>
@@ -109,7 +109,7 @@
         <div class="mt-4 overflow-y-auto">
           <% @plans_table.each do |k, v| %>
             <div id="schedule-<%= k %>" 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 border border-solid border-[rgb(214,211,208)] min-w-[184px] text-left"><%= I18n.t('table.start_end') %></th>
                   <th class="p-4 text-sm border border-solid border-[rgb(214,211,208)] w-auto text-center"><%= I18n.t('table.track') %></th>
@@ -133,6 +133,12 @@
                   <% end %>
                 </tbody>
               </table>
+              <div class="sm:hidden" id="mobile-table-<%= k %>">
+                <% v.each do |row| %>
+                  <p class="text-xl font-normal mr-4 shrink-0"><%= row[:time][:range] %></p>
+                  <div class="mt-4 p-2"><%= render("schedules/card", schedule: row[:schedule], mode: :plan, inactive: false) %></div>
+                <% end %>
+              </div>
             </div>
           <% end %>
         </div>

diff --git a/app/views/schedules/_card.html.erb b/app/views/schedules/_card.html.erb
@@ -50,24 +50,25 @@
 
       <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">
+          <% memo_dialog_element_id = SecureRandom.uuid %>
+          <div class="mr-auto" data-controller="dialog" data-dialog-element-id-value="<%= memo_dialog_element_id %>">
             <button
               class="p-2 text-sm m-h-[calc(0.857143rem+18px)] normal-button"
               data-action="click->dialog#open"
             >
               <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" class=" smarthr-ui-Icon" role="img" aria-hidden="true" focusable="false" height="12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M497.9 142.1l-46.1 46.1c-4.7 4.7-12.3 4.7-17 0l-111-111c-4.7-4.7-4.7-12.3 0-17l46.1-46.1c18.7-18.7 49.1-18.7 67.9 0l60.1 60.1c18.8 18.7 18.8 49.1 0 67.9zM284.2 99.8L21.6 362.4.4 483.9c-2.9 16.4 11.4 30.6 27.8 27.8l121.5-21.3 262.6-262.6c4.7-4.7 4.7-12.3 0-17l-111-111c-4.8-4.7-12.4-4.7-17.1 0zM124.1 339.9c-5.5-5.5-5.5-14.3 0-19.8l154-154c5.5-5.5 14.3-5.5 19.8 0s5.5 14.3 0 19.8l-154 154c-5.5 5.5-14.3 5.5-19.8 0zM88 424h48v36.3l-64.5 11.3-31.1-31.1L51.7 376H88v48z"></path></svg>
               <%= I18n.t('button.update_memo') %>
             </button>
-            <dialog id="edit-<%= schedule.id %>-memo-dialog" class="dialog max-w-[min(100vw-16px,800px)]">
+            <dialog id="<%= memo_dialog_element_id %>" class="dialog max-w-[min(100vw-16px,800px)]">
               <%= form_with(url: event_plan_path(@plan, event_name: @plan.event.name), method: :patch) do |f| %>
                 <div data-controller="word-counter" data-word-counter-max-value="<%= plan_memo_max_length %>" class="">
                   <div class="border-b-[1px] border-[rgb(214,211,208)] py-4 px-6 flex flex-col justify-start">
                     <p class="text-xl"><%= I18n.t('dialog.edit_memo', title: schedule.title) %></p>
                   </div>
                   <div class="max-h-[calc(100vh-212px)] overflow-auto">
                     <div class="w-full p-6">
-                      <%= f.hidden_field :edit_memo_schedule_id, value: schedule.id %>
-                      <%= f.text_area :memo, value: @plan.plan_schedules.find { _1.schedule == schedule }&.memo, class: "border opacity-100 rounded-md border border-[rgb(214,211,208)] bg-white p-2 text-[rgb(35,34,30)] w-full", data: { "word-counter-target": "source", action: "input->word-counter#calc" } %>
+                      <%= f.hidden_field :edit_memo_schedule_id, value: schedule.id, id: "#{schedule.id}-#{memo_dialog_element_id}" %>
+                      <%= f.text_area :memo, value: @plan.plan_schedules.find { _1.schedule == schedule }&.memo, id: SecureRandom.uuid, class: "border opacity-100 rounded-md border border-[rgb(214,211,208)] bg-white p-2 text-[rgb(35,34,30)] w-full", data: { "word-counter-target": "source", action: "input->word-counter#calc" } %>
                       <div class="font-xs mt-2 text-[rgb(112,109,101)]">
                         <span data-word-counter-target="counter"></span>/<%= plan_memo_max_length %>
                       </div>
@@ -89,8 +90,8 @@
           <div>
             <% if @plan.plan_schedules.map(&:schedule).include?(schedule) # to avoid n+1 %>
               <%= form_with(url: event_plan_url(@plan, event_name: @plan.event.name), method: 'PATCH' ) do |form| %>
-                <%= form.hidden_field :remove_schedule_id, value: schedule.id %>
-                <%= form.hidden_field :mode, value: mode %>
+                <%= form.hidden_field :remove_schedule_id, value: schedule.id, id: SecureRandom.uuid %>
+                <%= form.hidden_field :mode, value: mode, id: SecureRandom.uuid %>
                 <%= form.submit I18n.t('card.remove'), class: "remove-plan-button p-2 text-sm font-bold min-h-5 normal-button", data: { turbo_frame: "event_#{@event.id}" } %>
               <% end %>
             <% elsif @plan.new_record? %>

diff --git a/app/views/schedules/index.html.erb b/app/views/schedules/index.html.erb
@@ -21,9 +21,9 @@
     </div>
   </label>
   <div class="flex overflow-x-auto overflow-y-hidden gap-2 p-0">
-    <div class="relative flex sm:block justify-between flex-grow shrink-0 basis-auto m-1 before:absolute before:left-0 before:right-0 before:bottom-0 before:border-b-[1px]">
+    <div class="relative flex sm:block justify-center flex-grow shrink-0 basis-auto m-1 before:absolute before:left-0 before:right-0 before:bottom-0 before:border-b-[1px]">
       <% @schedule_table.days.each do |day| %>
-        <button data-action="click->schedule-table#switch" value="<%= day %>" class="tab-button bg-transparent appearance-none font-bold font-base text-[rgb(112,109,101)] h-10 solid border-0 border-b-[3px] px-2 sm:px-6 box-border border-b-transparent hover:bg-[rgb(248,247,246)] hover:text-[rgb(35,34,30)]">
+        <button data-action="click->schedule-table#switch" value="<%= day %>" class="tab-button bg-transparent appearance-none font-bold font-base text-[rgb(112,109,101)] h-10 solid border-0 border-b-[3px] px-4 sm:px-6 box-border border-b-transparent hover:bg-[rgb(248,247,246)] hover:text-[rgb(35,34,30)]">
           <%= day %>
         </button>
       <% end %>

diff --git a/app/views/teams/show.html.erb b/app/views/teams/show.html.erb
@@ -50,9 +50,9 @@
 
 <div data-controller="schedule-table" class="max-w-[1120px] mx-auto">
   <div class="flex overflow-x-auto overflow-y-hidden gap-2 p-0">
-    <div class="relative flex sm:block justify-between flex-grow shrink-0 basis-auto m-1 before:absolute before:left-0 before:right-0 before:bottom-0 before:border-b-[1px]">
+    <div class="relative flex sm:block justify-center flex-grow shrink-0 basis-auto m-1 before:absolute before:left-0 before:right-0 before:bottom-0 before:border-b-[1px]">
       <% @schedule_table.days.each do |day| %>
-        <button data-action="click->schedule-table#switch" value="<%= day %>" class="tab-button bg-transparent appearance-none font-bold font-base text-[rgb(112,109,101)] h-10 solid border-0 border-b-[3px] px-2 sm:px-6 box-border border-b-transparent hover:bg-[rgb(248,247,246)] hover:text-[rgb(35,34,30)]">
+        <button data-action="click->schedule-table#switch" value="<%= day %>" class="tab-button bg-transparent appearance-none font-bold font-base text-[rgb(112,109,101)] h-10 solid border-0 border-b-[3px] px-4 sm:px-6 box-border border-b-transparent hover:bg-[rgb(248,247,246)] hover:text-[rgb(35,34,30)]">
           <%= day %>
         </button>
       <% end %>