andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Simplify names & improve HTML semantics

Browse source
This commit is contained in:
Andras Schmelczer 2022-09-25 16:20:40 +02:00
parent 674cf4223b
commit ec804f2319
No known key found for this signature in database
GPG key ID: 0EA1BC97D0AB076E
31 changed files with 84 additions and 120 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/page/header/header.scss
View file

@ -50,7 +50,8 @@
$img-size: 190px;
width: var(--body-width);
margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto 0 auto;
margin: calc(#{var(--normal-margin)} + #{$img-size} * 1 / 3) auto var(--large-margin)
auto;
position: relative;
border-radius: var(--border-radius);

6
src/page/header/header.ts
View file

@ -3,9 +3,9 @@ import { ResponsiveImage } from '../../types/responsive-image';
import { Image } from '../image-viewer/image/image.html';
import { PageElement } from '../page-element';
import { generate } from './header.html';
import { PageThemeSwitcher } from './theme-switcher/theme-switcher';
import { ThemeSwitcher } from './theme-switcher/theme-switcher';
export class PageHeader extends PageElement {
export class Header extends PageElement {
public constructor({
name,
image,
@ -30,6 +30,6 @@ export class PageHeader extends PageElement {
})
)
);
this.attachElement(new PageThemeSwitcher());
this.attachElement(new ThemeSwitcher());
}
}

13
src/page/header/theme-switcher/theme-switcher.ts
View file

@ -2,13 +2,13 @@ import { createElement } from '../../../helper/create-element';
import { PageElement } from '../../page-element';
import { generate } from './theme-switcher.html';
export class PageThemeSwitcher extends PageElement {
export class ThemeSwitcher extends PageElement {
private static readonly localStorageKey = 'dark-mode';
public constructor() {
super(createElement(generate()));
const storedIsDark = PageThemeSwitcher.loadFromLocalStorage();
const storedIsDark = ThemeSwitcher.loadFromLocalStorage();
const isDark = storedIsDark ?? isSystemLevelDarkModeEnabled();
if (isDark) {
@ -31,19 +31,16 @@ export class PageThemeSwitcher extends PageElement {
turnOnLightMode();
}
PageThemeSwitcher.saveToLocalStorage(isDark);
ThemeSwitcher.saveToLocalStorage(isDark);
}
private static saveToLocalStorage(darkModeEnabled: boolean) {
localStorage?.setItem(
PageThemeSwitcher.localStorageKey,
JSON.stringify(darkModeEnabled)
);
localStorage?.setItem(ThemeSwitcher.localStorageKey, JSON.stringify(darkModeEnabled));
}
private static loadFromLocalStorage(): boolean | null {
try {
return JSON.parse(localStorage!.getItem(PageThemeSwitcher.localStorageKey)!);
return JSON.parse(localStorage!.getItem(ThemeSwitcher.localStorageKey)!);
} catch {
return null;
}