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

Made table rows vertically aligned.

This commit is contained in:
Kira Jiroux 2025-04-08 15:02:41 -04:00
parent 9c87f3e4cf
commit 8953387f66
2 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,10 +44,10 @@
else else
{ {
<!-- Table Body --> <!-- Table Body -->
<tbody> <tbody >
@foreach (var pokemon in pokemons) @foreach (var pokemon in pokemons)
{ {
<tr> <tr class="" style="vertical-align: middle;">
<!-- Section: Pokemon Image --> <!-- Section: Pokemon Image -->
@{ @{
@ -84,16 +84,16 @@
{ {
@if (pokemon.VariationName == "Alolan") @if (pokemon.VariationName == "Alolan")
{ {
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" style="vertical-align: auto;"> Alolan @pokemon.PokemonName</td> <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> Alolan @pokemon.PokemonName</td>
} }
@if (pokemon.VariationName == "Paldean") @if (pokemon.VariationName == "Paldean")
{ {
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" style="vertical-align: auto;"> Paldean @pokemon.PokemonName</td> <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> Paldean @pokemon.PokemonName</td>
} }
} }
else // Otherwise, Base Case else // Otherwise, Base Case
{ {
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" style="vertical-align: auto;"> @pokemon.PokemonName</td> <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> @pokemon.PokemonName</td>
} }

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

@ -51,6 +51,11 @@
transform: rotateY(180deg); transform: rotateY(180deg);
} }
.pokemon-name-style {
vertical-align: auto;
cursor: pointer;
}
.badge { .badge {
width: 100px; width: 100px;
height: 30px; height: 30px;
@ -98,9 +103,6 @@
width:3%; width:3%;
} }
.pokemon-name-width {
width:10%;
}
.pokemon-type-width { .pokemon-type-width {
width:5%; width:5%;