Merge pull request #37 from chytanka/develop

Refines UI styling and enhances viewer logic

Author: rodzyk

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

@@ -16,8 +16,8 @@
         <h1>🤨</h1>
         <p>{{ error }}</p>
         <footer>
-            <a class="button mediun" [routerLink]="'/'">🏠</a>
-            <button autofocus class="button large primary" (click)="onRefreshData()">{{lang.ph().tryAgain}}</button>
+            <a class="button mediun border" [routerLink]="'/'">🏠</a>
+            <button autofocus class="button border large primary" (click)="onRefreshData()">{{lang.ph().tryAgain}}</button>
         </footer>
     </div>
 </div>

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

@@ -1,30 +1,44 @@
 :host {
     display: grid;
     min-height: 100dvh;
+    --c: oklch(0.553 0.2211 20.3);
 }
 
 :host:has(.error-message) {
-    background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 40%, rgba(207, 19, 82, .1) 100%);
+    background: oklch(from var(--c) l c h / .1);
 }
 
 .error-message {
+    
+    --shadow-color: oklch(from var(--c) var(--avarage-l-2) c h);
+    --shadow-2: 2px 2px var(--surface), var(--shadow-distance-2) var(--shadow-color);
+    
     display: grid;
     place-items: center;
     gap: 2ch;
     min-width: min(50vw, 50vh);
     margin: auto;
-    // aspect-ratio: 3/4;
     border-radius: 1ch;
     margin-inline: auto;
     padding: 2rem;
     text-wrap: balance;
     text-align: center;
-    border: 1px solid;
-    border-color: rgba(207, 19, 82, .4);
-    background-color: rgba(207, 19, 82, .05);
+    border: var(--border-size) solid;
+    border-color: var(--c);
+
+    --gl: radial-gradient(circle 1px at 0px 0px, var(--c) 1px, transparent 0);
+    --bg-1: var(--gl) 0px 0px / 8px 8px;
+    background: var(--bg-1);
+    box-shadow: var(--shadow-2);
+
+    h1 {
+        font-size: clamp(5.5rem, 4vw, 5rem);
+        line-height: 1;
+    }
 
     p {
         margin: 0;
+        font-family: 'Courier New', Courier, monospace;
         font-size: clamp(1rem, 1.5vw, 2rem);
     }
 

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

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

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

@@ -35,7 +35,7 @@
     }
 
     @media (prefers-color-scheme: light) {
-        background: #eceff2;
+        background: var(--surface-avarage);
 
         &.pride {
             --pride-red: oklch(from #e40303 0.96 0.0128 h);

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

@@ -10,30 +10,22 @@
 }
 
 app-text-embracer {
-    --mono-color-1: #4c93c8;
-    --mono-color-2: #002741;
-    --border-color: var(--mono-color-1);
-    --border-width: 2px;
-    color: #ffd60a;
-    --shc: #166496;
+    --border-width: calc(var(--border-size));
+    --frame-color: var(--border-color);
+    --dot-color: var(--border-color);
+    color: var(--accent);
+
     font-family: 'Troubleside', sans-serif;
     font-weight: 900;
     font-size: clamp(1rem, 8vw, 5rem);
     justify-content: center;
-    -webkit-text-stroke: var(--mono-color-2) var(--border-width);
-    --dot-color: var(--mono-color-1);
-    paint-order: stroke fill;
-
-    @media (prefers-color-scheme: light) {
-        --mono-color-1: #166496;
-        --mono-color-2: #eceff2;
-        --shc: var(--mono-color-1);
-        color: var(--mono-color-1);
-        -webkit-text-stroke: var(--mono-color-1) var(--border-width);
 
-        color: var(--mono-color-2);
+    ::ng-deep>span {
+        box-shadow: var(--shadow-1);
     }
 
+    @media (prefers-color-scheme: light) {}
+
     @media (max-width: 1080px) {
         font-size: clamp(1rem, 7vw, 8rem);
     }
@@ -167,7 +159,7 @@ app-file-change ::ng-deep .button {
     // background: unset;
 
     text-overflow: ellipsis;
-max-width: 90vw;
+    max-width: 90vw;
     overflow: hidden;
     white-space: nowrap;
 }
@@ -183,10 +175,10 @@ textarea {
     width: 100%;
     transition: all var(--t) cubic-bezier(0.075, 0.82, 0.165, 1);
     border-radius: .5ch;
-    border: 2px solid #166496;
-    box-shadow: var(--flat-shadow-medium);
-    border: 0;
-    // background-color: #16649680;
+    border: var(--border-size) solid var(--border-color);
+    box-shadow: var(--shadow-1);
+    // border: 0;
+    background-color: #16649680;
     color: #ffd60a;
 
     @media (prefers-color-scheme: light) {
@@ -202,12 +194,8 @@ textarea {
 }
 
 input[type=url]::placeholder {
-    color: #ffd60a;
+    color: var(--accent);
     opacity: 0.6;
-
-    @media (prefers-color-scheme: light) {
-        color: #166496;
-    }
 }
 
 .favicon {
@@ -259,21 +247,17 @@ input[type=url]::placeholder {
     display: flex;
     gap: 1ch;
     align-items: center;
-    --dot-color: #166496;
-    border: 1px solid var(--dot-color);
+    --dot-color: var(--border-color);
+    border: var(--border-size) solid var(--dot-color);
     --stroke: #002741;
-    --bg-1: var(--gl) 0px 0px / 4px 4px;
-    --bg-2: var(--gl) 0px 0px / 3px 3px, var(--gl) 1.5px 1.5px / 3px 3px;
     --gl: radial-gradient(circle 1px at 0px 0px, var(--dot-color) 1px, transparent 0);
+    --bg-1: var(--gl) 0px 0px / 8px 8px;
+    --bg-2: var(--gl) 0px 0px / 4px 4px, var(--gl) 1.5px 1.5px / 4px 4px;
     background: var(--bg-1);
 
     text-transform: uppercase;
     font-weight: bold;
-    // -webkit-text-stroke: 0.5ch var(--stroke);
-    // paint-order: stroke fill;
-
-    box-shadow: var(--flat-shadow-high);
-
+    box-shadow: var(--shadow-2);
 
     @media (prefers-color-scheme: light) {
         --dot-color: #166496;
@@ -283,8 +267,11 @@ input[type=url]::placeholder {
 
     &:hover,
     &:focus {
-        --dot-color: #4c93c8;
         background: var(--bg-2);
+        color: var(--accent);
+    }
 
+    &:active {
+        box-shadow: 0 0 transparent;
     }
 }

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

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

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

@@ -10,7 +10,7 @@ main {
 }
 
 .input-group {
-    box-shadow: var(--flat-shadow-medium);
+    box-shadow: var(--shadow-1);
 }
 
 textarea {

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

@@ -21,7 +21,6 @@ import { isPlatformBrowser } from '@angular/common';
     --border-color: var(--mono-color-1);
     --border-width: 2px;
     color: #ffd60a;
-    --shc: #166496;
     font-family: 'Troubleside', sans-serif;
     font-weight: 900;
     font-size: clamp(1rem, 16vw, 10rem);
@@ -33,7 +32,6 @@ import { isPlatformBrowser } from '@angular/common';
     @media (prefers-color-scheme: light) {
         --mono-color-1: #166496;
         --mono-color-2: #eceff2;
-        --shc: var(--mono-color-1);
         color: var(--mono-color-1);
         -webkit-text-stroke: var(--mono-color-1) var(--border-width);
 

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

@@ -0,0 +1,22 @@
+import { Directive, ElementRef, Input } from '@angular/core';
+
+@Directive({
+  selector: '[imgMeta]',
+  standalone: false
+})
+export class ImgMetaDirective {
+
+  constructor(private el: ElementRef<HTMLImageElement>) { }
+
+  @Input('imgMeta') set meta(value: { src: string; alt: string } | null) {
+    if (!value) return;
+
+    if (value.src) {
+      this.el.nativeElement.src = value.src;
+    }
+    if (value.alt) {
+      this.el.nativeElement.alt = value.alt;
+    }
+  }
+
+}

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

@@ -0,0 +1,21 @@
+import { Directive, ElementRef, Input, Renderer2 } from '@angular/core';
+
+@Directive({
+  selector: '[newTab]',
+  standalone: false
+})
+export class NewTabDirective {
+
+  @Input('newTab') href!: string;
+
+  constructor(private el: ElementRef<HTMLElement>, private renderer: Renderer2) {}
+
+  ngOnChanges(): void {
+    if (!this.href) return;
+
+    this.renderer.setAttribute(this.el.nativeElement, 'href', this.href);
+    this.renderer.setAttribute(this.el.nativeElement, 'target', '_blank');
+    this.renderer.setAttribute(this.el.nativeElement, 'rel', 'noopener noreferrer');
+  }
+
+}