CptArn/ontvlambaar
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added feedback
All checks were successful
Copy Files to Samba Share dev / Copy Files (push) Successful in 23s
Details

Browse Source
This commit is contained in:
Arne Vlaeminck
2024-11-07 17:12:50 +01:00
parent 544a706564
commit 4090e5bffa
9 changed files with 26 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/flame-to-dark.lottie
View File

Binary file not shown.

BIN
public/assets/flame-to-light.lottie
View File

Binary file not shown.

1
public/assets/roze_barcode_outlined_SVG.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

1
public/assets/zwart_barcode_outlined_SVG.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 13 KiB

15
src/app/app.component.ts
View File

@@ -15,20 +15,11 @@ import { AboutComponent } from "./about/about.component";
styleUrl: './app.component.scss' styleUrl: './app.component.scss'
}) })
export class AppComponent { export class AppComponent {
title = 'ontvlambaar'; title = 'Ontvlambaar';
theme = "light" theme = "dark"
private detectColorScheme(): void { private detectColorScheme(): void {
//local storage is used to override OS theme settings this.theme = localStorage.getItem("theme") ?? 'dark';
if(localStorage.getItem("theme")){
if(localStorage.getItem("theme") == "dark"){
this.theme = "dark";
}
} else if(window.matchMedia("(prefers-color-scheme: dark)").matches) {
//OS theme setting detected as dark
this.theme = "dark";
}
document.documentElement.setAttribute("data-theme", this.theme); document.documentElement.setAttribute("data-theme", this.theme);
} }

5
src/app/footer/footer.component.html
View File

@@ -5,6 +5,5 @@
<span class="btw">BTW BE0673 769 126</span> <span class="btw">BTW BE0673 769 126</span>
</div> </div>
<div class="barcode"> <img src="assets/roze_barcode_outlined_SVG.svg" class="only-on-dark" />
<span class="barcode">lotte&#64;ontvlambaar.be</span> <img src="assets/zwart_barcode_outlined_SVG.svg" class="only-on-light" />
</div>

11
src/app/footer/footer.component.scss
View File

@@ -30,9 +30,8 @@
} }
} }
.barcode { img {
font-family: 'Libre Barcode 128 Text'; max-width: 60%;
font-size: 5rem;
} }
@media only screen and (max-width: $small-screen) { @media only screen and (max-width: $small-screen) {
@@ -44,9 +43,7 @@
margin-bottom: 2rem; margin-bottom: 2rem;
} }
.barcode { img {
font-size: 3rem; max-width: 100%;;
overflow: hidden;
text-overflow: ellipsis;
} }
} }

16
src/app/toggle/toggle.component.ts
View File

@@ -1,4 +1,4 @@
import { Component, input, output, signal } from '@angular/core'; import { Component, input, output, signal, WritableSignal } from '@angular/core';
import { DotLottie } from '@lottiefiles/dotlottie-web'; import { DotLottie } from '@lottiefiles/dotlottie-web';
@Component({ @Component({
@@ -14,6 +14,7 @@ export class ToggleComponent {
toggleOn = output<boolean>(); toggleOn = output<boolean>();
toggleValue = input<boolean>(); toggleValue = input<boolean>();
private isChanging: WritableSignal<boolean> = signal<boolean>(false);
isDarkMode: any = signal(this.toggleValue()); isDarkMode: any = signal(this.toggleValue());
@@ -36,8 +37,11 @@ export class ToggleComponent {
} }
public themeChange(): void { public themeChange(): void {
if (!this.isChanging()) {
this.isChanging.set(true);
this.playForward(); this.playForward();
} }
}
public playForward(): void { public playForward(): void {
if (this.isDarkMode()) { if (this.isDarkMode()) {
@@ -49,11 +53,19 @@ export class ToggleComponent {
this.darkLottie.setFrame(0); this.darkLottie.setFrame(0);
} }
const newValue = !this.isDarkMode();
setTimeout(() => {
this.toggleOn.emit(newValue);
}, this.isDarkMode() ? 600 : 350);
setTimeout(() => { setTimeout(() => {
this.isDarkMode.set(!this.isDarkMode()); this.isDarkMode.set(!this.isDarkMode());
this.toggleOn.emit(this.isDarkMode());
this.darkLottie.pause(); this.darkLottie.pause();
this.lightLottie.pause(); this.lightLottie.pause();
this.isChanging.set(false);
}, this.isDarkMode() ? 600 : 400); }, this.isDarkMode() ? 600 : 400);
} }
} }

2
src/index.html
View File

@@ -12,8 +12,6 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@300&family=Libre+Barcode+128+Text&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<app-root></app-root> <app-root></app-root>