Liosha/jambotron
1
0
Fork 0
Code Issues 1 Pull Requests Actions 3 Packages Projects 1 Releases Wiki Activity

Small UI fixing

Browse Source
This commit is contained in:
liosha84
2025-06-16 15:30:31 +03:00
parent 7f270ced9d
commit 426717cb99
10 changed files with 242 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
jambotron-ui/package-lock.json
Generated
+53
View File
@@ -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
+2
View File
@@ -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
+8 -2
View File
@@ -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
+14 -1
View File
@@ -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
+26 -2
View File
@@ -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
+129 -6
View File
@@ -1,10 +1,123 @@
<div class="container">
<header class="jumbotron">
<p>{{ content }}</p>
</header>
</div>
<p-splitter [style]="{ height: '300px' }" styleClass="mb-8" layout="vertical">
<ng-template #panel>
<div class="flex items-center justify-center h-full">Panel 1</div>
</ng-template>
<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
View File
@@ -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
+6 -2
View File
@@ -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
+2 -1
View File
@@ -2,4 +2,5 @@
text-align: left;
max-width: 750px;
margin: auto;
}
}
jambotron-ui/src/main.ts
+1
View File
@@ -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)