feat: refine controls and installation dialog

index.html

@@ -39,15 +39,15 @@
             <textarea id="text" name="text" rows="2" maxlength="500" spellcheck="false" x-model="text"></textarea>
             <div class="controls">
                 <label><span x-text="t('styleLabel')">lettering</span>
-                    <select id="style" name="font" x-model="font">
+                    <span class="select-control"><select id="style" name="font" x-model="font">
                         <template x-for="name in styles" :key="name">
                             <option :value="name" :selected="name === font" x-text="name"></option>
                         </template>
-                    </select>
+                    </select></span>
                 </label>
                 <div class="font-navigation">
                     <button id="prev-font" type="button" @click="cycleFont(-1)" x-text="t('prev')">prev</button>
-                    <button id="next-font" type="button" @click="cycleFont(1)" x-text="t('nextFont').replace('{name}', nextFont)"></button>
+                    <button id="next-font" type="button" @click="cycleFont(1)" :title="t('nextFont').replace('{name}', nextFont)" x-text="t('nextFont').replace('{name}', nextFont)"></button>
                 </div>
             </div>
         </form>
@@ -65,25 +65,29 @@
         <footer>
             <div class="preferences">
                 <label><span x-text="t('theme')">appearance</span>
-                    <select id="theme" x-model="theme">
+                    <span class="select-control"><select id="theme" x-model="theme">
                         <option value="system" x-text="t('system')">system</option>
                         <option value="dark" x-text="t('dark')">dark</option>
                         <option value="light" x-text="t('light')">light</option>
-                    </select>
+                    </select></span>
                 </label>
                 <label><span x-text="t('language')">language</span>
-                    <select id="language" x-model="language"><option value="en">English</option><option value="tr">Türkçe</option></select>
+                    <span class="select-control"><select id="language" x-model="language"><option value="en">🇬🇧 English</option><option value="tr">🇹🇷 Türkçe</option></select></span>
                 </label>
             </div>
             <div class="install-controls">
                 <button id="install" type="button" x-show="installAvailable" @click="install()" x-text="t('install')">install app</button>
                 <button id="update" type="button" x-show="updateAvailable" @click="update()" x-text="t('update')">update app</button>
-                <details id="install-guide" x-show="!installed && !installAvailable">
+                <button id="install-help" type="button" x-show="!installed && !installAvailable" @click="$refs.installGuide.showModal()" x-text="t('install')">install app</button>
-                    <summary x-text="t('install')">install app</summary>
-                    <p x-text="t('installGuide')">Use your browser’s install option. In Safari on iPhone or iPad, choose Share → Add to Home Screen.</p>
-                </details>
             </div>
         </footer>
+        <dialog id="install-guide" x-ref="installGuide" aria-labelledby="install-guide-title" aria-describedby="install-guide-text" @click.self="$refs.installGuide.close()">
+            <div class="dialog-content">
+                <h2 id="install-guide-title" x-text="t('install')">install app</h2>
+                <p id="install-guide-text" x-text="t('installGuide')">Use your browser’s install option. In Safari on iPhone or iPad, choose Share → Add to Home Screen.</p>
+                <form method="dialog"><button autofocus x-text="t('close')">close</button></form>
+            </div>
+        </dialog>
     </main>
 </body>
 </html>

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%; }
+select { appearance: none; width: 100%; max-width: 100%; padding-right: 2.75rem; cursor: pointer; }
-button, summary { cursor: pointer; }
+.select-control { display: grid; position: relative; min-width: 0; }
-button:hover { border-color: var(--foreground); }
+.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 { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(0, auto); margin-top: 1rem; }
-.controls label { flex: 1; min-width: 9rem; }
+.controls label { min-width: 0; }
-.font-navigation { max-width: 100%; }
+.controls select { width: 100%; }
-.font-navigation button { max-width: 100%; overflow-wrap: anywhere; }
+.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; }
+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; }
+.install-controls { align-items: center; min-height: 3rem; }
-details { max-width: 30rem; }
+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; } }

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}`;

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.',