Made form slightly better by activating it onchange rather than by onclick. Much more responsive, not absolutely certain it works. But! did put back in a pseudo delete button. It works, but not perfect.
This commit is contained in:
Kira Jiroux
parent
286b913832
commit
37d8fdaca2
|
|
@ -16,11 +16,13 @@
|
||||||
placeholder="Pokedex #"
|
placeholder="Pokedex #"
|
||||||
id="PokemonId"
|
id="PokemonId"
|
||||||
@bind-Value="NewPokemon.PokemonId"
|
@bind-Value="NewPokemon.PokemonId"
|
||||||
|
@onchange="@SendPokemon"
|
||||||
class="form-control "
|
class="form-control "
|
||||||
type="number" />
|
type="number" />
|
||||||
<InputText placeholder="Pokemon Name"
|
<InputText placeholder="Pokemon Name"
|
||||||
id="PokemonName"
|
id="PokemonName"
|
||||||
@bind-Value="NewPokemon.PokemonName"
|
@bind-Value="NewPokemon.PokemonName"
|
||||||
|
@onchange="@SendPokemon"
|
||||||
class="form-control w-50 rounded-end" />
|
class="form-control w-50 rounded-end" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -30,11 +32,13 @@
|
||||||
<InputCheckbox id="IsVariation"
|
<InputCheckbox id="IsVariation"
|
||||||
@bind-Value="NewPokemon.IsVariation"
|
@bind-Value="NewPokemon.IsVariation"
|
||||||
@onclick="@Toggle"
|
@onclick="@Toggle"
|
||||||
|
@onchange="@SendPokemon"
|
||||||
class="form-check-input p-3 rounded" />
|
class="form-check-input p-3 rounded" />
|
||||||
<span class="input-group-text ms-1 @GetRoundingClass()">Variation?</span>
|
<span class="input-group-text ms-1 @GetRoundingClass()">Variation?</span>
|
||||||
<InputText placeholder="How So?"
|
<InputText placeholder="How So?"
|
||||||
id="VariationName"
|
id="VariationName"
|
||||||
@bind-Value="NewPokemon.VariationName"
|
@bind-Value="NewPokemon.VariationName"
|
||||||
|
@onchange="@SendPokemon"
|
||||||
class="form-control rounded-end"
|
class="form-control rounded-end"
|
||||||
hidden="@HideLabel" />
|
hidden="@HideLabel" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -46,7 +50,7 @@
|
||||||
<div class="row mb-2">
|
<div class="row mb-2">
|
||||||
<div class="input-group m-auto">
|
<div class="input-group m-auto">
|
||||||
<span for="PokemonType" class="input-group-text rounded-start">Pokemon Type</span>
|
<span for="PokemonType" class="input-group-text rounded-start">Pokemon Type</span>
|
||||||
<InputSelect id="PokemonType" @bind-Value="NewPokemon.PokemonType" class="form-select rounded-end">
|
<InputSelect id="PokemonType" @bind-Value="NewPokemon.PokemonType" @onchange="@SendPokemon" class="form-select rounded-end">
|
||||||
<option disabled value="" selected>Select...</option>
|
<option disabled value="" selected>Select...</option>
|
||||||
@foreach (var pt in PokemonTypes)
|
@foreach (var pt in PokemonTypes)
|
||||||
{
|
{
|
||||||
|
|
@ -65,7 +69,7 @@
|
||||||
<span for="SleepType" class="input-group-text rounded-top">Sleep Type</span>
|
<span for="SleepType" class="input-group-text rounded-top">Sleep Type</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="row input-group m-auto">
|
<div class="row input-group m-auto">
|
||||||
<InputSelect id="SleepType" @bind-Value="NewPokemon.SleepType" class="form-select rounded-bottom">
|
<InputSelect id="SleepType" @bind-Value="NewPokemon.SleepType" @onchange="@SendPokemon" class="form-select rounded-bottom">
|
||||||
<option disabled value="" selected>Select...</option>
|
<option disabled value="" selected>Select...</option>
|
||||||
@foreach (var st in SleepTypes)
|
@foreach (var st in SleepTypes)
|
||||||
{
|
{
|
||||||
|
|
@ -80,7 +84,7 @@
|
||||||
<span for="Speciality" class="input-group-text rounded-top">Specialty</span>
|
<span for="Speciality" class="input-group-text rounded-top">Specialty</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="row input-group m-auto">
|
<div class="row input-group m-auto">
|
||||||
<InputSelect id="Speciality" @bind-Value="NewPokemon.Speciality" class="form-select rounded-bottom">
|
<InputSelect id="Speciality" @bind-Value="NewPokemon.Speciality" @onchange="@SendPokemon" class="form-select rounded-bottom">
|
||||||
<option disabled value="" selected>Select...</option>
|
<option disabled value="" selected>Select...</option>
|
||||||
@foreach (var sp in Specialities)
|
@foreach (var sp in Specialities)
|
||||||
{
|
{
|
||||||
|
|
@ -98,13 +102,13 @@
|
||||||
<div class="row mb-2">
|
<div class="row mb-2">
|
||||||
<div class="input-group m-auto">
|
<div class="input-group m-auto">
|
||||||
<span for="ImageUrl" class="input-group-text rounded-start">Base Image URL</span>
|
<span for="ImageUrl" class="input-group-text rounded-start">Base Image URL</span>
|
||||||
<InputText id="ImageUrl" @bind-Value="NewPokemon.PokemonImageUrl" class="form-control rounded-end" />
|
<InputText id="ImageUrl" @bind-Value="NewPokemon.PokemonImageUrl" @onchange="@SendPokemon" class="form-control rounded-end" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mb-2">
|
<div class="row mb-2">
|
||||||
<div class="input-group m-auto">
|
<div class="input-group m-auto">
|
||||||
<span for="ShinyImageUrl" class="input-group-text rounded-start">Shiny Image URL</span>
|
<span for="ShinyImageUrl" class="input-group-text rounded-start">Shiny Image URL</span>
|
||||||
<InputText id="ShinyImageUrl" @bind-Value="NewPokemon.PokemonShinyImageUrl" class="form-control rounded-end" />
|
<InputText id="ShinyImageUrl" @bind-Value="NewPokemon.PokemonShinyImageUrl" @onchange="@SendPokemon" class="form-control rounded-end" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -112,7 +116,7 @@
|
||||||
<div class="row mb-2">
|
<div class="row mb-2">
|
||||||
<div class="input-group m-auto">
|
<div class="input-group m-auto">
|
||||||
<span for="FlavorText" class="input-group-text rounded-start">Flavor Text</span>
|
<span for="FlavorText" class="input-group-text rounded-start">Flavor Text</span>
|
||||||
<InputText id="FlavorText" @bind-Value="NewPokemon.FlavorText" class="form-control rounded-end" />
|
<InputText id="FlavorText" @bind-Value="NewPokemon.FlavorText" @onchange="@SendPokemon" class="form-control rounded-end" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -127,23 +131,26 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
<div class="d-flex mt-3 justify-content-center gap-3">
|
<div class="d-flex mt-3 justify-content-center gap-3">
|
||||||
<button type="button"
|
|
||||||
class="btn btn-primary rounded p-1 px-0"
|
|
||||||
@onclick="@SendPokemon"
|
|
||||||
disabled="@( !IsComplete )">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-arrow-up" viewBox="0 0 16 16">
|
|
||||||
<path d="M8 11a.5.5 0 0 0 .5-.5V6.707l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2a.5.5 0 0 0-.708 0l-2 2a.5.5 0 1 0 .708.708L7.5 6.707V10.5a.5.5 0 0 0 .5.5" />
|
|
||||||
<path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
@if (mostRecentForm)
|
@if (mostRecentForm)
|
||||||
{
|
{
|
||||||
<button type="button"
|
<button type="button"
|
||||||
class="btn btn-danger rounded p-1 px-0"
|
class="btn btn-danger rounded rounded-5 p-1"
|
||||||
@onclick="@HandleRemove">
|
@onclick="@HandleRemove">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-minus" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
|
||||||
<path d="M5.5 8a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 0 1H6a.5.5 0 0 1-.5-.5" />
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
||||||
<path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<button type="button"
|
||||||
|
class="btn btn-danger rounded rounded-5 p-1"
|
||||||
|
|
||||||
|
disabled>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
|
||||||
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
||||||
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
|
|
@ -168,11 +175,13 @@ else if (formUse == "EDIT")
|
||||||
placeholder="Pokedex #"
|
placeholder="Pokedex #"
|
||||||
id="PokemonId"
|
id="PokemonId"
|
||||||
@bind-Value="PokemonToEdit.PokemonId"
|
@bind-Value="PokemonToEdit.PokemonId"
|
||||||
|
@onchange="@SendPokemon"
|
||||||
class="form-control "
|
class="form-control "
|
||||||
type="number" />
|
type="number" />
|
||||||
<InputText placeholder="Pokemon Name"
|
<InputText placeholder="Pokemon Name"
|
||||||
id="PokemonName"
|
id="PokemonName"
|
||||||
@bind-Value="PokemonToEdit.PokemonName"
|
@bind-Value="PokemonToEdit.PokemonName"
|
||||||
|
@onchange="@SendPokemon"
|
||||||
class="form-control w-50 rounded-end" />
|
class="form-control w-50 rounded-end" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -182,11 +191,13 @@ else if (formUse == "EDIT")
|
||||||
<InputCheckbox id="IsVariation"
|
<InputCheckbox id="IsVariation"
|
||||||
@bind-Value="PokemonToEdit.IsVariation"
|
@bind-Value="PokemonToEdit.IsVariation"
|
||||||
@onclick="@Toggle"
|
@onclick="@Toggle"
|
||||||
|
@onchange="@SendPokemon"
|
||||||
class="form-check-input p-3 rounded" />
|
class="form-check-input p-3 rounded" />
|
||||||
<span class="input-group-text ms-1 @GetRoundingClass()">Variation?</span>
|
<span class="input-group-text ms-1 @GetRoundingClass()">Variation?</span>
|
||||||
<InputText placeholder="How So?"
|
<InputText placeholder="How So?"
|
||||||
id="VariationName"
|
id="VariationName"
|
||||||
@bind-Value="PokemonToEdit.VariationName"
|
@bind-Value="PokemonToEdit.VariationName"
|
||||||
|
@onchange="@SendPokemon"
|
||||||
class="form-control rounded-end"
|
class="form-control rounded-end"
|
||||||
hidden="@HideLabel" />
|
hidden="@HideLabel" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -198,7 +209,7 @@ else if (formUse == "EDIT")
|
||||||
<div class="row mb-2">
|
<div class="row mb-2">
|
||||||
<div class="input-group m-auto">
|
<div class="input-group m-auto">
|
||||||
<span for="PokemonType" class="input-group-text rounded-start">Pokemon Type</span>
|
<span for="PokemonType" class="input-group-text rounded-start">Pokemon Type</span>
|
||||||
<InputSelect id="PokemonType" @bind-Value="PokemonToEdit.PokemonType" class="form-select rounded-end">
|
<InputSelect id="PokemonType" @bind-Value="PokemonToEdit.PokemonType" class="form-select rounded-end" @onchange="@SendPokemon">
|
||||||
<option disabled value="" selected>Select...</option>
|
<option disabled value="" selected>Select...</option>
|
||||||
@foreach (var pt in PokemonTypes)
|
@foreach (var pt in PokemonTypes)
|
||||||
{
|
{
|
||||||
|
|
@ -217,7 +228,7 @@ else if (formUse == "EDIT")
|
||||||
<span for="SleepType" class="input-group-text rounded-top">Sleep Type</span>
|
<span for="SleepType" class="input-group-text rounded-top">Sleep Type</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="row input-group m-auto">
|
<div class="row input-group m-auto">
|
||||||
<InputSelect id="SleepType" @bind-Value="PokemonToEdit.SleepType" class="form-select rounded-bottom">
|
<InputSelect id="SleepType" @bind-Value="PokemonToEdit.SleepType" class="form-select rounded-bottom" @onchange="@SendPokemon">
|
||||||
<option disabled value="" selected>Select...</option>
|
<option disabled value="" selected>Select...</option>
|
||||||
@foreach (var st in SleepTypes)
|
@foreach (var st in SleepTypes)
|
||||||
{
|
{
|
||||||
|
|
@ -232,7 +243,7 @@ else if (formUse == "EDIT")
|
||||||
<span for="Speciality" class="input-group-text rounded-top">Specialty</span>
|
<span for="Speciality" class="input-group-text rounded-top">Specialty</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="row input-group m-auto">
|
<div class="row input-group m-auto">
|
||||||
<InputSelect id="Speciality" @bind-Value="PokemonToEdit.Speciality" class="form-select rounded-bottom">
|
<InputSelect id="Speciality" @bind-Value="PokemonToEdit.Speciality" class="form-select rounded-bottom" @onchange="@SendPokemon">
|
||||||
<option disabled value="" selected>Select...</option>
|
<option disabled value="" selected>Select...</option>
|
||||||
@foreach (var sp in Specialities)
|
@foreach (var sp in Specialities)
|
||||||
{
|
{
|
||||||
|
|
@ -250,13 +261,13 @@ else if (formUse == "EDIT")
|
||||||
<div class="row mb-2">
|
<div class="row mb-2">
|
||||||
<div class="input-group m-auto">
|
<div class="input-group m-auto">
|
||||||
<span for="ImageUrl" class="input-group-text rounded-start">Base Image URL</span>
|
<span for="ImageUrl" class="input-group-text rounded-start">Base Image URL</span>
|
||||||
<InputText id="ImageUrl" @bind-Value="PokemonToEdit.PokemonImageUrl" class="form-control rounded-end" />
|
<InputText id="ImageUrl" @bind-Value="PokemonToEdit.PokemonImageUrl" class="form-control rounded-end" @onchange="@SendPokemon" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row mb-2">
|
<div class="row mb-2">
|
||||||
<div class="input-group m-auto">
|
<div class="input-group m-auto">
|
||||||
<span for="ShinyImageUrl" class="input-group-text rounded-start">Shiny Image URL</span>
|
<span for="ShinyImageUrl" class="input-group-text rounded-start">Shiny Image URL</span>
|
||||||
<InputText id="ShinyImageUrl" @bind-Value="PokemonToEdit.PokemonShinyImageUrl" class="form-control rounded-end" />
|
<InputText id="ShinyImageUrl" @bind-Value="PokemonToEdit.PokemonShinyImageUrl" class="form-control rounded-end" @onchange="@SendPokemon" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -264,7 +275,7 @@ else if (formUse == "EDIT")
|
||||||
<div class="row mb-2">
|
<div class="row mb-2">
|
||||||
<div class="input-group m-auto">
|
<div class="input-group m-auto">
|
||||||
<span for="FlavorText" class="input-group-text rounded-start">Flavor Text</span>
|
<span for="FlavorText" class="input-group-text rounded-start">Flavor Text</span>
|
||||||
<InputText id="FlavorText" @bind-Value="PokemonToEdit.FlavorText" class="form-control rounded-end" />
|
<InputText id="FlavorText" @bind-Value="PokemonToEdit.FlavorText" class="form-control rounded-end" @onchange="@SendPokemon" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -279,23 +290,14 @@ else if (formUse == "EDIT")
|
||||||
}
|
}
|
||||||
|
|
||||||
<div class="d-flex mt-3 justify-content-center gap-3">
|
<div class="d-flex mt-3 justify-content-center gap-3">
|
||||||
<button type="button"
|
|
||||||
class="btn btn-success rounded p-1 px-0"
|
|
||||||
@onclick="@SendPokemon"
|
|
||||||
>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-arrow-up" viewBox="0 0 16 16">
|
|
||||||
<path d="M8 11a.5.5 0 0 0 .5-.5V6.707l1.146 1.147a.5.5 0 0 0 .708-.708l-2-2a.5.5 0 0 0-.708 0l-2 2a.5.5 0 1 0 .708.708L7.5 6.707V10.5a.5.5 0 0 0 .5.5" />
|
|
||||||
<path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
@if (mostRecentForm)
|
@if (mostRecentForm)
|
||||||
{
|
{
|
||||||
<button type="button"
|
<button type="button"
|
||||||
class="btn btn-warning rounded p-1 px-0"
|
class="btn btn-danger rounded rounded-5 p-1"
|
||||||
@onclick="@HandleRemove">
|
@onclick="@HandleRemove">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-file-earmark-easel" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-x-circle" viewBox="0 0 16 16">
|
||||||
<path d="M8.5 6a.5.5 0 1 0-1 0h-2A1.5 1.5 0 0 0 4 7.5v2A1.5 1.5 0 0 0 5.5 11h.473l-.447 1.342a.5.5 0 1 0 .948.316L7.027 11H7.5v1a.5.5 0 0 0 1 0v-1h.473l.553 1.658a.5.5 0 1 0 .948-.316L10.027 11h.473A1.5 1.5 0 0 0 12 9.5v-2A1.5 1.5 0 0 0 10.5 6zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.5.5h-5a.5.5 0 0 1-.5-.5z" />
|
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16" />
|
||||||
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2M9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5z" />
|
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -154,6 +154,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
||||||
};
|
};
|
||||||
|
|
||||||
await OnPokemonReady.InvokeAsync(edit);
|
await OnPokemonReady.InvokeAsync(edit);
|
||||||
|
Console.WriteLine(edit);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,8 +10,6 @@ $display-font-sizes: (
|
||||||
|
|
||||||
.pokemon-form-container {
|
.pokemon-form-container {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
|
||||||
max-width: 390px; /* Prevent it from getting too huge */
|
|
||||||
aspect-ratio: 3 / 4; /* Maintains card shape dynamically */
|
aspect-ratio: 3 / 4; /* Maintains card shape dynamically */
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
border-width: .5rem;
|
border-width: .5rem;
|
||||||
|
|
|
||||||
|
|
@ -14,11 +14,11 @@
|
||||||
<!-- Main UI -->
|
<!-- Main UI -->
|
||||||
<div class="border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable">
|
<div class="border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable">
|
||||||
<!-- Table Header -->
|
<!-- Table Header -->
|
||||||
<div class="row bg-secondary bg-gradient py-3 border-0">
|
<div class="row bg-secondary bg-gradient py-3 border-0 rounded-top">
|
||||||
<div class="d-flex align-items-center justify-content-between w-100 position-relative px-3">
|
<div class="d-flex align-items-center justify-content-between w-100 position-relative px-3">
|
||||||
|
|
||||||
<!-- Left: Search -->
|
<!-- Left: Search -->
|
||||||
<input class="form-control w-25 me-3"
|
<input class="form-control w-25 me-3 rounded rounded-5"
|
||||||
placeholder="Search Pokémon..."
|
placeholder="Search Pokémon..."
|
||||||
@bind="SearchTerm"
|
@bind="SearchTerm"
|
||||||
@oninput="HandleSearch" />
|
@oninput="HandleSearch" />
|
||||||
|
|
@ -104,7 +104,7 @@
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<!-- Section 2: Pokemon # -->
|
<!-- Section 2: Pokemon # -->
|
||||||
<th class="" scope="row" style="cursor: default;">@pokemon.PokemonId ++ @pokemon.Id</th>
|
<th class="" scope="row" style="cursor: default;">@pokemon.PokemonId</th>
|
||||||
|
|
||||||
|
|
||||||
<!-- Section 3: Pokemon Name -->
|
<!-- Section 3: Pokemon Name -->
|
||||||
|
|
@ -140,6 +140,7 @@
|
||||||
<td class="" style="">
|
<td class="" style="">
|
||||||
<div class="d-flex justify-content-center">
|
<div class="d-flex justify-content-center">
|
||||||
<PokemonEditButton PokemonId="@pokemon.PokemonId" />
|
<PokemonEditButton PokemonId="@pokemon.PokemonId" />
|
||||||
|
@*<button @onclick="() => ConfirmDelete(pokemon.Id)">Delete</button>*@
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
|
|
|
||||||
|
|
@ -80,7 +80,7 @@ else
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex justify-content-center">
|
<div class="d-flex justify-content-center pt-3">
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
<button @onclick="@HandleAdd" class="btn btn-primary rounded">Add Pokemon</button>
|
<button @onclick="@HandleAdd" class="btn btn-primary rounded">Add Pokemon</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,5 @@
|
||||||
.addcard {
|
.addcard {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 30rem;
|
max-width: 25rem;
|
||||||
flex: 0 0 auto; /* prevent flex shrink/grow */
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.5rem;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue