Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Update particle-related styles and improve forms' structure in particle components.

Browse Source
This commit is contained in:
stijn
2025-12-27 21:13:49 +01:00
parent d9b60d8a94
commit 37d7c37f3b
6 changed files with 61 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/app/pages/particles/components/particle/particle.component.html
+24 -24
View File
@@ -10,30 +10,30 @@
<input type="color" [(ngModel)]="selectedColor">
<span>Current color: {{ selectedColor }}</span>
</div>
<mat-form-field appearance="fill" class="type-field">
<mat-form-field appearance="outline" class="type-field">
<mat-label>Select Particle Type</mat-label>
<input type="text"
placeholder="Search for a particle type"
matInput
[formControl]="particleTypeControl"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
@for (type of filteredParticleTypes | async; track type) {
<mat-option [value]="type">
{{ type }}
</mat-option>
}
</mat-autocomplete>
</mat-form-field>
</div>
<div class="size-slider">
<mat-slider min="0.1" max="4" step="0.1" class="full-width">
<input matSliderThumb [(ngModel)]="selectedSize">
</mat-slider>
<span>Size: {{ selectedSize }}</span>
</div>
placeholder="Search for a particle type"
matInput
[formControl]="particleTypeControl"
[matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
@for (type of filteredParticleTypes | async; track type) {
<mat-option [value]="type">
{{ type }}
</mat-option>
}
</mat-autocomplete>
</mat-form-field>
</div>
</mat-card-content>
</mat-card>
</div>
<div class="size-slider">
<mat-slider min="0.1" max="4" step="0.1" class="full-width">
<input matSliderThumb [(ngModel)]="selectedSize">
</mat-slider>
<span>Size: {{ selectedSize }}</span>
</div>
</div>
</mat-card-content>
</mat-card>
</div>