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 --> <!-- Search Input -->
<div class="pokemon-selector p-3 bg-light"> <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 --> <!-- Scrollable Pokémon Grid -->
<div class="row pokemon-grid"> <div class="row pokemon-grid pt-1">
@foreach (var pokemon in FilteredPokemon) @foreach (var pokemon in FilteredPokemon)
{ {
bool isSelected = SelectedPokemon?.Id == pokemon.Id; bool isSelected = SelectedPokemon?.Id == pokemon.Id;
<div class="col-6 col-md-3 mb-3"> <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)"> @onclick="() => SelectPokemon(pokemon)">
<img src="@pokemon.PokemonImageUrl" class="card-img-top" style="height: 50px; object-fit: contain;" /> <img src="@pokemon.PokemonImageUrl" class="card-img-top" style="height: 50px; object-fit: contain;" />
<div class="card-body p-2 text-center"> <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%; border-radius: 5% / 3.5%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.pokemon-grid { .pokemon-grid {
flex: 1 1 auto; flex: 1 1 auto;
overflow-y: auto; overflow-y: auto;
align-content: flex-start;
} }
@ -19,7 +21,7 @@
} }
.pokemon-card:hover { .pokemon-card:hover {
transform: scale(1.05); transform: scale(1.13);
} }
.small-card { .small-card {

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

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