Some responsive-ness is happenin.
This commit is contained in:
Kira Jiroux
parent
d04f9b260b
commit
aea7c06819
|
|
@ -13,7 +13,7 @@
|
|||
<!-- Home -->
|
||||
<button class="btn btn-primary mx-1 align-content-center" style="border-radius: 50px 15px; max-width: 60px;">
|
||||
<NavLink href="/pokemonsleep">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill" viewBox="0 0 16 16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house-fill mb-1" 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" />
|
||||
</svg>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
<!-- Pokemon Table-->
|
||||
<button class="btn btn-info mx-1" style="border-radius: 50px 15px; max-width: 60px;">
|
||||
<NavLink href="/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 mb-1" 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>
|
||||
</NavLink>
|
||||
|
|
@ -31,8 +31,8 @@
|
|||
|
||||
<!-- Rate Pokemon -->
|
||||
<button class="btn btn-success mx-1" style="border-radius: 50px 15px; max-width: 60px;">
|
||||
<NavLink href="/pokemonsleep/rate-pokemon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award-fill" viewBox="0 0 16 16">
|
||||
<NavLink href="/rate-pokemon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award-fill mb-1" 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>
|
||||
|
|
@ -42,7 +42,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">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" 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>
|
||||
</NavLink>
|
||||
|
|
|
|||
|
|
@ -5,141 +5,190 @@
|
|||
@attribute [StreamRendering]
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<!-- Table A: Desktop View-->
|
||||
<div class="container d-none d-md-block">
|
||||
<!-- Main UI -->
|
||||
<div class="card shadow-sm border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8">
|
||||
<!-- Table Header -->
|
||||
<div class="row card-header bg-secondary bg-gradient ml-0 py-3 border-0">
|
||||
<div class="flex-row justify-content-between">
|
||||
<div class="text-center position-relative">
|
||||
<h2 class="text-info text-decoration-underline">Available Pokémon</h2>
|
||||
<div class="m-1 badge bg-info position-absolute top-0 end-0 border-0"><p class="statText">@(pokemons.Count()) Pokemon</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main UI -->
|
||||
<div class="card shadow border-0 mt-4 m-auto w-50">
|
||||
|
||||
<div class="tableFixHead table-responsive row">
|
||||
<table class="table col table-borderless border-0 table-secondary table-striped align-middle">
|
||||
<!-- Table Head -->
|
||||
<thead class="">
|
||||
<tr class="">
|
||||
<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-1" scope="col">#</th>
|
||||
<th class="text-white text-bg-info col-2" scope="col">Pokemon</th>
|
||||
<th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
|
||||
<th class="text-white text-bg-info col-2 text-center" scope="col">Sleep Type</th>
|
||||
<th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- If/Else Pokemon Loaded-->
|
||||
@if(pokemons == null)
|
||||
{
|
||||
<tbody>
|
||||
<Loading />
|
||||
</tbody>
|
||||
}
|
||||
else
|
||||
{
|
||||
<!-- Table Body -->
|
||||
<tbody>
|
||||
@foreach (var pokemon in pokemons)
|
||||
{
|
||||
<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>
|
||||
|
||||
}
|
||||
</td>
|
||||
|
||||
<!-- Section 2: Pokemon # -->
|
||||
<th class="" scope="row" style="cursor: default;">@pokemon.PokemonId</th>
|
||||
|
||||
|
||||
<!-- Section 3: Pokemon Name -->
|
||||
@if (pokemon.IsVariation) // If a Variant
|
||||
{
|
||||
@if (pokemon.VariationName == "Alolan")
|
||||
{
|
||||
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style col-2"> Alolan @pokemon.PokemonName</td>
|
||||
}
|
||||
@if (pokemon.VariationName == "Paldean")
|
||||
{
|
||||
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style col-2"> Paldean @pokemon.PokemonName</td>
|
||||
}
|
||||
}
|
||||
else // Otherwise, Base Case
|
||||
{
|
||||
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style col-2"> @pokemon.PokemonName</td>
|
||||
}
|
||||
|
||||
|
||||
<!-- Section 4: Pokemon Type -->
|
||||
<td class="">
|
||||
<div class="d-flex justify-content-center">
|
||||
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:36px; height:36px;" />
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Section 5: Sleep Type -->
|
||||
<td class="" style="">
|
||||
<div class="d-flex justify-content-center ">
|
||||
<div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Section 6: Speciality -->
|
||||
<td class="" style="">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
</tr>
|
||||
}
|
||||
</tbody>
|
||||
}
|
||||
|
||||
|
||||
</table>
|
||||
</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="card-header bg-secondary bg-gradient ml-0 py-3 border-0">
|
||||
<div class="row">
|
||||
<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-info text-decoration-underline">Available Pokémon</h2>
|
||||
<div class="m-1 badge bg-info position-absolute top-0 end-0 border-0"><p class="statText">@(pokemons.Count()) Pokemon</p></div>
|
||||
<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())</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Table Body -->
|
||||
<div class="tableFixHead table-responsive row">
|
||||
<table class="table table-striped border-0">
|
||||
|
||||
<!-- Table -->
|
||||
<div class="tableFixHead">
|
||||
<table class="table table-borderless border-0 table-secondary table-striped align-middle">
|
||||
|
||||
<!-- Table Head -->
|
||||
<thead class="">
|
||||
<tr class="">
|
||||
<th class="text-white text-bg-info col-2" scope="col"></th>
|
||||
<th class="text-white text-bg-info col-1" scope="col">#</th>
|
||||
<th class="text-white text-bg-info col-2" scope="col">Pokemon</th>
|
||||
<th class="text-white text-bg-info col-1 text-center" scope="col">Type</th>
|
||||
<th class="text-white text-bg-info col-2 text-center" scope="col">Sleep Type</th>
|
||||
<th class="text-white text-bg-info col-2 text-center" scope="col">Speciality</th>
|
||||
<!-- <th class="text-bg-info text-end" scope="col">Control Buttons</th> -->
|
||||
</tr>
|
||||
</thead>
|
||||
@if(pokemons == null)
|
||||
<tbody>
|
||||
@if (pokemons == null)
|
||||
{
|
||||
<tbody>
|
||||
<Loading />
|
||||
</tbody>
|
||||
<Loading />
|
||||
}
|
||||
else
|
||||
{
|
||||
<!-- Table Body -->
|
||||
<tbody >
|
||||
@foreach (var pokemon in pokemons)
|
||||
{
|
||||
<tr class="">
|
||||
|
||||
<!-- Section: Pokemon Image -->
|
||||
@{
|
||||
string baseUrl = pokemon.PokemonImageUrl;
|
||||
string shinyUrl = pokemon.PokemonShinyImageUrl;
|
||||
}
|
||||
<td style="text-align: center;">
|
||||
@if (shinyUrl == null)
|
||||
{
|
||||
<div class="flip-container">
|
||||
<div class="flipper">
|
||||
<img class="front" src="@baseUrl" />
|
||||
</div>
|
||||
@foreach (var pokemon in pokemons)
|
||||
{
|
||||
<tr class=" mb-3 border-0">
|
||||
<div class=" d-flex align-items-center">
|
||||
<div class="me-3">
|
||||
<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>
|
||||
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="flip-container" @onclick="() => ToggleImage(pokemon.Id)">
|
||||
<div class="flipper @(isShiny[pokemon.Id] ? "flipped" : "")">
|
||||
<img class="front" src="@baseUrl" />
|
||||
<img class="back" src="@shinyUrl" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
}
|
||||
</td>
|
||||
|
||||
<!-- Section 2: Pokemon # -->
|
||||
<th scope="row" style="cursor: default;">@pokemon.PokemonId</th>
|
||||
|
||||
|
||||
<!-- Section 3: Pokemon Name -->
|
||||
@if (pokemon.IsVariation) // If a Variant
|
||||
{
|
||||
@if (pokemon.VariationName == "Alolan")
|
||||
{
|
||||
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> Alolan @pokemon.PokemonName</td>
|
||||
}
|
||||
@if (pokemon.VariationName == "Paldean")
|
||||
{
|
||||
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> Paldean @pokemon.PokemonName</td>
|
||||
}
|
||||
}
|
||||
else // Otherwise, Base Case
|
||||
{
|
||||
<td @onclick="() => ViewPokemon(pokemon.PokemonId)" class="pokemon-name-style"> @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 style="">
|
||||
<div class="d-flex justify-content-center ">
|
||||
</div>
|
||||
<div>
|
||||
<h5 class="mb-1">
|
||||
@pokemon.PokemonId -
|
||||
<span class="pokemon-name-style" @onclick="() => ViewPokemon(pokemon.PokemonId)">
|
||||
@(pokemon.IsVariation ? $"{pokemon.VariationName} {pokemon.PokemonName}" : pokemon.PokemonName)
|
||||
</span>
|
||||
</h5>
|
||||
<div class="d-flex flex-wrap align-items-center gap-2">
|
||||
<img src="@GetTypeImageUrl(pokemon.PokemonType)" style="width:28px;" />
|
||||
<div class=" badge @pokemon.SleepType.ToLower() border-0"><p class="statText">@pokemon.SleepType</p></div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Section 6: Speciality -->
|
||||
<td style="">
|
||||
<div class="d-flex justify-content-center">
|
||||
<div class=" badge @pokemon.Speciality.ToLower() border-0"><p class="statText">@pokemon.Speciality</p></div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
<!-- Section 7: Functional Buttons -->
|
||||
<!--
|
||||
<td>
|
||||
<div class="d-flex justify-content-end">
|
||||
<PokemonEditButton PokemonId="pokemon.Id" />
|
||||
<button class="btn btn-danger rounded rounded-5 mx-1" @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>
|
||||
}
|
||||
</tbody>
|
||||
</div>
|
||||
</div>
|
||||
</tr>
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -41,6 +41,41 @@
|
|||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
|
||||
.flip-container-sm {
|
||||
perspective: 1000px;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.flipper-sm {
|
||||
transition: 0.6s;
|
||||
transform-style: preserve-3d;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.flipper-sm img {
|
||||
backface-visibility: hidden;
|
||||
position: absolute;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
|
||||
.flipper-sm .front {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.flipper-sm .back {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.flipper-sm.flipped {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.pokeimage {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@page "/pokemonsleep/rate-pokemon"
|
||||
@page "/rate-pokemon"
|
||||
|
||||
@inject IPokemonService PokemonService
|
||||
@inject IPokemonNatureService PokemonNatureService
|
||||
|
|
|
|||
|
|
@ -7,32 +7,67 @@
|
|||
|
||||
<PageTitle>Pokémon Sleep</PageTitle>
|
||||
|
||||
<div class="w-100">
|
||||
<!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
|
||||
<PokemonHeader />
|
||||
<div class="card shadow border-0 p-3 mt-4 m-auto w-75">
|
||||
<div class="d-flex flex-row justify-content-around">
|
||||
<div class="card border-0 shadow-sm"><img class="card-img shadow-sm w-auto" style="width: 540px; height: 540px;" src="images/Pokemon_Sleep_ID.jpg" /></div>
|
||||
<div class="border border-warning 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="container">
|
||||
<div class="row w-100">
|
||||
<!-- <PokemonBackground PokemonImages="pokemonImageUrls" ShinyPokemonImages="pokemonShinyImageUrls" /> -->
|
||||
<div class="row"><PokemonHeader /></div>
|
||||
|
||||
<!-- Card -->
|
||||
<div class="row card shadow-sm border-0 p-3 pb-4 mt-4 m-auto w-75">
|
||||
<!-- Top Row-->
|
||||
<div class="row d-flex flex-row">
|
||||
<!-- Image side -->
|
||||
<div class="col w-50 border-0 ">
|
||||
<div>
|
||||
|
||||
</div>
|
||||
<img class="shadow-sm w-100 m-auto img-fluid" 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>
|
||||
</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">
|
||||
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>
|
||||
</div>
|
||||
<div class="btn-group d-flex flex-row justify-content-around mt-4">
|
||||
<button class="btn btn-info">Available Pokémon</button>
|
||||
<button class="btn btn-success">Rate Pokémon</button>
|
||||
<!-- Button Row-->
|
||||
<div class="row btn-group d-flex flex-row justify-content-around mt-4">
|
||||
<div class="w-auto">
|
||||
<button class="btn btn-info">
|
||||
<NavLink href="/pokemon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-table mb-1" 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">Available Pokémon</span>
|
||||
</NavLink>
|
||||
</button>
|
||||
</div>
|
||||
<div class="w-auto">
|
||||
<button class="btn btn-success link">
|
||||
<NavLink href="/rate-pokemon">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-award-fill mb-1" 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">Rate Pokémon</span>
|
||||
</NavLink>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
Loading…
Reference in New Issue