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 */

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

@ -1,60 +1,59 @@
@attribute [StreamRendering] @attribute [StreamRendering]
@rendermode InteractiveServer @rendermode InteractiveServer
<div class="pokemon-card card-holo animated @GetTypeCssClass(_pokemon.PokemonType)"> <div class="card-wrapper d-flex flex-column align-items-center">
<!-- Pokemon Name, Number, and Type --> <div class="pokemon-card card-holo animated @GetTypeCssClass(_pokemon.PokemonType)">
<div class="z-3"> <!-- Pokemon Name, Number, and Type -->
@if (_pokemon.IsVariation) <div class="z-3">
{ @if (_pokemon.IsVariation)
<div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.VariationName @_pokemon.PokemonName</p></div> {
} <div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.VariationName @_pokemon.PokemonName</p></div>
else }
{ else
<div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.PokemonName</p></div> {
} <div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.PokemonName</p></div>
<div class="pokemon-number"> }
<p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p> <div class="pokemon-number">
<p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
</div>
<div >
<img class="pokemon-type" src="@GetTypeImageUrl(_pokemon.PokemonType)" />
</div>
</div> </div>
<div >
<img class="pokemon-type" src="@GetTypeImageUrl(_pokemon.PokemonType)" /> <!-- Pokemon Image -->
<div class="flip-container z-1" @onclick="() => ToggleImage()">
<div class="flipper @(isShiny ? "flipped" : "")">
<img class="pokemon-image front" src="@_pokemon.PokemonImageUrl" />
<img class="pokemon-image back" src="@_pokemon.PokemonShinyImageUrl" />
</div>
</div> </div>
<!-- Pokemon Flavortext -->
<div class="z-3 pokemon-flavor-text @(GetTypeCssClass(_pokemon.PokemonType))">
@if (string.IsNullOrEmpty(_pokemon.FlavorText))
{
<p class="fw-light">[ Pokemon Flavor Text Placeholder ]</p>
}
else
{
<p class="fw-light">@_pokemon.FlavorText</p>
}
</div>
<!-- Pokemon Sleep Type and Specialty Badges -->
<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>
<!-- Pokemon Image --> <div class="mt-3">
<div class="flip-container z-1" @onclick="() => ToggleImage()"> <PokemonEditButton PokemonId="@_pokemon.Id" />
<div class="flipper @(isShiny ? "flipped" : "")">
<img class="pokemon-image front" src="@_pokemon.PokemonImageUrl" />
<img class="pokemon-image back" src="@_pokemon.PokemonShinyImageUrl" />
</div>
</div>
<!-- Pokemon Flavortext -->
<div class="z-3 pokemon-flavor-text @(GetTypeCssClass(_pokemon.PokemonType))">
@if (string.IsNullOrEmpty(_pokemon.FlavorText))
{
<p class="fw-light">[ Pokemon Flavor Text Placeholder ]</p>
}
else
{
<p class="fw-light">@_pokemon.FlavorText</p>
}
</div>
<!-- Pokemon Sleep Type and Specialty Badges -->
<div class="position-absolute bottom-0 end-0 mb-1 me-1 z-2">
<div class="d-flex justify-content-between">
<PokemonBadge BadgeItem="@_pokemon.SleepType" />
<PokemonBadge BadgeItem="@_pokemon.Speciality" />
</div>
</div>
</div>
<div class="mt-5 position-relative">
<div class="position-absolute top-50 start-50 translate-middle">
<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;
} }