Minor changes to tweak table, primarily bg.

This commit is contained in:
Kira Jiroux 2025-06-09 17:45:38 -04:00
parent 1955a210aa
commit 04320dc9e1
1 changed files with 6 additions and 5 deletions

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 ml-0 py-3 border-0"> <div class="row card-header bg-secondary bg-gradient 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 table-responsive row"> <div class="tableFixHead bg-secondary 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,6 +47,7 @@
{ {
<!-- 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">
@ -176,8 +177,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;" />
<div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div> <PokemonBadge BadgeItem="@pokemon.SleepType" />
<div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div> <PokemonBadge BadgeItem="@pokemon.Speciality" />
</div> </div>
</div> </div>