Skip to content

Commit

Permalink
Merge pull request #7 from chytanka/develop
Browse files Browse the repository at this point in the history 
Develop
  • Loading branch information
@rodzyk
rodzyk authored May 4, 2024
2 parents 2bcc3b3 + 1a1a3a8 commit 6248d25
Show file tree
Hide file tree
Showing 31 changed files with 538 additions and 201 deletions.
17 changes: 16 additions & 1 deletion src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { Component, WritableSignal, signal } from '@angular/core';
import { Component, HostListener, WritableSignal, signal } from '@angular/core';
import { LangService } from './shared/data-access/lang.service';
import { ActivatedRoute } from '@angular/router';

const SCALE_GAP = 128;

@Component({
selector: 'app-root',
template: `<router-outlet></router-outlet>`
Expand All @@ -13,6 +15,8 @@ export class AppComponent {
}

ngOnInit() {
this.initScaleDifference();

this.route.pathFromRoot[0].queryParams.subscribe(q => {
const l = q['lang']
if (l && this.lang.manifests.has(l)) {
Expand All @@ -21,4 +25,15 @@ export class AppComponent {
}
})
}

@HostListener('window:resize')
initScaleDifference() {
const w = document.documentElement.clientWidth;
const h = document.documentElement.clientHeight;
const scalex = 1 - ((w - SCALE_GAP) / w)
const scaley = 1 - ((h - SCALE_GAP) / h)

document.documentElement.style.setProperty('--scale-diff-x', scalex.toString())
document.documentElement.style.setProperty('--scale-diff-y', scaley.toString())
}
}
22 changes: 22 additions & 0 deletions src/app/link-parser/data-access/link-parser-settings.service.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { Injectable, WritableSignal, signal } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class LinkParserSettingsService {
autoPasteLink: WritableSignal<boolean> = signal(false);

constructor() {
this.initAutoPasteLink()
}

initAutoPasteLink() {
const n = Boolean(localStorage.getItem('autoPasteLink') == 'true') ?? false;
this.autoPasteLink.set(n);
}

setAutoPasteLink(n: boolean) {
this.autoPasteLink.set(n);
localStorage.setItem('autoPasteLink', n.toString())
}
}
4 changes: 3 additions & 1 deletion src/app/link-parser/link-parser.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,14 @@ import { LinkParserComponent } from './link-parser/link-parser.component';
import { SharedModule } from '../shared/shared.module';
import { FormsModule } from '@angular/forms';
import { FaqComponent } from './ui/faq/faq.component';
import { SettingsComponent } from './ui/settings/settings.component';


@NgModule({
declarations: [
LinkParserComponent,
FaqComponent
FaqComponent,
SettingsComponent
],
imports: [
CommonModule,
Expand Down
57 changes: 26 additions & 31 deletions src/app/link-parser/link-parser/link-parser.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,18 @@
<div>
@defer{ <app-text-embracer [text]="lang.phrases.shortTitle" /> }
<form (submit)="onSubmit()">
<input name="chtnk_url" type="url" required autofocus [placeholder]="lang.phrases.enterLink"
(input)="inputLink($event)" [value]="link()">
</form>
<div class="form-wrapper">
<div style="grid-column: 2; display: grid; gap: 2ch; overflow: hidden; padding: 0px;">
@defer{ <app-text-embracer [text]="lang.phrases.shortTitle" /> }
<form (submit)="onSubmit()">
<input name="chtnk_url" type="url" required autofocus [placeholder]="lang.phrases.enterLink"
(input)="inputLink($event)" [value]="link()">
<!-- <input class="button empty" type="reset" value="🧹"> -->
</form>
</div>

<div style="display: grid; grid-template-columns: 1fr auto; align-items: center;">
<span style="font-family: 'EB Garamond', serif; font-style: italic; opacity: .72;">{{lang.phrases.slogan}}</span>
<div style="display: grid; grid-template-columns: 1fr auto; align-items: center; grid-column: 2;">
<span
style="font-family: 'EB Garamond', serif; font-style: italic; opacity: .72; text-wrap: balance;">{{lang.phrases.slogan}}</span>
@if (linkParams()) {
<a class="button primary small" [routerLink]="[linkParams()?.site, linkParams64()?.id]">
<a class="button primary" [routerLink]="[linkParams()?.site, linkParams64()?.id]">
<span>{{lang.phrases.letsgo}} </span>
<span class="site-name">{{linkParams()?.site}}</span>
<span class="site-address" [title]="linkParams()?.id">{{'/'+linkParams()?.id | truncate}}</span>
Expand All @@ -22,38 +26,29 @@
@defer{
<app-overlay class="show top">
<button title="F1" class="button tshadow" (click)="showHelp()">❔</button>
<app-view-mode-bar style="margin-left: auto;" (valueChange)="lang.setLang($event.code); lang.updateManifest()"
[options]="langOpt" [value]="optLangValue()" />
<button title="F2" class="button tshadow" (click)="showSettings()">⚙️</button>
<button title="F2" disabled class="button tshadow">📥</button>
<button title="F2" disabled class="button tshadow">📚</button>
<app-lang-toggle />
</app-overlay>
}
@defer{
<app-overlay class="show">
<small>{{lang.phrases.shortTitle}}, &copy; 2024</small>

@for (item of social; track $index) {
<a [href]="item.link" target="_blank" rel="noopener noreferrer">
<img style="width: 2ch;" [src]="item.logoSrc" [alt]="item.alt">
</a>
<a [href]="item.link" target="_blank" rel="noopener noreferrer">
<img style="width: 2ch;" [src]="item.logoSrc" [alt]="item.alt">
</a>
}

<made-in-ukraine />
</app-overlay>
}
<app-dialog #faqDialog [title]="'🙋‍♂️ ' + lang.ph().faq">
@defer{ <app-faq /> }
</app-dialog>

<dialog #dialog (click)="closeDialog($event)">
<div class="dialog-wrapper">
<header>
<h2>🙋‍♂️ {{lang.ph().faq}}</h2>
</header>
<section>
@defer{ <app-faq /> }
</section>
<footer>
<form method="dialog">
<button class="button empty full">
{{lang.ph().ok}}
</button>
</form>
</footer>
</div>
</dialog>
<app-dialog #settingsDialog [title]="'⚙️ ' + lang.ph().settings">
@defer{ <app-settings /> }
</app-dialog>
159 changes: 55 additions & 104 deletions src/app/link-parser/link-parser/link-parser.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@

&>div {
display: grid;
place-content: center;
gap: 2ch;
}
}
Expand All @@ -28,44 +27,73 @@ app-text-embracer {
font-family: 'Rampart One', sans-serif;
font-size: clamp(1rem, 8vw, 5rem);

@media (max-aspect-ratio: 1) or (max-width: 640px) {
-webkit-box-reflect: below 1.3rem linear-gradient(transparent 0%, #fff);
@media (max-width: 1080px) {
font-size: clamp(1rem, 7vw, 8rem);
}

@media ((orientation: portrait) and (max-aspect-ratio: 1)) {
font-size: clamp(1rem, 10vw, 8rem);
}



// grid-column: 2;
}

.form-wrapper {
grid-template-columns: auto minmax(auto, 80ch) auto;
}

form {
// grid-column: 2;
backdrop-filter: blur(var(--blur));
z-index: 3;
border-radius: .5ch;
max-width: 80ch;
width: 100%;
position: relative;
}

input[type=url] {
display: block;
font: inherit;
padding: 1ch;
padding: 1.5ch 2ch;
background: transparent;
font-family: 'Courier New', Courier, monospace;
border: 0;
outline: 1px solid;
color: inherit;
width: 100%;
margin: auto;
transition: all .25s cubic-bezier(0.075, 0.82, 0.165, 1);
transition: all var(--t) cubic-bezier(0.075, 0.82, 0.165, 1);
border-radius: .5ch;
border: 2px solid #166496;
box-shadow: var(--shadow-elevation-medium);
background-color: #00274190;
color: #ffd60a;
// padding-right: 8ch;

&:focus {
border-color: #166496;
outline: unset;
}
}

input[type=url]::placeholder {
opacity: 0.5;
color: #ffd60a;
opacity: 0.6;
}

// input[type=reset] {
// position: absolute;
// right: 2px;
// top: 2px;
// height: 6ch;
// width: 6ch;
// }


@media (prefers-reduced-motion: no-preference) {
input[type=url]:focus {

outline-offset: .5ch;

}
}

// a {
// padding: 1ch;
// font-size: smaller;
// color: inherit;
// text-decoration: none;
// @media (prefers-reduced-motion: no-preference) {
// input[type=url]:focus {
// outline-offset: .5ch;
// }
// }

.site-name {
Expand All @@ -79,7 +107,7 @@ input[type=url]::placeholder {
.link {
outline: 1px solid;
border-radius: .5ch;
transition: all cubic-bezier(0.075, 0.82, 0.165, 1) .25s;
transition: all cubic-bezier(0.075, 0.82, 0.165, 1) var(--t);

&:hover {
outline-offset: .5ch;
Expand Down Expand Up @@ -111,94 +139,17 @@ app-overlay {
}
}

made-in-ukraine {
made-in-ukraine, app-lang-toggle {
margin-left: auto;

}


dialog {
--r: 1ch;
--b: 2px;
padding: 0;
max-width: min(calc(100vw - 4ch), 60ch);
max-height: calc(100dvh - 4ch);
border-radius: var(--r);
border: var(--b) solid #166496;
background-color: rgb(0, 15, 30);
color: inherit;

&::before {
content: 'esc';
position: fixed;
left: 2ch;
top: 2ch;
display: inline-grid;
place-content: center;
background-color: rgba(0, 39, 65, 1);
border: 1px solid #166496;
height: 3.5ch;
padding: 1ch .75ch;
font-size: smaller;
border-radius: .5ch;
margin: 0 .25ch;
font-family: monospace;
font-weight: bold;
line-height: 1ch;
box-shadow: 0 .35ch #166496;
color: #ffd60a;
opacity: .5;
}

&::backdrop {
backdrop-filter: blur(.5ch) brightness(.32);
}

.dialog-wrapper {
display: grid;
max-height: 100%;
grid-template: auto 1fr auto / 1fr;
}

header,
footer {
background-color: rgb(0, 39, 65);
padding: 1ch 2ch;
}

header {
border-top-left-radius: calc(var(--r) - var(--b));
border-top-right-radius: calc(var(--r) - var(--b));

h2,
h4 {
margin: 0;
}
}

footer {
border-bottom-left-radius: calc(var(--r) - var(--b));
border-bottom-right-radius: calc(var(--r) - var(--b));
}

section {
padding: 2ch;
overflow: auto;
}

&[open] {
display: flex;
}
}


:host {
transition: scale .1s ease-in-out;
transition: all var(--t) ease-in-out;
}

:host:has(dialog[open]) {
scale: .99;
overflow: hidden;
transform: scale(calc(1 - var(--scale-diff-x, .1)), calc(1 - var(--scale-diff-y, .1)));
filter: blur(var(--blur));
}

:host:has(input[type=url]:focus) {
Expand Down
Loading

0 comments on commit 6248d25

Please sign in to comment.