Editing view to be compatible with new bootstrap-brite.css. Still compatible with bootstrap-lumen.css

This commit is contained in:
Kira Jiroux 2025-04-10 14:43:21 -04:00
parent 5dd07c7c3f
commit 17334250f9
8 changed files with 14207 additions and 23 deletions

View File

@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap-lumen.css" /> <!-- app.css -->
<link rel="stylesheet" href="bootstrap/bootstrap-brite.css" /> <!-- app.css -->
<link rel="stylesheet" href="Portfolio.WebUI.Server.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />

View File

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

View File

@ -150,3 +150,4 @@
.skills {
background-color: #47a0fc;
}

View File

@ -1,5 +1,5 @@
@inject NavigationManager Navigation
<button class="btn btn-warning rounded rounded-5" @onclick="() => EditPokemon(PokemonId)">
<button class="btn btn-warning rounded rounded-5 text-white " @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>

View File

@ -10,28 +10,28 @@
<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="card-header bg-secondary bg-gradient ml-0 py-3 border-0">
<div class="row">
<div class="text-center col-12 position-relative">
<div class="text-center 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 class="m-1 badge bg-info position-absolute top-0 end-0 border-0"><p class="statText">@(pokemons.Count()) Pokemon</p></div>
</div>
</div>
</div>
<!-- Table -->
<div class="tableFixHead">
<table class="table table-striped align-middle">
<table class="table table-borderless border-0 table-secondary table-striped align-middle">
<!-- Table Head -->
<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-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">Pokemon</th>
<th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
<th class="text-white text-bg-info col-2 text-center" scope="col">Sleep Type</th>
<th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th>
<!-- <th class="text-bg-info text-end" scope="col">Control Buttons</th> -->
</tr>
</thead>
@ -108,14 +108,14 @@
<!-- Section 5: Sleep Type -->
<td style="">
<div class="d-flex justify-content-center ">
<div class=" badge @pokemon.SleepType.ToLower()"><p class="statText">@pokemon.SleepType</p></div>
<div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div>
</div>
</td>
<!-- Section 6: Speciality -->
<td style="">
<div class="d-flex justify-content-center">
<div class=" badge @pokemon.Speciality.ToLower()"><p class="statText">@pokemon.Speciality</p></div>
<div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div>
</div>
</td>

View File

@ -16,10 +16,7 @@
z-index: 10;
}
.no-gutter > [class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.flip-container {
perspective: 1000px;

View File

@ -19,7 +19,7 @@ else
<div class="w-100">
<div class="d-flex justify-content-center mt-4">
<button class="mt-1 p-2 btn btn-danger rounded-5 align-self-start shadow-sm" disabled="@(!_previousPokemonId.HasValue)" @onclick="NavigateToPrevious">
<button class="mt-1 p-2 btn btn-danger rounded-5 align-self-start text-white" disabled="@(!_previousPokemonId.HasValue)" @onclick="NavigateToPrevious">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-left-circle-fill" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.5 7.5a.5.5 0 0 1 0 1H5.707l2.147 2.146a.5.5 0 0 1-.708.708l-3-3a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L5.707 7.5z" />
</svg>
@ -71,7 +71,7 @@ else
</div>
}
</div>
<button class="mt-1 p-2 btn btn-danger rounded-5 align-self-start shadow-sm" disabled="@(!_nextPokemonId.HasValue)" @onclick="NavigateToNext">
<button class="mt-1 p-2 btn btn-danger rounded rounded-5 align-self-start text-white" disabled="@(!_nextPokemonId.HasValue)" @onclick="NavigateToNext">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-right-circle-fill" viewBox="0 0 16 16">
<path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0M4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5z" />
</svg>

File diff suppressed because it is too large Load Diff