Okay made some serious headway, and now the rater is pretty much perfected. Really need to look into responsive styling if I want it to be mobile efficient though.
This commit is contained in:
Kira Jiroux
parent
9e765c776d
commit
17607b663b
|
|
@ -18,6 +18,7 @@ namespace Portfolio.Application.Services.PokemonSubskillService
|
|||
}
|
||||
public async Task<List<PokemonSubskill>> GetAllPokemonSubskillsAsync()
|
||||
{
|
||||
Console.WriteLine("Does this fire every time");
|
||||
return await _pokemonSubskillRepository.GetAllPokemonSubskillsAsync();
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,9 +13,10 @@
|
|||
<HeadOutlet />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<body class="">
|
||||
<Routes />
|
||||
<script src="_framework/blazor.web.js"></script>
|
||||
<script src="js/site.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@attribute [StreamRendering]
|
||||
@rendermode InteractiveServer
|
||||
|
||||
<div class="mx-2 pokemon-card card-holo animated @GetTypeCssClass(_pokemon.PokemonType)">
|
||||
<div class="pokemon-card card-holo animated @GetTypeCssClass(_pokemon.PokemonType)">
|
||||
<!-- Pokemon Name, Number, and Type -->
|
||||
<div class="z-3">
|
||||
@if (_pokemon.IsVariation)
|
||||
|
|
|
|||
|
|
@ -42,5 +42,6 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
|||
return "pokemon-type-" + type.ToLower();
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
.pokemon-card {
|
||||
position: relative;
|
||||
width: 24rem;
|
||||
height: 32rem;
|
||||
max-width: 24rem;
|
||||
max-height: 32rem;
|
||||
width: 100%;
|
||||
max-width: 350px; /* Prevent it from getting too huge */
|
||||
aspect-ratio: 3 / 4; /* Maintains card shape dynamically */
|
||||
overflow: hidden;
|
||||
background-color: var(--bg-color);
|
||||
border-width: .5rem;
|
||||
border-style: solid;
|
||||
|
|
@ -24,32 +24,27 @@
|
|||
|
||||
.pokemon-name {
|
||||
position: absolute;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
margin-top: 1.5rem !important;
|
||||
margin-left: 0.5rem !important;
|
||||
top: 5%;
|
||||
left: 3%;
|
||||
transform: translateY(-50%) !important;
|
||||
font-size: 2.5rem;
|
||||
font-size: clamp(1.2rem, 2vw, 2rem);
|
||||
}
|
||||
|
||||
.pokemon-number {
|
||||
position: absolute;
|
||||
top: 0 !important;
|
||||
left: 0 !important;
|
||||
margin-top: 3.3rem !important;
|
||||
margin-left: 1.5rem !important;
|
||||
top: 10%;
|
||||
left: 6%;
|
||||
|
||||
transform: translateY(-50%) !important;
|
||||
font-size: .75rem;
|
||||
font-size: clamp(0.7rem, 1.2vw, 0.75rem);
|
||||
}
|
||||
|
||||
.pokemon-type {
|
||||
position: absolute;
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
margin-top: .5rem !important;
|
||||
margin-right: .5rem !important;
|
||||
top: 2%;
|
||||
right: 2%;
|
||||
width: clamp(1.5rem, 2.5vw, 2.5rem);
|
||||
height: clamp(1.5rem, 2.5vw, 2.5rem);
|
||||
}
|
||||
|
||||
.pokemon-image {
|
||||
|
|
@ -102,8 +97,10 @@
|
|||
transform: translate(-50%, -50%) !important;
|
||||
perspective: 1000px;
|
||||
display: inline-block;
|
||||
width: 20rem;
|
||||
height: 20rem;
|
||||
width: 80%;
|
||||
aspect-ratio: 1 / 1;
|
||||
max-width: 280px;
|
||||
margin: 0 auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<div class="pokemon-rating-panel">
|
||||
<div class="pokemon-rating-panel container">
|
||||
|
||||
<!-- Dropdown Selects -->
|
||||
<div class="ratings bg-light-subtle">
|
||||
<h3 class="mb-3">Select Nature & Subskills</h3>
|
||||
<div class="ratings bg-light-subtle col">
|
||||
<h3 class="mb-3 row">Select Nature & Subskills</h3>
|
||||
|
||||
<!-- Nature -->
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center row">
|
||||
<div class="col">
|
||||
<label>Select Nature</label>
|
||||
<select class="form-control form-control select-width" @bind="SelectedNatureId">
|
||||
<select class="form-control" @bind="SelectedNatureId">
|
||||
<option value="" disabled selected >Choose Nature...</option>
|
||||
@foreach (var nature in NatureList)
|
||||
{
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
}
|
||||
</select>
|
||||
</div>
|
||||
<div class="text-center score-width">
|
||||
<div class="text-center col">
|
||||
<h4 class="mt-4">
|
||||
<span class="text-muted">@lastnaturescore</span>
|
||||
</h4>
|
||||
|
|
@ -24,10 +24,10 @@
|
|||
</div>
|
||||
|
||||
<!-- Subskill 1 -->
|
||||
<div class="d-flex justify-content-between align-items-center mt-3">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center mt-3 row">
|
||||
<div class="col">
|
||||
<label for="subskillSelect1">Select Level 10 Subskill</label>
|
||||
<select id="subskillSelect1" class="form-control form-control select-width" @bind="Subskill1">
|
||||
<select id="subskillSelect1" class="form-control" @bind="Subskill1">
|
||||
<option value="" disabled selected>Choose Subskill...</option>
|
||||
@foreach (var subskill in SubskillList)
|
||||
{
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
}
|
||||
</select>
|
||||
</div>
|
||||
<div class="text-center score-width">
|
||||
<div class="text-center col">
|
||||
<h4 class="mt-4">
|
||||
<span class="text-muted">@lastS1score</span>
|
||||
</h4>
|
||||
|
|
@ -43,10 +43,10 @@
|
|||
</div>
|
||||
|
||||
<!-- Subskill 2 -->
|
||||
<div class="d-flex justify-content-between align-items-center mt-3">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center mt-3 row">
|
||||
<div class="col">
|
||||
<label for="subskillSelect2">Select Level 25 Subskill</label>
|
||||
<select id="subskillSelect2" class="form-control form-control select-width" @bind="Subskill2">
|
||||
<select id="subskillSelect2" class="form-control" @bind="Subskill2">
|
||||
<option value="" disabled selected>Choose Subskill...</option>
|
||||
@foreach (var subskill in SubskillList)
|
||||
{
|
||||
|
|
@ -54,7 +54,7 @@
|
|||
}
|
||||
</select>
|
||||
</div>
|
||||
<div class="text-center score-width">
|
||||
<div class="text-center col">
|
||||
<h4 class="mt-4">
|
||||
<span class="text-muted">@lastS2score</span>
|
||||
</h4>
|
||||
|
|
@ -62,18 +62,18 @@
|
|||
</div>
|
||||
|
||||
<!-- Subskill 3 -->
|
||||
<div class="d-flex justify-content-between align-items-center mt-3">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center mt-3 row">
|
||||
<div class="col">
|
||||
<label for="subskillSelect3">Select Level 50 Subskill</label>
|
||||
<select id="subskillSelect3" class="form-control form-control select-width" @bind="Subskill3">
|
||||
<option value="" disabled selected>Choose Subskill...</option>
|
||||
<select id="subskillSelect3" class="form-control" @bind="Subskill3">
|
||||
<option value="" selected disabled>Choose Subskill...</option>
|
||||
@foreach (var subskill in SubskillList)
|
||||
{
|
||||
<option value="@subskill.Id">@subskill.SubSkill</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
<div class="text-center score-width">
|
||||
<div class="text-center col">
|
||||
<h4 class="mt-4">
|
||||
<span class="text-muted">@lastS3score</span>
|
||||
</h4>
|
||||
|
|
@ -81,10 +81,10 @@
|
|||
</div>
|
||||
|
||||
<!-- Subskill 4 Disabled -->
|
||||
<div class="d-flex justify-content-between align-items-center mt-3">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center mt-3 row">
|
||||
<div class="col">
|
||||
<label for="subskillSelect4">Select Level 75 Subskill</label>
|
||||
<select id="subskillSelect4" disabled class="form-control form-control select-width" @bind="Subskill4">
|
||||
<select id="subskillSelect4" disabled class="form-control" @bind="Subskill4">
|
||||
<option value="" disabled selected>Choose Subskill...</option>
|
||||
@foreach (var subskill in SubskillList)
|
||||
{
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
}
|
||||
</select>
|
||||
</div>
|
||||
<div class="text-center score-width">
|
||||
<div class="text-center col">
|
||||
<h4 class="mt-4">
|
||||
<span class="text-muted">0</span>
|
||||
</h4>
|
||||
|
|
@ -100,10 +100,10 @@
|
|||
</div>
|
||||
|
||||
<!-- Subskill 5 Disabled -->
|
||||
<div class="d-flex justify-content-between align-items-center mt-3">
|
||||
<div>
|
||||
<div class="d-flex justify-content-between align-items-center mt-3 row">
|
||||
<div class="col">
|
||||
<label for="subskillSelect5">Select Level 100 Subskill</label>
|
||||
<select id="subskillSelect5" disabled class="form-control form-control mb-2 select-width" @bind="Subskill5">
|
||||
<select id="subskillSelect5" disabled class="form-control mb-2" @bind="Subskill5">
|
||||
<option value="" disabled selected>Choose Subskill...</option>
|
||||
@foreach (var subskill in SubskillList)
|
||||
{
|
||||
|
|
@ -111,7 +111,7 @@
|
|||
}
|
||||
</select>
|
||||
</div>
|
||||
<div class="text-center score-width">
|
||||
<div class="text-center col">
|
||||
<h4 class="mt-4">
|
||||
<span class="text-muted">0</span>
|
||||
</h4>
|
||||
|
|
@ -119,13 +119,13 @@
|
|||
</div>
|
||||
|
||||
<hr/>
|
||||
<!-- Score Output -->
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mt-3">
|
||||
<h3>Final Score:</h3>
|
||||
<div class="p-2 rounded text-center border score-width"
|
||||
<!-- Score Output -->
|
||||
<div class="d-flex justify-content-between align-items-center mt-3 row">
|
||||
<h3 class="col">Final Score:</h3>
|
||||
<div class="p-2 rounded text-center col"
|
||||
style="background-color:@ScoreBackgroundColor; color:@ScoreColor; ">
|
||||
@FinalScore
|
||||
<h3>@FinalScore</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -29,30 +29,75 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
|||
|
||||
protected override void OnAfterRender(bool firstRender)
|
||||
{
|
||||
if (SelectedNatureId != lastNatureId ||
|
||||
Subskill1 != lastS1 || Subskill2 != lastS2 || Subskill3 != lastS3)
|
||||
// If last Nature or Subskill is different than previous
|
||||
if (PokemonToRate != null) {
|
||||
if (SelectedNatureId != lastNatureId)
|
||||
{
|
||||
CalculateScore();
|
||||
|
||||
lastNatureId = SelectedNatureId;
|
||||
lastS1 = Subskill1;
|
||||
lastS2 = Subskill2;
|
||||
lastS3 = Subskill3;
|
||||
|
||||
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
protected override void OnParametersSet()
|
||||
var nature = NatureList.FirstOrDefault(n => n.Id == lastNatureId);
|
||||
lastnaturescore = PokemonToRate.Speciality switch
|
||||
{
|
||||
CalculateScore();
|
||||
"Berries" => nature.BerryRating,
|
||||
"Ingredients" => nature.IngredientRating,
|
||||
"Skills" => nature.SkillRating,
|
||||
_ => 0
|
||||
};
|
||||
|
||||
}
|
||||
if (Subskill1 != lastS1)
|
||||
{
|
||||
|
||||
lastS1 = Subskill1;
|
||||
var s1 = SubskillList.FirstOrDefault(s => s.Id == Subskill1);
|
||||
lastS1score = PokemonToRate.Speciality switch
|
||||
{
|
||||
"Berries" => s1.BerryRank,
|
||||
"Ingredients" => s1.IngredientRank,
|
||||
"Skills" => s1.SkillRank,
|
||||
_ => 0
|
||||
};
|
||||
|
||||
}
|
||||
if (Subskill2 != lastS2)
|
||||
{
|
||||
|
||||
lastS2 = Subskill2;
|
||||
var s2 = SubskillList.FirstOrDefault(s => s.Id == Subskill2);
|
||||
lastS2score = PokemonToRate.Speciality switch
|
||||
{
|
||||
"Berries" => s2.BerryRank,
|
||||
"Ingredients" => s2.IngredientRank,
|
||||
"Skills" => s2.SkillRank,
|
||||
_ => 0
|
||||
};
|
||||
|
||||
|
||||
|
||||
}
|
||||
if (Subskill3 != lastS3)
|
||||
{
|
||||
lastS3 = Subskill3;
|
||||
var s3 = SubskillList.FirstOrDefault(s => s.Id == Subskill3);
|
||||
lastS3score = PokemonToRate.Speciality switch
|
||||
{
|
||||
"Berries" => s3.BerryRank,
|
||||
"Ingredients" => s3.IngredientRank,
|
||||
"Skills" => s3.SkillRank,
|
||||
_ => 0
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
CalculateScore();
|
||||
StateHasChanged();
|
||||
|
||||
}
|
||||
|
||||
private void CalculateScore()
|
||||
{
|
||||
if (PokemonToRate == null || SelectedNatureId == 0 || lastS1 == 0 || lastS2 == 0 || lastS3 == 0)
|
||||
{
|
||||
|
||||
FinalScore = 0;
|
||||
ScoreBackgroundColor = "#FFFFFF";
|
||||
ScoreColor = "#000000";
|
||||
|
|
@ -72,39 +117,6 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
|||
return;
|
||||
}
|
||||
|
||||
lastnaturescore = PokemonToRate.Speciality switch
|
||||
{
|
||||
"Berries" => nature.BerryRating,
|
||||
"Ingredients" => nature.IngredientRating,
|
||||
"Skills" => nature.SkillRating,
|
||||
_ => 0
|
||||
};
|
||||
|
||||
lastS1score = PokemonToRate.Speciality switch
|
||||
{
|
||||
"Berries" => s1.BerryRank,
|
||||
"Ingredients" => s1.IngredientRank,
|
||||
"Skills" => s1.SkillRank,
|
||||
_ => 0
|
||||
};
|
||||
Console.WriteLine(lastS1score);
|
||||
|
||||
lastS2score = PokemonToRate.Speciality switch
|
||||
{
|
||||
"Berries" => s2.BerryRank,
|
||||
"Ingredients" => s2.IngredientRank,
|
||||
"Skills" => s2.SkillRank,
|
||||
_ => 0
|
||||
};
|
||||
|
||||
lastS3score = PokemonToRate.Speciality switch
|
||||
{
|
||||
"Berries" => s3.BerryRank,
|
||||
"Ingredients" => s3.IngredientRank,
|
||||
"Skills" => s3.SkillRank,
|
||||
_ => 0
|
||||
};
|
||||
|
||||
|
||||
FinalScore = PokemonToRate.Speciality switch
|
||||
{
|
||||
|
|
@ -114,6 +126,7 @@ namespace Portfolio.WebUI.Server.Components.Component.Pokemon_Components
|
|||
_ => 0
|
||||
};
|
||||
|
||||
|
||||
// Set score background based on value
|
||||
ScoreBackgroundColor = FinalScore switch
|
||||
{
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
.pokemon-rating-panel {
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.5rem;
|
||||
width: 100%;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -16,5 +18,32 @@
|
|||
}
|
||||
|
||||
.score-width {
|
||||
width: 100px;
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.pokemon-rating-panel {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.ratings {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.d-flex.justify-content-between.align-items-center {
|
||||
flex-direction: column;
|
||||
align-items: stretch !important;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.select-width
|
||||
{
|
||||
width: 4rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.score-width h4 {
|
||||
margin-top: 0.5rem !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,10 @@
|
|||
@using Portfolio.Domain.Features.Pokemon
|
||||
|
||||
|
||||
<!-- Search Input -->
|
||||
<div class="pokemon-selector p-3 bg-light h-75 mb-5">
|
||||
<div class="pokemon-selector p-3 bg-light ">
|
||||
<input class="form-control mb-3" placeholder="Search Pokémon..." @bind="SearchTerm" @oninput="HandleSearch" />
|
||||
|
||||
<!-- Scrollable Pokémon Grid -->
|
||||
<div class="row pokemon-grid" style="max-height: 80vh; overflow-y: auto;">
|
||||
<div class="row pokemon-grid">
|
||||
@foreach (var pokemon in FilteredPokemon)
|
||||
{
|
||||
bool isSelected = SelectedPokemon?.Id == pokemon.Id;
|
||||
|
|
|
|||
|
|
@ -1,23 +1,31 @@
|
|||
.pokemon-card {
|
||||
.pokemon-selector {
|
||||
height: 66vh;
|
||||
width: 20vw;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5% / 3.5%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.pokemon-grid {
|
||||
flex: 1 1 auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
|
||||
.pokemon-card {
|
||||
cursor: pointer;
|
||||
transition: transform 0.15s ease-in-out;
|
||||
}
|
||||
|
||||
.pokemon-card:hover {
|
||||
.pokemon-card:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
|
||||
.small-card {
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.pokemon-selector {
|
||||
height:100%;
|
||||
overflow: hidden;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 5% / 3.5%;
|
||||
}
|
||||
|
||||
.pokemon-grid {
|
||||
height: 90%;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
<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>
|
||||
|
|
@ -1,10 +1,13 @@
|
|||
@inherits LayoutComponentBase
|
||||
|
||||
<div class="page bg-primary-subtle">
|
||||
<div class="page bg-primary-subtle h-100">
|
||||
<main class="h-100 w-100">
|
||||
<NavMenu3 />
|
||||
<article class="container m-auto">
|
||||
<div class="">
|
||||
@Body
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
@* <MadeWithLoveFooter/> *@
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<div class="navbar navbar-expand bg-primary">
|
||||
<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-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="currentColor" class="bi bi-arrow-through-heart" viewBox="0 0 16 16" style="cursor: pointer;">
|
||||
<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-1">Kira Jiroux</span>
|
||||
<span class="fs-4 mx-1 text-white">Kira Jiroux</span>
|
||||
</div>
|
||||
<ul class="navbar-nav">
|
||||
|
||||
|
|
|
|||
|
|
@ -7,3 +7,8 @@
|
|||
<p>Ensuring that git is connected properly.</p>
|
||||
|
||||
Welcome to your new app.
|
||||
|
||||
|
||||
<div class="w-75 h-100 bg-white">
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ else
|
|||
<div class="row">
|
||||
|
||||
<!-- Left Panel: Selector -->
|
||||
<div class="col-md-4">
|
||||
<div class="col-4">
|
||||
<PokemonSelector
|
||||
PokemonList="PokemonList"
|
||||
SelectedPokemon="SelectedPokemon"
|
||||
|
|
@ -30,7 +30,10 @@ else
|
|||
</div>
|
||||
|
||||
<!-- Center Panel: Pokemon View -->
|
||||
<div class="col">
|
||||
<div class="col-4">
|
||||
<div class="d-flex justify-content-center align-items-center h-100">
|
||||
|
||||
|
||||
@if (SelectedPokemon != null)
|
||||
{
|
||||
<PokemonCard Pokemon="SelectedPokemon" />
|
||||
|
|
@ -40,18 +43,18 @@ else
|
|||
<p class="text-muted">Please select a Pokémon to rate.</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@if (SelectedPokemon != null)
|
||||
{
|
||||
<!-- Right Panel: Rating View -->
|
||||
<div class="col-md-4 col-4">
|
||||
<div class="col-4">
|
||||
<PokemonRatingPanel
|
||||
PokemonToRate="SelectedPokemon"
|
||||
NatureList="NatureList"
|
||||
SubskillList="SubskillList"
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
|
@ -6,14 +6,25 @@
|
|||
|
||||
|
||||
<PageTitle>Pokémon Sleep</PageTitle>
|
||||
<head>
|
||||
@* <meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<base href="/" />
|
||||
*@
|
||||
<link rel="stylesheet" href="bootstrap/bootstrap-brite.css" /> <!-- app.css -->
|
||||
@* <link rel="stylesheet" href="Portfolio.WebUI.Server.styles.css" />
|
||||
|
||||
<div class="container">
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
<HeadOutlet /> *@
|
||||
</head>
|
||||
|
||||
<div class="">
|
||||
<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">
|
||||
<div class="row card shadow-sm border-0 p-3 pb-4 mt-4 m-auto w-75 mb-5 bg-white">
|
||||
<!-- Top Row-->
|
||||
<div class="row d-flex flex-row">
|
||||
<!-- Image side -->
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
window.getScreenWidth = () => {
|
||||
return window.innerWidth;
|
||||
};
|
||||
|
||||
window.registerResizeCallback = (dotNetHelper) => {
|
||||
window.onresize = () => {
|
||||
dotNetHelper.invokeMethodAsync('UpdateScreenWidth', window.innerWidth);
|
||||
};
|
||||
};
|
||||
Loading…
Reference in New Issue