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

Fixed the PokemonSelector visual issue where filtered pokemon appear super spaced out; now they appear naturally. Additional changes are just removing minor things.

This commit is contained in:
Kira Jiroux 2025-09-24 15:13:20 -04:00
parent 37d8fdaca2
commit 2f210a0e1a
4 changed files with 26 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor
View File

@ -1,16 +1,16 @@

<!-- Search Input -->
<div class="pokemon-selector p-3 bg-light">
<input class="form-control mb-3" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" />
<input class="form-control mb-3 rounded rounded-5" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" />
<!-- Scrollable Pokémon Grid -->
<div class="row pokemon-grid">
<div class="row pokemon-grid pt-1">
@foreach (var pokemon in FilteredPokemon)
{
bool isSelected = SelectedPokemon?.Id == pokemon.Id;
<div class="col-6 col-md-3 mb-3">
<div class="card pokemon-card small-card @(isSelected ? "border-primary border-2 shadow" : "border-2 border-white")"
<div class="card pokemon-card small-card @(isSelected ? "border-primary border-2 shadow" : "border-2 border-white") rounded rounded-3"
@onclick="() => SelectPokemon(pokemon)">
<img src="@pokemon.PokemonImageUrl" class="card-img-top" style="height: 50px; object-fit: contain;" />
<div class="card-body p-2 text-center">

4
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonSelector.razor.css
View File

@ -5,11 +5,13 @@
border-radius: 5% / 3.5%;
display: flex;
flex-direction: column;
}
.pokemon-grid {
flex: 1 1 auto;
overflow-y: auto;
align-content: flex-start;
}
@ -19,7 +21,7 @@
}
.pokemon-card:hover {
transform: scale(1.05);
transform: scale(1.13);
}
.small-card {

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

@ -5,10 +5,7 @@
@attribute [StreamRendering]
@rendermode InteractiveServer
<div class="d-flex justify-content-end">
</div>
<!-- Table A: Desktop View-->
<div class="container d-none d-md-block" style="height: 70vh;">
<!-- Main UI -->
@ -43,8 +40,8 @@
<div class="tableFixHead d-flex flex-column justify-content-start bg-secondary table-responsive row ">
<table class="table table-borderless border-0 table-secondary table-striped align-middle">
<!-- Table Head -->
<thead class="">
<tr class="">
<thead>
<tr>
<th class="text-white text-bg-info col-2 d-none d-md-table-cell" scope="col"></th>
<th class="text-white text-bg-info col-1" scope="col">#</th>
<th class="text-white text-bg-info col-2" scope="col">Pokémon</th>
@ -68,7 +65,7 @@
else
{
<!-- Table Body -->
<tbody class="">
<tbody>
<tr></tr>
@if (FilteredPokemon != null && FilteredPokemon.Any())
{
@ -104,7 +101,7 @@
</td>
<!-- Section 2: Pokemon # -->
<th class="" scope="row" style="cursor: default;">@pokemon.PokemonId</th>
<th scope="row" style="cursor: default;">@pokemon.PokemonId</th>
<!-- Section 3: Pokemon Name -->
@ -114,21 +111,21 @@
<!-- Section 4: Pokemon Type -->
<td class="">
<td>
<div class="d-flex justify-content-center">
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:36px; height:36px;" />
</div>
</td>
<!-- Section 5: Sleep Type -->
<td class="" style="">
<td>
<div class="d-flex justify-content-center ">
<PokemonBadge BadgeItem="@pokemon.SleepType" />
</div>
</td>
<!-- Section 6: Speciality -->
<td class="" style="">
<td>
<div class="d-flex justify-content-center">
<PokemonBadge BadgeItem="@pokemon.Speciality" />
@ -137,11 +134,10 @@
@if (adminToggle)
{
<td class="" style="">
<td>
<div class="d-flex justify-content-center">
<PokemonEditButton PokemonId="@pokemon.PokemonId" />
@*<button @onclick="() => ConfirmDelete(pokemon.Id)">Delete</button>*@
</div>
</td>
}
@ -204,10 +200,10 @@
@foreach (var pokemon in pokemons)
{
<tr class="border-0">
<div class="d-flex align-items-center">
<div class="d-flex align-items-center" style="border: 1px dashed hotpink;">
<!-- Pokemon Image -->
<div class="me-3">
<div class="me-3" style="border: 1px dashed hotpink;">
<div class="flip-container-sm" @onclick="() => ToggleImage(pokemon.Id)">
<div class="flipper-sm @(isShiny[pokemon.Id] ? "flipped" : "")">
<img class="front img-fluid" src="@pokemon.PokemonImageUrl" />
@ -219,7 +215,7 @@
</div>
</div>
<div class="">
<div style="border: 1px dashed hotpink;">
<!-- Number and Name -->
<h5>
@pokemon.PokemonId -

18
Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonCreate.razor.cs
View File

@ -60,32 +60,32 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
*/
if (!pokemon2FormView && !pokemon3FormView)
{
if(IsComplete(pokemon1))
{
//if(IsComplete(pokemon1))
//{
await HandleSubmit(pokemon1);
Navigation.NavigateTo("/pokemon");
}
//}
}
else if (pokemon2FormView)
{
if (IsComplete(pokemon1) && IsComplete(pokemon2))
{
//if (IsComplete(pokemon1) && IsComplete(pokemon2))
//{
await HandleSubmit(pokemon1);
await HandleSubmit(pokemon2);
Navigation.NavigateTo("/pokemon");
}
// }
}
else if (pokemon3FormView)
{
if (IsComplete(pokemon1) && IsComplete(pokemon2) && IsComplete(pokemon3))
{
//if (IsComplete(pokemon1) && IsComplete(pokemon2) && IsComplete(pokemon3))
//{
await HandleSubmit(pokemon1);
await HandleSubmit(pokemon2);
await HandleSubmit(pokemon3);
Navigation.NavigateTo("/pokemon");
}
//}
}
}