kira
/
exciting-aftermath
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Keep playing with the table gosh. I want to shower.

This commit is contained in:
Kira Jiroux 2025-04-11 20:26:18 -04:00
parent aea7c06819
commit 79bda1d0fc
3 changed files with 29 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor
View File

@ -80,21 +80,9 @@
<!-- Section 3: Pokemon Name --> <!-- Section 3: Pokemon Name -->
@if (pokemon.IsVariation) // If a Variant
{ <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style fw-light col-2">@(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)</td>
@if (pokemon.VariationName == "Alolan")
{
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style col-2"> Alolan @pokemon.PokemonName</td>
}
@if (pokemon.VariationName == "Paldean")
{
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style col-2"> Paldean @pokemon.PokemonName</td>
}
}
else // Otherwise, Base Case
{
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style col-2"> @pokemon.PokemonName</td>
}
<!-- Section 4: Pokemon Type --> <!-- Section 4: Pokemon Type -->
@ -144,7 +132,7 @@
</div> </div>
</div> </div>
<!-- Table Body --> <!-- Table Body -->
<div class="tableFixHead table-responsive row"> <div class="tableFixHead row">
<table class="table table-striped border-0"> <table class="table table-striped border-0">
@ -158,8 +146,10 @@
@foreach (var pokemon in pokemons) @foreach (var pokemon in pokemons)
{ {
<tr class=" mb-3 border-0"> <tr class="border-0">
<div class=" d-flex align-items-center"> <div class="d-flex align-items-center">
<!-- Pokemon Image -->
<div class="me-3"> <div class="me-3">
<div class="flip-container-sm" @onclick="() => ToggleImage(pokemon.Id)"> <div class="flip-container-sm" @onclick="() => ToggleImage(pokemon.Id)">
<div class="flipper-sm @(isShiny[pokemon.Id] ? "flipped" : "")"> <div class="flipper-sm @(isShiny[pokemon.Id] ? "flipped" : "")">
@ -171,19 +161,23 @@
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<h5 class="mb-1"> <!-- Number and Name -->
<h5>
@pokemon.PokemonId - @pokemon.PokemonId -
<span class="pokemon-name-style" @onclick="() => ViewPokemon(pokemon.PokemonId)"> <span class="pokemon-name-style fw-light" @onclick="() => ViewPokemon(pokemon.PokemonId)">
@(pokemon.IsVariation ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName) @(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)
</span> </span>
</h5> </h5>
<div class="d-flex flex-wrap align-items-center gap-2"> <!-- Stats -->
<div class="d-flex flex-wrap align-items-center gap-2">
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:28px;" /> <img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:28px;" />
<div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div> <div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div>
<div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div> <div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div>
</div> </div>
</div> </div>
</div> </div>
</tr> </tr>
} }

12
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.cs
View File

@ -34,6 +34,18 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
} }
} }
private bool ToggleVariationName(int Id, int PokemonId)
{
foreach (var pokemon in pokemons)
{
if (pokemon.PokemonId == PokemonId && pokemon.Id != Id)
{
return true;
}
}
return false;
}
private async Task ConfirmDelete(int Id) private async Task ConfirmDelete(int Id)
{ {
bool confirm = await JS.InvokeAsync<bool>("confirm", "Are you sure you want to delete this Pokémon?"); bool confirm = await JS.InvokeAsync<bool>("confirm", "Are you sure you want to delete this Pokémon?");

1
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css
View File

@ -18,6 +18,7 @@
.pokemon-name-style { .pokemon-name-style {
cursor:pointer; cursor:pointer;
font-size: 1.3rem;
} }