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

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

@ -1,7 +1,8 @@
@attribute [StreamRendering]
@rendermode InteractiveServer
<div class="pokemon-card card-holo animated @GetTypeCssClass(_pokemon.PokemonType)">
<div class="card-wrapper d-flex flex-column align-items-center">
<div class="pokemon-card card-holo animated @GetTypeCssClass(_pokemon.PokemonType)">
<!-- Pokemon Name, Number, and Type -->
<div class="z-3">
@if (_pokemon.IsVariation)
@ -43,18 +44,16 @@
</div>
<!-- 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">
<PokemonBadge BadgeItem="@_pokemon.SleepType" />
<PokemonBadge BadgeItem="@_pokemon.Speciality" />
</div>
</div>
</div>
</div>
<div class="mt-5 position-relative">
<div class="position-absolute top-50 start-50 translate-middle">
<div class="mt-3">
<PokemonEditButton PokemonId="@_pokemon.Id" />
</div>
</div>

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

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

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

@ -18,9 +18,9 @@
<div class="mt-4">
<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 />
</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(_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">
<PokemonCard Pokemon="_pokemon" />
</div>

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

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