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'
})
export class AppComponent {
title = 'ontvlambaar';
theme = "light"
title = 'Ontvlambaar';
theme = "dark"
private detectColorScheme(): void {
//local storage is used to override OS theme settings
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";
}
this.theme = localStorage.getItem("theme") ?? 'dark';
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>
</div>
<div class="barcode">
<span class="barcode">lotte&#64;ontvlambaar.be</span>
</div>
<img src="assets/roze_barcode_outlined_SVG.svg" class="only-on-dark" />
<img src="assets/zwart_barcode_outlined_SVG.svg" class="only-on-light" />

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

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

18
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';
@Component({
@@ -14,6 +14,7 @@ export class ToggleComponent {
toggleOn = output<boolean>();
toggleValue = input<boolean>();
private isChanging: WritableSignal<boolean> = signal<boolean>(false);
isDarkMode: any = signal(this.toggleValue());
@@ -36,7 +37,10 @@ export class ToggleComponent {
}
public themeChange(): void {
this.playForward();
if (!this.isChanging()) {
this.isChanging.set(true);
this.playForward();
}
}
public playForward(): void {
@@ -49,11 +53,19 @@ export class ToggleComponent {
this.darkLottie.setFrame(0);
}
const newValue = !this.isDarkMode();
setTimeout(() => {
this.toggleOn.emit(newValue);
}, this.isDarkMode() ? 600 : 350);
setTimeout(() => {
this.isDarkMode.set(!this.isDarkMode());
this.toggleOn.emit(this.isDarkMode());
this.darkLottie.pause();
this.lightLottie.pause();
this.isChanging.set(false);
}, 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.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&family=Libre+Barcode+128+Text&display=swap" rel="stylesheet">
</head>
<body>
<app-root></app-root>