From b611b296c3590e624169247ea6aca94c865cf93a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro?= <alvaro.girona@gmail.com>
Date: Sun, 9 Jun 2024 12:52:54 +0200
Subject: [PATCH] Improve responsiveness

---
 .../champion_components/champion_card.ex       |  9 +++------
 .../components/champion_filters.ex             |  3 +--
 .../live/champion_live/index.ex                |  2 +-
 .../live/champion_live/index.html.heex         | 18 +++++++++---------
 4 files changed, 14 insertions(+), 18 deletions(-)

diff --git a/apps/lol_analytics_web/lib/lol_analytics_web/components/champion_components/champion_card.ex b/apps/lol_analytics_web/lib/lol_analytics_web/components/champion_components/champion_card.ex
index f1b7d2d..72f6371 100644
--- a/apps/lol_analytics_web/lib/lol_analytics_web/components/champion_components/champion_card.ex
+++ b/apps/lol_analytics_web/lib/lol_analytics_web/components/champion_components/champion_card.ex
@@ -13,15 +13,12 @@ defmodule LolAnalyticsWeb.ChampionComponents.ChampionCard do
     ~H"""
     <.link patch={"/champions/#{@props.id}"}>
       <div class="flex flex-col rounded-xl bg-clip-border overflow-hidden bg-gray-200">
-        <div class="flex flex-column overflow-hidden">
-          <div class=" px-4 py-1 opacity-80 gap-2 absolute z-10 align-bottom flex mx-auto bg-black w-max">
+        <div class="flex flex-col flex-col-reverse">
+          <div class="flex w-auto px-4 py-1 opacity-80 gap-2 absolute z-10 align-bottom bg-black">
             <img src={team_position_image(@props.team_position)} class="w-5 h-5" />
             <h3 class="text-white"><%= @props.name %></h3>
           </div>
-          <img
-            class="static w-40 h-40"
-            src={"https://ddragon.leagueoflegends.com/cdn/14.11.1/img/champion/#{@props.image}"}
-          />
+          <img src={"https://ddragon.leagueoflegends.com/cdn/14.11.1/img/champion/#{@props.image}"} />
         </div>
         <div class="py-1" />
         <div class="pl-2">
diff --git a/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/components/champion_filters.ex b/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/components/champion_filters.ex
index 1bacb68..439a973 100644
--- a/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/components/champion_filters.ex
+++ b/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/components/champion_filters.ex
@@ -30,9 +30,8 @@ defmodule LolAnalyticsWeb.ChampionLive.Components.ChampionFilters do
 
     ~H"""
     <div>
-      <div class="flex flex-row justify-between p-10">
+      <div class="flex flex-row overflow-x-scroll justify-between">
         <%= for role <- @roles do %>
-          <%!-- <%= IO.inspect(role) %> --%>
           <%= if (assigns.selectedrole == role.value) do %>
             <div phx-click="filter" phx-value-role={role.title} class={selected_class}>
               <p><%= role.title %></p>
diff --git a/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.ex b/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.ex
index 5765602..e22905b 100644
--- a/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.ex
+++ b/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.ex
@@ -67,7 +67,7 @@ defmodule LoLAnalyticsWeb.ChampionLive.Index do
 
       %{status: :data, data: champions} ->
         ~H"""
-        <div id="champions" class="grid grid-cols-4 gap-4">
+        <div id="champions" class="grid grid-cols-2 sm:grid-cols-4  gap-4">
           <%= for champion <- champions do %>
             <.champion_card props={champion} />
           <% end %>
diff --git a/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.html.heex b/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.html.heex
index b358572..a91d448 100644
--- a/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.html.heex
+++ b/apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.html.heex
@@ -2,15 +2,15 @@
   Champions
 </.header>
 
-<h1>Filters</h1>
+<div class="px-2">
+  <h1 class="text-l font-semibold">Filters</h1>
 
+  <div class="flex flex-col py-2 gap-2">
+    <p>Roles</p>
+    <.live_component module={ChampionFilters} id="role-filters" selectedrole={@selected_role} />
+  </div>
 
-<.live_component module={ChampionFilters} id="role-filters" selectedrole={@selected_role} />
+  <div class="h-4"></div>
 
-<.render_champions champions={@champions} />
-
-
-<.modal :if={@live_action in [:new, :edit]} id="champion-modal" show on_cancel={JS.patch(~p"/champions")}>
-  <.live_component module={LoLAnalyticsWeb.ChampionLive.FormComponent} id={@champion.champion_id || :new}
-    title={@page_title} action={@live_action} champion={@champion} patch={~p"/champions"} />
-</.modal>
\ No newline at end of file
+  <.render_champions champions={@champions} />
+</div>
\ No newline at end of file