kira
/
exciting-aftermath
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Pokemon Download button fits better.

This commit is contained in:
Kira Jiroux 2025-09-04 13:27:28 -04:00
parent 2bf560f6f0
commit bc07f56c97
2 changed files with 23 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonDownload.razor
View File

@ -1,8 +1,8 @@
@inject IJSRuntime JS @inject IJSRuntime JS
<div class=""> <div class="">
<button class="btn btn-primary mt-1 p-2 rounded rounded-5 align-self-start text-white " @onclick="DownloadPokemonJson"> <button class="btn btn-sm btn-primary p-1 rounded rounded-5 align-self-start text-white " @onclick="DownloadPokemonJson">
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-down-circle" viewBox="0 0 16 16"> <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-arrow-down-circle" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293z" /> <path fill-rule="evenodd" d="M1 8a7 7 0 1 0 14 0A7 7 0 0 0 1 8m15 0A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8.5 4.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293z" />
</svg> </svg>
</button> </button>

28
Portfolio.WebUI.Server/Components/Component/Pokemon Components/PokemonTable.razor
View File

@ -5,9 +5,9 @@
@attribute [StreamRendering] @attribute [StreamRendering]
@rendermode InteractiveServer @rendermode InteractiveServer
<div class="d-flex justify-content-end mb-2"> <div class="d-flex justify-content-end">
<PokemonDownload _Pokemon="pokemons" />
</div> </div>
<!-- Table A: Desktop View--> <!-- Table A: Desktop View-->
<div class="container d-none d-md-block " style="height: 70vh;"> <div class="container d-none d-md-block " style="height: 70vh;">
@ -15,14 +15,27 @@
<div class="border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable "> <div class="border-0 mt-4 mx-auto col-12 col-md-10 col-lg-8 pokemontable ">
<!-- Table Header --> <!-- Table Header -->
<div class="row bg-secondary bg-gradient py-3 border-0"> <div class="row bg-secondary bg-gradient py-3 border-0">
<div class="flex-row justify-content-between"> <div class="d-flex align-items-center justify-content-between w-100 position-relative px-3">
<div class="text-center position-relative">
<input class="form-control position-absolute top-0 start-0 border-0 w-25" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" />
<h2 class="text-white text-decoration-underline">Available Pokémon</h2> <!-- Left: Search -->
<div class="m-1 badge bg-info position-absolute top-0 end-0 border-0"><p class="statText">@(pokemons.Count()) Pokémon</p></div> <input class="form-control w-25 me-3"
placeholder="Search Pokémon..."
@bind="SearchTerm"
@oninput="HandleSearch" />
<!-- Center: Title -->
<h2 class="text-white text-decoration-underline 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> </div>
<PokemonDownload _Pokemon="pokemons" />
</div>
</div> </div>
</div> </div>
@ -151,6 +164,7 @@
</table> </table>
</div> </div>
<!-- Wrap in Auth --> <!-- Wrap in Auth -->
<div class="d-flex justify-content-end mt-1"> <div class="d-flex justify-content-end mt-1">