administrator/pas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance footer logos with light and dark variants, improve theme handling in homepage component

Browse Source
This commit is contained in:
Marek Lesko
2025-10-30 18:54:55 +00:00
parent b7cf4ab106
commit 9683b069af
4 changed files with 70 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
Web/src/app/pages/front-pages/footer/footer.component.html
View File

@@ -14,12 +14,18 @@
<div class="col-md-4 text-center">
<img
srcset="https://s3.lesko.me/public/logo/logo-nextgen-1x.png, https://s3.lesko.me/public/logo/logo-nextgen-2x.png 2x"
class="img-fluid" style="max-width: 100%; height: auto;" />
class="img-fluid logodark" style="max-width: 100%; height: auto;" />
<img
srcset="https://s3.lesko.me/public/logo/logo-nextgen-1x-invert.png, https://s3.lesko.me/public/logo/logo-nextgen-2x-invert.png 2x"
class="img-fluid logolight" style="max-width: 100%; height: auto;" />
</div>
<div class="col-md-4 text-center">
<img
srcset="https://s3.lesko.me/public/logo/logo-poo-1x.png, https://s3.lesko.me/public/logo/logo-poo-2x.png 2x"
class="img-fluid" style="max-width: 100%; height: auto;" />
class="img-fluid logodark" style="max-width: 100%; height: auto;" />
<img
srcset="https://s3.lesko.me/public/logo/logo-poo-1x-invert.png, https://s3.lesko.me/public/logo/logo-poo-2x-invert.png 2x"
class="img-fluid logolight" style="max-width: 100%; height: auto;" />
</div>
</div>
</div>

12
Web/src/app/pages/front-pages/homepage-details/homepage-details.component.ts
View File

@@ -32,10 +32,10 @@ import { Router, RouterModule } from '@angular/router';
styleUrl: './homepage-details.component.scss',
})
export class HomepageDetailsComponent {
topcards=topcardsGrid;
topcards = topcardsGrid;
centered = false;
disabled = false;
unbounded = false;
@@ -103,14 +103,14 @@ export class HomepageDetailsComponent {
this.currentIndex.update((i) => i + 1);
}
}
openDialog(showBackground:boolean){
openDialog(showBackground: boolean) {
this.showBackground = showBackground;
const dialogRef = this.dialog.open(TemplateVideoComponent, {
data: {},
width: '1000px',
});
dialogRef.afterClosed().subscribe((result) => {
if (result === false) {
this.showBackground = false; // Reset or take any action
@@ -118,7 +118,7 @@ export class HomepageDetailsComponent {
});
}
onImageClick(path: string) {
this.selectedPath = path;

40
Web/src/app/pages/front-pages/homepage/homepage.component.html
View File

@@ -27,12 +27,40 @@
Kontakty
</button>
</div>
<a mat-flat-button color="primary" class="" [routerLink]="'/authentication/login'">Prihlásenie</a>
} @if(isMobileView){
<button mat-mini-fab class="bg-light" aria-label="Example icon button with a delete icon"
(click)="customizerRight.toggle()">
<i-tabler class="icon-18 d-flex" name="menu"></i-tabler>
</button>
<div class="row">
@if(settings.getOptions().theme=='light'){
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center"
(click)="setlightDark('dark')">
<i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
</button>
}@else{
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center"
(click)="setlightDark('light')">
<i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
</button>
}
<a mat-flat-button color="primary" class="" [routerLink]="'/authentication/login'">Prihlásenie</a>
</div>
}
@if(isMobileView){
<div class="row">
@if(settings.getOptions().theme=='light'){
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center"
(click)="setlightDark('dark')">
<i-tabler class="d-flex icon-22" [name]="'moon'"></i-tabler>
</button>
}@else{
<button mat-icon-button aria-label="lightdark" class="d-flex justify-content-center"
(click)="setlightDark('light')">
<i-tabler class="d-flex icon-22" [name]="'sun'"></i-tabler>
</button>
}
<button mat-mini-fab class="bg-light" aria-label="Example icon button with a delete icon"
(click)="customizerRight.toggle()">
<i-tabler class="icon-18 d-flex" name="menu"></i-tabler>
</button>
</div>
}
</div>
</div>

25
Web/src/app/pages/front-pages/homepage/homepage.component.ts
View File

@@ -1,11 +1,12 @@
import { MediaMatcher } from '@angular/cdk/layout';
import { CommonModule } from '@angular/common';
import { Component, HostListener, inject, ViewChild } from '@angular/core';
import { Component, effect, HostListener, inject, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { ActivatedRoute, Router, RouterLink, RouterOutlet } from '@angular/router';
import { IconModule } from '../../../icon/icon.module';
import { BrandingComponent } from '../../../layouts/full/vertical/sidebar/branding.component';
import { MaterialModule } from '../../../material.module';
import { CoreService } from '../../../services/core.service';
@Component({
selector: 'app-homepage',
@@ -23,16 +24,34 @@ export class HomepageComponent {
private mediaMatcher: MediaQueryList = matchMedia(`(max-width: 1199px)`);
showBackToTop: boolean = false;
isTopbarFixed: boolean = false;
constructor(private route: ActivatedRoute) {
constructor(private route: ActivatedRoute, protected settings: CoreService) {
const media = inject(MediaMatcher);
this.mobileQuery = media.matchMedia('(max-width: 1199px)');
this.isMobileView = this.mobileQuery.matches;
this.mobileQuery.addEventListener('change', (e) => {
this.isMobileView = e.matches;
this.closeSidenavIfNeeded();
});
effect(() => {
const options = this.settings.getOptionsSignal()();
this.setTheme(options.theme);
});
}
setlightDark(theme: string) {
this.settings.setOptions({ theme: theme });
}
setTheme(theme: string) {
const html = document.querySelector('html')!;
if (theme === 'dark') {
html.classList.add('dark-theme');
html.classList.remove('light-theme');
} else {
html.classList.remove('dark-theme');
html.classList.add('light-theme');
}
}
close() {