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

Compare commits

base: kira:5b2aafc4e52324503ce4c87d7414c523824d7a8c
Branches Tags
kira:master
kira:update/responsive-styling
kira:update/pokemon-rate-ui-and-func
kira:feature/temperature-blanket
kira:update/pokemon-card-view
kira:feature/pokemon-view
kira:update/pokemon-entity
kira:update/toggle-sidebar
kira:update/componet-parameter-data-passing
kira:cleanup/move-pokemon-table-to-components
kira:feature/searchable-dropdown
kira:feature/rating-pokemon
kira:feature/add-delete-functionality
kira:feature/toggle-images
kira:extract-from-db
kira:feature/response-handling
kira:feature/infrastructure-layer
kira:add-pokemon_images
kira:feature/clean-architecture
..
compare: kira:1955a210aadee6ead5e6522452e05f8c9c657c51
Branches Tags
kira:update/responsive-styling
kira:master
kira:update/pokemon-rate-ui-and-func
kira:feature/temperature-blanket
kira:update/pokemon-card-view
kira:feature/pokemon-view
kira:update/pokemon-entity
kira:update/toggle-sidebar
kira:update/componet-parameter-data-passing
kira:cleanup/move-pokemon-table-to-components
kira:feature/searchable-dropdown
kira:feature/rating-pokemon
kira:feature/add-delete-functionality
kira:feature/toggle-images
kira:extract-from-db
kira:feature/response-handling
kira:feature/infrastructure-layer
kira:add-pokemon_images
kira:feature/clean-architecture

No commits in common. "5b2aafc4e52324503ce4c87d7414c523824d7a8c" and "1955a210aadee6ead5e6522452e05f8c9c657c51" have entirely different histories.
5b2aafc4e5 ... 1955a210aa

7 changed files with 66 additions and 82 deletions
Show Stats Expand all files Collapse all files

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

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

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

@ -1,59 +1,60 @@
@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"> @if (_pokemon.IsVariation)
@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">
<div class="pokemon-number"> <p class="fw-light card-text">Pokédex #<strong>@_pokemon.PokemonId</strong></p>
<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 >
<!-- Pokemon Image --> <img class="pokemon-type" src="@GetTypeImageUrl(_pokemon.PokemonType)" />
<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>
<div class="mt-3"> <!-- Pokemon Image -->
<PokemonEditButton PokemonId="@_pokemon.Id" /> <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> </div>
</div> </div>

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

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

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

@ -6,11 +6,11 @@
@rendermode InteractiveServer @rendermode InteractiveServer
<!-- Table A: Desktop View--> <!-- Table A: Desktop View-->
<div class="container d-none d-md-block "> <div class="container d-none d-md-block">
<!-- Main UI --> <!-- Main UI -->
<div class="card shadow-sm border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable"> <div class="card shadow-sm border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable">
<!-- Table Header --> <!-- Table Header -->
<div class="row card-header bg-secondary bg-gradient py-3 border-0"> <div class="row card-header bg-secondary bg-gradient ml-0 py-3 border-0">
<div class="flex-row justify-content-between"> <div class="flex-row justify-content-between">
<div class="text-center position-relative"> <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" /> <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>
<div class="tableFixHead bg-secondary table-responsive row"> <div class="tableFixHead table-responsive row">
<table class="table col table-borderless border-0 table-secondary table-striped align-middle"> <table class="table col table-borderless border-0 table-secondary table-striped align-middle">
<!-- Table Head --> <!-- Table Head -->
<thead class=""> <thead class="">
@ -47,7 +47,6 @@
{ {
<!-- Table Body --> <!-- Table Body -->
<tbody> <tbody>
<tr></tr>
@foreach (var pokemon in FilteredPokemon) @foreach (var pokemon in FilteredPokemon)
{ {
<tr class="flex-row"> <tr class="flex-row">
@ -177,8 +176,8 @@
<!-- Stats --> <!-- Stats -->
<div class="d-flex flex-wrap align-items-center gap-2"> <div class="d-flex flex-wrap align-items-center gap-2">
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:28px;" /> <img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:28px;" />
<PokemonBadge BadgeItem="@pokemon.SleepType" /> <div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div>
<PokemonBadge BadgeItem="@pokemon.Speciality" /> <div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div>
</div> </div>
</div> </div>

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="d-flex justify-content-center align-items-center" style="height: 60vh;"> <div class="mt-5">
<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"> <div class="d-flex justify-content-center align-items-center h-100">
<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,9 +1,4 @@
.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;
} }