From 5dd07c7c3f9fed4408b7042d4440c28c55ac2233 Mon Sep 17 00:00:00 2001
From: Kira Jiroux <microsoft.com@kirajiroux.com>
Date: Thu, 10 Apr 2025 13:30:26 -0400
Subject: [PATCH] Adjusted table row layouts, and edited buttons to appear
 circular to coincide with Pkmn theme.

---
 .../PokemonEditButton.razor                   |  2 +-
 .../Pokemon Components/PokemonTable.razor     | 70 ++++++++++---------
 .../Pokemon Components/PokemonTable.razor.css | 26 +++----
 3 files changed, 52 insertions(+), 46 deletions(-)

diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonEditButton.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonEditButton.razor
index f02aa0f..1be1d23 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonEditButton.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonEditButton.razor	
@@ -1,5 +1,5 @@
 @inject NavigationManager Navigation
-<button class="btn btn-warning" @onclick="() => EditPokemon(PokemonId)">
+<button class="btn btn-warning rounded rounded-5" @onclick="() => EditPokemon(PokemonId)">
     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
         <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z" />
     </svg>
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor
index 89e482a..c51ffb9 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor	
@@ -7,13 +7,13 @@
 
 
 <!-- Main UI -->
-<div class="card shadow border-0 mt-4 m-auto w-75">
+<div class="card shadow border-0 mt-4 m-auto w-50">
 
     <!-- Table Header -->
     <div class="card-header bg-secondary bg-gradient ml-0 py-3">
         <div class="row">
-            <div class="col-12 text-center position-relative">
-                <h2 class="text-info">Available Pokémon</h2>
+            <div class="text-center col-12 position-relative">
+                <h2 class="text-info text-decoration-underline">Available Pokémon</h2>
                 <div class="m-1 col-1 badge bg-info position-absolute top-0 end-0"><p class="statText">@(pokemons.Count()) Pokemon</p></div>
             </div>
         </div>
@@ -21,18 +21,18 @@
 
     <!-- Table -->
     <div class="tableFixHead">
-        <table class="table table-striped">
+        <table class="table table-striped align-middle">
 
             <!-- Table Head -->
-            <thead>
-                <tr>
-                    <th class="text-bg-info col" scope="col"></th>
-                    <th class="text-bg-info col pokemon-dex-width" scope="col">#</th>
-                    <th class="text-bg-info col pokemon-name-width" scope="col">Pokemon</th>
-                    <th class="text-bg-info col " scope="col">Type</th>
-                    <th class="text-bg-info col " scope="col">Sleep Type</th>
-                    <th class="text-bg-info col " scope="col">Speciality</th>
-                    <th class="text-bg-info col " scope="col"></th>
+            <thead class="">
+                <tr class="">
+                    <th class="text-bg-info col-1" scope="col"></th>
+                    <th class="text-bg-info col-1" scope="col">#</th>
+                    <th class="text-bg-info col-2" scope="col">Pokemon</th>
+                    <th class="text-bg-info col-1 text-center" scope="col">Type</th>
+                    <th class="text-bg-info col-1 text-center" scope="col">Sleep Type</th>
+                    <th class="text-bg-info col-1 text-center" scope="col">Speciality</th>
+                    <!-- <th class="text-bg-info text-end" scope="col">Control Buttons</th> -->
                 </tr>
             </thead>
             @if(pokemons == null)
@@ -47,7 +47,7 @@
                 <tbody >
                     @foreach (var pokemon in pokemons)
                     {
-                        <tr class="" style="vertical-align: middle;">
+                        <tr class="">
 
                             <!-- Section: Pokemon Image -->
                             @{
@@ -79,53 +79,59 @@
                             <!-- Section 2: Pokemon # -->
                             <th scope="row">@pokemon.PokemonId</th>
 
+
                             <!-- Section 3: Pokemon Name -->
                             @if (pokemon.IsVariation)   // If a Variant
                             {
                                 @if (pokemon.VariationName == "Alolan")
                                 {
-                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> Alolan @pokemon.PokemonName</td>
+                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)"> Alolan @pokemon.PokemonName</td>
                                 }
                                 @if (pokemon.VariationName == "Paldean")
                                 {
-                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> Paldean @pokemon.PokemonName</td>
+                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)"> Paldean @pokemon.PokemonName</td>
                                 }
                             }
                             else // Otherwise, Base Case
                             {
-                                <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> @pokemon.PokemonName</td>
+                                <td @onclick="() => ViewPokemon(pokemon.PokemonId)"> @pokemon.PokemonName</td>
                             }
 
 
                             <!-- Section 4: Pokemon Type -->
                             <td>
-                                <div class="m-1 col-1">
-                                    <img src="@GetTypeImageUrl(pokemon.PokemonType)" class="" style="width:60px; height:60px;" />
+                                <div class="d-flex justify-content-center">
+                                    <img src="@GetTypeImageUrl(pokemon.PokemonType)" class="" style="width:36px; height:36px;" />
                                 </div>
                             </td>
 
                             <!-- Section 5: Sleep Type -->
-                            <td style="vertical-align: auto;">
-                                <div class="m-1 col-1 badge @pokemon.SleepType.ToLower()"><p class="statText">@pokemon.SleepType</p></div>
+                            <td style="">
+                                <div class="d-flex justify-content-center">
+                                    <div class=" badge @pokemon.SleepType.ToLower()"><p class="statText">@pokemon.SleepType</p></div>
+                                </div>
                             </td>
 
                             <!-- Section 6: Speciality -->
-                            <td style="padding-right: 30px; vertical-align: auto;">
-                                <div class="m-1 col-1 badge @pokemon.Speciality.ToLower()"><p class="statText">@pokemon.Speciality</p></div>
+                            <td style="">
+                                <div class="d-flex justify-content-center">
+                                <div class=" badge @pokemon.Speciality.ToLower()"><p class="statText">@pokemon.Speciality</p></div>
+                                </div>
                             </td>
 
                             <!-- Section 7: Functional Buttons  -->
+                            <!-- 
                             <td>
-                                <PokemonEditButton PokemonId="pokemon.Id" />
-                                <button class="btn btn-danger" @onclick="() => ConfirmDelete(pokemon.Id)">
-                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
-                                            class="bi bi-trash" viewBox="0 0 16 16">
-                                        <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z" />
-                                        <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z" />
-                                    </svg>
-                                </button>
+                                <div class="d-flex justify-content-end">
+                                    <PokemonEditButton PokemonId="pokemon.Id" />
+                                    <button class="btn btn-danger rounded rounded-5 mx-1" @onclick="() => ConfirmDelete(pokemon.Id)">
+                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
+                                            <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5" />
+                                        </svg>
+                                        </button>
+                                </div>
                             </td>
-
+                            -->
                         </tr>
                     }
                 </tbody>
diff --git a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css
index 06cccd7..53ee97a 100644
--- a/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css	
+++ b/Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css	
@@ -1,4 +1,10 @@
-
+.five-percent {
+    width: 5%;
+}
+.ten-percent {
+    width: 10%;
+}
+
 .tableFixHead {
     overflow: auto;
     height: 600px;
@@ -10,6 +16,11 @@
         z-index: 10;
     }
 
+.no-gutter > [class*='col-'] {
+    padding-right: 0;
+    padding-left: 0;
+}
+
 .flip-container {
     perspective: 1000px;
     display: inline-block;
@@ -51,10 +62,7 @@
     transform: rotateY(180deg);
 }
 
-.pokemon-name-style {
-    vertical-align: auto;
-    cursor: pointer;
-}
+
 
 .badge {
     width: 100px;
@@ -99,11 +107,3 @@
 }
 
 
-.pokemon-dex-width {
-    width:3%;
-}
-
-
-.pokemon-type-width {
-    width:5%;
-}