Quildra
/
OriginDex-FrontEnd
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

- Fixing some css issues

pull/1/head
Quildra 1 year ago
parent
00fcf80462
commit
cdd784fe06
2 changed files with 107 additions and 109 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 214
      src/app/features/plan/plan-pokemon-details/plan-pokemon-details.component.ts
  2. 2
      src/app/features/plan/planV2.component.ts

214
src/app/features/plan/plan-pokemon-details/plan-pokemon-details.component.ts
View File

@ -4,127 +4,125 @@ import { PokemonFamilyEntry } from '../../../core/models/plan.model';
import { Pokemon } from '../../../core/models/pokemon.model';
import { PokemonService } from '../../../core/services/pokemon.service';
import { MatChipsModule } from '@angular/material/chips';
import { MatTabsModule } from '@angular/material/tabs';
@Component({
selector: 'app-plan-pokemon-details',
standalone: true,
imports: [
CommonModule,
MatChipsModule
MatChipsModule,
MatTabsModule
],
template: `
<div class="targets-grid" *ngIf="hasTargets">
<ng-container *ngIf="evolve_to.length > 0">
<div class="target-section">
<h4>Evolution Targets</h4>
<div class="target-cards">
<div
*ngFor="let target of evolve_to"
class="target-card"
[class.completed]="isTargetCompleted(target.PFIC)"
>
<img
lazyImg
[src]="pokemonService.getPokemonImageUrl(target)"
[alt]="target.Name"
class="target-image"
[class.grayscale]="isTargetCompleted(target.PFIC)"
>
<div class="target-details">
<div class="target-name">
{{ target.Name }}
<span *ngIf="target.Form">({{ target.Form }})</span>
</div>
<span *ngIf="target.EvolutionMethod">{{target?.EvolutionMethod}}</span>
</div>
</div>
</div>
</div>
</ng-container>
<ng-container *ngIf="pokemon_family.breed_for.length > 0">
<div class="target-section">
<h4>Breeding Targets</h4>
<div class="target-cards">
<div
*ngFor="let target of breed_for"
class="target-card"
[class.completed]="isTargetCompleted(target.PFIC)"
>
<img
lazyImg
[src]="pokemonService.getPokemonImageUrl(target)"
[alt]="target.Name"
class="target-image"
[class.grayscale]="isTargetCompleted(target.PFIC)"
>
<div class="target-details">
<div class="target-name">
{{ target.Name }}
<span *ngIf="target.Form">({{ target.Form }})</span>
</div>
<mat-chip-listbox>
<mat-chip>Breed</mat-chip>
</mat-chip-listbox>
</div>
</div>
<mat-tab-group>
<!-- Evolution Targets Tab -->
<mat-tab label="Evolution Targets" *ngIf="evolve_to.length > 0">
<div class="scrollable-content">
<div
*ngFor="let target of evolve_to"
class="target-card"
[class.completed]="isTargetCompleted(target.PFIC)"
>
<img
lazyImg
[src]="pokemonService.getPokemonImageUrl(target)"
[alt]="target.Name"
class="target-image"
[class.grayscale]="isTargetCompleted(target.PFIC)"
>
<div class="target-details">
<span class="target-name">
{{ target.Name }}
<span *ngIf="target.Form">({{ target.Form }})</span>
</span>
<span *ngIf="target.EvolutionMethod">{{target?.EvolutionMethod}}</span>
</div>
</div>
</div>
</mat-tab>
<!-- Breeding Targets Tab -->
<mat-tab label="Breeding Targets" *ngIf="breed_for.length > 0">
<div class="scrollable-content">
<div
*ngFor="let target of breed_for"
class="target-card"
[class.completed]="isTargetCompleted(target.PFIC)"
>
<img
lazyImg
[src]="pokemonService.getPokemonImageUrl(target)"
[alt]="target.Name"
class="target-image"
[class.grayscale]="isTargetCompleted(target.PFIC)"
>
<div class="target-details">
<span class="target-name">
{{ target.Name }}
<span *ngIf="target.Form">({{ target.Form }})</span>
</span>
<mat-chip-listbox>
<mat-chip>Breed</mat-chip>
</mat-chip-listbox>
</div>
</ng-container>
</div>
</div>
</div>
</mat-tab>
</mat-tab-group>
`,
styles: [`
.targets-grid {
padding: 16px 8px;
display: flex;
flex-direction: column;
gap: 24px;
}
.target-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 16px;
}
.target-card {
display: flex;
align-items: center;
gap: 12px;
padding: 8px;
border: 1px solid #eee;
border-radius: 8px;
transition: background-color 0.3s ease;
&:hover {
background-color: #f5f5f5;
}
&.completed {
background-color: #f0f0f0;
}
}
.scrollable-content {
max-height: calc(100vh - 400px); /* Adjust as necessary for the available space */
overflow-y: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, auto));
gap: 16px;
padding: 16px 8px; /* Adjust padding to your liking */
}
.target-card {
display: flex;
//flex-direction: column; /* Stack image and details vertically */
//align-items: flex-start;
gap: 12px;
padding: 8px;
border: 1px solid #eee;
border-radius: 8px;
transition: background-color 0.3s ease;
//width: 100%; /* Keep cards from growing too wide */
}
.target-card:hover {
background-color: #f5f5f5;
}
.target-card.completed {
background-color: #f0f0f0;
}
.target-image {
width: 64px;
height: 64px;
object-fit: contain;
}
.target-details {
display: flex;
flex-direction: column;
gap: 8px;
}
.target-name {
font-weight: 500;
}
.target-name span {
color: #666;
font-size: 0.9em;
}
.target-image {
width: 64px;
height: 64px;
object-fit: contain;
}
.target-details {
display: flex;
flex-direction: column;
gap: 8px;
}
.target-name {
font-weight: 500;
span {
color: #666;
font-size: 0.9em;
}
}
`]
})
export class PlanPokemonDetailsComponent {

2
src/app/features/plan/planV2.component.ts
View File

@ -76,7 +76,7 @@ import { AuthService } from '../../core/services/auth.service';
}
.games-section {
width: 11%;
width: 220px;
padding: 20px;
overflow-y: auto;
background: #f5f5f5;

Write Preview
Loading…
Cancel
Save