Skip to content

Commit 73b7a86

Browse files
rodzykrodzyk
committed
Refines UI styling and enhances viewer logic
1 parent c4d7fa8 commit 73b7a86

34 files changed

+475
-243
lines changed

‎src/app/@site-modules/@common-read/ui/common-read/common-read.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
<h1>🤨</h1>
1717
<p>{{ error }}</p>
1818
<footer>
19-
<a class="button mediun" [routerLink]="'/'">🏠</a>
20-
<button autofocus class="button large primary" (click)="onRefreshData()">{{lang.ph().tryAgain}}</button>
19+
<a class="button mediun border" [routerLink]="'/'">🏠</a>
20+
<button autofocus class="button border large primary" (click)="onRefreshData()">{{lang.ph().tryAgain}}</button>
2121
</footer>
2222
</div>
2323
</div>

‎src/app/@site-modules/@common-read/ui/common-read/common-read.component.scss

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,44 @@
11
:host {
22
display: grid;
33
min-height: 100dvh;
4+
--c: oklch(0.553 0.2211 20.3);
45
}
56

67
:host:has(.error-message) {
7-
background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 40%, rgba(207, 19, 82, .1) 100%);
8+
background: oklch(from var(--c) l c h / .1);
89
}
910

1011
.error-message {
12+
13+
--shadow-color: oklch(from var(--c) var(--avarage-l-2) c h);
14+
--shadow-2: 2px 2px var(--surface), var(--shadow-distance-2) var(--shadow-color);
15+
1116
display: grid;
1217
place-items: center;
1318
gap: 2ch;
1419
min-width: min(50vw, 50vh);
1520
margin: auto;
16-
// aspect-ratio: 3/4;
1721
border-radius: 1ch;
1822
margin-inline: auto;
1923
padding: 2rem;
2024
text-wrap: balance;
2125
text-align: center;
22-
border: 1px solid;
23-
border-color: rgba(207, 19, 82, .4);
24-
background-color: rgba(207, 19, 82, .05);
26+
border: var(--border-size) solid;
27+
border-color: var(--c);
28+
29+
--gl: radial-gradient(circle 1px at 0px 0px, var(--c) 1px, transparent 0);
30+
--bg-1: var(--gl) 0px 0px / 8px 8px;
31+
background: var(--bg-1);
32+
box-shadow: var(--shadow-2);
33+
34+
h1 {
35+
font-size: clamp(5.5rem, 4vw, 5rem);
36+
line-height: 1;
37+
}
2538

2639
p {
2740
margin: 0;
41+
font-family: 'Courier New', Courier, monospace;
2842
font-size: clamp(1rem, 1.5vw, 2rem);
2943
}
3044

‎src/app/@site-modules/reddit/reddit-shell.component.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ import { REDDIT_PATH } from '../../app-routing.module';
99
imports: [CommonReadModule],
1010
selector: 'app-reddit-shell',
1111
template: `<app-common-read [episode$]="episode$" [error$]="error$" [loading$]="loading$" (refreshData)="refreshData()" [playlist]="playlistService.playlist()" [playlistLink]="playlistLink()" [currentPlaylistItem]="currentPlItem()" >
12-
12+
<a ngProjectAs="source-logo" href="https://reddit.com" target="_blank" rel="noopener noreferrer" style="display: flex; gap: 1ch; ">
13+
<img style="max-width: 40px;" src="/assets/logos/reddit-logo.svg" alt="MangaDex logo">
14+
</a>
1315
<p>{{lang.ph().imagesVia}}<a href="https://reddit.com" target="_blank" rel="noopener noreferrer">Reddit</a>
1416
API.
1517
{{lang.ph().thanks}}<br>{{lang.ph().detalisCopy}}</p>

‎src/app/link-parser/link-parser/link-parser.component.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
}
3636

3737
@media (prefers-color-scheme: light) {
38-
background: #eceff2;
38+
background: var(--surface-avarage);
3939

4040
&.pride {
4141
--pride-red: oklch(from #e40303 0.96 0.0128 h);

‎src/app/link-parser/ui/parser-form/parser-form.component.scss

Lines changed: 24 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -10,30 +10,22 @@
1010
}
1111

1212
app-text-embracer {
13-
--mono-color-1: #4c93c8;
14-
--mono-color-2: #002741;
15-
--border-color: var(--mono-color-1);
16-
--border-width: 2px;
17-
color: #ffd60a;
18-
--shc: #166496;
13+
--border-width: calc(var(--border-size));
14+
--frame-color: var(--border-color);
15+
--dot-color: var(--border-color);
16+
color: var(--accent);
17+
1918
font-family: 'Troubleside', sans-serif;
2019
font-weight: 900;
2120
font-size: clamp(1rem, 8vw, 5rem);
2221
justify-content: center;
23-
-webkit-text-stroke: var(--mono-color-2) var(--border-width);
24-
--dot-color: var(--mono-color-1);
25-
paint-order: stroke fill;
26-
27-
@media (prefers-color-scheme: light) {
28-
--mono-color-1: #166496;
29-
--mono-color-2: #eceff2;
30-
--shc: var(--mono-color-1);
31-
color: var(--mono-color-1);
32-
-webkit-text-stroke: var(--mono-color-1) var(--border-width);
3322

34-
color: var(--mono-color-2);
23+
::ng-deep>span {
24+
box-shadow: var(--shadow-1);
3525
}
3626

27+
@media (prefers-color-scheme: light) {}
28+
3729
@media (max-width: 1080px) {
3830
font-size: clamp(1rem, 7vw, 8rem);
3931
}
@@ -167,7 +159,7 @@ app-file-change ::ng-deep .button {
167159
// background: unset;
168160

169161
text-overflow: ellipsis;
170-
max-width: 90vw;
162+
max-width: 90vw;
171163
overflow: hidden;
172164
white-space: nowrap;
173165
}
@@ -183,10 +175,10 @@ textarea {
183175
width: 100%;
184176
transition: all var(--t) cubic-bezier(0.075, 0.82, 0.165, 1);
185177
border-radius: .5ch;
186-
border: 2px solid #166496;
187-
box-shadow: var(--flat-shadow-medium);
188-
border: 0;
189-
// background-color: #16649680;
178+
border: var(--border-size) solid var(--border-color);
179+
box-shadow: var(--shadow-1);
180+
// border: 0;
181+
background-color: #16649680;
190182
color: #ffd60a;
191183

192184
@media (prefers-color-scheme: light) {
@@ -202,12 +194,8 @@ textarea {
202194
}
203195

204196
input[type=url]::placeholder {
205-
color: #ffd60a;
197+
color: var(--accent);
206198
opacity: 0.6;
207-
208-
@media (prefers-color-scheme: light) {
209-
color: #166496;
210-
}
211199
}
212200

213201
.favicon {
@@ -259,21 +247,17 @@ input[type=url]::placeholder {
259247
display: flex;
260248
gap: 1ch;
261249
align-items: center;
262-
--dot-color: #166496;
263-
border: 1px solid var(--dot-color);
250+
--dot-color: var(--border-color);
251+
border: var(--border-size) solid var(--dot-color);
264252
--stroke: #002741;
265-
--bg-1: var(--gl) 0px 0px / 4px 4px;
266-
--bg-2: var(--gl) 0px 0px / 3px 3px, var(--gl) 1.5px 1.5px / 3px 3px;
267253
--gl: radial-gradient(circle 1px at 0px 0px, var(--dot-color) 1px, transparent 0);
254+
--bg-1: var(--gl) 0px 0px / 8px 8px;
255+
--bg-2: var(--gl) 0px 0px / 4px 4px, var(--gl) 1.5px 1.5px / 4px 4px;
268256
background: var(--bg-1);
269257

270258
text-transform: uppercase;
271259
font-weight: bold;
272-
// -webkit-text-stroke: 0.5ch var(--stroke);
273-
// paint-order: stroke fill;
274-
275-
box-shadow: var(--flat-shadow-high);
276-
260+
box-shadow: var(--shadow-2);
277261

278262
@media (prefers-color-scheme: light) {
279263
--dot-color: #166496;
@@ -283,8 +267,11 @@ input[type=url]::placeholder {
283267

284268
&:hover,
285269
&:focus {
286-
--dot-color: #4c93c8;
287270
background: var(--bg-2);
271+
color: var(--accent);
272+
}
288273

274+
&:active {
275+
box-shadow: 0 0 transparent;
289276
}
290277
}

‎src/app/list/list-shell/list-shell.component.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<main style="padding-top: 2rem;">
22
<section>
33
<h4>Вставте підтримувані посилання у поле нижче 🔗⬇️</h4>
4-
<textarea class="input" style="width: 100%; height: 8lh; box-shadow: var(--flat-shadow-medium);"
4+
<textarea class="input" style="width: 100%; height: 8lh; box-shadow: var(--shadow-1)"
55
placeholder="Вставте сюди підтримувані посилання на епізод через кому пробіл, чи кожне посилання з нового рядка:
66
77
https://telegra.ph/YAk-kozaki-kulіsh-varili-06-28
@@ -14,7 +14,7 @@ <h4>Відредагуйте назви (за бажанням) ✏️🔢📝</
1414
<div style="display: grid; gap: 1ch">
1515
@for (item of outputValue(); track $index) {
1616
<article
17-
style="box-shadow: var(--flat-shadow-medium); border: 1px solid #8884; padding: .5ch; border-radius: .5ch;">
17+
style="box-shadow: var(--shadow-1); border: 1px solid #8884; padding: .5ch; border-radius: .5ch;">
1818
<div class="input-group">
1919
<input style="width: 100%;" placeholder="Введіть назву епізоду (не обов'язково)" type="text"
2020
[(ngModel)]="item.title"> <button class="button"

‎src/app/list/list-shell/list-shell.component.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ main {
1010
}
1111

1212
.input-group {
13-
box-shadow: var(--flat-shadow-medium);
13+
box-shadow: var(--shadow-1);
1414
}
1515

1616
textarea {

‎src/app/page-not-found.component.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import { isPlatformBrowser } from '@angular/common';
2121
--border-color: var(--mono-color-1);
2222
--border-width: 2px;
2323
color: #ffd60a;
24-
--shc: #166496;
2524
font-family: 'Troubleside', sans-serif;
2625
font-weight: 900;
2726
font-size: clamp(1rem, 16vw, 10rem);
@@ -33,7 +32,6 @@ import { isPlatformBrowser } from '@angular/common';
3332
@media (prefers-color-scheme: light) {
3433
--mono-color-1: #166496;
3534
--mono-color-2: #eceff2;
36-
--shc: var(--mono-color-1);
3735
color: var(--mono-color-1);
3836
-webkit-text-stroke: var(--mono-color-1) var(--border-width);
3937

‎src/app/shared/directives/img-meta.directive.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Directive, ElementRef, Input } from '@angular/core';
2+
3+
@Directive({
4+
selector: '[imgMeta]',
5+
standalone: false
6+
})
7+
export class ImgMetaDirective {
8+
9+
constructor(private el: ElementRef<HTMLImageElement>) { }
10+
11+
@Input('imgMeta') set meta(value: { src: string; alt: string } | null) {
12+
if (!value) return;
13+
14+
if (value.src) {
15+
this.el.nativeElement.src = value.src;
16+
}
17+
if (value.alt) {
18+
this.el.nativeElement.alt = value.alt;
19+
}
20+
}
21+
22+
}

‎src/app/shared/directives/new-tab.directive.ts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
2+
3+
@Directive({
4+
selector: '[newTab]',
5+
standalone: false
6+
})
7+
export class NewTabDirective {
8+
9+
@Input('newTab') href!: string;
10+
11+
constructor(private el: ElementRef<HTMLElement>, private renderer: Renderer2) {}
12+
13+
ngOnChanges(): void {
14+
if (!this.href) return;
15+
16+
this.renderer.setAttribute(this.el.nativeElement, 'href', this.href);
17+
this.renderer.setAttribute(this.el.nativeElement, 'target', '_blank');
18+
this.renderer.setAttribute(this.el.nativeElement, 'rel', 'noopener noreferrer');
19+
}
20+
21+
}

0 commit comments

Comments
 (0)