Wow I think it's pretty (for desktop). Need to push now before I push it too far
This commit is contained in:
Kira Jiroux
parent
2f210a0e1a
commit
22a6e68fbd
|
|
@ -8,10 +8,8 @@
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
|
<div class="container">
|
||||||
<h3 class="text-xl font-bold mb-4 mt-4">Temperature Blanket Visualizer</h3>
|
<h3 class="text-xl font-bold mb-4 mt-4">Temperature Blanket Visualizer</h3>
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-10">
|
<div class="col-10">
|
||||||
<div class="d-flex">
|
<div class="d-flex">
|
||||||
|
|
@ -26,7 +24,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col">
|
<div class="col d-flex align-items-center">
|
||||||
<TemperatureRangeEditor TempRanges="@TemperatureRanges" OnRangesChanged="HandleRangesChanged" />
|
<TemperatureRangeEditor TempRanges="@TemperatureRanges" OnRangesChanged="HandleRangesChanged" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -22,11 +22,8 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Pokemon Image -->
|
<!-- Pokemon Image -->
|
||||||
<div class="flip-container z-1" @onclick="() => ToggleImage()">
|
<div class="card-image-slot z-1">
|
||||||
<div class="flipper @(isShiny ? "flipped" : "")">
|
<PokemonImage baseUrl="@_pokemon.PokemonImageUrl" shinyUrl="@_pokemon.PokemonShinyImageUrl" />
|
||||||
<img class="pokemon-image front" src="@_pokemon.PokemonImageUrl" />
|
|
||||||
<img class="pokemon-image back" src="@_pokemon.PokemonShinyImageUrl" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Pokemon Flavortext -->
|
<!-- Pokemon Flavortext -->
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,11 @@
|
||||||
.pokemon-card {
|
.card-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-card {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 350px; /* Prevent it from getting too huge */
|
max-width: 350px; /* Prevent it from getting too huge */
|
||||||
|
|
@ -20,14 +27,6 @@
|
||||||
transform: translateY(-13px);
|
transform: translateY(-13px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-wrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.pokemon-name {
|
.pokemon-name {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 5%;
|
top: 5%;
|
||||||
|
|
@ -53,14 +52,6 @@
|
||||||
height: clamp(1.5rem, 2.5vw, 2.5rem);
|
height: clamp(1.5rem, 2.5vw, 2.5rem);
|
||||||
}
|
}
|
||||||
|
|
||||||
.pokemon-image {
|
|
||||||
width: 100%; /* Look to flip-container for the width/height of image */
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pokemon-flavor-text {
|
.pokemon-flavor-text {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 60% !important;
|
top: 60% !important;
|
||||||
|
|
@ -95,45 +86,18 @@
|
||||||
hyphens: auto;
|
hyphens: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.flip-container {
|
/* Position the image area within the card */
|
||||||
position: absolute !important;
|
.card-image-slot {
|
||||||
top: 40% !important;
|
|
||||||
left: 50% !important;
|
|
||||||
transform: translate(-50%, -50%) !important;
|
|
||||||
perspective: 1000px;
|
|
||||||
display: inline-block;
|
|
||||||
width: 80%;
|
|
||||||
aspect-ratio: 1 / 1;
|
|
||||||
max-width: 280px;
|
|
||||||
margin: 0 auto;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flipper {
|
|
||||||
transition: transform 0.6s;
|
|
||||||
transform-style: preserve-3d;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.flipped {
|
|
||||||
transform: rotateY(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.front, .back {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 50%;
|
||||||
left: 0;
|
left: 50%;
|
||||||
backface-visibility: hidden;
|
transform: translate(-50%, -20%);
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
max-width: 300px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.back {
|
|
||||||
transform: rotateY(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Type Card Styling */
|
/* Type Card Styling */
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
||||||
|
|
||||||
private void EditPokemon(int PokemonId)
|
private void EditPokemon(int PokemonId)
|
||||||
{
|
{
|
||||||
Navigation.NavigateTo($"/pokemonsleep/edit/{PokemonId}");
|
Navigation.NavigateTo($"/pokemonsleep/edit-pokemon/{PokemonId}");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -131,6 +131,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
<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 rounded-5 p-1"
|
||||||
|
@onclick="@SendPokemon">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-plus-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="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4" />
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
</button>
|
||||||
@if (mostRecentForm)
|
@if (mostRecentForm)
|
||||||
{
|
{
|
||||||
<button type="button"
|
<button type="button"
|
||||||
|
|
|
||||||
|
|
@ -12,6 +12,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public string formUse { get; set; }
|
public string formUse { get; set; }
|
||||||
|
|
||||||
|
private bool formChanged { get; set; } = false;
|
||||||
|
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public EventCallback<Pokemon> OnPokemonReady { get; set; }
|
public EventCallback<Pokemon> OnPokemonReady { get; set; }
|
||||||
|
|
@ -72,6 +73,11 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
||||||
HideLabel = !HideLabel;
|
HideLabel = !HideLabel;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private void ToggleFormChange()
|
||||||
|
{
|
||||||
|
formChanged = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// CSS-function to get proper styling for form elements
|
// CSS-function to get proper styling for form elements
|
||||||
private string GetRoundingClass()
|
private string GetRoundingClass()
|
||||||
|
|
@ -134,6 +140,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
||||||
};
|
};
|
||||||
|
|
||||||
await OnPokemonReady.InvokeAsync(copy);
|
await OnPokemonReady.InvokeAsync(copy);
|
||||||
|
formChanged = false;
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<div class="wrapper">
|
||||||
|
@if (shinyUrl == null)
|
||||||
|
{
|
||||||
|
<div class="flip-container">
|
||||||
|
<div class="flipper">
|
||||||
|
<img class="front" src="@baseUrl" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
<div class="flip-container" @onclick="() => ToggleImage()">
|
||||||
|
<div class="flipper @(isShiny ? "flipped" : "")">
|
||||||
|
<img class="front" src="@baseUrl" />
|
||||||
|
<img class="back" src="@shinyUrl" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
using Microsoft.AspNetCore.Components;
|
||||||
|
|
||||||
|
namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
||||||
|
{
|
||||||
|
public partial class PokemonImage
|
||||||
|
{
|
||||||
|
[Parameter]
|
||||||
|
public string baseUrl { get; set; }
|
||||||
|
[Parameter]
|
||||||
|
public string shinyUrl { get; set; }
|
||||||
|
|
||||||
|
private bool isShiny = false;
|
||||||
|
|
||||||
|
private void ToggleImage()
|
||||||
|
{
|
||||||
|
isShiny = !isShiny;
|
||||||
|
StateHasChanged();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
.wrapper {
|
||||||
|
display: inline-block;
|
||||||
|
width: 90%;
|
||||||
|
height: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-container {
|
||||||
|
position: absolute !important;
|
||||||
|
top: 40% !important;
|
||||||
|
left: 50% !important;
|
||||||
|
transform: translate(-50%, -50%) !important;
|
||||||
|
perspective: 1000px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 80%;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
max-width: 280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flipper {
|
||||||
|
transition: transform 0.6s;
|
||||||
|
transform-style: preserve-3d;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flipped {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
position: relative;
|
||||||
|
max-height: 100px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.front, .back {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
inset: 0; /* shorthand for top/right/bottom/left: 0 */
|
||||||
|
backface-visibility: hidden;
|
||||||
|
object-fit: contain; /* keep aspect ratio inside the box */
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
transform: rotateY(180deg);
|
||||||
|
}
|
||||||
|
|
@ -1,15 +1,6 @@
|
||||||
|
<!-- Pokemon Navigation Buttons -->
|
||||||
<!-- Heading + Buttons -->
|
<div class="mx-auto w-75 top-row row" >
|
||||||
<div class="top-row row rounded-bottom-5 w-100 bg-secondary border-bottom border-start border-end border-2 border-primary py-3">
|
<div class="row btn-group d-flex justify-content-end" >
|
||||||
|
|
||||||
<div class="col-4"></div>
|
|
||||||
|
|
||||||
<div class="col-4 text-center">
|
|
||||||
<h1 class="text-primary">Pokémon Sleep</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="col-4">
|
|
||||||
<div class="btn-group d-flex justify-content-end my-1">
|
|
||||||
<!-- Home -->
|
<!-- Home -->
|
||||||
<button class="btn btn-primary mx-1 align-content-center" style="border-radius: 50px 15px; max-width: 60px;">
|
<button class="btn btn-primary mx-1 align-content-center" style="border-radius: 50px 15px; max-width: 60px;">
|
||||||
<NavLink href="/pokemonsleep">
|
<NavLink href="/pokemonsleep">
|
||||||
|
|
@ -22,7 +13,7 @@
|
||||||
|
|
||||||
<!-- Pokemon Table-->
|
<!-- Pokemon Table-->
|
||||||
<button class="btn btn-info mx-1" style="border-radius: 50px 15px; max-width: 60px;">
|
<button class="btn btn-info mx-1" style="border-radius: 50px 15px; max-width: 60px;">
|
||||||
<NavLink href="/pokemon">
|
<NavLink href="/pokemonsleep/pokemon">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table mb-1 text-white" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table mb-1 text-white" viewBox="0 0 16 16">
|
||||||
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z" />
|
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|
@ -31,7 +22,7 @@
|
||||||
|
|
||||||
<!-- Rate Pokemon -->
|
<!-- Rate Pokemon -->
|
||||||
<button class="btn btn-success mx-1" style="border-radius: 50px 15px; max-width: 60px;">
|
<button class="btn btn-success mx-1" style="border-radius: 50px 15px; max-width: 60px;">
|
||||||
<NavLink href="/rate-pokemon">
|
<NavLink href="/pokemonsleep/rate-pokemon">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award-fill mb-1 text-white" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award-fill mb-1 text-white" viewBox="0 0 16 16">
|
||||||
<path d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864z" />
|
<path d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864z" />
|
||||||
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z" />
|
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z" />
|
||||||
|
|
@ -49,6 +40,4 @@
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -0,0 +1,6 @@
|
||||||
|
namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
||||||
|
{
|
||||||
|
public partial class PokemonNavMenu
|
||||||
|
{
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,2 @@
|
||||||
|
body {
|
||||||
|
}
|
||||||
|
|
@ -7,11 +7,11 @@
|
||||||
|
|
||||||
|
|
||||||
<!-- Table A: Desktop View-->
|
<!-- Table A: Desktop View-->
|
||||||
<div class="container d-none d-md-block" style="height: 70vh;">
|
<div class="container d-none d-md-block mt-3">
|
||||||
<!-- 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 mx-auto col-8 ">
|
||||||
<!-- Table Header -->
|
<!-- UI Header -->
|
||||||
<div class="row bg-secondary bg-gradient py-3 border-0 rounded-top">
|
<div class="row bg-secondary 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 -->
|
||||||
|
|
@ -21,14 +21,14 @@
|
||||||
@oninput="HandleSearch" />
|
@oninput="HandleSearch" />
|
||||||
|
|
||||||
<!-- Center: Title -->
|
<!-- Center: Title -->
|
||||||
<h2 class="text-white text-decoration-underline mb-0 position-absolute start-50 translate-middle-x">
|
<h2 class="text-white mb-0 position-absolute start-50 translate-middle-x">
|
||||||
Available Pokémon
|
Available Pokémon
|
||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<!-- Right: Count + Download -->
|
<!-- Right: Count + Download -->
|
||||||
<div class="d-flex align-items-center gap-2">
|
<div class="d-flex align-items-center gap-2">
|
||||||
<div class="badge bg-info">
|
<div class="badge bg-light">
|
||||||
<p class="statText mb-0">@(pokemons.Count()) Pokémon</p>
|
<p class="statText text-primary fw-medium shadow mb-0">@(pokemons.Count()) Pokémon</p>
|
||||||
</div>
|
</div>
|
||||||
<PokemonDownloadButton _Pokemon="pokemons" />
|
<PokemonDownloadButton _Pokemon="pokemons" />
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -36,7 +36,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- Table -->
|
||||||
<div class="tableFixHead d-flex flex-column justify-content-start bg-secondary table-responsive row ">
|
<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 class="table table-borderless border-0 table-secondary table-striped align-middle">
|
||||||
<!-- Table Head -->
|
<!-- Table Head -->
|
||||||
|
|
@ -50,7 +50,7 @@
|
||||||
<th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th>
|
<th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th>
|
||||||
@if (adminToggle)
|
@if (adminToggle)
|
||||||
{
|
{
|
||||||
<th class="text-white text-bg-info col-1 text-center" scope="col">Edit</th>
|
<th class="text-white text-bg-info col-2 text-center" scope="col">Admin</th>
|
||||||
|
|
||||||
}
|
}
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -66,38 +66,14 @@
|
||||||
{
|
{
|
||||||
<!-- Table Body -->
|
<!-- Table Body -->
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr></tr>
|
|
||||||
@if (FilteredPokemon != null && FilteredPokemon.Any())
|
@if (FilteredPokemon != null && FilteredPokemon.Any())
|
||||||
{
|
{
|
||||||
|
|
||||||
@foreach (var pokemon in FilteredPokemon)
|
@foreach (var pokemon in FilteredPokemon)
|
||||||
{
|
{
|
||||||
<tr class="flex-row">
|
<tr>
|
||||||
<!-- Section: Pokemon Image -->
|
<!-- Section 1: Pokemon Image -->
|
||||||
@{
|
<td class="pokeimage">
|
||||||
string baseUrl = pokemon.PokemonImageUrl;
|
<PokemonImage baseUrl="@pokemon.PokemonImageUrl" shinyUrl="@pokemon.PokemonShinyImageUrl" />
|
||||||
string shinyUrl = pokemon.PokemonShinyImageUrl;
|
|
||||||
}
|
|
||||||
<td class="text-center d-none d-md-table-cell">
|
|
||||||
@if (shinyUrl == null)
|
|
||||||
{
|
|
||||||
<div class="flip-container">
|
|
||||||
<div class="flipper">
|
|
||||||
<img class="front img-fluid" style="max-width: 100px;" src="@baseUrl" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
}
|
|
||||||
else
|
|
||||||
{
|
|
||||||
<div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
|
|
||||||
<div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
|
|
||||||
<img class="front img-fluid" style="max-width: 100px;" src="@baseUrl" />
|
|
||||||
<img class="back img-fluid" style="max-width: 100px;" src="@shinyUrl" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
}
|
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
<!-- Section 2: Pokemon # -->
|
<!-- Section 2: Pokemon # -->
|
||||||
|
|
@ -105,11 +81,8 @@
|
||||||
|
|
||||||
|
|
||||||
<!-- Section 3: Pokemon Name -->
|
<!-- 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>
|
<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 -->
|
<!-- Section 4: Pokemon Type -->
|
||||||
<td>
|
<td>
|
||||||
<div class="d-flex justify-content-center">
|
<div class="d-flex justify-content-center">
|
||||||
|
|
@ -132,17 +105,21 @@
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
|
|
||||||
|
<!-- Section 7: Admin Controls -->
|
||||||
@if (adminToggle)
|
@if (adminToggle)
|
||||||
{
|
{
|
||||||
<td>
|
<td>
|
||||||
<div class="d-flex justify-content-center">
|
<div class="d-flex justify-content-center gap-1">
|
||||||
<PokemonEditButton PokemonId="@pokemon.PokemonId" />
|
<PokemonEditButton PokemonId="@pokemon.PokemonId" />
|
||||||
@*<button @onclick="() => ConfirmDelete(pokemon.Id)">Delete</button>*@
|
<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>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</tr>
|
</tr>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -174,7 +151,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Desktop B: Mobile View -->
|
<!-- Desktop B: Mobile View -->
|
||||||
<div class="container card border-0 d-block d-md-none mx-auto mt-4 shadow-sm">
|
@* <div class="container card border-0 d-block d-md-none mx-auto mt-4 shadow-sm">
|
||||||
<!-- Table Header -->
|
<!-- Table Header -->
|
||||||
<div class="row card-header bg-secondary bg-gradient ml-0 py-3 border-0 bg-info">
|
<div class="row card-header bg-secondary bg-gradient ml-0 py-3 border-0 bg-info">
|
||||||
<div class="flex-row justify-content-between">
|
<div class="flex-row justify-content-between">
|
||||||
|
|
@ -238,4 +215,4 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div> *@
|
||||||
|
|
|
||||||
|
|
@ -11,9 +11,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
||||||
[Parameter]
|
[Parameter]
|
||||||
public List<Pokemon> AllPokemon { get; set; }
|
public List<Pokemon> AllPokemon { get; set; }
|
||||||
|
|
||||||
|
|
||||||
private List<Pokemon> pokemons = new List<Pokemon>();
|
private List<Pokemon> pokemons = new List<Pokemon>();
|
||||||
private Dictionary<int, bool> isShiny = new Dictionary<int, bool>();
|
|
||||||
|
|
||||||
private bool adminToggle = false;
|
private bool adminToggle = false;
|
||||||
|
|
||||||
|
|
@ -23,10 +21,6 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
||||||
if (AllPokemon != null) {
|
if (AllPokemon != null) {
|
||||||
pokemons = AllPokemon.ToList();
|
pokemons = AllPokemon.ToList();
|
||||||
|
|
||||||
foreach (var pokemon in pokemons)
|
|
||||||
{
|
|
||||||
isShiny[pokemon.Id] = false;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
private string SearchTerm { get; set; } = string.Empty;
|
private string SearchTerm { get; set; } = string.Empty;
|
||||||
|
|
@ -41,13 +35,6 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
||||||
{
|
{
|
||||||
SearchTerm = e?.Value?.ToString() ?? "";
|
SearchTerm = e?.Value?.ToString() ?? "";
|
||||||
}
|
}
|
||||||
private void ToggleImage(int Id)
|
|
||||||
{
|
|
||||||
if (isShiny.ContainsKey(Id))
|
|
||||||
{
|
|
||||||
isShiny[Id] = !isShiny[Id];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
private bool ToggleVariationName(int Id, int PokemonId)
|
private bool ToggleVariationName(int Id, int PokemonId)
|
||||||
{
|
{
|
||||||
|
|
@ -96,6 +83,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
||||||
|
|
||||||
return $"https://www.serebii.net/pokemonsleep/pokemon/type/{pokemonType.ToLower()}.png";
|
return $"https://www.serebii.net/pokemonsleep/pokemon/type/{pokemonType.ToLower()}.png";
|
||||||
}
|
}
|
||||||
|
|
||||||
private void HandleToggleChange(ChangeEventArgs e)
|
private void HandleToggleChange(ChangeEventArgs e)
|
||||||
{
|
{
|
||||||
Console.WriteLine($"Admin Toggle is now: {adminToggle}");
|
Console.WriteLine($"Admin Toggle is now: {adminToggle}");
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,13 @@
|
||||||
.five-percent {
|
.five-percent {
|
||||||
width: 5%;
|
width: 5%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ten-percent {
|
.ten-percent {
|
||||||
width: 10%;
|
width: 10%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pokemontable {
|
.pokemontable {
|
||||||
height: 69vh;
|
height: 65vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tableFixHead {
|
.tableFixHead {
|
||||||
|
|
@ -25,7 +26,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.pokemon-name-style {
|
.pokemon-name-style {
|
||||||
cursor:pointer;
|
cursor: pointer;
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -87,28 +88,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.pokeimage {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.front, .back {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
backface-visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back {
|
|
||||||
transform: rotateY(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.badge {
|
.badge {
|
||||||
width: 100px;
|
width: 100px;
|
||||||
|
|
@ -129,5 +108,13 @@
|
||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.pokeimage {
|
||||||
|
width: 100px;
|
||||||
|
height: 130px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,35 @@
|
||||||
|
<div class=" mx-auto w-75" >
|
||||||
|
<header class="pt-5 w-100">
|
||||||
|
<div class="row flex-nowrap justify-content-evenly align-items-center" >
|
||||||
|
<div class="col pt-1">
|
||||||
|
<div class="d-flex align-items-center">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="@_primaryColor" class="bi bi-arrow-through-heart" viewBox="0 0 16 16" style="cursor: pointer;">
|
||||||
|
<path fill-rule="evenodd" d="M2.854 15.854A.5.5 0 0 1 2 15.5V14H.5a.5.5 0 0 1-.354-.854l1.5-1.5A.5.5 0 0 1 2 11.5h1.793l.53-.53c-.771-.802-1.328-1.58-1.704-2.32-.798-1.575-.775-2.996-.213-4.092C3.426 2.565 6.18 1.809 8 3.233c1.25-.98 2.944-.928 4.212-.152L13.292 2 12.147.854A.5.5 0 0 1 12.5 0h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.854.354L14 2.707l-1.006 1.006c.236.248.44.531.6.845.562 1.096.585 2.517-.213 4.092-.793 1.563-2.395 3.288-5.105 5.08L8 13.912l-.276-.182a22 22 0 0 1-2.685-2.062l-.539.54V14a.5.5 0 0 1-.146.354zm2.893-4.894A20.4 20.4 0 0 0 8 12.71c2.456-1.666 3.827-3.207 4.489-4.512.679-1.34.607-2.42.215-3.185-.817-1.595-3.087-2.054-4.346-.761L8 4.62l-.358-.368c-1.259-1.293-3.53-.834-4.346.761-.392.766-.464 1.845.215 3.185.323.636.815 1.33 1.519 2.065l1.866-1.867a.5.5 0 1 1 .708.708z" />
|
||||||
|
</svg>
|
||||||
|
<span class="fs-4 mx-2 text-primary">Kira Jiroux</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="col d-flex justify-content-end align-items-center gap-5">
|
||||||
|
<NavLink class="nav-link d-flex align-items-center rounded rounded-5" href="" Match="NavLinkMatch.All" ActiveClass="nav-active">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="@_primaryColor" class="bi bi-house-heart-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M7.293 1.5a1 1 0 0 1 1.414 0L11 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l2.354 2.353a.5.5 0 0 1-.708.707L8 2.207 1.354 8.853a.5.5 0 1 1-.708-.707z" />
|
||||||
|
<path d="m14 9.293-6-6-6 6V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5zm-6-.811c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.691 0-5.018" />
|
||||||
|
</svg> <span class="mx-2 mt-0 text-primary">Home</span>
|
||||||
|
</NavLink>
|
||||||
|
<NavLink class="nav-link d-flex align-items-center rounded rounded-5" href="temperature-blanket" ActiveClass="nav-active">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="@_primaryColor" class="bi bi-border-outer" viewBox="0 0 16 16">
|
||||||
|
<path d="M7.5 1.906v.938h1v-.938zm0 1.875v.938h1V3.78h-1zm0 1.875v.938h1v-.938zM1.906 8.5h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm2.813 0v-.031H8.5V7.53h-.031V7.5H7.53v.031H7.5v.938h.031V8.5zm.937 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zM7.5 9.406v.938h1v-.938zm0 1.875v.938h1v-.938zm0 1.875v.938h1v-.938z" />
|
||||||
|
<path d="M0 0v16h16V0zm1 1h14v14H1z" />
|
||||||
|
</svg><span class="mx-2 mt-0 text-primary">Crochet</span>
|
||||||
|
</NavLink>
|
||||||
|
<NavLink class="nav-link d-flex align-items-center rounded rounded-5" href="pokemonsleep" ActiveClass="nav-active">
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="@_primaryColor" class="bi bi-p-circle-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.5 4.002V12h1.283V9.164h1.668C10.033 9.164 11 8.08 11 6.586c0-1.482-.955-2.584-2.538-2.584zm2.77 4.072c.893 0 1.419-.545 1.419-1.488s-.526-1.482-1.42-1.482H6.778v2.97z" />
|
||||||
|
</svg> <span class="mx-2 mt-0 text-primary">Pokémon Sleep</span>
|
||||||
|
</NavLink>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
</div>
|
||||||
|
<div class="mt-2 mb-3 mx-auto w-75 border-top border-primary-subtle"></div>
|
||||||
|
|
@ -0,0 +1,7 @@
|
||||||
|
namespace Portfolio.WebUI.Server.Components.Layout
|
||||||
|
{
|
||||||
|
public partial class BaseNavMenu
|
||||||
|
{
|
||||||
|
private string _primaryColor = "#593196";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
body {
|
||||||
|
}
|
||||||
|
|
||||||
|
::deep .nav-active {
|
||||||
|
font-weight: bold;
|
||||||
|
background-color: #f2eaff;
|
||||||
|
color: black;
|
||||||
|
padding-left: 15px;
|
||||||
|
padding-right: 15px;
|
||||||
|
padding-top: 5px;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
border: 1px dashed #593196;
|
||||||
|
}
|
||||||
|
|
@ -1,11 +1,14 @@
|
||||||
<div class="position-absolute bottom-0 vw-100">
|
|
||||||
|
<div class="mt-2 mx-auto w-75 mt-2 border-top border-primary-subtle"></div>
|
||||||
|
<div class="container mt-2">
|
||||||
<footer class="d-flex flex-column align-content-center">
|
<footer class="d-flex flex-column align-content-center">
|
||||||
<hr class="border-bottom border-primary border-1 mx-5">
|
|
||||||
<p class="text-center text-primary">
|
<p class="text-center fs-6 fw-lighter text-muted">
|
||||||
Made with Love
|
Made with Love
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-through-heart" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-through-heart" viewBox="0 0 16 16">
|
||||||
<path fill-rule="evenodd" d="M2.854 15.854A.5.5 0 0 1 2 15.5V14H.5a.5.5 0 0 1-.354-.854l1.5-1.5A.5.5 0 0 1 2 11.5h1.793l.53-.53c-.771-.802-1.328-1.58-1.704-2.32-.798-1.575-.775-2.996-.213-4.092C3.426 2.565 6.18 1.809 8 3.233c1.25-.98 2.944-.928 4.212-.152L13.292 2 12.147.854A.5.5 0 0 1 12.5 0h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.854.354L14 2.707l-1.006 1.006c.236.248.44.531.6.845.562 1.096.585 2.517-.213 4.092-.793 1.563-2.395 3.288-5.105 5.08L8 13.912l-.276-.182a22 22 0 0 1-2.685-2.062l-.539.54V14a.5.5 0 0 1-.146.354zm2.893-4.894A20.4 20.4 0 0 0 8 12.71c2.456-1.666 3.827-3.207 4.489-4.512.679-1.34.607-2.42.215-3.185-.817-1.595-3.087-2.054-4.346-.761L8 4.62l-.358-.368c-1.259-1.293-3.53-.834-4.346.761-.392.766-.464 1.845.215 3.185.323.636.815 1.33 1.519 2.065l1.866-1.867a.5.5 0 1 1 .708.708z" />
|
<path fill-rule="evenodd" d="M2.854 15.854A.5.5 0 0 1 2 15.5V14H.5a.5.5 0 0 1-.354-.854l1.5-1.5A.5.5 0 0 1 2 11.5h1.793l.53-.53c-.771-.802-1.328-1.58-1.704-2.32-.798-1.575-.775-2.996-.213-4.092C3.426 2.565 6.18 1.809 8 3.233c1.25-.98 2.944-.928 4.212-.152L13.292 2 12.147.854A.5.5 0 0 1 12.5 0h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.854.354L14 2.707l-1.006 1.006c.236.248.44.531.6.845.562 1.096.585 2.517-.213 4.092-.793 1.563-2.395 3.288-5.105 5.08L8 13.912l-.276-.182a22 22 0 0 1-2.685-2.062l-.539.54V14a.5.5 0 0 1-.146.354zm2.893-4.894A20.4 20.4 0 0 0 8 12.71c2.456-1.666 3.827-3.207 4.489-4.512.679-1.34.607-2.42.215-3.185-.817-1.595-3.087-2.054-4.346-.761L8 4.62l-.358-.368c-1.259-1.293-3.53-.834-4.346.761-.392.766-.464 1.845.215 3.185.323.636.815 1.33 1.519 2.065l1.866-1.867a.5.5 0 1 1 .708.708z" />
|
||||||
</svg>
|
</svg>
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,11 +1,9 @@
|
||||||
@inherits LayoutComponentBase
|
@inherits LayoutComponentBase
|
||||||
|
|
||||||
<div class="page">
|
<div class="d-flex flex-column min-vh-100">
|
||||||
<main class="">
|
<BaseNavMenu />
|
||||||
<NavMenu3 />
|
<main class="container flex-grow-1">
|
||||||
<div class="container">
|
|
||||||
@Body
|
@Body
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
@* <MadeWithLoveFooter/> *@
|
<MadeWithLoveFooter/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,4 @@
|
||||||
.page {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
main {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
@ -12,6 +8,10 @@ main {
|
||||||
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
|
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
max-width: 1920px;
|
||||||
|
}
|
||||||
|
|
||||||
.top-row {
|
.top-row {
|
||||||
background-color: #f7f7f7;
|
background-color: #f7f7f7;
|
||||||
border-bottom: 1px solid #d6d5d5;
|
border-bottom: 1px solid #d6d5d5;
|
||||||
|
|
@ -47,9 +47,6 @@ main {
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 641px) {
|
@media (min-width: 641px) {
|
||||||
.page {
|
|
||||||
flex-direction: row;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
width: 250px;
|
width: 250px;
|
||||||
|
|
@ -76,21 +73,3 @@ main {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#blazor-error-ui {
|
|
||||||
background: lightyellow;
|
|
||||||
bottom: 0;
|
|
||||||
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
|
|
||||||
display: none;
|
|
||||||
left: 0;
|
|
||||||
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
|
|
||||||
#blazor-error-ui .dismiss {
|
|
||||||
cursor: pointer;
|
|
||||||
position: absolute;
|
|
||||||
right: 0.75rem;
|
|
||||||
top: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,35 +1,35 @@
|
||||||
<div class="top-row ps-3 navbar navbar-dark">
|
<div class="navbar navbar-expand bg-primary border-0">
|
||||||
<div class="container-fluid">
|
<div class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-light text-decoration-none px-3">
|
||||||
<a class="navbar-brand" href="">Portfolio.WebUI.Server</a>
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#FFFFFF" class="bi bi-arrow-through-heart" viewBox="0 0 16 16" style="cursor: pointer;">
|
||||||
|
<path fill-rule="evenodd" d="M2.854 15.854A.5.5 0 0 1 2 15.5V14H.5a.5.5 0 0 1-.354-.854l1.5-1.5A.5.5 0 0 1 2 11.5h1.793l.53-.53c-.771-.802-1.328-1.58-1.704-2.32-.798-1.575-.775-2.996-.213-4.092C3.426 2.565 6.18 1.809 8 3.233c1.25-.98 2.944-.928 4.212-.152L13.292 2 12.147.854A.5.5 0 0 1 12.5 0h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.854.354L14 2.707l-1.006 1.006c.236.248.44.531.6.845.562 1.096.585 2.517-.213 4.092-.793 1.563-2.395 3.288-5.105 5.08L8 13.912l-.276-.182a22 22 0 0 1-2.685-2.062l-.539.54V14a.5.5 0 0 1-.146.354zm2.893-4.894A20.4 20.4 0 0 0 8 12.71c2.456-1.666 3.827-3.207 4.489-4.512.679-1.34.607-2.42.215-3.185-.817-1.595-3.087-2.054-4.346-.761L8 4.62l-.358-.368c-1.259-1.293-3.53-.834-4.346.761-.392.766-.464 1.845.215 3.185.323.636.815 1.33 1.519 2.065l1.866-1.867a.5.5 0 1 1 .708.708z" />
|
||||||
|
</svg>
|
||||||
|
<span class="fs-4 mx-2 text-white">Kira Jiroux</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<ul class="navbar-nav">
|
||||||
|
|
||||||
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
|
<li class="nav-item">
|
||||||
|
<NavLink class="nav-link d-flex align-items-center" href="" Match="NavLinkMatch.All">
|
||||||
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFFFFF" class="bi bi-house-heart-fill" viewBox="0 0 16 16">
|
||||||
<nav class="flex-column">
|
<path d="M7.293 1.5a1 1 0 0 1 1.414 0L11 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l2.354 2.353a.5.5 0 0 1-.708.707L8 2.207 1.354 8.853a.5.5 0 1 1-.708-.707z" />
|
||||||
<div class="nav-item px-3">
|
<path d="m14 9.293-6-6-6 6V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5zm-6-.811c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.691 0-5.018" />
|
||||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
</svg> <span class="mx-2 mt-0 text-white">Home</span>
|
||||||
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
|
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</div>
|
</li>
|
||||||
|
<li>
|
||||||
<div class="nav-item px-3">
|
<NavLink class="nav-link d-flex align-items-center" href="temperature-blanket">
|
||||||
<NavLink class="nav-link" href="articles">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFFFFF" class="bi bi-border-outer" viewBox="0 0 16 16">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-richtext" viewBox="0 0 16 16">
|
<path d="M7.5 1.906v.938h1v-.938zm0 1.875v.938h1V3.78h-1zm0 1.875v.938h1v-.938zM1.906 8.5h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm2.813 0v-.031H8.5V7.53h-.031V7.5H7.53v.031H7.5v.938h.031V8.5zm.937 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zM7.5 9.406v.938h1v-.938zm0 1.875v.938h1v-.938zm0 1.875v.938h1v-.938z" />
|
||||||
<path d="M7.5 3.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m-.861 1.542 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047L11 4.75V7a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 7v-.5s1.54-1.274 1.639-1.208M5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5" />
|
<path d="M0 0v16h16V0zm1 1h14v14H1z" />
|
||||||
<path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2" />
|
</svg><span class="mx-2 mt-0 text-white">Crochet</span>
|
||||||
<path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z" />
|
|
||||||
</svg> Articles
|
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</div>
|
</li>
|
||||||
<div class="nav-item px-3">
|
<li>
|
||||||
<NavLink class="nav-link" href="pokemonsleep">
|
<NavLink class="nav-link d-flex align-items-center" href="pokemonsleep">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-p-circle-fill" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFFFFF" class="bi bi-p-circle-fill" viewBox="0 0 16 16">
|
||||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.5 4.002V12h1.283V9.164h1.668C10.033 9.164 11 8.08 11 6.586c0-1.482-.955-2.584-2.538-2.584zm2.77 4.072c.893 0 1.419-.545 1.419-1.488s-.526-1.482-1.42-1.482H6.778v2.97z" />
|
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.5 4.002V12h1.283V9.164h1.668C10.033 9.164 11 8.08 11 6.586c0-1.482-.955-2.584-2.538-2.584zm2.77 4.072c.893 0 1.419-.545 1.419-1.488s-.526-1.482-1.42-1.482H6.778v2.97z" />
|
||||||
</svg> Pokemon Sleep
|
</svg> <span class="mx-2 mt-0 text-white">Pokémon Sleep</span>
|
||||||
</NavLink>
|
</NavLink>
|
||||||
</div>
|
</li>
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
@ -1,105 +0,0 @@
|
||||||
.navbar-toggler {
|
|
||||||
appearance: none;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 3.5rem;
|
|
||||||
height: 2.5rem;
|
|
||||||
color: white;
|
|
||||||
position: absolute;
|
|
||||||
top: 0.5rem;
|
|
||||||
right: 1rem;
|
|
||||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
||||||
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-toggler:checked {
|
|
||||||
background-color: rgba(255, 255, 255, 0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.top-row {
|
|
||||||
height: 3.5rem;
|
|
||||||
background-color: rgba(0,0,0,0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-brand {
|
|
||||||
font-size: 1.1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bi {
|
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
|
||||||
width: 1.25rem;
|
|
||||||
height: 1.25rem;
|
|
||||||
margin-right: 0.75rem;
|
|
||||||
top: -1px;
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bi-house-door-fill-nav-menu {
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
|
|
||||||
}
|
|
||||||
|
|
||||||
.bi-plus-square-fill-nav-menu {
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
|
|
||||||
}
|
|
||||||
|
|
||||||
.bi-list-nested-nav-menu {
|
|
||||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
padding-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item:first-of-type {
|
|
||||||
padding-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item:last-of-type {
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item ::deep .nav-link {
|
|
||||||
color: #d7d7d7;
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
height: 3rem;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
line-height: 3rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item ::deep a.active {
|
|
||||||
background-color: rgba(255,255,255,0.37);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item ::deep .nav-link:hover {
|
|
||||||
background-color: rgba(255,255,255,0.1);
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-scrollable {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navbar-toggler:checked ~ .nav-scrollable {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 641px) {
|
|
||||||
.navbar-toggler {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-scrollable {
|
|
||||||
/* Never collapse the sidebar for wide screens */
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
/* Allow sidebar to scroll for tall menus */
|
|
||||||
height: calc(100vh - 3.5rem);
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,41 +0,0 @@
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
|
||||||
<a class="navbar-brand" href="#">Navbar</a>
|
|
||||||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
|
|
||||||
<span class="navbar-toggler-icon"></span>
|
|
||||||
</button>
|
|
||||||
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
<li class="nav-item active">
|
|
||||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
|
||||||
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
|
|
||||||
</NavLink>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<NavLink class="nav-link" href="articles">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journal-richtext" viewBox="0 0 16 16">
|
|
||||||
<path d="M7.5 3.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m-.861 1.542 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047L11 4.75V7a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 7v-.5s1.54-1.274 1.639-1.208M5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5" />
|
|
||||||
<path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2" />
|
|
||||||
<path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1z" />
|
|
||||||
</svg> Articles
|
|
||||||
</NavLink>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item">
|
|
||||||
<NavLink class="nav-link" href="pokemonsleep">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-p-circle-fill" viewBox="0 0 16 16">
|
|
||||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.5 4.002V12h1.283V9.164h1.668C10.033 9.164 11 8.08 11 6.586c0-1.482-.955-2.584-2.538-2.584zm2.77 4.072c.893 0 1.419-.545 1.419-1.488s-.526-1.482-1.42-1.482H6.778v2.97z" />
|
|
||||||
</svg> Pokemon Sleep
|
|
||||||
</NavLink>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item dropdown">
|
|
||||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
||||||
Dropdown link
|
|
||||||
</a>
|
|
||||||
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
|
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
|
||||||
<a class="dropdown-item" href="#">Something else here</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
@ -1,35 +0,0 @@
|
||||||
<div class="navbar navbar-expand bg-primary border-0">
|
|
||||||
<div class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-light text-decoration-none px-3">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#FFFFFF" class="bi bi-arrow-through-heart" viewBox="0 0 16 16" style="cursor: pointer;">
|
|
||||||
<path fill-rule="evenodd" d="M2.854 15.854A.5.5 0 0 1 2 15.5V14H.5a.5.5 0 0 1-.354-.854l1.5-1.5A.5.5 0 0 1 2 11.5h1.793l.53-.53c-.771-.802-1.328-1.58-1.704-2.32-.798-1.575-.775-2.996-.213-4.092C3.426 2.565 6.18 1.809 8 3.233c1.25-.98 2.944-.928 4.212-.152L13.292 2 12.147.854A.5.5 0 0 1 12.5 0h3a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.854.354L14 2.707l-1.006 1.006c.236.248.44.531.6.845.562 1.096.585 2.517-.213 4.092-.793 1.563-2.395 3.288-5.105 5.08L8 13.912l-.276-.182a22 22 0 0 1-2.685-2.062l-.539.54V14a.5.5 0 0 1-.146.354zm2.893-4.894A20.4 20.4 0 0 0 8 12.71c2.456-1.666 3.827-3.207 4.489-4.512.679-1.34.607-2.42.215-3.185-.817-1.595-3.087-2.054-4.346-.761L8 4.62l-.358-.368c-1.259-1.293-3.53-.834-4.346.761-.392.766-.464 1.845.215 3.185.323.636.815 1.33 1.519 2.065l1.866-1.867a.5.5 0 1 1 .708.708z" />
|
|
||||||
</svg>
|
|
||||||
<span class="fs-4 mx-2 text-white">Kira Jiroux</span>
|
|
||||||
</div>
|
|
||||||
<ul class="navbar-nav">
|
|
||||||
|
|
||||||
<li class="nav-item">
|
|
||||||
<NavLink class="nav-link d-flex align-items-center" href="" Match="NavLinkMatch.All">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFFFFF" class="bi bi-house-heart-fill" viewBox="0 0 16 16">
|
|
||||||
<path d="M7.293 1.5a1 1 0 0 1 1.414 0L11 3.793V2.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v3.293l2.354 2.353a.5.5 0 0 1-.708.707L8 2.207 1.354 8.853a.5.5 0 1 1-.708-.707z" />
|
|
||||||
<path d="m14 9.293-6-6-6 6V13.5A1.5 1.5 0 0 0 3.5 15h9a1.5 1.5 0 0 0 1.5-1.5zm-6-.811c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.691 0-5.018" />
|
|
||||||
</svg> <span class="mx-2 mt-0 text-white">Home</span>
|
|
||||||
</NavLink>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<NavLink class="nav-link d-flex align-items-center" href="temperature-blanket">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFFFFF" class="bi bi-border-outer" viewBox="0 0 16 16">
|
|
||||||
<path d="M7.5 1.906v.938h1v-.938zm0 1.875v.938h1V3.78h-1zm0 1.875v.938h1v-.938zM1.906 8.5h.938v-1h-.938zm1.875 0h.938v-1H3.78v1zm1.875 0h.938v-1h-.938zm2.813 0v-.031H8.5V7.53h-.031V7.5H7.53v.031H7.5v.938h.031V8.5zm.937 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zm1.875 0h.938v-1h-.938zM7.5 9.406v.938h1v-.938zm0 1.875v.938h1v-.938zm0 1.875v.938h1v-.938z" />
|
|
||||||
<path d="M0 0v16h16V0zm1 1h14v14H1z" />
|
|
||||||
</svg><span class="mx-2 mt-0 text-white">Crochet</span>
|
|
||||||
</NavLink>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<NavLink class="nav-link d-flex align-items-center" href="pokemonsleep">
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFFFFF" class="bi bi-p-circle-fill" viewBox="0 0 16 16">
|
|
||||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.5 4.002V12h1.283V9.164h1.668C10.033 9.164 11 8.08 11 6.586c0-1.482-.955-2.584-2.538-2.584zm2.77 4.072c.893 0 1.419-.545 1.419-1.488s-.526-1.482-1.42-1.482H6.778v2.97z" />
|
|
||||||
</svg> <span class="mx-2 mt-0 text-white">Pokémon Sleep</span>
|
|
||||||
</NavLink>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<div class="w-100">
|
<div class="w-100">
|
||||||
<!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
|
<!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
|
||||||
|
|
||||||
<PokemonHeader />
|
<PokemonNavMenu />
|
||||||
|
|
||||||
|
|
||||||
<hr class="mt-5" />
|
<hr class="mt-5" />
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
|
|
||||||
|
|
||||||
<PageTitle>Add New Pokémon</PageTitle>
|
<PageTitle>Add New Pokémon</PageTitle>
|
||||||
<PokemonHeader />
|
<PokemonNavMenu />
|
||||||
|
|
||||||
|
|
||||||
@if (isSubmitting)
|
@if (isSubmitting)
|
||||||
|
|
@ -19,9 +19,9 @@
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
{
|
{
|
||||||
<div class="container mx-0 px-0">
|
<div class="container">
|
||||||
<div class="row mt-5">
|
<div class="row mt-3">
|
||||||
<div class="d-flex justify-content-evenly h-100 p-0">
|
<div class="d-flex justify-content-evenly p-0">
|
||||||
|
|
||||||
<div class="mx-1 align-content-center">
|
<div class="mx-1 align-content-center">
|
||||||
<div class="addcard">
|
<div class="addcard">
|
||||||
|
|
@ -41,6 +41,7 @@ else
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
else if (pokemon2FormView && !pokemon3FormView)
|
else if (pokemon2FormView && !pokemon3FormView)
|
||||||
{
|
{
|
||||||
<div class="mx-1 align-content-center">
|
<div class="mx-1 align-content-center">
|
||||||
|
|
@ -56,6 +57,7 @@ else
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
else if (!pokemon2FormView && pokemon3FormView)
|
else if (!pokemon2FormView && pokemon3FormView)
|
||||||
{
|
{
|
||||||
<div class="mx-1 align-content-center">
|
<div class="mx-1 align-content-center">
|
||||||
|
|
@ -76,11 +78,12 @@ else
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="d-flex justify-content-center pt-3">
|
</div>
|
||||||
|
|
||||||
|
<div class="d-flex justify-content-center mt-5">
|
||||||
<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>
|
||||||
|
|
|
||||||
|
|
@ -26,7 +26,7 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
private Pokemon pokemon1, pokemon2, pokemon3 = new Pokemon
|
private Pokemon pokemon1 = new Pokemon
|
||||||
{
|
{
|
||||||
PokemonId = 0, // Or any default ID logic
|
PokemonId = 0, // Or any default ID logic
|
||||||
PokemonName = string.Empty, // Required fields cannot be null
|
PokemonName = string.Empty, // Required fields cannot be null
|
||||||
|
|
@ -34,6 +34,23 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
|
||||||
Speciality = string.Empty,
|
Speciality = string.Empty,
|
||||||
IsVariation = false
|
IsVariation = false
|
||||||
};
|
};
|
||||||
|
private Pokemon pokemon2 = new Pokemon
|
||||||
|
{
|
||||||
|
PokemonId = 0, // Or any default ID logic
|
||||||
|
PokemonName = string.Empty, // Required fields cannot be null
|
||||||
|
SleepType = string.Empty,
|
||||||
|
Speciality = string.Empty,
|
||||||
|
IsVariation = false
|
||||||
|
};
|
||||||
|
private Pokemon pokemon3 = new Pokemon
|
||||||
|
{
|
||||||
|
PokemonId = 0, // Or any default ID logic
|
||||||
|
PokemonName = string.Empty, // Required fields cannot be null
|
||||||
|
SleepType = string.Empty,
|
||||||
|
Speciality = string.Empty,
|
||||||
|
IsVariation = false
|
||||||
|
};
|
||||||
|
|
||||||
private bool isSubmitting = false;
|
private bool isSubmitting = false;
|
||||||
|
|
||||||
private bool ToggleVariationName { get; set; }
|
private bool ToggleVariationName { get; set; }
|
||||||
|
|
@ -42,6 +59,43 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
|
||||||
{
|
{
|
||||||
this.ToggleVariationName = true;
|
this.ToggleVariationName = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
private async Task ReceivePokemon1(Pokemon p)
|
||||||
|
{
|
||||||
|
// Save received pokemon as Pokemon 1
|
||||||
|
pokemon1 = p;
|
||||||
|
|
||||||
|
// Server console (Blazor Server)
|
||||||
|
Console.WriteLine($"[Pokemon 1] #{pokemon1.PokemonId} {pokemon1.PokemonName} | {pokemon1.PokemonType} | {pokemon1.SleepType} | {pokemon1.Speciality} | Var:{pokemon1.IsVariation} {pokemon1.VariationName}");
|
||||||
|
|
||||||
|
// Browser console
|
||||||
|
await JS.InvokeVoidAsync("console.log", "Pokemon 1:", pokemon1);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task ReceivePokemon2(Pokemon p)
|
||||||
|
{
|
||||||
|
// Save received pokemon as Pokemon 1
|
||||||
|
pokemon2 = p;
|
||||||
|
|
||||||
|
// Server console (Blazor Server)
|
||||||
|
Console.WriteLine($"[Pokemon 2] #{pokemon2.PokemonId} {pokemon2.PokemonName} | {pokemon2.PokemonType} | {pokemon2.SleepType} | {pokemon2.Speciality} | Var:{pokemon2.IsVariation} {pokemon2.VariationName}");
|
||||||
|
|
||||||
|
// Browser console
|
||||||
|
await JS.InvokeVoidAsync("console.log", "Pokemon 2:", pokemon2);
|
||||||
|
}
|
||||||
|
|
||||||
|
private async Task ReceivePokemon3(Pokemon p)
|
||||||
|
{
|
||||||
|
// Save received pokemon as Pokemon 1
|
||||||
|
pokemon3 = p;
|
||||||
|
|
||||||
|
// Server console (Blazor Server)
|
||||||
|
Console.WriteLine($"[Pokemon 3] #{pokemon3.PokemonId} {pokemon3.PokemonName} | {pokemon3.PokemonType} | {pokemon3.SleepType} | {pokemon3.Speciality} | Var:{pokemon3.IsVariation} {pokemon3.VariationName}");
|
||||||
|
|
||||||
|
// Browser console
|
||||||
|
await JS.InvokeVoidAsync("console.log", "Pokemon 3:", pokemon3);
|
||||||
|
}
|
||||||
private bool IsComplete(Pokemon NewPokemon) =>
|
private bool IsComplete(Pokemon NewPokemon) =>
|
||||||
NewPokemon.PokemonId > 0 &&
|
NewPokemon.PokemonId > 0 &&
|
||||||
!string.IsNullOrWhiteSpace(NewPokemon.PokemonName) &&
|
!string.IsNullOrWhiteSpace(NewPokemon.PokemonName) &&
|
||||||
|
|
@ -104,42 +158,5 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
|
||||||
Console.WriteLine("Testing in Cancel");
|
Console.WriteLine("Testing in Cancel");
|
||||||
Navigation.NavigateTo("/pokemon");
|
Navigation.NavigateTo("/pokemon");
|
||||||
}
|
}
|
||||||
|
|
||||||
private async Task ReceivePokemon1(Pokemon p)
|
|
||||||
{
|
|
||||||
// Save received pokemon as Pokemon 1
|
|
||||||
pokemon1 = p;
|
|
||||||
|
|
||||||
// Server console (Blazor Server)
|
|
||||||
Console.WriteLine($"[Pokemon 1] #{pokemon1.PokemonId} {pokemon1.PokemonName} | {pokemon1.PokemonType} | {pokemon1.SleepType} | {pokemon1.Speciality} | Var:{pokemon1.IsVariation} {pokemon1.VariationName}");
|
|
||||||
|
|
||||||
// Browser console
|
|
||||||
await JS.InvokeVoidAsync("console.log", "Pokemon 1:", pokemon1);
|
|
||||||
}
|
|
||||||
|
|
||||||
private async Task ReceivePokemon2(Pokemon p)
|
|
||||||
{
|
|
||||||
// Save received pokemon as Pokemon 1
|
|
||||||
pokemon2 = p;
|
|
||||||
|
|
||||||
// Server console (Blazor Server)
|
|
||||||
Console.WriteLine($"[Pokemon 2] #{pokemon2.PokemonId} {pokemon2.PokemonName} | {pokemon2.PokemonType} | {pokemon2.SleepType} | {pokemon2.Speciality} | Var:{pokemon2.IsVariation} {pokemon2.VariationName}");
|
|
||||||
|
|
||||||
// Browser console
|
|
||||||
await JS.InvokeVoidAsync("console.log", "Pokemon 2:", pokemon2);
|
|
||||||
}
|
|
||||||
|
|
||||||
private async Task ReceivePokemon3(Pokemon p)
|
|
||||||
{
|
|
||||||
// Save received pokemon as Pokemon 1
|
|
||||||
pokemon3 = p;
|
|
||||||
|
|
||||||
// Server console (Blazor Server)
|
|
||||||
Console.WriteLine($"[Pokemon 3] #{pokemon3.PokemonId} {pokemon3.PokemonName} | {pokemon3.PokemonType} | {pokemon3.SleepType} | {pokemon3.Speciality} | Var:{pokemon3.IsVariation} {pokemon3.VariationName}");
|
|
||||||
|
|
||||||
// Browser console
|
|
||||||
await JS.InvokeVoidAsync("console.log", "Pokemon 3:", pokemon3);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@page "/pokemonsleep/edit/{id:int}"
|
@page "/pokemonsleep/edit-pokemon/{id:int}"
|
||||||
@inject IPokemonService PokemonService
|
@inject IPokemonService PokemonService
|
||||||
@inject NavigationManager Navigation
|
@inject NavigationManager Navigation
|
||||||
@inject IJSRuntime JS
|
@inject IJSRuntime JS
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
@rendermode InteractiveServer
|
@rendermode InteractiveServer
|
||||||
|
|
||||||
<PageTitle>Edit Pokémon</PageTitle>
|
<PageTitle>Edit Pokémon</PageTitle>
|
||||||
<PokemonHeader />
|
<PokemonNavMenu />
|
||||||
|
|
||||||
|
|
||||||
@if (pokemon == null)
|
@if (pokemon == null)
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@
|
||||||
@rendermode InteractiveServer
|
@rendermode InteractiveServer
|
||||||
|
|
||||||
|
|
||||||
<PokemonHeader />
|
<PokemonNavMenu />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@page "/rate-pokemon"
|
@page "/pokemonsleep/rate-pokemon"
|
||||||
|
|
||||||
@inject IPokemonService PokemonService
|
@inject IPokemonService PokemonService
|
||||||
@inject IPokemonNatureService PokemonNatureService
|
@inject IPokemonNatureService PokemonNatureService
|
||||||
|
|
@ -12,9 +12,9 @@
|
||||||
|
|
||||||
<PageTitle>Rate Pokémon</PageTitle>
|
<PageTitle>Rate Pokémon</PageTitle>
|
||||||
|
|
||||||
<PokemonHeader />
|
<PokemonNavMenu />
|
||||||
|
|
||||||
<div class="mt-4">
|
<div class="container mt-4">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
@if (PokemonList == null || NatureList == null || SubskillList == null)
|
@if (PokemonList == null || NatureList == null || SubskillList == null)
|
||||||
{
|
{
|
||||||
|
|
@ -60,5 +60,4 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<hr class="mt-5"/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -8,16 +8,16 @@
|
||||||
<PageTitle>Pokémon Sleep</PageTitle>
|
<PageTitle>Pokémon Sleep</PageTitle>
|
||||||
|
|
||||||
<!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
|
<!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
|
||||||
<PokemonHeader />
|
<PokemonNavMenu />
|
||||||
|
|
||||||
<!-- Card -->
|
<!-- Card -->
|
||||||
<div class="container card shadow-sm border-0 p-3 pb-4 mt-4 m-auto w-75 mb-5 bg-white">
|
<div class="container card shadow-sm border-0 p-3 pb-4 mt-5 m-auto w-50 mb-5 bg-white rounded ">
|
||||||
|
|
||||||
<!-- Top Row-->
|
<!-- Top Row-->
|
||||||
<div class="row d-flex flex-row">
|
<div class="row d-flex flex-row">
|
||||||
<!-- Image side -->
|
<!-- Image side -->
|
||||||
<div class="col-5 border-0 ">
|
<div class="col-5 border-0 ">
|
||||||
<img class="shadow-sm w-100 m-auto img-fluid" src="images/Pokemon_Sleep_ID.jpg" />
|
<img class="shadow-sm w-100 m-auto img-fluid rounded" src="images/Pokemon_Sleep_ID.jpg" />
|
||||||
</div>
|
</div>
|
||||||
<!-- Text side -->
|
<!-- Text side -->
|
||||||
<div class="col w-50 p-3">
|
<div class="col w-50 p-3">
|
||||||
|
|
@ -44,7 +44,7 @@
|
||||||
<!-- Button Row-->
|
<!-- Button Row-->
|
||||||
<div class="d-flex justify-content-evenly mt-4 ">
|
<div class="d-flex justify-content-evenly mt-4 ">
|
||||||
<button class="btn btn-info rounded-4 d-flex justify-content-center" style="width:12rem;">
|
<button class="btn btn-info rounded-4 d-flex justify-content-center" style="width:12rem;">
|
||||||
<NavLink class="nav-link d-flex align-items-center" href="/pokemon">
|
<NavLink class="nav-link d-flex align-items-center" href="/pokemonsleep/pokemon">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table" viewBox="0 0 16 16">
|
||||||
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z" />
|
<path d="M0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm15 2h-4v3h4zm0 4h-4v3h4zm0 4h-4v3h3a1 1 0 0 0 1-1zm-5 3v-3H6v3zm-5 0v-3H1v2a1 1 0 0 0 1 1zm-4-4h4V8H1zm0-4h4V4H1zm5-3v3h4V4zm4 4H6v3h4z" />
|
||||||
</svg>
|
</svg>
|
||||||
|
|
@ -53,7 +53,7 @@
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button class="btn btn-success rounded-4 d-flex justify-content-center" style="width:12rem;">
|
<button class="btn btn-success rounded-4 d-flex justify-content-center" style="width:12rem;">
|
||||||
<NavLink class="nav-link d-flex align-items-center" href="/rate-pokemon">
|
<NavLink class="nav-link d-flex align-items-center" href="/pokemonsleep/rate-pokemon">
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" class="bi bi-award-fill" viewBox="0 0 16 16">
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" class="bi bi-award-fill" viewBox="0 0 16 16">
|
||||||
<path d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864z" />
|
<path d="m8 0 1.669.864 1.858.282.842 1.68 1.337 1.32L13.4 6l.306 1.854-1.337 1.32-.842 1.68-1.858.282L8 12l-1.669-.864-1.858-.282-.842-1.68-1.337-1.32L2.6 6l-.306-1.854 1.337-1.32.842-1.68L6.331.864z" />
|
||||||
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z" />
|
<path d="M4 11.794V16l4-1 4 1v-4.206l-2.018.306L8 13.126 6.018 12.1z" />
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
@page "/pokemon"
|
@page "/pokemonsleep/pokemon"
|
||||||
|
|
||||||
|
|
||||||
@inject IPokemonService PokemonService
|
@inject IPokemonService PokemonService
|
||||||
|
|
@ -10,14 +10,13 @@
|
||||||
<PageTitle>Pokémon Sleep</PageTitle>
|
<PageTitle>Pokémon Sleep</PageTitle>
|
||||||
|
|
||||||
|
|
||||||
<div class="w-100">
|
<!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
|
||||||
<!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
|
|
||||||
|
<PokemonNavMenu />
|
||||||
|
|
||||||
|
<PokemonTable AllPokemon="pokemons"/>
|
||||||
|
|
||||||
|
|
||||||
<PokemonHeader />
|
|
||||||
|
|
||||||
<PokemonTable AllPokemon="pokemons"/>
|
|
||||||
|
|
||||||
<hr class="mt-5" />
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
Loading…
Reference in New Issue