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

Jump to bottom

feat: enhance frontend #35

Merged
merged 27 commits into from
Aug 25, 2023
Merged

feat: enhance frontend #35

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
6865218
Add player frontend
joaodiaslobo Jan 19, 2023
ce49921
Responsive player layout
joaodiaslobo Jan 20, 2023
ff9faa2
Add team UI
joaodiaslobo Feb 19, 2023
87b7c63
Add players latest matches
joaodiaslobo Feb 20, 2023
1b43a74
Add player game icons to match page
joaodiaslobo Feb 20, 2023
6837b1a
Make layout responsive
joaodiaslobo Feb 21, 2023
70dedb1
Add footer
joaodiaslobo Feb 21, 2023
b05305a
Change some UI elements to match figma project
joaodiaslobo Feb 21, 2023
9ceedb9
Re-add edit buttons
joaodiaslobo Feb 22, 2023
a6a0ce9
Merge branch 'main' of github.com:cesium/cesium_cup into jl/update-fr…
joaodiaslobo Feb 22, 2023
5e7471e
Fix minor button inconsistencies
joaodiaslobo Feb 22, 2023
d568841
Replaced obsolete live_patch for live_redirect
joaodiaslobo Feb 22, 2023
d5b1d05
Fix formatting
joaodiaslobo Feb 22, 2023
2e67140
Add player table
joaodiaslobo Feb 23, 2023
6666103
Improve index responsiveness
joaodiaslobo Feb 23, 2023
1f1f088
Change player page to match figma design
joaodiaslobo Feb 25, 2023
8467796
Add info to display when player hasn't played yet
joaodiaslobo Feb 25, 2023
2f93b41
Add teams page
joaodiaslobo Feb 26, 2023
c66ae33
Fix minor hover css inconsistencies
joaodiaslobo Feb 26, 2023
0d25506
Update match table
joaodiaslobo Feb 28, 2023
e0c982f
Add responsiveness to group index & round index
joaodiaslobo Feb 28, 2023
b137e05
Change event icons in match page to match figma
joaodiaslobo Feb 28, 2023
2a7bea3
Improve matches row components (#36)
feliciofilipe Mar 4, 2023
2cd1a7a
Improve player edit UI
joaodiaslobo Mar 19, 2023
d0ef1d8
Merge branch 'main' into jl/update-frontend
joaodiaslobo Aug 23, 2023
12b5727
Run formatter
joaodiaslobo Aug 23, 2023
0a8991e
Implement suggestions
joaodiaslobo Aug 25, 2023
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
4 changes: 2 additions & 2 deletions lib/cesium_cup_web/live/elimination_round_live/index.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@

<td>
<span><%= live_redirect("Show", to: Routes.elimination_round_show_path(@socket, :show, elimination_round)) %></span>
<span><%= live_patch("Edit", to: Routes.elimination_round_index_path(@socket, :edit, elimination_round)) %></span>
<span><%= live_redirect("Edit", to: Routes.elimination_round_index_path(@socket, :edit, elimination_round)) %></span>
<span><%= link("Delete", to: "#", phx_click: "delete", phx_value_id: elimination_round.id, data: [confirm: "Are you sure?"]) %></span>
</td>
</tr>
<% end %>
</tbody>
</table>

<span><%= live_patch("New Elimination round", to: Routes.elimination_round_index_path(@socket, :new)) %></span>
<span><%= live_redirect("New Elimination round", to: Routes.elimination_round_index_path(@socket, :new)) %></span>
</div>
2 changes: 1 addition & 1 deletion lib/cesium_cup_web/live/elimination_round_live/show.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,5 +14,5 @@
</li>
</ul>

<span><%= live_patch("Edit", to: Routes.elimination_round_show_path(@socket, :edit, @elimination_round), class: "button") %></span> | <span><%= live_redirect("Back", to: Routes.elimination_round_index_path(@socket, :index)) %></span>
<span><%= live_redirect("Edit", to: Routes.elimination_round_show_path(@socket, :edit, @elimination_round), class: "button") %></span> | <span><%= live_redirect("Back", to: Routes.elimination_round_index_path(@socket, :index)) %></span>
</div>
4 changes: 2 additions & 2 deletions lib/cesium_cup_web/live/event_live/index.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,12 @@

<td>
<span><%= live_redirect("Show", to: Routes.event_show_path(@socket, :show, event)) %></span>
<span><%= live_patch("Edit", to: Routes.event_index_path(@socket, :edit, event)) %></span>
<span><%= live_redirect("Edit", to: Routes.event_index_path(@socket, :edit, event)) %></span>
<span><%= link("Delete", to: "#", phx_click: "delete", phx_value_id: event.id) %></span>
</td>
</tr>
<% end %>
</tbody>
</table>

<span><%= live_patch("New Event", to: Routes.event_index_path(@socket, :new)) %></span>
<span><%= live_redirect("New Event", to: Routes.event_index_path(@socket, :new)) %></span>
2 changes: 1 addition & 1 deletion lib/cesium_cup_web/live/event_live/show.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,5 +13,5 @@
</li>
</ul>

<span><%= live_patch("Edit", to: Routes.event_show_path(@socket, :edit, @event), class: "button") %></span> |
<span><%= live_redirect("Edit", to: Routes.event_show_path(@socket, :edit, @event), class: "button") %></span> |
<span><%= live_redirect("Back", to: Routes.event_index_path(@socket, :index)) %></span>
4 changes: 2 additions & 2 deletions lib/cesium_cup_web/live/group_live/index.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@

<td>
<span><%= live_redirect("Show", to: Routes.group_show_path(@socket, :show, group)) %></span>
<span><%= live_patch("Edit", to: Routes.group_index_path(@socket, :edit, group)) %></span>
<span><%= live_redirect("Edit", to: Routes.group_index_path(@socket, :edit, group)) %></span>
<span><%= link("Delete", to: "#", phx_click: "delete", phx_value_id: group.id, data: [confirm: "Are you sure?"]) %></span>
</td>
</tr>
<% end %>
</tbody>
</table>

<span><%= live_patch("New Group", to: Routes.group_index_path(@socket, :new)) %></span>
<span><%= live_redirect("New Group", to: Routes.group_index_path(@socket, :new)) %></span>
</div>
38 changes: 14 additions & 24 deletions lib/cesium_cup_web/live/group_live/show.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,19 @@
<div class="pt-10 px-60">
<%= if @live_action in [:edit] do %>
<.modal return_to={Routes.group_show_path(@socket, :show, @group)}>
<.live_component module={CesiumCupWeb.GroupLive.FormComponent} id={@group.id} title={@page_title} action={@live_action} group={@group} return_to={Routes.group_show_path(@socket, :show, @group)} />
</.modal>
<% end %>

<div class="mt-5 bg-[#F9FAFB] rounded-lg w-full px-10 py-5 pb-10">
<div class="border-b border-quinary">
<div>
<div>
<nav class="-mb-px flex justify-between space-x-1 pb-2 text-xs" aria-label="Tabs">
<div>
<span href="#" class=" text-gray-500 hover:text-gray-700 whitespace-nowrap font-small" aria-current="page"><%= live_patch("CeSIUM Cup", to: Routes.home_index_path(@socket, :index)) %></span>
<a class="text-gray-500 whitespace-nowrap font-small">></a>
<span href="#" class=" text-gray-500 hover:text-gray-700 whitespace-nowrap font-small" aria-current="page"><%= live_patch("Group #{@group.name}", to: Routes.group_show_path(@socket, :show, @group)) %></span>
</div>

<div>
<span class="border-transparent text-indigo-300 hover:text-indigo-400 whitespace-nowrap border-b-4 font-small"><%= live_patch("Edit group", to: Routes.group_show_path(@socket, :edit, @group), class: "button") %></span>
</div>
</nav>
</div>
</div>
<div class="pt-10 px-4">
<div class="mt-5 bg-[#F9FAFB] rounded-lg w-full px-10 pb-10">
<%= if @live_action in [:edit] do %>
<.modal return_to={Routes.group_show_path(@socket, :show, @group)}>
<.live_component module={CesiumCupWeb.GroupLive.FormComponent} id={@group.id} title={@page_title} action={@live_action} group={@group} return_to={Routes.group_show_path(@socket, :show, @group)} />
</.modal>
<% end %>
<div class="py-4 px-4 flex text-secondary font-medium text-xs divide-x-4">
<span href="#" class="border-transparent hover:text-gray-700 whitespace-nowrap font-small" aria-current="page"><%= live_redirect("CeSIUM Cup", to: Routes.home_index_path(@socket, :index)) %></span>
<a class="border-transparent whitespace-nowrap font-small">></a>
<span href="#" class="border-transparent hover:text-gray-700 whitespace-nowrap font-small" aria-current="page"><%= live_redirect("Group #{@group.name}", to: Routes.group_show_path(@socket, :edit, @group), class: "button") %></span>
<span class="border-transparent ml-auto mr-4 text-indigo-300 hover:text-indigo-400 whitespace-nowrap border-b-4 font-small"><%= live_redirect("Edit group", to: Routes.group_show_path(@socket, :show, @group), class: "button") %></span>
</div>

<div class="mx-2 pt-[1px] bg-[rgb(230,230,230)]"></div>

<div class="flex flex-col my-10">
<div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
Expand Down
6 changes: 3 additions & 3 deletions lib/cesium_cup_web/live/home_live/index.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="pt-10 px-60">
<div class="pt-10 px-4">
<div class="flex gap-x-2">
<%= for match <- @matches do %>
<%= live_redirect to: Routes.match_show_path(@socket, :show, match), class: "w-72 rounded-xl bg-[#F9FAFB] hover:bg-quinary" do %>
Expand Down Expand Up @@ -63,13 +63,13 @@
<div>
<div class="border-b border-gray-200">
<nav class="-mb-px flex space-x-8" aria-label="Tabs">
<%= live_patch("Group Stage", to: "?tab=group", class: "#{if @tab == "group" do
<%= live_redirect("Group Stage", to: "?tab=group", class: "#{if @tab == "group" do
"border-quinary text-gray-900"
else
"border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
end} whitespace-nowrap py-4 px-1 border-b-4 font-medium text-md") %>
<%= for round <- @elimination_rounds do %>
<%= live_patch(round.name, to: "?tab=#{round.name}", class: "#{if @tab == round.name do
<%= live_redirect(round.name, to: "?tab=#{round.name}", class: "#{if @tab == round.name do
"border-quinary text-gray-900"
else
"border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300"
Expand Down
4 changes: 2 additions & 2 deletions lib/cesium_cup_web/live/match_live/index.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
</td>
<td>
<span><%= live_redirect("Show", to: Routes.match_show_path(@socket, :show, match), class: "text-gray-900") %></span>
<span><%= live_patch("Edit", to: Routes.match_index_path(@socket, :edit, match), class: "text-gray-900") %></span>
<span><%= live_redirect("Edit", to: Routes.match_index_path(@socket, :edit, match), class: "text-gray-900") %></span>
<span><%= link("Delete", to: "#", phx_click: "delete", phx_value_id: match.id, data: [confirm: "Are you sure?"], class: "text-gray-900") %></span>
</td>
</tr>
Expand All @@ -69,5 +69,5 @@
</div>
</div>

<span><%= live_patch("New Match", to: Routes.match_index_path(@socket, :new)) %></span>
<span><%= live_redirect("New Match", to: Routes.match_index_path(@socket, :new)) %></span>
</div>
4 changes: 4 additions & 0 deletions lib/cesium_cup_web/live/match_live/show.ex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,10 @@ defmodule CesiumCupWeb.MatchLive.Show do
Tournament.get_elimination_round!(elimination_round_id)
end

defp get_player_events(match_id, player_id) do
Tournament.list_events(where: [match_id: match_id, player_id: player_id])
end

@impl true
def handle_event("focus-player", %{"player_id" => player_id}, socket) do
{:noreply,
Expand Down
111 changes: 73 additions & 38 deletions lib/cesium_cup_web/live/match_live/show.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,33 @@
<%= if @live_action in [:edit] do %>
<.modal return_to={Routes.match_show_path(@socket, :show, @match)}>
<.live_component module={CesiumCupWeb.MatchLive.FormComponent} id={@match.id} title={@page_title} action={@live_action} match={@match} return_to={Routes.match_show_path(@socket, :show, @match)} />
</.modal>
<% end %>
<div>
<div class="relative pb-4 bg-white mt-16 text-secondary sm:mx-auto rounded-lg sm:px-10">
<%= if @live_action in [:edit] do %>
<.modal return_to={Routes.match_show_path(@socket, :show, @match)}>
<.live_component module={CesiumCupWeb.MatchLive.FormComponent} id={@match.id} title={@page_title} action={@live_action} match={@match} return_to={Routes.match_show_path(@socket, :show, @match)} />
</.modal>
<% end %>
<div class="py-4 px-4 flex font-medium text-xs divide-x-4">
<span href="#" class="border-transparent hover:text-gray-700 whitespace-nowrap font-small" aria-current="page"><%= live_redirect("CeSIUM Cup", to: Routes.home_index_path(@socket, :index)) %></span>
<a class="border-transparent whitespace-nowrap font-small">></a>
<%= if @match.group_id do %>
<% group = get_group(@match.group_id) %>
<span href="#" class="border-transparent hover:text-gray-700 whitespace-nowrap font-small" aria-current="page"><%= live_redirect("Group #{group.name}", to: Routes.group_show_path(@socket, :show, group)) %></span>
<a class="border-transparent whitespace-nowrap font-small">></a>
<% end %>
<%= if @match.elimination_round_id do %>
<% elimination_round = get_elimination_round(@match.elimination_round_id) %>
<span href="#" class="border-transparent hover:text-gray-700 whitespace-nowrap font-small" aria-current="page"><%= elimination_round.name %></span>
<a class="border-transparent whitespace-nowrap font-small">></a>
<% end %>
<%= if not (is_nil(@match.home_team_id) or is_nil(@match.away_team_id)) do %>
<span class="border-transparent hover:text-gray-700 whitespace-nowrap border-b-4 font-small"><%= live_redirect("#{@match.home_team.name} vs #{@match.away_team.name}", to: Routes.match_show_path(@socket, :show, @match)) %></span>
<% end %>
<span class="border-transparent ml-auto mr-4 text-indigo-300 hover:text-indigo-400 whitespace-nowrap border-b-4 font-small"><%= live_redirect("Edit match", to: Routes.match_show_path(@socket, :edit, @match), class: "button") %></span>
</div>

<div class="pt-10 pb-20 lg:px-60">
<div class="mt-5 bg-[#F9FAFB] rounded-lg w-full px-10 py-5">
<div class="border-b border-quinary">
<div>
<div>
<nav class="-mb-px flex justify-between space-x-1 pb-2 text-xs" aria-label="Tabs">
<div>
<span href="#" class=" text-gray-500 hover:text-gray-700 whitespace-nowrap font-small" aria-current="page"><%= live_patch("CeSIUM Cup", to: Routes.home_index_path(@socket, :index)) %></span>
<a class="text-gray-500 whitespace-nowrap font-small">></a>
<%= if @match.group_id do %>
<% group = get_group(@match.group_id) %>
<span href="#" class=" text-gray-500 hover:text-gray-700 whitespace-nowrap font-small" aria-current="page"><%= live_patch("Group #{group.name}", to: Routes.group_show_path(@socket, :show, group)) %></span>
<a class="text-gray-500 whitespace-nowrap font-small">></a>
<% end %>
<%= if @match.elimination_round_id do %>
<% elimination_round = get_elimination_round(@match.elimination_round_id) %>
<span href="#" class=" text-gray-500 hover:text-gray-700 whitespace-nowrap font-small" aria-current="page"><%= elimination_round.name %></span>
<a class="text-gray-500 whitespace-nowrap font-small">></a>
<% end %>
<%= if not (is_nil(@match.home_team_id) or is_nil(@match.away_team_id)) do %>
<span class="border-transparent text-gray-500 hover:text-gray-700 whitespace-nowrap border-b-4 font-small"><%= live_redirect("#{@match.home_team.name} vs #{@match.away_team.name}", to: Routes.match_show_path(@socket, :show, @match)) %></span>
<% end %>
</div>
<div class="mx-2 pt-[1px] bg-[rgb(230,230,230)]"></div>

<div></div>

<div>
<span class="border-transparent text-indigo-300 hover:text-indigo-400 whitespace-nowrap border-b-4 font-small"><%= live_patch("Edit match", to: Routes.match_show_path(@socket, :edit, @match), class: "button") %></span>
</div>
</nav>
</div>
</div>
</div>
<div class="pb-10 border-b">
<div class="flex flex-row justify-around items-center gap-x-4 pt-8">
<div>
Expand Down Expand Up @@ -205,6 +198,27 @@
<%= "<-" %>
</a>
<% end %>
<div class="flex flex-row space-x-2">
<%= for event <- get_player_events(@match.id, player.id) do %>
<%= if event.type == :goal do %>
<div title={display_time(event.inserted_at)} class="group w-4 self-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M177.1 228.6L207.9 320h96.5l29.62-91.38L256 172.1L177.1 228.6zM255.1 0C114.6 0 .0001 114.6 .0001 256S114.6 512 256 512s255.1-114.6 255.1-255.1S397.4 0 255.1 0zM435.2 361.1l-103.9-1.578l-30.67 99.52C286.2 462.2 271.3 464 256 464s-30.19-1.773-44.56-4.93L180.8 359.6L76.83 361.1c-14.93-25.35-24.79-54.01-27.8-84.72L134.3 216.4L100.7 118.1c19.85-22.34 44.32-40.45 72.04-52.62L256 128l83.29-62.47c27.72 12.17 52.19 30.27 72.04 52.62L377.7 216.4l85.23 59.97C459.1 307.1 450.1 335.8 435.2 361.1z" />
</svg>
</div>
<% end %>
<%= if event.type == :yellow_card do %>
<div title={display_time(event.inserted_at)} class="group w-4 self-center fill-yellow-400">
<svg class="rotate-[12deg]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><rect class="cls-1" width="325" height="492" rx="30" /></svg>
</div>
<% end %>
<%= if event.type == :red_card do %>
<div title={display_time(event.inserted_at)} class="group w-4 self-center fill-red-600">
<svg class="rotate-[12deg]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><rect class="cls-1" width="325" height="492" rx="30" /></svg>
</div>
<% end %>
<% end %>
</div>
</div>
<% end %>
</div>
Expand Down Expand Up @@ -244,9 +258,30 @@
TBD
<% end %>
</p>
<div class="mt-3 flex flex-col space-y-2 text-black">
<div class="mt-3 flex flex-col space-y-2 text-black items-end">
<%= for player <- @away_team_game_players do %>
<div class="flex flex-row space-x-2">
<div class="flex flex-row space-x-2">
<%= for event <- get_player_events(@match.id, player.id) do %>
<%= if event.type == :goal do %>
<div title={display_time(event.inserted_at)} class="group w-4 self-center">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M177.1 228.6L207.9 320h96.5l29.62-91.38L256 172.1L177.1 228.6zM255.1 0C114.6 0 .0001 114.6 .0001 256S114.6 512 256 512s255.1-114.6 255.1-255.1S397.4 0 255.1 0zM435.2 361.1l-103.9-1.578l-30.67 99.52C286.2 462.2 271.3 464 256 464s-30.19-1.773-44.56-4.93L180.8 359.6L76.83 361.1c-14.93-25.35-24.79-54.01-27.8-84.72L134.3 216.4L100.7 118.1c19.85-22.34 44.32-40.45 72.04-52.62L256 128l83.29-62.47c27.72 12.17 52.19 30.27 72.04 52.62L377.7 216.4l85.23 59.97C459.1 307.1 450.1 335.8 435.2 361.1z" />
</svg>
</div>
<% end %>
<%= if event.type == :yellow_card do %>
<div title={display_time(event.inserted_at)} class="group w-4 self-center fill-yellow-400">
<svg class="rotate-[12deg]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><rect class="cls-1" width="325" height="492" rx="30" /></svg>
</div>
<% end %>
<%= if event.type == :red_card do %>
<div title={display_time(event.inserted_at)} class="group w-4 self-center fill-red-600">
<svg class="rotate-[12deg]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><rect class="cls-1" width="325" height="492" rx="30" /></svg>
</div>
<% end %>
<% end %>
</div>
<%= if @match.state in [:first_half, :second_half] do %>
<a href="#" phx-click="add-event" phx-value-player_id={player.id} phx-value-type="sub_out" class="text-red-500">
<%= "->" %>
Expand All @@ -271,9 +306,9 @@
<p class="pt-3 uppercase text-blue-400 font-medium">
SUBS
</p>
<div class="mt-3 flex flex-col space-y-2 text-gray-400">
<div class="mt-3 flex flex-col space-y-2 text-gray-400 items-end">
<%= for player <- @away_team_bench_players do %>
<div class="flex flex-row space-x-2">
<div class="flex flex-row space-x-2 items-end">
<%= if @match.state in [:first_half, :second_half] do %>
<a href="#" phx-click="add-event" phx-value-player_id={player.id} phx-value-type="sub_in" class="text-green-500">
<%= "<-" %>
Expand Down
4 changes: 2 additions & 2 deletions lib/cesium_cup_web/live/player_live/index.html.heex
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,13 @@

<td>
<span><%= live_redirect("Show", to: Routes.player_show_path(@socket, :show, player)) %></span>
<span><%= live_patch("Edit", to: Routes.player_index_path(@socket, :edit, player)) %></span>
<span><%= live_redirect("Edit", to: Routes.player_index_path(@socket, :edit, player)) %></span>
<span><%= link("Delete", to: "#", phx_click: "delete", phx_value_id: player.id, data: [confirm: "Are you sure?"]) %></span>
</td>
</tr>
<% end %>
</tbody>
</table>

<span><%= live_patch("New Player", to: Routes.player_index_path(@socket, :new)) %></span>
<span><%= live_redirect("New Player", to: Routes.player_index_path(@socket, :new)) %></span>
</div>
Loading