Skip to content

Commit

Permalink
Add teams skeleton screen
Browse files Browse the repository at this point in the history
  • Loading branch information
@kinoppyd
kinoppyd committed Aug 21, 2024
1 parent 4b35aad commit d732f23
Show file tree
Hide file tree
Showing 2 changed files with 63 additions and 55 deletions.
8 changes: 4 additions & 4 deletions app/views/schedules/_table_skeleton.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,13 +42,13 @@
</div>
</th>
<td>
<div class="p-2"><%= render partial: "card_skeleton" %></div>
<div class="p-2"><%= render partial: "schedules/card_skeleton" %></div>
</td>
<td>
<div class="p-2"><%= render partial: "card_skeleton" %></div>
<div class="p-2"><%= render partial: "schedules/card_skeleton" %></div>
</td>
<td>
<div class="p-2"><%= render partial: "card_skeleton" %></div>
<div class="p-2"><%= render partial: "schedules/card_skeleton" %></div>
</td>
</tr>
<% end %>
Expand All @@ -59,7 +59,7 @@
<div class="h-2 m-4 bg-slate-300 rounded"></div>
</p>
<% 5.times do %>
<div class="p-2"><%= render partial: "card_skeleton" %></div>
<div class="p-2"><%= render partial: "schedules/card_skeleton" %></div>
<% end %>
</div>
</div>
Expand Down
110 changes: 59 additions & 51 deletions app/views/teams/show.html.erb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,61 +48,69 @@
</div>


<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-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-4 sm:px-6 box-border border-b-transparent hover:bg-[rgb(248,247,246)] hover:text-[rgb(35,34,30)]">
<%= day %>
</button>
<% end %>
</div>
</div>
<div class="mt-4 overflow-y-auto">
<% @schedule_table.days.each do |day| %>
<div id="schedule-<%= day %>" class="schedule-table hidden">
<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| %>
<th class="p-4 text-sm leading-4 border border-solid border-[rgb(214,211,208)] w-auto text-center"><%= track %></th>
<% end %>
</thead>
<tbody>
<% @schedule_table[day].rows.each do |row| %>
<% @selected = @plan.plan_schedules.map(&:schedule).any? { row.schedules.include?(_1) } %>
<tr class="align-baseline">
<th class="py-2 px-0 align-baseline">
<div class="flex flex-col gap-1">
<div class="flex items-center">
<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>
<div class="p-2 pl-4 flex flex-wrap">
<% @team.active_profiles.reject { |prof| row.schedules.any? { @member_schedules_map[prof.id].include?(_1.id) } }.each do |prof| %>
<img src="<%= prof.avatar_url %>" class="h-12 w-12 rounded-full border-2 border-black bg-white ml-[-16px] mt-1" />
<% end %>
<% if turbo_frame_request? %>
<%= turbo_frame_tag "teams" do %>
<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-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-4 sm:px-6 box-border border-b-transparent hover:bg-[rgb(248,247,246)] hover:text-[rgb(35,34,30)]">
<%= day %>
</button>
<% end %>
</div>
</div>
<div class="mt-4 overflow-y-auto">
<% @schedule_table.days.each do |day| %>
<div id="schedule-<%= day %>" class="schedule-table hidden">
<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| %>
<th class="p-4 text-sm leading-4 border border-solid border-[rgb(214,211,208)] w-auto text-center"><%= track %></th>
<% end %>
</thead>
<tbody>
<% @schedule_table[day].rows.each do |row| %>
<% @selected = @plan.plan_schedules.map(&:schedule).any? { row.schedules.include?(_1) } %>
<tr class="align-baseline">
<th class="py-2 px-0 align-baseline">
<div class="flex flex-col gap-1">
<div class="flex items-center">
<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>
<div class="p-2 pl-4 flex flex-wrap">
<% @team.active_profiles.reject { |prof| row.schedules.any? { @member_schedules_map[prof.id].include?(_1.id) } }.each do |prof| %>
<img src="<%= prof.avatar_url %>" class="h-12 w-12 rounded-full border-2 border-black bg-white ml-[-16px] mt-1" />
<% end %>
</div>
</div>
</div>
</th>
<% @schedule_table[day].track_list.each do |track| %>
</th>
<% @schedule_table[day].track_list.each do |track| %>
<td>
<div class="p-2"><%= row.tracks[track] ? render("schedules/card", schedule: row.tracks[track], mode: :team, inactive: @selected) : nil %></div>
</td>
<% end %>
</tr>
<% 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>
<% end %>
</tr>
<% 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>
<% end %>
</div>
</div>
</div>
<% end %>
<% else %>
<%= turbo_frame_tag "teams", src: team_path(@team) do %>
<%= render partial: "schedules/table_skeleton", locals: { schedule_table: @schedule_table } %>
<% end %>
<% end %>

<%= turbo_frame_tag "modal" %>

0 comments on commit d732f23

Please sign in to comment.