diff --git a/jambotron-ui/package-lock.json b/jambotron-ui/package-lock.json index 7410fd5..04f2bbb 100644 --- a/jambotron-ui/package-lock.json +++ b/jambotron-ui/package-lock.json @@ -21,6 +21,7 @@ "@angular/platform-server": "^20.0.0", "@angular/router": "^20.0.0", "@angular/ssr": "^20.0.2", + "@primeng/themes": "^19.1.3", "@progress/kendo-angular-buttons": "19.1.1", "@progress/kendo-angular-common": "19.1.1", "@progress/kendo-angular-dialog": "19.1.1", @@ -44,6 +45,7 @@ "@progress/kendo-svg-icons": "^4.0.0", "@progress/kendo-theme-default": "11.0.2", "express": "^5.1.0", + "primeng": "^19.1.3", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.15.0" @@ -3050,6 +3052,36 @@ "node": ">=14" } }, + "node_modules/@primeng/themes": { + "version": "19.1.3", + "resolved": "https://registry.npmjs.org/@primeng/themes/-/themes-19.1.3.tgz", + "integrity": "sha512-y4VryHHUTPWlmfR56NBANC0QPIxEngTUE/J3pGs4SJquq1n5EE/U16dxa1qW/wXqLF3jn3l/AO/4KZqGj5UuAA==", + "license": "SEE LICENSE IN LICENSE.md", + "dependencies": { + "@primeuix/styled": "^0.3.2" + } + }, + "node_modules/@primeuix/styled": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@primeuix/styled/-/styled-0.3.2.tgz", + "integrity": "sha512-ColZes0+/WKqH4ob2x8DyNYf1NENpe5ZguOvx5yCLxaP8EIMVhLjWLO/3umJiDnQU4XXMLkn2mMHHw+fhTX/mw==", + "license": "MIT", + "dependencies": { + "@primeuix/utils": "^0.3.2" + }, + "engines": { + "node": ">=12.11.0" + } + }, + "node_modules/@primeuix/utils": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@primeuix/utils/-/utils-0.3.2.tgz", + "integrity": "sha512-B+nphqTQeq+i6JuICLdVWnDMjONome2sNz0xI65qIOyeB4EF12CoKRiCsxuZ5uKAkHi/0d1LqlQ9mIWRSdkavw==", + "license": "MIT", + "engines": { + "node": ">=12.11.0" + } + }, "node_modules/@progress/kendo-angular-buttons": { "version": "19.1.1", "resolved": "https://registry.npmjs.org/@progress/kendo-angular-buttons/-/kendo-angular-buttons-19.1.1.tgz", @@ -8555,6 +8587,27 @@ "dev": true, "license": "MIT" }, + "node_modules/primeng": { + "version": "19.1.3", + "resolved": "https://registry.npmjs.org/primeng/-/primeng-19.1.3.tgz", + "integrity": "sha512-KsrvJFblKg28kA6d4npnnABjKClmJv0CgDT/kOxFq5onQNBy4547DJzRGMba4+CMLKjHWWkYWuC+XSkPMNFrZg==", + "license": "SEE LICENSE IN LICENSE.md", + "dependencies": { + "@primeuix/styled": "^0.3.2", + "@primeuix/utils": "^0.3.2", + "tslib": "^2.3.0" + }, + "peerDependencies": { + "@angular/animations": "^19.0.0", + "@angular/cdk": "^19.0.0", + "@angular/common": "^19.0.0", + "@angular/core": "^19.0.0", + "@angular/forms": "^19.0.0", + "@angular/platform-browser": "^19.0.0", + "@angular/router": "^19.0.0", + "rxjs": "^6.0.0 || ^7.8.1" + } + }, "node_modules/proc-log": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/proc-log/-/proc-log-5.0.0.tgz", diff --git a/jambotron-ui/package.json b/jambotron-ui/package.json index dbe09b9..5bda2a2 100644 --- a/jambotron-ui/package.json +++ b/jambotron-ui/package.json @@ -24,6 +24,7 @@ "@angular/platform-server": "^20.0.0", "@angular/router": "^20.0.0", "@angular/ssr": "^20.0.2", + "@primeng/themes": "^19.1.3", "@progress/kendo-angular-buttons": "19.1.1", "@progress/kendo-angular-common": "19.1.1", "@progress/kendo-angular-dialog": "19.1.1", @@ -47,6 +48,7 @@ "@progress/kendo-svg-icons": "^4.0.0", "@progress/kendo-theme-default": "11.0.2", "express": "^5.1.0", + "primeng": "^19.1.3", "rxjs": "~7.8.0", "tslib": "^2.3.0", "zone.js": "~0.15.0" diff --git a/jambotron-ui/src/app/app.component.html b/jambotron-ui/src/app/app.component.html index d2138ac..0564b57 100644 --- a/jambotron-ui/src/app/app.component.html +++ b/jambotron-ui/src/app/app.component.html @@ -42,7 +42,13 @@ --> - + +
+ +
+ + + @@ -85,7 +91,7 @@ -
+
diff --git a/jambotron-ui/src/app/app.component.scss b/jambotron-ui/src/app/app.component.scss index 1d0295a..fee240c 100644 --- a/jambotron-ui/src/app/app.component.scss +++ b/jambotron-ui/src/app/app.component.scss @@ -5,6 +5,19 @@ flex: 1 1 auto; } -.mat-toolbar{ +mat-toolbar{ background-color: rgba(153,153,153,0.16); + backdrop-filter: blur(8px); +} + +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1000; // Ensure toolbar stays above other content +} +.router_outlet_padding{ + padding-top: 60px; + scroll-padding-inline: 40%; } diff --git a/jambotron-ui/src/app/app.module.ts b/jambotron-ui/src/app/app.module.ts index 0f26b09..ba368f3 100644 --- a/jambotron-ui/src/app/app.module.ts +++ b/jambotron-ui/src/app/app.module.ts @@ -28,6 +28,7 @@ import {MatAutocomplete, MatAutocompleteTrigger, MatOption} from "@angular/mater import {MatFormField} from "@angular/material/form-field"; import {MatLabel} from '@angular/material/form-field'; + import { MatCard, MatCardActions, MatCardContent, @@ -38,6 +39,13 @@ import { } from '@angular/material/card'; import {MatInput} from '@angular/material/input'; import {EditorComponent} from '@progress/kendo-angular-editor'; +import {ArticleComments} from './components/article-comments/article-comments'; +import {MatProgressSpinner} from '@angular/material/progress-spinner'; +import {providePrimeNG} from 'primeng/config'; +import Aura from '@primeng/themes/aura'; +import {Button} from 'primeng/button'; +import {ScrollPanelModule} from 'primeng/scrollpanel'; +import {Splitter} from 'primeng/splitter'; @@ -86,9 +94,25 @@ import {EditorComponent} from '@progress/kendo-angular-editor'; MatCardActions, MatInput, MatLabel, - EditorComponent + EditorComponent, + ArticleComments, + MatProgressSpinner, + Button, + ScrollPanelModule, + Splitter + ], - providers: [authInterceptorProviders, provideHttpClient(withInterceptorsFromDi()), provideAnimationsAsync()] }) + providers: [ + authInterceptorProviders, + provideHttpClient(withInterceptorsFromDi()), + provideAnimationsAsync(), + providePrimeNG({ + theme: { + preset: Aura, + options: {darkModeSelector: '.p-dark'} + } + }) + ] }) export class AppModule { } diff --git a/jambotron-ui/src/app/components/home/home.component.html b/jambotron-ui/src/app/components/home/home.component.html index f047ffa..5cbbd30 100644 --- a/jambotron-ui/src/app/components/home/home.component.html +++ b/jambotron-ui/src/app/components/home/home.component.html @@ -1,10 +1,123 @@ -
-
-

{{ content }}

-
-
+ + +
Panel 1
+ + +
Panel 2
+ - + +

+ Lorem ipsum dolor sit amet... +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... +

+

+ At vero eos et accusamus et iusto odio dignissimos... + dfsd + f + sdf + + dsf + sd + f + sd + fs + fs + fsfs + fs + fs + fs + fs + fs +

+ + + + + + + + + + +

+ Lorem ipsum dolor sit amet... +

+

+ Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium... +

+

+ At vero eos et accusamus et iusto odio dignissimos... + dfsd + f + sdf + + dsf + sd + f + sd + fs + fs + fsfs + fs + fs + fs + fs + fs +

+ + + + + + + + + Tutorials @@ -14,6 +127,16 @@ +@defer (on hover; on interaction(showComments)) { + +} @placeholder ( ;minimum 1s) { +

Placeholder for comments

+} @loading (minimum 1s; after 500ms) { +

Loading comments...

+} @error { +

Failed to load comments

+} + @for (tutorial of tutorials; track $index){ diff --git a/jambotron-ui/src/app/components/home/home.component.scss b/jambotron-ui/src/app/components/home/home.component.scss index 9fa3ae4..7bd62ae 100644 --- a/jambotron-ui/src/app/components/home/home.component.scss +++ b/jambotron-ui/src/app/components/home/home.component.scss @@ -1,5 +1,6 @@ mat-card{ margin: 20px; + background-color: rgba(0, 0, 0, 0.7); } mat-card-title{ color: cyan; diff --git a/jambotron-ui/src/app/components/home/home.component.ts b/jambotron-ui/src/app/components/home/home.component.ts index d46e1b7..223eb3a 100644 --- a/jambotron-ui/src/app/components/home/home.component.ts +++ b/jambotron-ui/src/app/components/home/home.component.ts @@ -1,8 +1,10 @@ -import { Component, OnInit } from '@angular/core'; +import {Component, computed, OnInit} from '@angular/core'; import {TutorialService} from '../../services/tutorial.service'; import {Tutorial} from '../../models/tutorial.model'; - +import {ArticleComments} from '../article-comments/article-comments'; +import {AddTutorialComponent} from '../add-tutorial/add-tutorial.component'; +import { ScrollPanelModule } from 'primeng/scrollpanel'; @Component({ selector: 'app-home', @@ -31,4 +33,6 @@ export class HomeComponent implements OnInit { console.log(error); }); } + + profileComponent = computed(() => AddTutorialComponent); } diff --git a/jambotron-ui/src/app/components/tutorials-list/tutorials-list.component.scss b/jambotron-ui/src/app/components/tutorials-list/tutorials-list.component.scss index eace3fb..9dc0d33 100644 --- a/jambotron-ui/src/app/components/tutorials-list/tutorials-list.component.scss +++ b/jambotron-ui/src/app/components/tutorials-list/tutorials-list.component.scss @@ -2,4 +2,5 @@ text-align: left; max-width: 750px; margin: auto; -} \ No newline at end of file +} + diff --git a/jambotron-ui/src/main.ts b/jambotron-ui/src/main.ts index 99dd616..47f663d 100644 --- a/jambotron-ui/src/main.ts +++ b/jambotron-ui/src/main.ts @@ -2,6 +2,7 @@ import { bootstrapApplication } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import {AppModule} from './app/app.module'; + //import('@angular/animations/browser') platformBrowserDynamic().bootstrapModule(AppModule)