Compare commits
7 Commits
2f210a0e1a
...
1daad24db7
| Author | SHA1 | Date |
|---|---|---|
Kira Jiroux
|
1daad24db7 | |
|
Kira Jiroux
|
40a79f1191 | |
|
Kira Jiroux
|
e45d80143c | |
|
Kira Jiroux
|
f10e2941ab | |
|
Kira Jiroux
|
7f54f5b479 | |
|
Kira Jiroux
|
84aeec64e8 | |
|
Kira Jiroux
|
22a6e68fbd |
|
|
@ -8,10 +8,8 @@
|
|||
}
|
||||
else
|
||||
{
|
||||
|
||||
<h3 class="text-xl font-bold mb-4 mt-4">Temperature Blanket Visualizer</h3>
|
||||
|
||||
<div>
|
||||
<div class="container">
|
||||
<h3 class="text-xl font-bold mb-4 mt-4">Temperature Blanket Visualizer</h3>
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<div class="d-flex">
|
||||
|
|
@ -26,7 +24,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="col d-flex align-items-center">
|
||||
<TemperatureRangeEditor TempRanges="@TemperatureRanges" OnRangesChanged="HandleRangesChanged" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,11 +22,8 @@
|
|||
</div>
|
||||
|
||||
<!-- Pokemon Image -->
|
||||
<div class="flip-container z-1" @onclick="() => ToggleImage()">
|
||||
<div class="flipper @(isShiny ? "flipped" : "")">
|
||||
<img class="pokemon-image front" src="@_pokemon.PokemonImageUrl" />
|
||||
<img class="pokemon-image back" src="@_pokemon.PokemonShinyImageUrl" />
|
||||
</div>
|
||||
<div class="card-image-slot z-1">
|
||||
<PokemonImage baseUrl="@_pokemon.PokemonImageUrl" shinyUrl="@_pokemon.PokemonShinyImageUrl" />
|
||||
</div>
|
||||
|
||||
<!-- Pokemon Flavortext -->
|
||||
|
|
@ -53,7 +50,7 @@
|
|||
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<div class="mt-5">
|
||||
<PokemonEditButton PokemonId="@_pokemon.Id" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,4 +1,11 @@
|
|||
.pokemon-card {
|
||||
.card-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pokemon-card {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 350px; /* Prevent it from getting too huge */
|
||||
|
|
@ -20,14 +27,6 @@
|
|||
transform: translateY(-13px);
|
||||
}
|
||||
|
||||
.card-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.pokemon-name {
|
||||
position: absolute;
|
||||
top: 5%;
|
||||
|
|
@ -53,14 +52,6 @@
|
|||
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 {
|
||||
position: absolute;
|
||||
top: 60% !important;
|
||||
|
|
@ -95,45 +86,18 @@
|
|||
hyphens: auto;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
|
||||
|
||||
.front, .back {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* Position the image area within the card */
|
||||
.card-image-slot {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
backface-visibility: hidden;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -20%);
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Type Card Styling */
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
|||
|
||||
private void EditPokemon(int PokemonId)
|
||||
{
|
||||
Navigation.NavigateTo($"/pokemonsleep/edit/{PokemonId}");
|
||||
Navigation.NavigateTo($"/pokemon-sleep/edit-pokemon/{PokemonId}");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -131,6 +131,15 @@
|
|||
}
|
||||
|
||||
<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)
|
||||
{
|
||||
<button type="button"
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
|||
[Parameter]
|
||||
public string formUse { get; set; }
|
||||
|
||||
private bool formChanged { get; set; } = false;
|
||||
|
||||
[Parameter]
|
||||
public EventCallback<Pokemon> OnPokemonReady { get; set; }
|
||||
|
|
@ -72,6 +73,11 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
|||
HideLabel = !HideLabel;
|
||||
}
|
||||
|
||||
private void ToggleFormChange()
|
||||
{
|
||||
formChanged = true;
|
||||
}
|
||||
|
||||
|
||||
// CSS-function to get proper styling for form elements
|
||||
private string GetRoundingClass()
|
||||
|
|
@ -134,6 +140,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
|||
};
|
||||
|
||||
await OnPokemonReady.InvokeAsync(copy);
|
||||
formChanged = false;
|
||||
}
|
||||
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,18 +1,9 @@
|
|||
|
||||
<!-- Heading + Buttons -->
|
||||
<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="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">
|
||||
<!-- Pokemon Navigation Buttons -->
|
||||
<div class="mx-auto w-75 top-row row" >
|
||||
<div class="row btn-group d-flex justify-content-end" >
|
||||
<!-- Home -->
|
||||
<button class="btn btn-primary mx-1 align-content-center" style="border-radius: 50px 15px; max-width: 60px;">
|
||||
<NavLink href="/pokemonsleep">
|
||||
<NavLink href="/pokemon-sleep">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill mb-1 text-white" viewBox="0 0 16 16">
|
||||
<path d="M8.707 1.5a1 1 0 0 0-1.414 0L.646 8.146a.5.5 0 0 0 .708.708L8 2.207l6.646 6.647a.5.5 0 0 0 .708-.708L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293z" />
|
||||
<path d="m8 3.293 6 6V13.5a1.5 1.5 0 0 1-1.5 1.5h-9A1.5 1.5 0 0 1 2 13.5V9.293z" />
|
||||
|
|
@ -22,7 +13,7 @@
|
|||
|
||||
<!-- Pokemon Table-->
|
||||
<button class="btn btn-info mx-1" style="border-radius: 50px 15px; max-width: 60px;">
|
||||
<NavLink href="/pokemon">
|
||||
<NavLink href="/pokemon-sleep/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">
|
||||
<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>
|
||||
|
|
@ -31,7 +22,7 @@
|
|||
|
||||
<!-- Rate Pokemon -->
|
||||
<button class="btn btn-success mx-1" style="border-radius: 50px 15px; max-width: 60px;">
|
||||
<NavLink href="/rate-pokemon">
|
||||
<NavLink href="/pokemon-sleep/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">
|
||||
<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" />
|
||||
|
|
@ -41,7 +32,7 @@
|
|||
|
||||
<!-- Add Pokemon (Wrap in Auth) -->
|
||||
<button class="btn btn-warning mx-1 " style="border-radius: 50px 15px; max-width: 60px;">
|
||||
<NavLink href="/pokemonsleep/add-new-pokemon">
|
||||
<NavLink href="/pokemon-sleep/add-new-pokemon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill text-white" viewBox="0 0 16 16">
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
|
||||
</svg>
|
||||
|
|
@ -49,6 +40,4 @@
|
|||
</button>
|
||||
|
||||
</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-->
|
||||
<div class="container d-none d-md-block" style="height: 70vh;">
|
||||
<div class="container d-none d-lg-block d-md-none mt-4">
|
||||
<!-- Main UI -->
|
||||
<div class="border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable">
|
||||
<!-- Table Header -->
|
||||
<div class="row bg-secondary bg-gradient py-3 border-0 rounded-top">
|
||||
<div class="border-0 mx-auto col-8 ">
|
||||
<!-- UI Header -->
|
||||
<div class="row bg-secondary py-3 border-0 rounded-top">
|
||||
<div class="d-flex align-items-center justify-content-between w-100 position-relative px-3">
|
||||
|
||||
<!-- Left: Search -->
|
||||
|
|
@ -21,14 +21,14 @@
|
|||
@oninput="HandleSearch" />
|
||||
|
||||
<!-- 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
|
||||
</h2>
|
||||
|
||||
<!-- Right: Count + Download -->
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="badge bg-info">
|
||||
<p class="statText mb-0">@(pokemons.Count()) Pokémon</p>
|
||||
<div class="badge bg-light">
|
||||
<p class="statText text-primary fw-medium shadow mb-0">@(pokemons.Count()) Pokémon</p>
|
||||
</div>
|
||||
<PokemonDownloadButton _Pokemon="pokemons" />
|
||||
</div>
|
||||
|
|
@ -36,21 +36,21 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Table -->
|
||||
<div class="tableFixHead d-flex flex-column justify-content-start bg-secondary table-responsive row ">
|
||||
<table class="table table-borderless border-0 table-secondary table-striped align-middle">
|
||||
<!-- Table Head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-white text-bg-info col-2 d-none d-md-table-cell" scope="col"></th>
|
||||
<th class="text-white text-bg-info col-2" scope="col"></th>
|
||||
<th class="text-white text-bg-info col-1" scope="col">#</th>
|
||||
<th class="text-white text-bg-info col-2" scope="col">Pokémon</th>
|
||||
<th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
|
||||
<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-white text-bg-info col-1 text-center" scope="col">Sleep Type</th>
|
||||
<th class="text-white text-bg-info col-1 text-center" scope="col">Speciality</th>
|
||||
@if (adminToggle)
|
||||
{
|
||||
<th class="text-white text-bg-info col-1 text-center" scope="col">Edit</th>
|
||||
<th class="text-white text-bg-info col-2 text-center" scope="col">Admin</th>
|
||||
|
||||
}
|
||||
</tr>
|
||||
|
|
@ -66,38 +66,14 @@
|
|||
{
|
||||
<!-- Table Body -->
|
||||
<tbody>
|
||||
<tr></tr>
|
||||
@if (FilteredPokemon != null && FilteredPokemon.Any())
|
||||
{
|
||||
|
||||
@foreach (var pokemon in FilteredPokemon)
|
||||
{
|
||||
<tr class="flex-row">
|
||||
<!-- Section: Pokemon Image -->
|
||||
@{
|
||||
string baseUrl = pokemon.PokemonImageUrl;
|
||||
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>
|
||||
|
||||
}
|
||||
<tr>
|
||||
<!-- Section 1: Pokemon Image -->
|
||||
<td class="pokeimage">
|
||||
<PokemonImage baseUrl="@pokemon.PokemonImageUrl" shinyUrl="@pokemon.PokemonShinyImageUrl" />
|
||||
</td>
|
||||
|
||||
<!-- Section 2: Pokemon # -->
|
||||
|
|
@ -105,10 +81,7 @@
|
|||
|
||||
|
||||
<!-- 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 -->
|
||||
<td>
|
||||
|
|
@ -132,17 +105,21 @@
|
|||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Section 7: Admin Controls -->
|
||||
@if (adminToggle)
|
||||
{
|
||||
<td>
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class="d-flex justify-content-center gap-1">
|
||||
<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>
|
||||
</td>
|
||||
}
|
||||
|
||||
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
|
|
@ -173,69 +150,223 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Desktop B: Mobile View -->
|
||||
<div class="container card border-0 d-block d-md-none mx-auto mt-4 shadow-sm">
|
||||
<!-- Table Header -->
|
||||
<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="text-center position-relative">
|
||||
<h2 class="text-white text-decoration-underline">Pokémon</h2>
|
||||
<div class="m-1 badge bg-white text-info position-absolute top-0 end-0 border-0 w-auto"><p class="statText">@(pokemons.Count()) Pokémon</p></div>
|
||||
|
||||
<div class="container d-none d-lg-none d-md-block mt-4">
|
||||
<!-- Main UI -->
|
||||
<div class="border-0 mx-auto col-8 ">
|
||||
<!-- UI Header -->
|
||||
<div class="row bg-secondary py-3 border-0 rounded-top">
|
||||
<div class="d-flex flex-row align-items-center justify-content-between w-100 gap-3 ms-0 me-0">
|
||||
<div class="col">
|
||||
<input class="form-control rounded rounded-5 fs-6 fw-lighter"
|
||||
placeholder="Search Pokémon..."
|
||||
@bind="SearchTerm"
|
||||
@oninput="HandleSearch" />
|
||||
|
||||
</div>
|
||||
<!-- Left: Search -->
|
||||
|
||||
<!-- Center: Title -->
|
||||
<div class="col">
|
||||
<h2 class="text-white text-center pt-2 fs-6 fw-light">
|
||||
Available Pokémon
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Right: Count + Download -->
|
||||
<div class="col">
|
||||
<div class="d-flex align-items-center gap-1">
|
||||
<div class="badge bg-light">
|
||||
<p class="statText text-primary fw-medium shadow mb-0">@(pokemons.Count()) Pokémon</p>
|
||||
</div>
|
||||
<PokemonDownloadButton _Pokemon="pokemons" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table Body -->
|
||||
<div class="tableFixHead row">
|
||||
<table class="table table-striped border-0">
|
||||
|
||||
<!-- Table -->
|
||||
<div class="tableFixHead d-flex flex-column justify-content-start bg-secondary table-responsive row ">
|
||||
<table class="table table-borderless border-0 table-secondary table-striped align-middle">
|
||||
<!-- Table Head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-white text-bg-info col-2" scope="col"></th>
|
||||
<th class="text-white text-bg-info col-1" scope="col">#</th>
|
||||
<th class="text-white text-bg-info col-2" scope="col">Pokémon</th>
|
||||
<th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
|
||||
<th class="text-white text-bg-info col-1 text-center" scope="col">Sleep Type</th>
|
||||
<th class="text-white text-bg-info col-1 text-center" scope="col">Speciality</th>
|
||||
@if (adminToggle)
|
||||
{
|
||||
<th class="text-white text-bg-info col-2 text-center" scope="col">Admin</th>
|
||||
|
||||
<tbody>
|
||||
@if (pokemons == null)
|
||||
{
|
||||
<Loading />
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
@foreach (var pokemon in pokemons)
|
||||
{
|
||||
<tr class="border-0">
|
||||
<div class="d-flex align-items-center" style="border: 1px dashed hotpink;">
|
||||
|
||||
<!-- Pokemon Image -->
|
||||
<div class="me-3" style="border: 1px dashed hotpink;">
|
||||
<div class="flip-container-sm" @onclick="() => ToggleImage(pokemon.Id)">
|
||||
<div class="flipper-sm @(isShiny[pokemon.Id] ? "flipped" : "")">
|
||||
<img class="front img-fluid" src="@pokemon.PokemonImageUrl" />
|
||||
@if (pokemon.PokemonShinyImageUrl != null)
|
||||
{
|
||||
<img class="back img-fluid" src="@pokemon.PokemonShinyImageUrl" />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border: 1px dashed hotpink;">
|
||||
<!-- Number and Name -->
|
||||
<h5>
|
||||
@pokemon.PokemonId -
|
||||
<span class="pokemon-name-style fw-light" @onclick="() => ViewPokemon(pokemon.PokemonId)">
|
||||
@(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)
|
||||
</span>
|
||||
</h5>
|
||||
<!-- Stats -->
|
||||
<div class="d-flex flex-wrap align-items-center gap-2">
|
||||
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:28px;" />
|
||||
<PokemonBadge BadgeItem="@pokemon.SleepType" />
|
||||
<PokemonBadge BadgeItem="@pokemon.Speciality" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- If/Else Pokemon Loaded-->
|
||||
@if (pokemons == null)
|
||||
{
|
||||
<tbody>
|
||||
<Loading />
|
||||
</tbody>
|
||||
}
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
else
|
||||
{
|
||||
<!-- Table Body -->
|
||||
<tbody>
|
||||
@if (FilteredPokemon != null && FilteredPokemon.Any())
|
||||
{
|
||||
@foreach (var pokemon in FilteredPokemon)
|
||||
{
|
||||
<tr>
|
||||
<!-- Section 1: Pokemon Image -->
|
||||
<td class="">
|
||||
<img src="@pokemon.PokemonImageUrl" style="width:100px;" />
|
||||
</td>
|
||||
|
||||
<!-- Section 2: Pokemon # -->
|
||||
<th scope="row" style="cursor: default;">@pokemon.PokemonId</th>
|
||||
|
||||
|
||||
<!-- Section 3: Pokemon Name -->
|
||||
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style fw-light col-2">@(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)</td>
|
||||
|
||||
<!-- Section 4: Pokemon Type -->
|
||||
<td>
|
||||
<div class="d-flex justify-content-center">
|
||||
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:36px; height:36px;" />
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Section 5: Sleep Type -->
|
||||
<td>
|
||||
<div class="d-flex justify-content-center ">
|
||||
<PokemonBadge BadgeItem="@pokemon.SleepType" />
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Section 6: Speciality -->
|
||||
<td>
|
||||
<div class="d-flex justify-content-center">
|
||||
<PokemonBadge BadgeItem="@pokemon.Speciality" />
|
||||
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Section 7: Admin Controls -->
|
||||
@if (adminToggle)
|
||||
{
|
||||
<td>
|
||||
<div class="d-flex justify-content-center gap-1">
|
||||
<PokemonEditButton PokemonId="@pokemon.PokemonId" />
|
||||
<button class="btn btn-danger rounded rounded-5 text-white " @onclick="() => ConfirmDelete(pokemon.Id)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
|
||||
<path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
}
|
||||
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
<tr>
|
||||
<td colspan="100%">
|
||||
<div class="d-flex justify-content-center align-items-center" style="height: 200px;">
|
||||
<p class="text-muted">Pokémon could not be found.</p>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
}
|
||||
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
<!-- Wrap in Auth -->
|
||||
<div class="d-flex justify-content-end mt-1">
|
||||
<div class="form-check form-switch">
|
||||
<input class="form-check-input rounded rounded-3" type="checkbox" role="switch" id="flexSwitchCheckDefault" @bind="adminToggle">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- Desktop B: Mobile View -->
|
||||
@* <div class="container card border-0 d-block d-md-none mx-auto mt-4 shadow-sm">
|
||||
<!-- Table Header -->
|
||||
<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="text-center position-relative">
|
||||
<h2 class="text-white text-decoration-underline">Pokémon</h2>
|
||||
<div class="m-1 badge bg-white text-info position-absolute top-0 end-0 border-0 w-auto"><p class="statText">@(pokemons.Count()) Pokémon</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table Body -->
|
||||
<div class="tableFixHead row">
|
||||
<table class="table table-striped border-0">
|
||||
|
||||
|
||||
<tbody>
|
||||
@if (pokemons == null)
|
||||
{
|
||||
<Loading />
|
||||
}
|
||||
else
|
||||
{
|
||||
|
||||
@foreach (var pokemon in pokemons)
|
||||
{
|
||||
<tr class="border-0">
|
||||
<div class="d-flex align-items-center" style="border: 1px dashed hotpink;">
|
||||
|
||||
<!-- Pokemon Image -->
|
||||
<div class="me-3" style="border: 1px dashed hotpink;">
|
||||
<div class="flip-container-sm" @onclick="() => ToggleImage(pokemon.Id)">
|
||||
<div class="flipper-sm @(isShiny[pokemon.Id] ? "flipped" : "")">
|
||||
<img class="front img-fluid" src="@pokemon.PokemonImageUrl" />
|
||||
@if (pokemon.PokemonShinyImageUrl != null)
|
||||
{
|
||||
<img class="back img-fluid" src="@pokemon.PokemonShinyImageUrl" />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="border: 1px dashed hotpink;">
|
||||
<!-- Number and Name -->
|
||||
<h5>
|
||||
@pokemon.PokemonId -
|
||||
<span class="pokemon-name-style fw-light" @onclick="() => ViewPokemon(pokemon.PokemonId)">
|
||||
@(pokemon.IsVariation && ToggleVariationName(pokemon.Id, pokemon.PokemonId) ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)
|
||||
</span>
|
||||
</h5>
|
||||
<!-- Stats -->
|
||||
<div class="d-flex flex-wrap align-items-center gap-2">
|
||||
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:28px;" />
|
||||
<PokemonBadge BadgeItem="@pokemon.SleepType" />
|
||||
<PokemonBadge BadgeItem="@pokemon.Speciality" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div> *@
|
||||
|
|
|
|||
|
|
@ -11,9 +11,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
|||
[Parameter]
|
||||
public List<Pokemon> AllPokemon { get; set; }
|
||||
|
||||
|
||||
private List<Pokemon> pokemons = new List<Pokemon>();
|
||||
private Dictionary<int, bool> isShiny = new Dictionary<int, bool>();
|
||||
|
||||
private bool adminToggle = false;
|
||||
|
||||
|
|
@ -23,10 +21,6 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
|||
if (AllPokemon != null) {
|
||||
pokemons = AllPokemon.ToList();
|
||||
|
||||
foreach (var pokemon in pokemons)
|
||||
{
|
||||
isShiny[pokemon.Id] = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
private string SearchTerm { get; set; } = string.Empty;
|
||||
|
|
@ -41,13 +35,6 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
|||
{
|
||||
SearchTerm = e?.Value?.ToString() ?? "";
|
||||
}
|
||||
private void ToggleImage(int Id)
|
||||
{
|
||||
if (isShiny.ContainsKey(Id))
|
||||
{
|
||||
isShiny[Id] = !isShiny[Id];
|
||||
}
|
||||
}
|
||||
|
||||
private bool ToggleVariationName(int Id, int PokemonId)
|
||||
{
|
||||
|
|
@ -79,12 +66,12 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
|||
|
||||
private void EditPokemon(int id)
|
||||
{
|
||||
Navigation.NavigateTo($"/pokemonsleep/edit/{id}");
|
||||
Navigation.NavigateTo($"/pokemon-sleep/edit/{id}");
|
||||
}
|
||||
|
||||
private void ViewPokemon(int id)
|
||||
{
|
||||
Navigation.NavigateTo($"/pokemon/{id}");
|
||||
Navigation.NavigateTo($"/pokemon-sleep/pokemon/{id}");
|
||||
}
|
||||
|
||||
private string GetTypeImageUrl(string pokemonType)
|
||||
|
|
@ -96,6 +83,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
|||
|
||||
return $"https://www.serebii.net/pokemonsleep/pokemon/type/{pokemonType.ToLower()}.png";
|
||||
}
|
||||
|
||||
private void HandleToggleChange(ChangeEventArgs e)
|
||||
{
|
||||
Console.WriteLine($"Admin Toggle is now: {adminToggle}");
|
||||
|
|
|
|||
|
|
@ -1,12 +1,13 @@
|
|||
.five-percent {
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
.ten-percent {
|
||||
width: 10%;
|
||||
}
|
||||
|
||||
.pokemontable {
|
||||
height: 69vh;
|
||||
height: 65vh;
|
||||
}
|
||||
|
||||
.tableFixHead {
|
||||
|
|
@ -25,7 +26,7 @@
|
|||
}
|
||||
|
||||
.pokemon-name-style {
|
||||
cursor:pointer;
|
||||
cursor: pointer;
|
||||
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 {
|
||||
width: 100px;
|
||||
|
|
@ -129,5 +108,15 @@
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
.pokeimage {
|
||||
width: 100px;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
<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-grid-3x3" viewBox="0 0 16 16">
|
||||
<path d="M0 1.5A1.5 1.5 0 0 1 1.5 0h13A1.5 1.5 0 0 1 16 1.5v13a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5zM1.5 1a.5.5 0 0 0-.5.5V5h4V1zM5 6H1v4h4zm1 4h4V6H6zm-1 1H1v3.5a.5.5 0 0 0 .5.5H5zm1 0v4h4v-4zm5 0v4h3.5a.5.5 0 0 0 .5-.5V11zm0-1h4V6h-4zm0-5h4V1.5a.5.5 0 0 0-.5-.5H11zm-1 0V1H6v4z" />
|
||||
</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="pokemon-sleep" 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">
|
||||
<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">
|
||||
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">
|
||||
<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>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
|
||||
<p class="text-center fs-6 fw-lighter text-muted">
|
||||
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">
|
||||
<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>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,11 +1,9 @@
|
|||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="page">
|
||||
<main class="">
|
||||
<NavMenu3 />
|
||||
<div class="container">
|
||||
@Body
|
||||
</div>
|
||||
<div class="d-flex flex-column min-vh-100">
|
||||
<BaseNavMenu />
|
||||
<main class="container flex-grow-1">
|
||||
@Body
|
||||
</main>
|
||||
@* <MadeWithLoveFooter/> *@
|
||||
<MadeWithLoveFooter/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
.page {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
|
|
@ -12,6 +8,10 @@ main {
|
|||
background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1920px;
|
||||
}
|
||||
|
||||
.top-row {
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #d6d5d5;
|
||||
|
|
@ -47,9 +47,6 @@ main {
|
|||
}
|
||||
|
||||
@media (min-width: 641px) {
|
||||
.page {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
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="container-fluid">
|
||||
<a class="navbar-brand" href="">Portfolio.WebUI.Server</a>
|
||||
<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>
|
||||
</div>
|
||||
<ul class="navbar-nav">
|
||||
|
||||
<input type="checkbox" title="Navigation menu" class="navbar-toggler" />
|
||||
|
||||
<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
|
||||
<nav class="flex-column">
|
||||
<div class="nav-item px-3">
|
||||
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
|
||||
<span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="nav-item px-3">
|
||||
<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
|
||||
</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>
|
||||
</div>
|
||||
<div class="nav-item px-3">
|
||||
<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">
|
||||
</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> Pokemon Sleep
|
||||
</svg> <span class="mx-2 mt-0 text-white">Pokémon Sleep</span>
|
||||
</NavLink>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
</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>
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<PageTitle>Home</PageTitle>
|
||||
|
||||
<!-- View 1: Desktop View -->
|
||||
<div class="container d-none d-lg-none d-xl-block mt-5 pt-3 pb-5 ps-5 pe-5 ">
|
||||
<div class="container d-none d-lg-none d-xl-block mt-3 pt-3 pb-5 ps-5 pe-5 ">
|
||||
<h1 class="fst-italic fw-light fs-1 font-monospace">Hello, World!</h1>
|
||||
|
||||
<!-- Start of Grid -->
|
||||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
<div class="row">
|
||||
<!-- School Experience -->
|
||||
<div class="col-auto ps-0">
|
||||
<div class="col ps-0">
|
||||
<div class="card rounded p-2 ps-3 pe-3 border border-1 border-primary">
|
||||
<p class="fs-6 fw-lighter card-subtitle p-0">September 2018 – March 2022</p>
|
||||
<p class="fs-5 card-title m-0">B.S. in Computer Science</p>
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
</div>
|
||||
|
||||
<!--Skills \ Languages-->
|
||||
<div class="col p-0 ">
|
||||
<div class="col-auto p-0 ">
|
||||
<div class="bg-white rounded p-2 border border-1 border-primary" >
|
||||
<div class="card-header">
|
||||
<label class="text-decoration-underline fw-semibold">Skills \ Languages</label>
|
||||
|
|
@ -98,7 +98,7 @@
|
|||
</div>
|
||||
|
||||
<!-- Tools -->
|
||||
<div class="col pe-0">
|
||||
<div class="col-auto pe-0">
|
||||
<div class="bg-white rounded p-2 border border-1 border-primary">
|
||||
<div class="card-header">
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +1,18 @@
|
|||
@page "/pokemonsleep/admincontrol"
|
||||
@page "/pokemon-sleep/admincontrol"
|
||||
|
||||
|
||||
|
||||
<div class="w-100">
|
||||
<!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
|
||||
|
||||
<PokemonHeader />
|
||||
<PokemonNavMenu />
|
||||
|
||||
|
||||
<hr class="mt-5" />
|
||||
|
||||
<!-- Add Pokemon (Wrap in Auth) -->
|
||||
<button class="btn btn-warning mx-1" style="border-radius: 50px 15px; max-width: 60px;">
|
||||
<NavLink href="/pokemonsleep/addmincontrol/add-new-pokemon">
|
||||
<NavLink href="/pokemon-sleep/addmincontrol/add-new-pokemon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#FFF" class="bi bi-plus-circle-fill mb-1" viewBox="0 0 16 16">
|
||||
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v3h-3a.5.5 0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3z" />
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@page "/pokemonsleep/add-new-pokemon"
|
||||
@page "/pokemon-sleep/add-new-pokemon"
|
||||
|
||||
@inject IPokemonService PokemonService
|
||||
@inject NavigationManager Navigation
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
|
||||
<PageTitle>Add New Pokémon</PageTitle>
|
||||
<PokemonHeader />
|
||||
<PokemonNavMenu />
|
||||
|
||||
|
||||
@if (isSubmitting)
|
||||
|
|
@ -19,9 +19,9 @@
|
|||
}
|
||||
else
|
||||
{
|
||||
<div class="container mx-0 px-0">
|
||||
<div class="row mt-5">
|
||||
<div class="d-flex justify-content-evenly h-100 p-0">
|
||||
<div class="container">
|
||||
<div class="row mt-3">
|
||||
<div class="d-flex justify-content-evenly p-0">
|
||||
|
||||
<div class="mx-1 align-content-center">
|
||||
<div class="addcard">
|
||||
|
|
@ -41,6 +41,7 @@ else
|
|||
</div>
|
||||
}
|
||||
|
||||
|
||||
else if (pokemon2FormView && !pokemon3FormView)
|
||||
{
|
||||
<div class="mx-1 align-content-center">
|
||||
|
|
@ -56,6 +57,7 @@ else
|
|||
</div>
|
||||
}
|
||||
|
||||
|
||||
else if (!pokemon2FormView && pokemon3FormView)
|
||||
{
|
||||
<div class="mx-1 align-content-center">
|
||||
|
|
@ -76,11 +78,12 @@ else
|
|||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="d-flex justify-content-center pt-3">
|
||||
|
||||
<div class="d-flex justify-content-center mt-5">
|
||||
<div class="btn-group">
|
||||
<button @onclick="@HandleAdd" class="btn btn-primary rounded">Add Pokemon</button>
|
||||
</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
|
||||
PokemonName = string.Empty, // Required fields cannot be null
|
||||
|
|
@ -34,6 +34,23 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
|
|||
Speciality = string.Empty,
|
||||
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 ToggleVariationName { get; set; }
|
||||
|
|
@ -42,68 +59,7 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
|
|||
{
|
||||
this.ToggleVariationName = true;
|
||||
}
|
||||
private bool IsComplete(Pokemon NewPokemon) =>
|
||||
NewPokemon.PokemonId > 0 &&
|
||||
!string.IsNullOrWhiteSpace(NewPokemon.PokemonName) &&
|
||||
!string.IsNullOrWhiteSpace(NewPokemon.PokemonType) &&
|
||||
!string.IsNullOrWhiteSpace(NewPokemon.SleepType) &&
|
||||
!string.IsNullOrWhiteSpace(NewPokemon.Speciality) &&
|
||||
(!NewPokemon.IsVariation || !string.IsNullOrWhiteSpace(NewPokemon.VariationName));
|
||||
|
||||
private async Task HandleAdd()
|
||||
{
|
||||
/*
|
||||
Okay there are three versions of submits which need to be checked
|
||||
1. Single submit, only one, if both pokemon#FormView is false
|
||||
2. 2 Submit, if pokemon2FormView is true
|
||||
3. 3 Submit, if pokemon3FormView is true
|
||||
*/
|
||||
if (!pokemon2FormView && !pokemon3FormView)
|
||||
{
|
||||
//if(IsComplete(pokemon1))
|
||||
//{
|
||||
await HandleSubmit(pokemon1);
|
||||
Navigation.NavigateTo("/pokemon");
|
||||
//}
|
||||
}
|
||||
else if (pokemon2FormView)
|
||||
{
|
||||
//if (IsComplete(pokemon1) && IsComplete(pokemon2))
|
||||
//{
|
||||
await HandleSubmit(pokemon1);
|
||||
await HandleSubmit(pokemon2);
|
||||
Navigation.NavigateTo("/pokemon");
|
||||
|
||||
// }
|
||||
}
|
||||
else if (pokemon3FormView)
|
||||
{
|
||||
//if (IsComplete(pokemon1) && IsComplete(pokemon2) && IsComplete(pokemon3))
|
||||
//{
|
||||
await HandleSubmit(pokemon1);
|
||||
await HandleSubmit(pokemon2);
|
||||
await HandleSubmit(pokemon3);
|
||||
Navigation.NavigateTo("/pokemon");
|
||||
|
||||
//}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
private async Task HandleSubmit(Pokemon NewPokemon)
|
||||
{
|
||||
isSubmitting = true;
|
||||
|
||||
await PokemonService.AddPokemonAsync(NewPokemon);
|
||||
isSubmitting = false;
|
||||
|
||||
}
|
||||
|
||||
protected void Cancel(MouseEventArgs e)
|
||||
{
|
||||
Console.WriteLine("Testing in Cancel");
|
||||
Navigation.NavigateTo("/pokemon");
|
||||
}
|
||||
|
||||
private async Task ReceivePokemon1(Pokemon p)
|
||||
{
|
||||
|
|
@ -140,6 +96,67 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
|
|||
// Browser console
|
||||
await JS.InvokeVoidAsync("console.log", "Pokemon 3:", pokemon3);
|
||||
}
|
||||
private bool IsComplete(Pokemon NewPokemon) =>
|
||||
NewPokemon.PokemonId > 0 &&
|
||||
!string.IsNullOrWhiteSpace(NewPokemon.PokemonName) &&
|
||||
!string.IsNullOrWhiteSpace(NewPokemon.PokemonType) &&
|
||||
!string.IsNullOrWhiteSpace(NewPokemon.SleepType) &&
|
||||
!string.IsNullOrWhiteSpace(NewPokemon.Speciality) &&
|
||||
(!NewPokemon.IsVariation || !string.IsNullOrWhiteSpace(NewPokemon.VariationName));
|
||||
|
||||
private async Task HandleAdd()
|
||||
{
|
||||
/*
|
||||
Okay there are three versions of submits which need to be checked
|
||||
1. Single submit, only one, if both pokemon#FormView is false
|
||||
2. 2 Submit, if pokemon2FormView is true
|
||||
3. 3 Submit, if pokemon3FormView is true
|
||||
*/
|
||||
if (!pokemon2FormView && !pokemon3FormView)
|
||||
{
|
||||
//if(IsComplete(pokemon1))
|
||||
//{
|
||||
await HandleSubmit(pokemon1);
|
||||
Navigation.NavigateTo("/pokemon-sleep/pokemon");
|
||||
//}
|
||||
}
|
||||
else if (pokemon2FormView)
|
||||
{
|
||||
//if (IsComplete(pokemon1) && IsComplete(pokemon2))
|
||||
//{
|
||||
await HandleSubmit(pokemon1);
|
||||
await HandleSubmit(pokemon2);
|
||||
Navigation.NavigateTo("/pokemon-sleep/pokemon");
|
||||
|
||||
// }
|
||||
}
|
||||
else if (pokemon3FormView)
|
||||
{
|
||||
//if (IsComplete(pokemon1) && IsComplete(pokemon2) && IsComplete(pokemon3))
|
||||
//{
|
||||
await HandleSubmit(pokemon1);
|
||||
await HandleSubmit(pokemon2);
|
||||
await HandleSubmit(pokemon3);
|
||||
Navigation.NavigateTo("/pokemon-sleep/pokemon");
|
||||
|
||||
//}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
private async Task HandleSubmit(Pokemon NewPokemon)
|
||||
{
|
||||
isSubmitting = true;
|
||||
|
||||
await PokemonService.AddPokemonAsync(NewPokemon);
|
||||
isSubmitting = false;
|
||||
|
||||
}
|
||||
|
||||
protected void Cancel(MouseEventArgs e)
|
||||
{
|
||||
Console.WriteLine("Testing in Cancel");
|
||||
Navigation.NavigateTo("/pokemon-sleep/pokemon");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@page "/pokemonsleep/edit/{id:int}"
|
||||
@page "/pokemon-sleep/edit-pokemon/{id:int}"
|
||||
@inject IPokemonService PokemonService
|
||||
@inject NavigationManager Navigation
|
||||
@inject IJSRuntime JS
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
@rendermode InteractiveServer
|
||||
|
||||
<PageTitle>Edit Pokémon</PageTitle>
|
||||
<PokemonHeader />
|
||||
<PokemonNavMenu />
|
||||
|
||||
|
||||
@if (pokemon == null)
|
||||
|
|
@ -17,12 +17,10 @@
|
|||
else
|
||||
{
|
||||
|
||||
<div class="container mx-0 px-0">
|
||||
<div class="row mt-5">
|
||||
<div class="d-flex justify-content-evenly h-100 p-0">
|
||||
|
||||
<div class="mx-1 align-content-center">
|
||||
<div class="addcard">
|
||||
<div class="container mt-5 w-50 mb-5">
|
||||
<div class="row d-flex flex-row mb-0 justify-content-center">
|
||||
<div class="w-50">
|
||||
<div class="editcard">
|
||||
<PokemonForm
|
||||
formUse="EDIT"
|
||||
OnPokemonReady="ReceivePokemon"
|
||||
|
|
@ -30,7 +28,6 @@ else
|
|||
mostRecentForm=true
|
||||
PokemonToEdit="pokemon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,7 @@
|
|||
border-radius: 15px;
|
||||
}
|
||||
|
||||
.addcard {
|
||||
.editcard {
|
||||
width: 100%;
|
||||
max-width: 30rem;
|
||||
flex: 0 0 auto; /* prevent flex shrink/grow */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
@page "/pokemon/{id:int}"
|
||||
@page "/pokemon-sleep/pokemon/{id:int}"
|
||||
@inject IPokemonService PokemonService
|
||||
@inject NavigationManager Navigation
|
||||
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
@rendermode InteractiveServer
|
||||
|
||||
|
||||
<PokemonHeader />
|
||||
<PokemonNavMenu />
|
||||
|
||||
|
||||
|
||||
|
|
@ -20,7 +20,7 @@ else
|
|||
<!-- Total Componenet-->
|
||||
|
||||
<div class="container">
|
||||
<div class="w-75 row mt-4 m-auto">
|
||||
<div class="w-75 lg row mt-5 m-auto">
|
||||
|
||||
<!-- Previous Pokemon Button -->
|
||||
<div class="col-auto">
|
||||
|
|
|
|||
|
|
@ -39,13 +39,13 @@ namespace Portfolio.WebUI.Server.Components.Pages.Pokemon_Pages
|
|||
private void NavigateToNext()
|
||||
{
|
||||
if (_nextPokemonId.HasValue)
|
||||
Navigation.NavigateTo($"/pokemon/{_nextPokemonId.Value}");
|
||||
Navigation.NavigateTo($"/pokemon-sleep/pokemon/{_nextPokemonId.Value}");
|
||||
}
|
||||
|
||||
private void NavigateToPrevious()
|
||||
{
|
||||
if (_previousPokemonId.HasValue)
|
||||
Navigation.NavigateTo($"/pokemon/{_previousPokemonId.Value}");
|
||||
Navigation.NavigateTo($"/pokemon-sleep/pokemon/{_previousPokemonId.Value}");
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@page "/rate-pokemon"
|
||||
@page "/pokemon-sleep/rate-pokemon"
|
||||
|
||||
@inject IPokemonService PokemonService
|
||||
@inject IPokemonNatureService PokemonNatureService
|
||||
|
|
@ -12,9 +12,9 @@
|
|||
|
||||
<PageTitle>Rate Pokémon</PageTitle>
|
||||
|
||||
<PokemonHeader />
|
||||
<PokemonNavMenu />
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="container mt-4">
|
||||
<div class="row">
|
||||
@if (PokemonList == null || NatureList == null || SubskillList == null)
|
||||
{
|
||||
|
|
@ -60,5 +60,4 @@
|
|||
|
||||
}
|
||||
</div>
|
||||
<hr class="mt-5"/>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@page "/pokemonsleep"
|
||||
@page "/pokemon-sleep"
|
||||
|
||||
|
||||
@attribute [StreamRendering]
|
||||
|
|
@ -8,43 +8,48 @@
|
|||
<PageTitle>Pokémon Sleep</PageTitle>
|
||||
|
||||
<!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
|
||||
<PokemonHeader />
|
||||
<PokemonNavMenu />
|
||||
|
||||
<!-- Card -->
|
||||
<div class="container card shadow-sm border-0 p-3 pb-4 mt-4 m-auto w-75 mb-5 bg-white">
|
||||
<!-- Large -->
|
||||
<div class="container d-none d-lg-block d-md-none card shadow-sm border-0 p-3 pb-4 mt-5 w-50 mb-5 bg-white rounded ">
|
||||
|
||||
<!-- Top Row-->
|
||||
<div class="row d-flex flex-row">
|
||||
<div class="row d-flex flex-row px-3 mb-0 pb-0">
|
||||
<!-- Image side -->
|
||||
<div class="col-5 border-0 ">
|
||||
<img class="shadow-sm w-100 m-auto img-fluid" src="images/Pokemon_Sleep_ID.jpg" />
|
||||
<div class="col-4 p-0">
|
||||
<img class="shadow-sm m-auto img-fluid rounded" src="images/Pokemon_Sleep_ID.jpg" />
|
||||
</div>
|
||||
<!-- Text side -->
|
||||
<div class="col w-50 p-3">
|
||||
<p class="fw-bold fst-italic fs-3">Pokémon Sleep? Really?</p>
|
||||
<p class="fw-normal fs-6 text-start">
|
||||
Yes, really! Pokémon Sleep has become a fun addition to my day since it's release.
|
||||
</p>
|
||||
<p class="fw-bold fst-italic fs-3">But what do you even do?</p>
|
||||
<p class="fw-normal fs-6 text-start">
|
||||
That's harder to explain. See, it isn't as much a game, as it is a gamified sleep tracker. But it's fun to collect the Pokémon and gather their berries and ingredients and create silly little Pokémon-themed foods. Plus, it encourages me to try to get to bed in a timely manner; though, if I'm honest, I definitely put my Pokémon to bed ahead of when I do.
|
||||
</p>
|
||||
<div class="col w-50 p-3 ps-4 pb-0">
|
||||
<div class="row">
|
||||
<p class="fw-bold fst-italic fs-3 mb-0">Pokémon Sleep? Really?</p>
|
||||
<p class="fw-normal fs-6 font-monospace">
|
||||
Yes, really! Pokémon Sleep has become a fun addition to my day since it's release. Scan the QR code in the Pokémon Sleep app to send me a friend request!
|
||||
</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<p class="fw-bold fst-italic fs-3 mb-0">But what do you even do?</p>
|
||||
<p class="fw-normal fs-6 font-monospace">
|
||||
That's harder to explain. See, it isn't as much a game, as it is a gamified sleep tracker. But it's fun to collect the Pokémon and gather their berries and ingredients and create silly little Pokémon-themed foods. Plus, it encourages me to try to get to bed in a timely manner; though, if I'm honest, I definitely put my Pokémon to bed ahead of when I do.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Second Row -->
|
||||
<div class="row mt-3">
|
||||
<p class="fw-bold fst-italic fs-3">Okay, but why a whole section dedicated to Pokémon Sleep?</p>
|
||||
<p class="fw-normal fs-6 text-start">
|
||||
<div class="row mt-0 pt-0">
|
||||
<p class="fw-bold fst-italic fs-3 mb-0">Okay, but why a whole section dedicated to Pokémon Sleep?</p>
|
||||
<p class="fw-normal fs-6 font-monospace">
|
||||
Well, as it is in any Pokémon game, Natures (and in this case Subskills) matter, amongst other things. This was designed as a helpful tool in assessing new Pokémon acquired from Sleep Research.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Button Row-->
|
||||
<div class="d-flex justify-content-evenly mt-4 ">
|
||||
<div class="row d-flex justify-content-evenly mt-3 ">
|
||||
<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="/pokemon-sleep/pokemon">
|
||||
<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" />
|
||||
</svg>
|
||||
|
|
@ -53,7 +58,7 @@
|
|||
</button>
|
||||
|
||||
<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="/pokemon-sleep/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">
|
||||
<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" />
|
||||
|
|
@ -65,3 +70,116 @@
|
|||
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Medium -->
|
||||
<div class="container d-none d-lg-none d-md-block mt-3">
|
||||
<!-- Top Row-->
|
||||
<div class="row d-flex flex-row justify-content-center">
|
||||
<!-- Top side -->
|
||||
<div class="col p-0" >
|
||||
<img class="shadow-sm m-auto img-fluid rounded" src="images/Pokemon_Sleep_ID.jpg" />
|
||||
</div>
|
||||
<div class="col text-wrap p-1 ps-3" >
|
||||
<div class="row d-flex flex-row justify-content-center">
|
||||
<!-- Bottom side -->
|
||||
<p class="fw-bold fst-italic fs-3 mb-1">Pokémon Sleep? Really?</p>
|
||||
<p class="fw-normal fs-6 text-start">
|
||||
Yes, really! Pokémon Sleep has become a fun addition to my day since it's release. Scan the QR code in the Pokémon Sleep app to send me a friend request!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p class="fw-bold fst-italic fs-3 mb-0">But what do you even do?</p>
|
||||
<div class="row d-flex flex-row justify-content-center">
|
||||
<!-- Bottom side -->
|
||||
<p class="fw-normal fs-6 text-start">
|
||||
That's harder to explain. See, it isn't as much a game, as it is a gamified sleep tracker. But it's fun to collect the Pokémon and gather their berries and ingredients and create silly little Pokémon-themed foods. Plus, it encourages me to try to get to bed in a timely manner; though, if I'm honest, I definitely put my Pokémon to bed ahead of when I do.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Second Row -->
|
||||
<div class="row d-flex flex-row justify-content-center p-1">
|
||||
<p class="fw-bold fst-italic fs-3 mb-0">Okay, but why a whole section dedicated to Pokémon Sleep?</p>
|
||||
<p class="fw-normal fs-6 text-start">
|
||||
Well, as it is in any Pokémon game, Natures (and in this case Subskills) matter, amongst other things. This was designed as a helpful tool in assessing new Pokémon acquired from Sleep Research.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Button Row-->
|
||||
<div class="row d-flex justify-content-evenly mt-3 ">
|
||||
<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-sleep/pokemon">
|
||||
<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" />
|
||||
</svg>
|
||||
<span class="ps-1 text-white">Available Pokémon</span>
|
||||
</NavLink>
|
||||
</button>
|
||||
|
||||
<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="/pokemon-sleep/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">
|
||||
<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" />
|
||||
</svg>
|
||||
<span class="ps-1 text-white">Rate Pokémon</span>
|
||||
</NavLink>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Small -->
|
||||
<div class="container d-inline d-lg-none d-md-none mt-3 mx-auto">
|
||||
<!-- Image-->
|
||||
<div class="row d-flex flex-row justify-content-center">
|
||||
<!-- Top side -->
|
||||
<div class="col-6">
|
||||
<img class="img-fluid rounded p-0" src="images/Pokemon_Sleep_ID.jpg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row mt-2 w-75 mx-auto p-1 ps-3">
|
||||
|
||||
<p class="fw-bold fst-italic fs-4 mb-1">Pokémon Sleep? Really?</p>
|
||||
<p class="fw-normal fs-6 font-monospace">
|
||||
Yes, really! Pokémon Sleep has become a fun addition to my day since it's release. Scan the QR code in the Pokémon Sleep app to send me a friend request!
|
||||
</p>
|
||||
<p class="fw-bold fst-italic fs-4 mb-0">But what do you even do?</p>
|
||||
<p class="fw-normal fs-6 font-monospace">
|
||||
That's harder to explain. See, it isn't as much a game, as it is a gamified sleep tracker. But it's fun to collect the Pokémon and gather their berries and ingredients and create silly little Pokémon-themed foods. Plus, it encourages me to try to get to bed in a timely manner; though, if I'm honest, I definitely put my Pokémon to bed ahead of when I do.
|
||||
</p>
|
||||
<p class="fw-bold fst-italic fs-4 mb-0">Okay, but why a whole section dedicated to Pokémon Sleep?</p>
|
||||
<p class="fw-normal fs-6 font-monospace">
|
||||
Well, as it is in any Pokémon game, Natures (and in this case Subskills) matter, amongst other things. This was designed as a helpful tool in assessing new Pokémon acquired from Sleep Research.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Button Row-->
|
||||
<div class="row d-flex justify-content-evenly mt-2">
|
||||
<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-sleep/pokemon">
|
||||
<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" />
|
||||
</svg>
|
||||
<span class="ps-1 text-white">Available Pokémon</span>
|
||||
</NavLink>
|
||||
</button>
|
||||
|
||||
<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="/pokemon-sleep/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">
|
||||
<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" />
|
||||
</svg>
|
||||
<span class="ps-1 text-white">Rate Pokémon</span>
|
||||
</NavLink>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@page "/pokemon"
|
||||
@page "/pokemon-sleep/pokemon"
|
||||
|
||||
|
||||
@inject IPokemonService PokemonService
|
||||
|
|
@ -10,14 +10,13 @@
|
|||
<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>
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
"links": [
|
||||
{
|
||||
"type": "internal",
|
||||
"url": "/pokemonsleep",
|
||||
"url": "/temperature-blanket",
|
||||
"icon": "code"
|
||||
}
|
||||
]
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
"links": [
|
||||
{
|
||||
"type": "internal",
|
||||
"url": "/pokemonsleep",
|
||||
"url": "/pokemon-sleep",
|
||||
"icon": "code"
|
||||
}
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue