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

Write Preview
Loading…
Cancel
Save