alvaro/lol-analytics
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve responsiveness
All checks were successful
ci / docker (push) Successful in 4m13s
Details

Browse Source
This commit is contained in:
Álvaro 2024-06-09 12:52:54 +02:00
parent 16437b5deb
commit b611b296c3
4 changed files with 14 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/lol_analytics_web/lib/lol_analytics_web/components/champion_components/champion_card.ex
View File

@ -13,15 +13,12 @@ defmodule LolAnalyticsWeb.ChampionComponents.ChampionCard do
~H""" ~H"""
<.link patch={"/champions/#{@props.id}"}> <.link patch={"/champions/#{@props.id}"}>
<div class="flex flex-col rounded-xl bg-clip-border overflow-hidden bg-gray-200"> <div class="flex flex-col rounded-xl bg-clip-border overflow-hidden bg-gray-200">
<div class="flex flex-column overflow-hidden"> <div class="flex flex-col flex-col-reverse">
<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 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" /> <img src={team_position_image(@props.team_position)} class="w-5 h-5" />
<h3 class="text-white"><%= @props.name %></h3> <h3 class="text-white"><%= @props.name %></h3>
</div> </div>
<img <img src={"https://ddragon.leagueoflegends.com/cdn/14.11.1/img/champion/#{@props.image}"} />
class="static w-40 h-40"
src={"https://ddragon.leagueoflegends.com/cdn/14.11.1/img/champion/#{@props.image}"}
/>
</div> </div>
<div class="py-1" /> <div class="py-1" />
<div class="pl-2"> <div class="pl-2">

3
apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/components/champion_filters.ex
View File

@ -30,9 +30,8 @@ defmodule LolAnalyticsWeb.ChampionLive.Components.ChampionFilters do
~H""" ~H"""
<div> <div>
<div class="flex flex-row justify-between p-10"> <div class="flex flex-row overflow-x-scroll justify-between">
<%= for role <- @roles do %> <%= for role <- @roles do %>
<%!-- <%= IO.inspect(role) %> --%>
<%= if (assigns.selectedrole == role.value) do %> <%= if (assigns.selectedrole == role.value) do %>
<div phx-click="filter" phx-value-role={role.title} class={selected_class}> <div phx-click="filter" phx-value-role={role.title} class={selected_class}>
<p><%= role.title %></p> <p><%= role.title %></p>

2
apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.ex
View File

@ -67,7 +67,7 @@ defmodule LoLAnalyticsWeb.ChampionLive.Index do
%{status: :data, data: champions} -> %{status: :data, data: champions} ->
~H""" ~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 %> <%= for champion <- champions do %>
<.champion_card props={champion} /> <.champion_card props={champion} />
<% end %> <% end %>

18
apps/lol_analytics_web/lib/lol_analytics_web/live/champion_live/index.html.heex
View File

@ -2,15 +2,15 @@
Champions Champions
</.header> </.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} /> <.render_champions champions={@champions} />
</div>
<.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>