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

Made some responsive styling changes.

This commit is contained in:
Kira Jiroux 2025-06-09 18:21:34 -04:00
parent 04320dc9e1
commit 5b2aafc4e5
6 changed files with 76 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBadge.razor.css
View File

@ -1,17 +1,22 @@
.badge { .badge {
display: flex;
align-items: center;
justify-content: center;
width: 90px; width: 90px;
height: 30px; height: 30px;
color: white; padding: 0.25rem;
padding: 4px 8px;
border-radius: 30px; border-radius: 30px;
color: white;
font-size: clamp(0.7rem, 1vw, 0.9rem);
text-align: center;
white-space: nowrap;
} }
.statText { .statText {
position: relative; margin: 0;
top: 50%; padding: 0;
left: 50%; width: 100%;
transform: translate(-50%, -50%); text-align: center;
font-size: .8rem;
} }
/* Sleep Type Badge Styling */ /* Sleep Type Badge Styling */

7
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonCard.razor
View File

@ -1,6 +1,7 @@
@attribute [StreamRendering] @attribute [StreamRendering]
@rendermode InteractiveServer @rendermode InteractiveServer
<div class="card-wrapper d-flex flex-column align-items-center">
<div class="pokemon-card card-holo animated @GetTypeCssClass(_pokemon.PokemonType)"> <div class="pokemon-card card-holo animated @GetTypeCssClass(_pokemon.PokemonType)">
<!-- Pokemon Name, Number, and Type --> <!-- Pokemon Name, Number, and Type -->
<div class="z-3"> <div class="z-3">
@ -43,7 +44,7 @@
</div> </div>
<!-- Pokemon Sleep Type and Specialty Badges --> <!-- Pokemon Sleep Type and Specialty Badges -->
<div class="position-absolute bottom-0 end-0 mb-1 me-1 z-2"> <div class="position-absolute bottom-0 end-0 z-2">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
<PokemonBadge BadgeItem="@_pokemon.SleepType" /> <PokemonBadge BadgeItem="@_pokemon.SleepType" />
<PokemonBadge BadgeItem="@_pokemon.Speciality" /> <PokemonBadge BadgeItem="@_pokemon.Speciality" />
@ -52,9 +53,7 @@
</div> </div>
<div class="mt-5 position-relative"> <div class="mt-3">
<div class="position-absolute top-50 start-50 translate-middle">
<PokemonEditButton PokemonId="@_pokemon.Id" /> <PokemonEditButton PokemonId="@_pokemon.Id" />
</div> </div>
</div> </div>

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

@ -20,6 +20,12 @@
transform: translateY(-13px); transform: translateY(-13px);
} }
.card-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
.pokemon-name { .pokemon-name {

4
Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonRate.razor
View File

@ -18,9 +18,9 @@
<div class="mt-4"> <div class="mt-4">
<div class="row"> <div class="row">
@if (PokemonList != null || NatureList == null || SubskillList == null) @if (PokemonList == null || NatureList == null || SubskillList == null)
{ {
<div class="mt-5"> <div class="d-flex justify-content-center align-items-center" style="height: 60vh;">
<Loading /> <Loading />
</div> </div>
} }

2
Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor
View File

@ -45,7 +45,7 @@ else
<!-- If Variation Pokemon have same PokemonId --> <!-- If Variation Pokemon have same PokemonId -->
@if(_pokemon.Id != _pokemonVariant.Id) @if(_pokemon.Id != _pokemonVariant.Id)
{ {
<div class="d-flex justify-content-center align-items-center h-100"> <div class="d-flex justify-content-center">
<div class="pokemoncard m-1"> <div class="pokemoncard m-1">
<PokemonCard Pokemon="_pokemon" /> <PokemonCard Pokemon="_pokemon" />
</div> </div>

5
Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonView.razor.css
View File

@ -1,4 +1,9 @@
.pokemoncard { .pokemoncard {
width: 100%; width: 100%;
max-width: 350px; max-width: 350px;
flex: 0 0 auto; /* prevent flex shrink/grow */
display: flex;
justify-content: center;
align-items: center;
padding: 0.5rem;
} }