front: optimise ui (mostly address area)

- using :first-child and :last-child instead of classes for switchers
- improved scaling
- less mess in css

src/front/cobalt.css

@@ -254,16 +254,17 @@ button:active,
 }
 #cobalt-main-box {
     position: fixed;
-    width: 60%;
+    width: 40rem;
     height: auto;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
+    align-content: center;
+    align-items: center;
 }
 #logo {
     text-align: left;
     font-size: 1rem;
     white-space: nowrap;
-    width: 7rem;
     height: 2.5rem;
     align-items: center;
     display: flex;
@@ -295,7 +296,7 @@ button:active,
 }
 #url-input-area {
     background: none;
-    padding: 0 1rem;
+    padding-left: calc(20px + 1.4rem);
     width: 100%;
     color: var(--accent);
     border: 0;
@@ -316,6 +317,15 @@ button:active,
     outline: none;
     border-bottom: var(--border-10);
 }
+#link-icon {
+    display: flex;
+    position: absolute;
+    width: 20px;
+    padding-top: 0.2rem;
+    left: 0.7rem;
+    flex-wrap: nowrap;
+    color: var(--accent-subtext);
+}
 #download-button {
     height: 2.5rem;
     color: var(--accent);
@@ -331,6 +341,10 @@ button:active,
     color: var(--accent-subtext);
     cursor: not-allowed;
 }
+#cobalt-main-box .switch,
+#footer .switch {
+    box-shadow: 0 0 0 0.1rem var(--accent-highlight) inset;
+}
 #footer {
     bottom: 0;
     width: 100%;
@@ -458,9 +472,6 @@ button:active,
 .popup.scrollable {
     height: 95%;
 }
-.scrollable .bottom-link {
-    padding-bottom: 2rem;
-}
 .changelog-subtitle {
     font-size: 1.3rem;
     padding-bottom: var(--gap-no-icon);
@@ -948,7 +959,7 @@ button:active,
 .text-to-copy,
 .text-to-copy.text-backdrop,
 #filename-preview {
-    border-radius: 5px / 6px;
+    border-radius: 6px / 7px;
 }
 [type=checkbox] {
     border-radius: 3px / 4px;
@@ -969,28 +980,28 @@ button:active,
     border-top: var(--accent-highlight) solid 0.1rem;
     bottom: -1px;
 }
-.switches .first {
+.switches :first-child {
-    border-top-left-radius: 5px 6px;
+    border-top-left-radius: 6px 7px;
-    border-bottom-left-radius: 5px 6px;
+    border-bottom-left-radius: 6px 7px;
 }
-.switches .last {
+.switches :last-child {
-    border-top-right-radius: 5px 6px;
+    border-top-right-radius: 6px 7px;
-    border-bottom-right-radius: 5px 6px;
+    border-bottom-right-radius: 6px 7px;
 }
 .text-backdrop {
     border-radius: 3px / 4px;
 }
-.collapse-list.first,
+.collapse-list:first-child,
-.collapse-list.first .collapse-header {
+.collapse-list:first-child .collapse-header {
-    border-top-left-radius: 6px 7px;
+    border-top-left-radius: 7px 8px;
-    border-top-right-radius: 6px 7px;
+    border-top-right-radius: 7px 8px;
 }
-.collapse-list.last,
+.collapse-list:last-child,
-.collapse-list.last .collapse-header {
+.collapse-list:last-child .collapse-header {
-    border-bottom-left-radius: 6px 7px;
+    border-bottom-left-radius: 7px 8px;
-    border-bottom-right-radius: 6px 7px;
+    border-bottom-right-radius: 7px 8px;
 }
-.collapse-list.last.expanded .collapse-header {
+.collapse-list:last-child.expanded .collapse-header {
     border-radius: 0;
 }
 /* prevent resizing fliecker on ios if web app is installed as standalone */
@@ -1009,9 +1020,6 @@ button:active,
     }
 }
 @media screen and (max-width: 1440px) {
-    #cobalt-main-box {
-        width: 65%;
-    }
     .popup.small {
         width: 30%
     }
@@ -1025,9 +1033,6 @@ button:active,
     }
 }
 @media screen and (max-width: 1200px) {
-    #cobalt-main-box {
-        width: 70%;
-    }
     .popup.small {
         width: 35%
     }
@@ -1036,9 +1041,6 @@ button:active,
     }
 }
 @media screen and (max-width: 1025px) {
-    #cobalt-main-box {
-        width: 75%;
-    }
     .popup.small {
         width: 40%
     }
@@ -1063,14 +1065,14 @@ button:active,
         width: calc(100% - 1.3rem);
     }
 }
-@media screen and (max-width: 720px) {
+@media screen and (max-width: 660px) {
     #cobalt-main-box {
         width: calc(100% - (0.7rem * 2));
     }
     #cobalt-main-box #bottom {
-        flex-direction: column-reverse;
+        flex-direction: row-reverse;
     }
-    #cobalt-main-box #bottom button {
+    #cobalt-main-box #bottom #audioMode button, #audioMode {
         width: 100%;
     }
     #footer {
@@ -1167,9 +1169,6 @@ button:active,
     #popup-tabs {
         padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.5rem);
     }
-    .bottom-link {
-        padding-bottom: 2rem;
-    }
     .popup-content-inner,
     .tab-content-settings,
     .popup-tabs-child,

src/localization/languages/en.json

@@ -76,12 +76,12 @@
         "ImagePickerExplanationPhone": "press and hold an image to save it.",
         "ErrorNoUrlReturned": "i didn't get a download link from the server. this should never happen. try again, but if it still doesn't work, {ContactLink}.",
         "ErrorUnknownStatus": "i received a response i can't process. this should never happen. try again, but if it still doesn't work, {ContactLink}.",
-        "PasteFromClipboard": "paste and download",
+        "PasteFromClipboard": "paste",
         "ChangelogOlder": "previous versions",
         "ChangelogPressToExpand": "expand",
         "Miscellaneous": "miscellaneous",
-        "ModeToggleAuto": "auto mode",
+        "ModeToggleAuto": "auto",
-        "ModeToggleAudio": "audio mode",
+        "ModeToggleAudio": "audio",
         "SettingsDisableNotifications": "hide notifications",
         "MediaPickerTitle": "pick what to save",
         "MediaPickerExplanationPC": "click or right click to download what you want.",

src/localization/languages/ru.json

@@ -76,12 +76,12 @@
         "ImagePickerExplanationPhone": "зажми и удерживай картинку, чтобы её сохранить.",
         "ErrorNoUrlReturned": "я не получил ссылку для скачивания от сервера. такого происходить не должно. попробуй ещё раз, а если не поможет, то {ContactLink}.",
         "ErrorUnknownStatus": "сервер ответил мне чем-то непонятным. такого происходить не должно. попробуй ещё раз, а если не поможет, то {ContactLink}.",
-        "PasteFromClipboard": "вставить и скачать",
+        "PasteFromClipboard": "вставить",
         "ChangelogOlder": "предыдущие версии (тоже на английском)",
         "ChangelogPressToExpand": "раскрыть",
         "Miscellaneous": "разное",
-        "ModeToggleAuto": "авто режим",
+        "ModeToggleAuto": "авто",
-        "ModeToggleAudio": "аудио режим",
+        "ModeToggleAudio": "аудио",
         "SettingsDisableNotifications": "cкрыть уведомления",
         "MediaPickerTitle": "выбери, что сохранить",
         "MediaPickerExplanationPC": "кликни то, что хочешь скачать. также можно скачать правой кнопки мыши.",

src/modules/pageRender/elements.js

@@ -10,6 +10,8 @@ export const dropdownSVG = `<svg width="18" height="18" viewBox="0 0 32 32" fill
 <path d="M28 12.0533L16 24L4 12.0533L6.03571 10L14.7188 18.4104L16.25 19.9348L17.7813 18.4104L25.9375 10L28 12.0533Z" fill="#E1E1E1"/>
 </svg>`
 
+export const linkSVG = '<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 256 256"><path fill="currentColor" d="M137.54 186.36a8 8 0 0 1 0 11.31l-9.94 10a56 56 0 0 1-79.22-79.27l24.12-24.12a56 56 0 0 1 76.81-2.28a8 8 0 1 1-10.64 12a40 40 0 0 0-54.85 1.63L59.7 139.72a40 40 0 0 0 56.58 56.58l9.94-9.94a8 8 0 0 1 11.32 0Zm70.08-138a56.08 56.08 0 0 0-79.22 0l-9.94 9.95a8 8 0 0 0 11.32 11.31l9.94-9.94a40 40 0 0 1 56.58 56.58l-24.12 24.14a40 40 0 0 1-54.85 1.6a8 8 0 1 0-10.64 12a56 56 0 0 0 76.81-2.26l24.12-24.12a56.08 56.08 0 0 0 0-79.24Z"/></svg>'
+
 export function switcher(obj) {
     let items = ``;
     if (obj.name === "download") {
@@ -17,8 +19,6 @@ export function switcher(obj) {
     } else {
         for (let i = 0; i < obj.items.length; i++) {
             let classes = obj.items[i]["classes"] ? obj.items[i]["classes"] : [];
-            if (i === 0) classes.push("first");
-            if (i === (obj.items.length - 1)) classes.push("last");
             items += `<button id="${obj.name}-${obj.items[i]["action"]}" class="switch${classes.length > 0 ? ' ' + classes.join(' ') : ''}" onclick="changeSwitcher('${obj.name}', '${obj.items[i]["action"]}')">${obj.items[i]["text"] ? obj.items[i]["text"] : obj.items[i]["action"]}</button>`
         }
     }
@@ -119,8 +119,6 @@ export function collapsibleList(arr) {
 
     for (let i = 0; i < arr.length; i++) {
         let classes = arr[i]["classes"] ? arr[i]["classes"] : [];
-        if (i === 0) classes.push("first");
-        if (i === (arr.length - 1)) classes.push("last");
         items += `<div id="${arr[i]["name"]}-collapse" class="collapse-list${classes.length > 0 ? ' ' + classes.join(' ') : ''}">
             <div class="collapse-header" onclick="expandCollapsible(event)">
                 <div class="collapse-title">${arr[i]["title"]}</div>

src/modules/pageRender/page.js

@@ -1,4 +1,4 @@
-import { checkbox, collapsibleList, explanation, footerButtons, multiPagePopup, popup, popupWithBottomButtons, sep, settingsCategory, switcher, socialLink, socialLinks, urgentNotice, keyboardShortcuts, webLoc, sponsoredList, betaTag } from "./elements.js";
+import { checkbox, collapsibleList, explanation, footerButtons, multiPagePopup, popup, popupWithBottomButtons, sep, settingsCategory, switcher, socialLink, socialLinks, urgentNotice, keyboardShortcuts, webLoc, sponsoredList, betaTag, linkSVG } from "./elements.js";
 import { services as s, authorInfo, version, repo, donations, supportedAudio, links } from "../config.js";
 import { getCommitInfo } from "../sub/currentCommit.js";
 import loc from "../../localization/manager.js";
@@ -571,7 +571,8 @@ export default function(obj) {
                 <div id="logo">${t("AppTitleCobalt")}${betaTag()}</div>
                 <div id="download-area">
                     <div id="top">
-                        <input id="url-input-area" class="mono" type="text" autocorrect="off" maxlength="128" autocapitalize="off" placeholder="${t('LinkInput')}" aria-label="${t('AccessibilityInputArea')}" oninput="button()"></input>
+                        <div id="link-icon">${linkSVG}</div>
+                        <input id="url-input-area" class="mono" type="text" autofocus autocorrect="off" maxlength="128" autocapitalize="off" placeholder="${t('LinkInput')}" aria-label="${t('AccessibilityInputArea')}" oninput="button()"></input>
                         <button id="url-clear" onclick="clearInput()" style="display:none;">x</button>
                         <input id="download-button" class="mono dontRead" onclick="download(document.getElementById('url-input-area').value)" type="submit" value="" disabled=true aria-label="${t('AccessibilityDownloadButton')}">
                     </div>