Compare commits
2 Commits
1955a210aa
...
5b2aafc4e5
| Author | SHA1 | Date |
|---|---|---|
Kira Jiroux
|
5b2aafc4e5 | |
|
Kira Jiroux
|
04320dc9e1 |
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -20,6 +20,12 @@
|
|||
transform: translateY(-13px);
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.pokemon-name {
|
||||
|
|
|
|||
|
|
@ -6,11 +6,11 @@
|
|||
@rendermode InteractiveServer
|
||||
|
||||
<!-- Table A: Desktop View-->
|
||||
<div class="container d-none d-md-block">
|
||||
<div class="container d-none d-md-block ">
|
||||
<!-- Main UI -->
|
||||
<div class="card shadow-sm border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable">
|
||||
<!-- Table Header -->
|
||||
<div class="row card-header bg-secondary bg-gradient ml-0 py-3 border-0">
|
||||
<div class="row card-header bg-secondary bg-gradient py-3 border-0">
|
||||
<div class="flex-row justify-content-between">
|
||||
<div class="text-center position-relative">
|
||||
<input class="form-control position-absolute top-0 start-0 border-0 w-25" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" />
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
|
||||
|
||||
<div class="tableFixHead table-responsive row">
|
||||
<div class="tableFixHead bg-secondary table-responsive row">
|
||||
<table class="table col table-borderless border-0 table-secondary table-striped align-middle">
|
||||
<!-- Table Head -->
|
||||
<thead class="">
|
||||
|
|
@ -47,6 +47,7 @@
|
|||
{
|
||||
<!-- Table Body -->
|
||||
<tbody>
|
||||
<tr></tr>
|
||||
@foreach (var pokemon in FilteredPokemon)
|
||||
{
|
||||
<tr class="flex-row">
|
||||
|
|
@ -176,8 +177,8 @@
|
|||
<!-- Stats -->
|
||||
<div class="d-flex flex-wrap align-items-center gap-2">
|
||||
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:28px;" />
|
||||
<div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div>
|
||||
<div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div>
|
||||
<PokemonBadge BadgeItem="@pokemon.SleepType" />
|
||||
<PokemonBadge BadgeItem="@pokemon.Speciality" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue