feat: enhance frontend (#35)

* Add player frontend * Responsive player layout * Add team UI * Add players latest matches * Add player game icons to match page * Make layout responsive * Add footer * Change some UI elements to match figma project * Re-add edit buttons * Fix minor button inconsistencies * Replaced obsolete live_patch for live_redirect * Fix formatting * Add player table * Improve index responsiveness * Change player page to match figma design * Add info to display when player hasn't played yet * Add teams page * Fix minor hover css inconsistencies * Update match table * Add responsiveness to group index & round index * Change event icons in match page to match figma * Improve matches row components (#36) * Improve player edit UI * Run formatter * Implement suggestions --------- Co-authored-by: Filipe Felício <[email protected]>
cesium · Aug 25, 2023 · aac1d14 · aac1d14
1 parent 055c559
commit aac1d14
Show file tree

Hide file tree

Showing 24 changed files with 778 additions and 468 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -1,3 +1,16 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer utilities {
+  /* Hide scrollbar for Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+      display: none;
+  }
+
+  /* Hide scrollbar for IE, Edge and Firefox */
+  .no-scrollbar {
+      -ms-overflow-style: none;  /* IE and Edge */
+      scrollbar-width: none;  /* Firefox */
+  }
+}
diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js
@@ -15,6 +15,9 @@ module.exports = {
           success: "#008F05",
           failure: "#FF4444",
           warning: "#E09200",
+          win: "#5EFA5B",
+          loss: "#FF0046",
+          draw: "#E8EB53"
         },
         fontFamily: {
           montserrat: ["Montserrat"],

diff --git a/lib/cesium_cup/tournament.ex b/lib/cesium_cup/tournament.ex
@@ -415,15 +415,15 @@ defmodule CesiumCup.Tournament do
     end
   end
 
-  defp get_home_team_result(match) do
+  def get_home_team_result(match) do
     cond do
       get_home_team_score(match.id) > get_away_team_score(match.id) -> :win
       get_home_team_score(match.id) < get_away_team_score(match.id) -> :loss
       true -> :tie
     end
   end
 
-  defp get_away_team_result(match) do
+  def get_away_team_result(match) do
     cond do
       get_home_team_score(match.id) > get_away_team_score(match.id) -> :loss
       get_home_team_score(match.id) < get_away_team_score(match.id) -> :win

diff --git a/lib/cesium_cup_web/live/elimination_round_live/index.html.heex b/lib/cesium_cup_web/live/elimination_round_live/index.html.heex
@@ -1,34 +1,33 @@
-<div class="pt-10 px-60">
-  <h1>Listing Elimination Rounds</h1>
+<div class="pt-10 px-64">
+  <div class="mt-5 bg-[#F9FAFB] rounded-lg w-full px-10 pb-10 text-secondary">
+    <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("Rounds", to: Routes.elimination_round_index_path(@socket, :index), 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("New Elimination round", to: Routes.elimination_round_index_path(@socket, :new)) %></span>
+    </div>
 
-  <%= if @live_action in [:new, :edit] do %>
-    <.modal return_to={Routes.elimination_round_index_path(@socket, :index)}>
-      <.live_component module={CesiumCupWeb.EliminationRoundLive.FormComponent} id={@elimination_round.id || :new} title={@page_title} action={@live_action} elimination_round={@elimination_round} return_to={Routes.elimination_round_index_path(@socket, :index)} />
-    </.modal>
-  <% end %>
+    <div class="mx-2 pt-[1px] bg-[rgb(230,230,230)]"></div>
 
-  <table>
-    <thead>
-      <tr>
-        <th>Name</th>
+    <%= if @live_action in [:new, :edit] do %>
+      <.modal return_to={Routes.elimination_round_index_path(@socket, :index)}>
+        <.live_component module={CesiumCupWeb.EliminationRoundLive.FormComponent} id={@elimination_round.id || :new} title={@page_title} action={@live_action} elimination_round={@elimination_round} return_to={Routes.elimination_round_index_path(@socket, :index)} />
+      </.modal>
+    <% end %>
 
-        <th></th>
-      </tr>
-    </thead>
-    <tbody id="elimination_rounds">
-      <%= for elimination_round <- @elimination_rounds do %>
-        <tr id={"elimination_round-#{elimination_round.id}"}>
-          <td><%= elimination_round.name %></td>
-
-          <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><%= 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>
+    <table class="flex mx-4 my-10">
+      <tbody id="elimination_rounds">
+        <%= for elimination_round <- @elimination_rounds do %>
+          <tr id={"elimination_round-#{elimination_round.id}"}>
+            <td class="font-bold text-lg"><%= elimination_round.name %></td>
+            <td>
+              <span class="mx-2"><%= live_redirect("Show", to: Routes.elimination_round_show_path(@socket, :show, elimination_round)) %></span>
+              <span class="mx-2"><%= live_redirect("Edit", to: Routes.elimination_round_index_path(@socket, :edit, elimination_round)) %></span>
+              <span class="mx-2"><%= link("Delete", to: "#", phx_click: "delete", phx_value_id: elimination_round.id, data: [confirm: "Are you sure?"]) %></span>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
 </div>
diff --git a/lib/cesium_cup_web/live/elimination_round_live/show.html.heex b/lib/cesium_cup_web/live/elimination_round_live/show.html.heex
@@ -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>
diff --git a/lib/cesium_cup_web/live/event_live/index.html.heex b/lib/cesium_cup_web/live/event_live/index.html.heex
@@ -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>
diff --git a/lib/cesium_cup_web/live/event_live/show.html.heex b/lib/cesium_cup_web/live/event_live/show.html.heex
@@ -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>
diff --git a/lib/cesium_cup_web/live/group_live/index.html.heex b/lib/cesium_cup_web/live/group_live/index.html.heex
@@ -1,34 +1,34 @@
-<div class="pt-10 px-60">
-  <h1>Listing Groups</h1>
+<div class="pt-10 px-4">
+  <div class="mt-5 bg-[#F9FAFB] rounded-lg w-full px-10 pb-10 text-secondary">
+    <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("Groups", to: Routes.group_index_path(@socket, :index), 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("New Group", to: Routes.group_index_path(@socket, :new)) %></span>
+    </div>
 
-  <%= if @live_action in [:new, :edit] do %>
-    <.modal return_to={Routes.group_index_path(@socket, :index)}>
-      <.live_component module={CesiumCupWeb.GroupLive.FormComponent} id={@group.id || :new} title={@page_title} action={@live_action} group={@group} return_to={Routes.group_index_path(@socket, :index)} />
-    </.modal>
-  <% end %>
+    <div class="mx-2 pt-[1px] bg-[rgb(230,230,230)]"></div>
 
-  <table>
-    <thead>
-      <tr>
-        <th>Name</th>
+    <%= if @live_action in [:new, :edit] do %>
+      <.modal return_to={Routes.group_index_path(@socket, :index)}>
+        <.live_component module={CesiumCupWeb.GroupLive.FormComponent} id={@group.id || :new} title={@page_title} action={@live_action} group={@group} return_to={Routes.group_index_path(@socket, :index)} />
+      </.modal>
+    <% end %>
 
-        <th></th>
-      </tr>
-    </thead>
-    <tbody id="groups">
-      <%= for group <- @groups do %>
-        <tr id={"group-#{group.id}"}>
-          <td><%= group.name %></td>
+    <table class="flex mx-4 my-10">
+      <tbody id="groups">
+        <%= for group <- @groups do %>
+          <tr id={"group-#{group.id}"}>
+            <td class="font-bold text-lg"><%= group.name %></td>
 
-          <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><%= 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>
+            <td>
+              <span class="mx-2"><%= live_redirect("Show", to: Routes.group_show_path(@socket, :show, group)) %></span>
+              <span class="mx-2"><%= live_redirect("Edit", to: Routes.group_index_path(@socket, :edit, group)) %></span>
+              <span class="mx-2"><%= link("Delete", to: "#", phx_click: "delete", phx_value_id: group.id, data: [confirm: "Are you sure?"]) %></span>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
 </div>
diff --git a/lib/cesium_cup_web/live/group_live/show.html.heex b/lib/cesium_cup_web/live/group_live/show.html.heex
@@ -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">
@@ -54,9 +44,9 @@
                       <%= if is_team_live_group(team.id, @group.id) do %>
                         <% bg_color =
                           case(team_live_state(team.id)) do
-                            :win -> "bg-green-500"
-                            :loss -> "bg-red-500"
-                            _ -> "bg-yellow-500"
+                            :win -> "bg-win"
+                            :loss -> "bg-loss"
+                            _ -> "bg-draw"
                           end %>
                         <%= live_redirect to: Routes.match_show_path(@socket, :show, get_team_live_match(team.id)), class: "rounded-md #{bg_color} text-white px-1 py-0.5" do %>
                           <%= get_team_live_result(team.id) %>

diff --git a/lib/cesium_cup_web/live/home_live/index.ex b/lib/cesium_cup_web/live/home_live/index.ex
@@ -30,7 +30,6 @@ defmodule CesiumCupWeb.HomeLive.Index do
     |> Enum.sort(
       &(Date.diff(&1.date, DateTime.utc_now()) < Date.diff(&2.date, DateTime.utc_now()))
     )
-    |> Enum.take(6)
   end
 
   defp list_group_round_matches(group_round) do

diff --git a/lib/cesium_cup_web/live/home_live/index.html.heex b/lib/cesium_cup_web/live/home_live/index.html.heex
@@ -1,8 +1,8 @@
-<div class="pt-10 px-60">
-  <div class="flex gap-x-2">
+<div class="pt-10 px-4">
+  <div class="flex mx-auto flex-row overflow-scroll no-scrollbar 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 %>
-        <div class="px-5 py-5">
+      <%= live_redirect to: Routes.match_show_path(@socket, :show, match), class: "my-2 min-w-fit rounded-xl bg-[#F9FAFB] ring-2 hover:drop-shadow-2xl ease-in duration-200	hover:ring-indigo-400 hover:scale-[1.02]" do %>
+        <div class="px-5 py-5 w-56">
           <div class="flex items-center justify-between text-sm">
             <p class="text-gray-900">
               <%= if match.group_id do %>
@@ -13,7 +13,7 @@
             </p>
 
             <%= if match.state in [:first_half, :halftime, :second_half] do %>
-              <span class="text-white bg-[#FF0046] rounded-lg px-2 font-bold">
+              <span class="text-white animate-pulse bg-[#FF0046] rounded-lg px-2 font-bold">
                 LIVE
               </span>
             <% end %>
@@ -63,7 +63,7 @@
       <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"
@@ -74,7 +74,7 @@
               "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"
@@ -117,9 +117,9 @@
                               <%= if is_team_live_group(team.id, group.id) do %>
                                 <% bg_color =
                                   case(team_live_state(team.id)) do
-                                    :win -> "bg-green-500"
-                                    :loss -> "bg-red-500"
-                                    _ -> "bg-yellow-500"
+                                    :win -> "bg-win"
+                                    :loss -> "bg-loss"
+                                    _ -> "bg-draw"
                                   end %>
                                 <%= live_redirect to: Routes.match_show_path(@socket, :show, get_team_live_match(team.id)), class: "rounded-md #{bg_color} text-white px-1 py-0.5" do %>
                                   <%= get_team_live_result(team.id) %>

diff --git a/lib/cesium_cup_web/live/live_helpers.ex b/lib/cesium_cup_web/live/live_helpers.ex
@@ -30,17 +30,6 @@ defmodule CesiumCupWeb.LiveHelpers do
     ~H"""
     <div id="modal" class="phx-modal fade-in" phx-remove={hide_modal()}>
       <div id="modal-content" class="phx-modal-content fade-in-scale" phx-click-away={JS.dispatch("click", to: "#close")} phx-window-keydown={JS.dispatch("click", to: "#close")} phx-key="escape">
-        <%= if @return_to do %>
-          <%= live_patch("✖",
-            to: @return_to,
-            id: "close",
-            class: "phx-modal-close",
-            phx_click: hide_modal()
-          ) %>
-        <% else %>
-          <a id="close" href="#" class="phx-modal-close" phx-click={hide_modal()}>✖</a>
-        <% end %>
-
         <%= render_slot(@inner_block) %>
       </div>
     </div>