Small UI fixing

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",

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"

jambotron-ui/src/app/app.component.html

@@ -42,7 +42,13 @@
     </ul>
 
   </nav>-->
-  <mat-toolbar>
+
+  <div class="card flex justify-center">
+    <p-button label="Check" />
+  </div>
+
+
+  <mat-toolbar class="fixed-top">
     <button mat-raised-button routerLink="/" href="#">
       My App
     </button>
@@ -85,7 +91,7 @@
   </mat-toolbar>
 
 
-  <div class="container mt-3">
+  <div class="router_outlet_padding">
     <router-outlet></router-outlet>
   </div>
 </div>

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%;
 }

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 { }

jambotron-ui/src/app/components/home/home.component.html

@@ -1,10 +1,123 @@
-<div class="container">
+<p-splitter [style]="{ height: '300px' }" styleClass="mb-8" layout="vertical">
-    <header class="jumbotron">
+  <ng-template #panel>
-      <p>{{ content }}</p>
+    <div class="flex items-center justify-center h-full">Panel 1</div>
-    </header>
+  </ng-template>
-  </div>
+  <ng-template #panel>
+    <div class="flex items-center justify-center h-full">Panel 2</div>
+    <p-scrollPanel [style]="{ width: '100%', height: '150px' }">
 
-<mat-card  appearance="outlined" >
+
+      <p>
+        Lorem ipsum dolor sit amet...
+      </p>
+      <p>
+        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
+      </p>
+      <p class="m-0">
+        At vero eos et accusamus et iusto odio dignissimos...
+        dfsd
+        f
+        sdf
+
+        dsf
+        sd
+        f
+        sd
+        fs
+        fs
+        fsfs
+        fs
+        fs
+        fs
+        fs
+        fs
+      </p>
+      <app-article-comments />
+    </p-scrollPanel>
+
+
+  </ng-template>
+</p-splitter>
+
+<p-scrollPanel [style]="{ width: '100%', height: '150px' }">
+
+
+  <p>
+    Lorem ipsum dolor sit amet...
+  </p>
+  <p>
+    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium...
+  </p>
+  <p class="m-0">
+    At vero eos et accusamus et iusto odio dignissimos...
+    dfsd
+    f
+    sdf
+
+    dsf
+    sd
+    f
+    sd
+    fs
+    fs
+    fsfs
+    fs
+    fs
+    fs
+    fs
+    fs
+  </p>
+  <app-article-comments />
+</p-scrollPanel>
+
+
+
+
+<!--
+@defer (on viewport(container); prefetch on idle) {
+  <app-article-comments></app-article-comments>
+} @loading {
+  <mat-progress-spinner></mat-progress-spinner>
+
+  loading
+} @placeholder {
+  <div class="skeleton-loader"></div>
+
+  <app-article-comments></app-article-comments>
+  placeholder
+} @error {
+  Error
+}
+
+
+<div #container>
+  <h1>How I feel about Angular</h1>
+  <article>
+    <p>
+      Angular is my favorite framework, and
+      this is why. Angular has the coolest
+      deferrable view feature that makes defer
+      loading content the easiest and most
+      ergonomic it could possibly be.
+    </p>
+  </article>
+
+  @defer {
+    <app-article-comments />
+  } @placeholder (minimum 1s) {
+    <p>Placeholder for comments</p>
+  } @loading (minimum 1s; after 500ms) {
+    <p>Loading comments...</p>
+  } @error {
+    <p>Failed to load comments</p>
+  }
+
+</div>
+
+<ng-container [ngComponentOutlet]="profileComponent()" />
+-->
+
+<mat-card #showComments  appearance="outlined" >
   <mat-card-header>
     <mat-card-title>Tutorials</mat-card-title>
   </mat-card-header>
@@ -14,6 +127,16 @@
     </mat-card-content>
 </mat-card>
 
+@defer (on hover; on interaction(showComments)) {
+  <app-article-comments />
+} @placeholder ( ;minimum 1s) {
+  <p>Placeholder for comments</p>
+} @loading (minimum 1s; after 500ms) {
+  <p>Loading comments...</p>
+} @error {
+  <p>Failed to load comments</p>
+}
+
 @for (tutorial of tutorials; track $index){
   <mat-card appearance="outlined" class="tutorial-card">
     <mat-card-content [innerHTML]="tutorial.description">

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;

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);
 }

jambotron-ui/src/app/components/tutorials-list/tutorials-list.component.scss

@@ -3,3 +3,4 @@
   max-width: 750px;
   margin: auto;
 }
+

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)