Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

視聴予定画面のモバイル対応 #177

Merged
merged 5 commits into from
May 13, 2024
Merged

視聴予定画面のモバイル対応 #177

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
de020b1
chore: plan画面のモバイル対応途中
yamakeeeeeeeeen May 8, 2024
2b64f0b
Fix mobile row, no partial simple 2 lines
kinoppyd May 10, 2024
09f3bb5
Add uniq ids for dialog (and other non-uniq) elements.
kinoppyd May 10, 2024
b490f8f
Merge branch 'main' into add-plans-page-mobile-ui
yamakeeeeeeeeen May 13, 2024
8b4ff44
fix: モバイルの時にタブが崩れるのを修正
yamakeeeeeeeeen May 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions app/views/plans/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
13 changes: 7 additions & 6 deletions app/views/schedules/_card.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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? %>
Expand Down
4 changes: 2 additions & 2 deletions app/views/schedules/index.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %>
Expand Down
4 changes: 2 additions & 2 deletions app/views/teams/show.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 %>
Expand Down
Loading