Lobo_Corp/playground-frontend
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases Activity

Fixed some styling issues

Browse Source
This commit is contained in:
Lobo
2026-02-24 08:27:59 +01:00
parent f656206691
commit ed0e370e9d
11 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/pages/algorithms/algorithms.component.html
View File

@@ -1,8 +1,7 @@
<div class="algo-container"> <h1>{{ 'ALGORITHM.TITLE' |translate }}</h1>
<h1>{{ 'ALGORITHM.TITLE' |translate }}</h1> <div class="card-grid">
<div class="category-cards">
@for (category of categories$ | async; track category.id) { @for (category of categories$ | async; track category.id) {
<mat-card [routerLink]="[category.routerLink]"> <mat-card class="algo-card" [routerLink]="[category.routerLink]">
<mat-card-header> <mat-card-header>
<mat-card-title>{{ category.title | translate }}</mat-card-title> <mat-card-title>{{ category.title | translate }}</mat-card-title>
</mat-card-header> </mat-card-header>
@@ -12,4 +11,3 @@
</mat-card> </mat-card>
} }
</div> </div>
</div>

2
src/app/pages/algorithms/cloth/cloth.component.ts
View File

@@ -6,7 +6,7 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { MatCard, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card'; import { MatCard, MatCardContent, MatCardHeader, MatCardTitle } from '@angular/material/card';
import { TranslatePipe } from '@ngx-translate/core'; import { TranslatePipe } from '@ngx-translate/core';
import { BabylonCanvas, RenderConfig, SceneEventData } from '../../../shared/rendering/canvas/babylon-canvas.component'; import { BabylonCanvas, RenderConfig, SceneEventData } from '../../../shared/components/render-canvas/babylon-canvas.component';
import { ComputeShader, StorageBuffer, MeshBuilder, ShaderMaterial, ShaderLanguage, ArcRotateCamera } from '@babylonjs/core'; import { ComputeShader, StorageBuffer, MeshBuilder, ShaderMaterial, ShaderLanguage, ArcRotateCamera } from '@babylonjs/core';
import { import {
CLOTH_FRAGMENT_SHADER_WGSL, CLOTH_FRAGMENT_SHADER_WGSL,

2
src/app/pages/algorithms/fractal/fractal.component.ts
View File

@@ -8,7 +8,7 @@ import {MatSelect} from '@angular/material/select';
import {AlgorithmInformation} from '../information/information.models'; import {AlgorithmInformation} from '../information/information.models';
import {UrlConstants} from '../../../constants/UrlConstants'; import {UrlConstants} from '../../../constants/UrlConstants';
import {FormsModule} from '@angular/forms'; import {FormsModule} from '@angular/forms';
import {BabylonCanvas, RenderCallback, RenderConfig, SceneEventData} from '../../../shared/rendering/canvas/babylon-canvas.component'; import {BabylonCanvas, RenderCallback, RenderConfig, SceneEventData} from '../../../shared/components/render-canvas/babylon-canvas.component';
import {FRACTAL2D_FRAGMENT, FRACTAL2D_VERTEX} from './fractal.shader'; import {FRACTAL2D_FRAGMENT, FRACTAL2D_VERTEX} from './fractal.shader';
import {PointerEventTypes, PointerInfo, ShaderMaterial, Vector2} from '@babylonjs/core'; import {PointerEventTypes, PointerInfo, ShaderMaterial, Vector2} from '@babylonjs/core';
import {MatButton} from '@angular/material/button'; import {MatButton} from '@angular/material/button';

2
src/app/pages/algorithms/fractal3d/fractal3d.component.ts
View File

@@ -7,7 +7,7 @@ import {TranslatePipe} from '@ngx-translate/core';
import {AlgorithmInformation} from '../information/information.models'; import {AlgorithmInformation} from '../information/information.models';
import {UrlConstants} from '../../../constants/UrlConstants'; import {UrlConstants} from '../../../constants/UrlConstants';
import {MatButton} from '@angular/material/button'; import {MatButton} from '@angular/material/button';
import {BabylonCanvas, RenderCallback, RenderConfig} from '../../../shared/rendering/canvas/babylon-canvas.component'; import {BabylonCanvas, RenderCallback, RenderConfig} from '../../../shared/components/render-canvas/babylon-canvas.component';
@Component({ @Component({
selector: 'app-fractal3d', selector: 'app-fractal3d',

2
src/app/pages/algorithms/pendulum/pendulum.component.ts
View File

@@ -1,5 +1,5 @@
import {Component} from '@angular/core'; import {Component} from '@angular/core';
import {BabylonCanvas, RenderConfig, SceneEventData} from '../../../shared/rendering/canvas/babylon-canvas.component'; import {BabylonCanvas, RenderConfig, SceneEventData} from '../../../shared/components/render-canvas/babylon-canvas.component';
import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card'; import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from '@angular/material/card';
import {ComputeShader, ShaderLanguage, StorageBuffer} from '@babylonjs/core'; import {ComputeShader, ShaderLanguage, StorageBuffer} from '@babylonjs/core';
import {PENDULUM_FRAGMENT_SHADER_WGSL, PENDULUM_PHYSIC_COMPUTE_SHADER_WGSL, PENDULUM_RENDER_COMPUTE_SHADER_WGSL, PENDULUM_VERTEX_SHADER_WGSL} from './pendulum.shader'; import {PENDULUM_FRAGMENT_SHADER_WGSL, PENDULUM_PHYSIC_COMPUTE_SHADER_WGSL, PENDULUM_RENDER_COMPUTE_SHADER_WGSL, PENDULUM_VERTEX_SHADER_WGSL} from './pendulum.shader';

2
src/app/pages/projects/projects.component.html
View File

@@ -1,4 +1,4 @@
<div class="project-grid"> <div class="card-grid">
@if (featuredProject(); as project) { @if (featuredProject(); as project) {
<mat-card class="project-card featured"> <mat-card class="project-card featured">
<mat-card-header> <mat-card-header>

1
src/app/shared/components/particles-background/particles-background.component.scss
View File

@@ -11,4 +11,5 @@ canvas {
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 100%;
border-width: 0;
} }

0
src/app/shared/rendering/canvas/babylon-canvas.component.html → src/app/shared/components/render-canvas/babylon-canvas.component.html
View File

0
src/app/shared/rendering/canvas/babylon-canvas.component.scss → src/app/shared/components/render-canvas/babylon-canvas.component.scss
View File

0
src/app/shared/rendering/canvas/babylon-canvas.component.ts → src/app/shared/components/render-canvas/babylon-canvas.component.ts
View File

13
src/styles.scss
View File

@@ -702,12 +702,21 @@ app-root {
} }
/* ---- Projects Page & Dialog ---- */ /* ---- Projects Page & Dialog ---- */
.project-grid { .card-grid {
display: grid; display: grid;
gap: clamp(1rem, 3vw, 1.5rem); gap: clamp(1rem, 3vw, 1.5rem);
grid-template-columns: repeat(auto-fill, minmax(min(100%, 450px), 1fr)); grid-template-columns: repeat(auto-fill, minmax(min(100%, 450px), 1fr));
max-width: var(--app-maxWidth); max-width: var(--app-maxWidth);
margin: 0 auto; margin-right: 1rem;
margin-left: 1rem;
margin-top: auto;
}
.algo-card {
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
display: flex;
flex-direction: column;
cursor: pointer;
} }
.project-card { .project-card {