Minor changes to Edit page to make it centered

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor

@@ -7,7 +7,7 @@
 
 
 <!-- Table A: Desktop View-->
-<div class="container d-none d-md-block mt-4">
+<div class="container d-none d-lg-block d-md-none mt-4">
     <!-- Main UI -->
     <div class="border-0 mx-auto col-8 ">
         <!-- UI Header -->
@@ -42,7 +42,7 @@
                 <!-- Table Head -->
                 <thead>
                     <tr>
-                        <th class="text-white text-bg-info col-2 d-none d-md-table-cell" scope="col"></th>
+                        <th class="text-white text-bg-info col-2" scope="col"></th>
                         <th class="text-white text-bg-info col-1" scope="col">#</th>
                         <th class="text-white text-bg-info col-2" scope="col">Pokémon</th>
                         <th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
@@ -150,6 +150,160 @@
     </div>
 </div>
 
+
+<div class="container d-none d-lg-none d-md-block mt-4">
+    <!-- Main UI -->
+    <div class="border-0 mx-auto col-8 ">
+        <!-- UI Header -->
+        <div class="row bg-secondary py-3 border-0 rounded-top">
+            <div class="d-flex flex-row align-items-center justify-content-between w-100 gap-3 ms-0 me-0">
+                <div class="col">
+                    <input class="form-control rounded rounded-5 fs-6 fw-lighter"
+                           placeholder="Search Pokémon..."
+                           @bind="SearchTerm"
+                           @oninput="HandleSearch" />
+
+                </div>
+                <!-- Left: Search -->
+
+                <!-- Center: Title -->
+                <div class="col">
+                    <h2 class="text-white text-center pt-2 fs-6 fw-light">
+                        Available Pokémon
+                    </h2>
+                </div>
+
+
+                <!-- Right: Count + Download -->
+                <div class="col">
+                    <div class="d-flex align-items-center gap-1">
+                        <div class="badge bg-light">
+                            <p class="statText text-primary fw-medium shadow mb-0">@(pokemons.Count()) Pokémon</p>
+                        </div>
+                        <PokemonDownloadButton _Pokemon="pokemons" />
+                    </div>
+                </div>
+
+
+            </div>
+        </div>
+
+        <!-- Table -->
+        <div class="tableFixHead d-flex flex-column justify-content-start bg-secondary table-responsive row ">
+            <table class="table table-borderless border-0 table-secondary table-striped align-middle">
+                <!-- Table Head -->
+                <thead>
+                    <tr>
+                        <th class="text-white text-bg-info col-2" scope="col"></th>
+                        <th class="text-white text-bg-info col-1" scope="col">#</th>
+                        <th class="text-white text-bg-info col-2" scope="col">Pokémon</th>
+                        <th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
+                        <th class="text-white text-bg-info col-1 text-center" scope="col">Sleep Type</th>
+                        <th class="text-white text-bg-info col-1 text-center" scope="col">Speciality</th>
+                        @if (adminToggle)
+                        {
+                            <th class="text-white text-bg-info col-2 text-center" scope="col">Admin</th>
+
+                        }
+                    </tr>
+                </thead>
+                <!-- If/Else Pokemon Loaded-->
+                @if (pokemons == null)
+                {
+                    <tbody>
+                        <Loading />
+                    </tbody>
+                }
+                else
+                {
+                    <!-- Table Body -->
+                    <tbody>
+                        @if (FilteredPokemon != null && FilteredPokemon.Any())
+                        {
+                            @foreach (var pokemon in FilteredPokemon)
+                            {
+                                <tr>
+                                    <!-- Section 1: Pokemon Image -->
+                                    <td class="">
+                                        <img src="@pokemon.PokemonImageUrl" style="width:100px;" />
+                                    </td>
+
+                                    <!-- Section 2: Pokemon # -->
+                                    <th scope="row" style="cursor: default;">@pokemon.PokemonId</th>
+
+
+                                    <!-- Section 3: Pokemon Name -->
+                                    <td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style fw-light col-2">@(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)</td>
+
+                                    <!-- Section 4: Pokemon Type -->
+                                    <td>
+                                        <div class="d-flex justify-content-center">
+                                            <img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:36px; height:36px;" />
+                                        </div>
+                                    </td>
+
+                                    <!-- Section 5: Sleep Type -->
+                                    <td>
+                                        <div class="d-flex justify-content-center ">
+                                            <PokemonBadge BadgeItem="@pokemon.SleepType" />
+                                        </div>
+                                    </td>
+
+                                    <!-- Section 6: Speciality -->
+                                    <td>
+                                        <div class="d-flex justify-content-center">
+                                            <PokemonBadge BadgeItem="@pokemon.Speciality" />
+
+                                        </div>
+                                    </td>
+
+                                    <!-- Section 7: Admin Controls -->
+                                    @if (adminToggle)
+                                    {
+                                        <td>
+                                            <div class="d-flex justify-content-center gap-1">
+                                                <PokemonEditButton PokemonId="@pokemon.PokemonId" />
+                                                <button class="btn btn-danger rounded rounded-5 text-white " @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>
+                            }
+                        }
+                        else
+                        {
+                            <tr>
+                                <td colspan="100%">
+                                    <div class="d-flex justify-content-center align-items-center" style="height: 200px;">
+                                        <p class="text-muted">Pokémon could not be found.</p>
+                                    </div>
+                                </td>
+                            </tr>
+                        }
+                    </tbody>
+                }
+
+
+            </table>
+
+        </div>
+        <!-- Wrap in Auth -->
+        <div class="d-flex justify-content-end mt-1">
+            <div class="form-check form-switch">
+                <input class="form-check-input rounded rounded-3" type="checkbox" role="switch" id="flexSwitchCheckDefault" @bind="adminToggle">
+            </div>
+        </div>
+
+    </div>
+</div>
+
+
+
 <!-- Desktop B: Mobile View -->
  @* <div class="container card border-0 d-block d-md-none mx-auto mt-4 shadow-sm">
      <!-- Table Header -->

Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor.css

@@ -118,3 +118,5 @@
 
 
 
+
+

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor

@@ -17,12 +17,10 @@
 else
 {
 
-    <div class="container mx-0 px-0">
+    <div class="container mt-5 w-50 mb-5">
-        <div class="row mt-5">
+        <div class="row d-flex flex-row mb-0 justify-content-center">
-            <div class="d-flex justify-content-evenly h-100 p-0">
+            <div class="w-50">
-
+                <div class="editcard">
-                <div class="mx-1 align-content-center">
-                    <div class="addcard">
                         <PokemonForm 
                             formUse="EDIT"
                             OnPokemonReady="ReceivePokemon"
@@ -34,7 +32,6 @@ else
             </div>
         </div>
     </div>
-    </div>
     <div class="d-flex justify-content-center">
         <div class="btn-group">
             <button @onclick="@HandleSubmit" class="btn btn-primary rounded">Edit Pokemon</button>

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonEdit.razor.css

@@ -6,12 +6,7 @@
     border-radius: 15px;
 }
 
-.addcard {
+.editcard {
     width: 100%;
     max-width: 30rem;
-    flex: 0 0 auto; /* prevent flex shrink/grow */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0.5rem;
 }

Portfolio.WebUI.Server/Components/Pages/Pokemon Pages/PokemonIndividualView.razor

@@ -20,7 +20,7 @@ else
     <!-- Total Componenet-->
 
     <div class="container">
-        <div class="w-75 row mt-5 m-auto">
+        <div class="w-75 lg row mt-5 m-auto">
 
             <!-- Previous Pokemon Button -->
             <div class="col-auto">