andras/life-towers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

not bad

Browse source
This commit is contained in:
Andras Schmelczer 2026-05-30 14:33:39 +01:00
parent e2a60e71a3
commit 003f38ea60
36 changed files with 1543 additions and 1287 deletions
Download patch file Download diff file Expand all files Collapse all files

69
frontend/src/app/components/modal/settings.component.ts
View file

@ -26,7 +26,7 @@ const UUIDV4_RE =
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
<div class="card">
<button class="exit" type="button" (click)="close.emit()" aria-label="Close">✕</button>
<button class="exit" type="button" (click)="close.emit()" aria-label="Close"></button>
<h2>Settings</h2>
@if (page()) {
@ -43,19 +43,23 @@ const UUIDV4_RE =
aria-label="Page name"
/>
<lt-toggle
[checked]="hideCreateTowerButton()"
(checkedChange)="onHideCreateTowerButtonChange($event)"
offLabel="Show add-tower button"
onLabel="Hide add-tower button"
/>
<div class="toggle-list">
<lt-toggle
class="setting-toggle"
[checked]="hideCreateTowerButton()"
(checkedChange)="onHideCreateTowerButtonChange($event)"
offLabel="Show add-tower button"
onLabel="Hide add-tower button"
/>
<lt-toggle
[checked]="keepTasksOpen()"
(checkedChange)="onKeepTasksOpenChange($event)"
offLabel="Show tasks collapsed"
onLabel="Keep tasks open"
/>
<lt-toggle
class="setting-toggle"
[checked]="keepTasksOpen()"
(checkedChange)="onKeepTasksOpenChange($event)"
offLabel="Show tasks collapsed"
onLabel="Keep tasks open"
/>
</div>
<button class="danger" type="button" (click)="deletePage.emit()">
Delete this page
@ -68,7 +72,7 @@ const UUIDV4_RE =
<section class="account-section">
<h3>Account</h3>
<p class="hint">Your token (keep it secret — it IS your account)</p>
<p class="hint">Copy this token to another device to permanently sync your progress</p>
<div class="token-row">
<input
type="text"
@ -127,17 +131,19 @@ const UUIDV4_RE =
top: var(--medium-padding);
right: var(--medium-padding);
@include exit();
font-size: 0;
}
h2 {
margin: 0 0 var(--large-padding) 0;
padding: 0 36px;
line-height: 1.3;
text-align: center;
}
h3 {
margin: 0 0 var(--medium-padding) 0;
font-size: var(--large-font-size);
font-size: var(--medium-font-size);
line-height: 1.35;
}
section {
@ -155,8 +161,37 @@ const UUIDV4_RE =
margin: var(--large-padding) 0;
}
input[type='text'],
button:not(.exit) {
font-size: var(--medium-font-size);
line-height: 1.35;
}
.toggle-list {
display: flex;
flex-direction: column;
gap: var(--small-padding);
}
lt-toggle.setting-toggle {
--toggle-label-width: 145px;
box-sizing: border-box;
justify-content: center;
width: 100%;
min-height: 52px;
padding: var(--small-padding);
border-radius: var(--border-radius);
background: rgba($text-color, 0.035);
@media (max-width: $mobile-width) {
min-height: 48px;
}
}
.hint {
font-size: var(--small-font-size);
font-size: var(--medium-font-size);
line-height: 1.35;
color: rgba($text-color, 0.7);
margin: 0 0 4px 0;
}