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

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

@ -1,60 +1,59 @@
@attribute [StreamRendering]
@rendermode InteractiveServer
<div class="pokemon-card card-holo animated @GetTypeCssClass(_pokemon.PokemonType)">
<!-- Pokemon Name, Number, and Type -->
<div class="z-3">
@if (_pokemon.IsVariation)
{
<div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.VariationName @_pokemon.PokemonName</p></div>
}
else
{
<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="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)
{
<div class="pokemon-name"><p class="fw-bold card-title">@_pokemon.VariationName @_pokemon.PokemonName</p></div>
}
else
{
<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>
<div >
<img class="pokemon-type" src="@GetTypeImageUrl(_pokemon.PokemonType)" />
</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>
<!-- 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>
<!-- 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>
<!-- 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 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;
}