-
[ Pokemon Flavor Text Placeholder ]
+ @if (string.IsNullOrEmpty(_pokemon.FlavorText))
+ {
+
[ Pokemon Flavor Text Placeholder ]
+
+ }
+ else
+ {
+
@_pokemon.FlavorText
+
+ }
diff --git a/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.cs b/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.cs
index f20140b..7548b0e 100644
--- a/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.cs
+++ b/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.cs
@@ -26,5 +26,17 @@ namespace Portfolio.WebUI.Server.Components.Component
isShiny = !isShiny;
StateHasChanged();
}
+
+ private string GetTypeImageUrl(string pokemonType)
+ {
+ if (string.IsNullOrEmpty(pokemonType))
+ {
+ return "https://www.serebii.net/pokemonsleep/pokemon/type/normal.png"; // Fallback image
+ }
+
+ return $"https://www.serebii.net/pokemonsleep/pokemon/type/{pokemonType.ToLower()}.png";
+ }
+
+
}
}
diff --git a/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.css b/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.css
index 3ff2b26..2114fc6 100644
--- a/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.css
+++ b/Portfolio.WebUI.Server/Components/Component/PokemonCard.razor.css
@@ -21,12 +21,22 @@
position: absolute;
top: 0 !important;
left: 0 !important;
- margin-top: 3rem !important;
+ margin-top: 3.3rem !important;
margin-left: 1.5rem !important;
transform: translateY(-50%) !important;
font-size: .75rem;
}
+.pokemon-type {
+ position: absolute;
+ top: 0 !important;
+ right: 0 !important;
+ width: 2.5rem;
+ height: 2.5rem;
+ margin-top: .5rem !important;
+ margin-right: .5rem !important;
+}
+
.pokemon-image {
width: 100%; /* Look to flip-container for the width/height of image */
height: 100%;
@@ -41,11 +51,29 @@
left: 50% !important;
width: 90%;
height: 20%;
- padding: 0.5rem;
+ padding: 0.25rem;
+ padding-left: 0.5rem;
+ padding-right: 0.5rem;
margin-top: 3rem !important;
transform: translateX(-50%) !important;
+
+ display: flex; /* Centers text inside */
+ align-items: start;
+ justify-content: center; /* Horizontally centers text */
+ overflow: hidden; /* Ensures no scrollbar */
}
+ .pokemon-flavor-text p {
+ margin: 0;
+ width: 100%;
+ text-align: start;
+ font-size: min(14px, 1.5vw); /* Scales font but won't exceed 14px */
+ line-height: 1.2; /* Adjust spacing for readability */
+ white-space: normal; /* Ensures wrapping */
+ word-wrap: break-word;
+ hyphens: auto;
+ }
+
.flip-container {
position: absolute !important;
top: 40% !important;
diff --git a/Portfolio.WebUI.Server/Components/Component/PokemonTable.razor b/Portfolio.WebUI.Server/Components/Component/PokemonTable.razor
index e27c1a3..d6b3b13 100644
--- a/Portfolio.WebUI.Server/Components/Component/PokemonTable.razor
+++ b/Portfolio.WebUI.Server/Components/Component/PokemonTable.razor
@@ -33,12 +33,13 @@ else