From 1fbd0a2c05f7f56d11daa1014cf7e90768cc1660 Mon Sep 17 00:00:00 2001 From: wukko Date: Mon, 25 Dec 2023 23:57:33 +0600 Subject: [PATCH] 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 | 75 +++++++++++++++--------------- src/localization/languages/en.json | 6 +-- src/localization/languages/ru.json | 6 +-- src/modules/pageRender/elements.js | 6 +-- src/modules/pageRender/page.js | 5 +- 5 files changed, 48 insertions(+), 50 deletions(-) diff --git a/src/front/cobalt.css b/src/front/cobalt.css index be41f997..200f288f 100644 --- a/src/front/cobalt.css +++ b/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 { - border-top-left-radius: 5px 6px; - border-bottom-left-radius: 5px 6px; +.switches :first-child { + border-top-left-radius: 6px 7px; + border-bottom-left-radius: 6px 7px; } -.switches .last { - border-top-right-radius: 5px 6px; - border-bottom-right-radius: 5px 6px; +.switches :last-child { + border-top-right-radius: 6px 7px; + border-bottom-right-radius: 6px 7px; } .text-backdrop { border-radius: 3px / 4px; } -.collapse-list.first, -.collapse-list.first .collapse-header { - border-top-left-radius: 6px 7px; - border-top-right-radius: 6px 7px; +.collapse-list:first-child, +.collapse-list:first-child .collapse-header { + border-top-left-radius: 7px 8px; + border-top-right-radius: 7px 8px; } -.collapse-list.last, -.collapse-list.last .collapse-header { - border-bottom-left-radius: 6px 7px; - border-bottom-right-radius: 6px 7px; +.collapse-list:last-child, +.collapse-list:last-child .collapse-header { + border-bottom-left-radius: 7px 8px; + 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, diff --git a/src/localization/languages/en.json b/src/localization/languages/en.json index 159a2e78..6ca13c36 100644 --- a/src/localization/languages/en.json +++ b/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", - "ModeToggleAudio": "audio mode", + "ModeToggleAuto": "auto", + "ModeToggleAudio": "audio", "SettingsDisableNotifications": "hide notifications", "MediaPickerTitle": "pick what to save", "MediaPickerExplanationPC": "click or right click to download what you want.", diff --git a/src/localization/languages/ru.json b/src/localization/languages/ru.json index c81eb558..47a57814 100644 --- a/src/localization/languages/ru.json +++ b/src/localization/languages/ru.json @@ -76,12 +76,12 @@ "ImagePickerExplanationPhone": "зажми и удерживай картинку, чтобы её сохранить.", "ErrorNoUrlReturned": "я не получил ссылку для скачивания от сервера. такого происходить не должно. попробуй ещё раз, а если не поможет, то {ContactLink}.", "ErrorUnknownStatus": "сервер ответил мне чем-то непонятным. такого происходить не должно. попробуй ещё раз, а если не поможет, то {ContactLink}.", - "PasteFromClipboard": "вставить и скачать", + "PasteFromClipboard": "вставить", "ChangelogOlder": "предыдущие версии (тоже на английском)", "ChangelogPressToExpand": "раскрыть", "Miscellaneous": "разное", - "ModeToggleAuto": "авто режим", - "ModeToggleAudio": "аудио режим", + "ModeToggleAuto": "авто", + "ModeToggleAudio": "аудио", "SettingsDisableNotifications": "cкрыть уведомления", "MediaPickerTitle": "выбери, что сохранить", "MediaPickerExplanationPC": "кликни то, что хочешь скачать. также можно скачать правой кнопки мыши.", diff --git a/src/modules/pageRender/elements.js b/src/modules/pageRender/elements.js index f74bb097..96468816 100644 --- a/src/modules/pageRender/elements.js +++ b/src/modules/pageRender/elements.js @@ -10,6 +10,8 @@ export const dropdownSVG = ` ` +export const linkSVG = '' + 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 += `` } } @@ -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 += `
${arr[i]["title"]}
diff --git a/src/modules/pageRender/page.js b/src/modules/pageRender/page.js index a741dbc9..b5edcb64 100644 --- a/src/modules/pageRender/page.js +++ b/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) {
- + +