From 66421b6596f6d309fe7292b537f79b49a30a3e1b Mon Sep 17 00:00:00 2001 From: Abdussamet Kocak Date: Sat, 10 Oct 2026 14:34:11 +0000 Subject: [PATCH] feat: refine controls and installation dialog --- index.html | 24 ++++++++++++++---------- style.css | 43 +++++++++++++++++++++++++++++++++---------- sw.js | 2 +- translations.js | 6 +++--- 4 files changed, 51 insertions(+), 24 deletions(-) diff --git a/index.html b/index.html index b49340c..1a2771f 100644 --- a/index.html +++ b/index.html @@ -39,15 +39,15 @@
- +
@@ -65,25 +65,29 @@ + +
+

install app

+

Use your browser’s install option. In Safari on iPhone or iPad, choose Share → Add to Home Screen.

+
+
+ diff --git a/style.css b/style.css index b2bb402..80a4826 100644 --- a/style.css +++ b/style.css @@ -42,17 +42,34 @@ header { margin-bottom: 2rem; } h1 { margin: 0; font-size: 2.5rem; line-height: 1; } label { display: flex; flex-direction: column; gap: 0.4rem; } textarea, select, button { font: inherit; color: inherit; background: var(--background); border: 2px solid var(--border); border-radius: 4px; padding: 0.65rem 0.8rem; } +button, label[for], label > span:not(.select-control), .output-heading > p { text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.08em; } +footer button, footer label > span:not(.select-control) { font-size: 0.75rem; } textarea { display: block; width: 100%; margin-top: 0.5rem; resize: vertical; min-height: 5rem; } -select { max-width: 100%; } -button, summary { cursor: pointer; } -button:hover { border-color: var(--foreground); } +select { appearance: none; width: 100%; max-width: 100%; padding-right: 2.75rem; cursor: pointer; } +.select-control { display: grid; position: relative; min-width: 0; } +.select-control::after { content: ''; position: absolute; right: 1rem; top: 50%; width: 0.625rem; height: 0.375rem; transform: translateY(-50%); background: var(--foreground); clip-path: polygon(0 0, 100% 0, 50% 100%); pointer-events: none; } +select, button { height: 3rem; line-height: 1.6; } +button { cursor: pointer; } +button:hover, select:hover { border-color: var(--foreground); } +@supports (appearance: base-select) { + select, select::picker(select) { appearance: base-select; } + select::picker-icon { display: none; } + select:open { border-color: var(--foreground); } + .select-control:has(select:open)::after { transform: translateY(-50%) rotate(180deg); } + select::picker(select) { font: inherit; color: var(--foreground); background: var(--panel); border: 2px solid var(--border); border-radius: 4px; margin-block: 0.35rem; padding: 0.25rem; max-height: min(22rem, 60dvh); overflow-y: auto; box-shadow: 0 0.5rem 1.5rem #0003; } + select option { padding: 0.6rem 0.75rem; border-radius: 2px; cursor: pointer; overflow-wrap: anywhere; } + select option:hover, select option:focus-visible { background: var(--border); color: var(--background); outline: none; } + select option:checked { background: var(--foreground); color: var(--background); } + select option::checkmark { margin-inline-end: 0.5rem; } +} button:disabled { opacity: 0.5; cursor: default; } :focus-visible { outline: 3px solid var(--foreground); outline-offset: 4px; } .controls, .font-navigation, .actions, .preferences, .install-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem; } -.controls { margin-top: 1rem; } -.controls label { flex: 1; min-width: 9rem; } -.font-navigation { max-width: 100%; } -.font-navigation button { max-width: 100%; overflow-wrap: anywhere; } +.controls { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, auto); margin-top: 1rem; } +.controls label { min-width: 0; } +.controls select { width: 100%; } +.font-navigation { display: grid; grid-template-columns: auto minmax(0, 1fr); min-width: 0; max-width: 100%; } +.font-navigation button { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .output-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem; margin-top: 2.5rem; } .output-heading p { margin: 0; } .actions { font-size: 0.85rem; } @@ -60,7 +77,13 @@ pre { max-width: 100%; min-height: 10rem; overflow-x: auto; padding: 1.25rem; ba .note, #status, footer { font-size: 0.8rem; } .note { max-width: 65ch; } #status { min-height: 1.6em; } -footer { border-top: 1px solid var(--border); padding-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; } -.install-controls { align-items: center; } -details { max-width: 30rem; } +footer { border-top: 1px solid var(--border); padding-top: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; } +.install-controls { align-items: center; min-height: 3rem; } +dialog { width: min(30rem, calc(100% - 2rem)); max-height: calc(100% - 2rem); padding: 0; font: inherit; color: var(--foreground); background: var(--panel); border: 2px solid var(--border); border-radius: 4px; } +dialog::backdrop { background: #0008; } +.dialog-content { padding: 1.5rem; } +.dialog-content h2 { margin: 0; font-size: 1.25rem; } +.dialog-content form { display: flex; justify-content: end; margin-top: 1.5rem; } +@media (min-width: 721px) { #next-font { width: 22rem; min-width: 22rem; } } +@media (max-width: 720px) { .controls { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 390px) { .actions { width: 100%; } .actions button { flex: 1 1 auto; } pre { padding: 0.75rem; } } diff --git a/sw.js b/sw.js index 690720c..17b0bc0 100644 --- a/sw.js +++ b/sw.js @@ -1,5 +1,5 @@ // Bump VERSION whenever a shell file changes. New versions wait for approval. -const VERSION = 'v9'; +const VERSION = 'v16'; const BASE = self.registration.scope; const PREFIX = `ascii-pwa-${encodeURIComponent(BASE)}-`; const CACHE = `${PREFIX}${VERSION}`; diff --git a/translations.js b/translations.js index c94ffe2..b3e8f37 100644 --- a/translations.js +++ b/translations.js @@ -5,7 +5,7 @@ export const translations = { preview: 'your ASCII art', copy: 'copy', download: 'download .txt', share: 'copy link', glyphNote: 'Character support varies by font.', theme: 'appearance', system: 'system', dark: 'dark', light: 'light', language: 'language', - install: 'install app', update: 'update app', + install: 'install app', update: 'update app', close: 'close', installGuide: 'Use your browser’s install option. In Safari on iPhone or iPad, choose Share → Add to Home Screen.', copied: 'Copied.', copyFailed: 'Select the ASCII art and copy it manually.', linkFailed: 'Could not copy the link. Copy the address from your browser.', @@ -16,11 +16,11 @@ export const translations = { }, tr: { textLabel: 'metniniz', styleLabel: 'yazı stili', - prev: 'önceki', nextFont: 'sonraki yazı tipi: {name}', + prev: 'önceki', nextFont: 'sonraki: {name}', preview: 'ASCII sanatınız', copy: 'kopyala', download: '.txt indir', share: 'bağlantıyı kopyala', glyphNote: 'Karakter desteği yazı tipine göre değişir.', theme: 'görünüm', system: 'sistem', dark: 'koyu', light: 'açık', language: 'dil', - install: 'uygulamayı yükle', update: 'uygulamayı güncelle', + install: 'uygulamayı yükle', update: 'uygulamayı güncelle', close: 'kapat', installGuide: 'Tarayıcınızın yükleme seçeneğini kullanın. iPhone veya iPad’de Safari menüsünden Paylaş → Ana Ekrana Ekle seçeneğini seçin.', copied: 'Kopyalandı.', copyFailed: 'ASCII sanatını seçip elle kopyalayın.', linkFailed: 'Bağlantı kopyalanamadı. Adresi tarayıcınızdan kopyalayın.',