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

Saving Responsive Styling changes before shifting gears.

This commit is contained in:
Kira Jiroux 2025-04-21 14:33:50 -04:00
parent b881c06b83
commit bdd0f2e8bb
7 changed files with 73 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBadge.razor Normal file
View File

@ -0,0 +1 @@
<div class="m-1 badge @_badgeitem.ToLower() border-0"><p class="statText">@_badgeitem</p></div>

22
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBadge.razor.cs Normal file
View File

@ -0,0 +1,22 @@
using Microsoft.AspNetCore.Components;
using Portfolio.Domain.Features.Pokemon;
namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
{
public partial class PokemonBadge
{
[Parameter]
public string BadgeItem { get; set; }
private string _badgeitem { get; set; }
protected override void OnParametersSet()
{
if (BadgeItem != null)
{
_badgeitem = BadgeItem;
}
}
}
}

45
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonBadge.razor.css Normal file
View File

@ -0,0 +1,45 @@
.badge {
width: 90px;
height: 30px;
color: white;
padding: 4px 8px;
border-radius: 30px;
}
.statText {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: .8rem;
}
/* Sleep Type Badge Styling */
.dozing {
background-color: #fcdc5e;
}
.snoozing {
background-color: #4ce8ed;
}
.slumbering {
background-color: #4588fb;
}
/* Speciality Badge Styling */
.berries {
background-color: #24d86b;
}
.ingredients {
background-color: #fdbe4d;
}
.skills {
background-color: #47a0fc;
}
.all {
background-color: #fc7992;
}

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

@ -45,8 +45,8 @@
<!-- 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">
<div class="m-1 badge @_pokemon.SleepType.ToLower() border-0"><p class="statText">@_pokemon.SleepType</p></div>
<div class="m-1 badge @_pokemon.Speciality.ToLower() border-0"><p class="statText">@_pokemon.Speciality</p></div>
<PokemonBadge BadgeItem="@_pokemon.SleepType" />
<PokemonBadge BadgeItem="@_pokemon.Speciality" />
</div>
</div>

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

@ -133,55 +133,8 @@
transform: rotateY(180deg);
}
.badge {
width: 90px;
height: 30px;
color: white;
padding: 4px 8px;
border-radius: 30px;
}
.statText {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: .8rem;
}
/* Sleep Type Badge Styling */
.dozing {
background-color: #fcdc5e;
}
.snoozing {
background-color: #4ce8ed;
}
.slumbering {
background-color: #4588fb;
}
/* Speciality Badge Styling */
.berries {
background-color: #24d86b;
}
.ingredients {
background-color: #fdbe4d;
}
.skills {
background-color: #47a0fc;
}
.all {
background-color: #fc7992;
}
/* Type Card Styling */
/* Type Themes - define vars only */
.pokemon-type-grass {
--border-color: #45ca24;
--bg-color: #e5f8dc;

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

@ -95,14 +95,15 @@
<!-- Section 5: Sleep Type -->
<td class="" style="">
<div class="d-flex justify-content-center ">
<div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div>
<PokemonBadge BadgeItem="@pokemon.SleepType" />
</div>
</td>
<!-- Section 6: Speciality -->
<td class="" style="">
<div class="d-flex justify-content-center">
<div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div>
<PokemonBadge BadgeItem="@pokemon.Speciality" />
</div>
</td>

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

@ -119,32 +119,5 @@
cursor: default;
}
.dozing {
background-color: #fcdc5e;
}
.snoozing {
background-color: #4ce8ed;
}
.slumbering {
background-color: #4588fb;
}
.berries {
background-color: #24d86b;
}
.ingredients {
background-color: #fdbe4d;
}
.skills {
background-color: #47a0fc;
}
.all {
background-color: #fc7992;
}