front: optimise ui (mostly address area)
- using :first-child and :last-child instead of classes for switchers - improved scaling - less mess in css
This commit is contained in:
wukko
parent
ca04acc468
commit
1fbd0a2c05
5 changed files with 48 additions and 50 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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.",
|
||||
|
|
|
|||
|
|
@ -76,12 +76,12 @@
|
|||
"ImagePickerExplanationPhone": "зажми и удерживай картинку, чтобы её сохранить.",
|
||||
"ErrorNoUrlReturned": "я не получил ссылку для скачивания от сервера. такого происходить не должно. попробуй ещё раз, а если не поможет, то {ContactLink}.",
|
||||
"ErrorUnknownStatus": "сервер ответил мне чем-то непонятным. такого происходить не должно. попробуй ещё раз, а если не поможет, то {ContactLink}.",
|
||||
"PasteFromClipboard": "вставить и скачать",
|
||||
"PasteFromClipboard": "вставить",
|
||||
"ChangelogOlder": "предыдущие версии (тоже на английском)",
|
||||
"ChangelogPressToExpand": "раскрыть",
|
||||
"Miscellaneous": "разное",
|
||||
"ModeToggleAuto": "авто режим",
|
||||
"ModeToggleAudio": "аудио режим",
|
||||
"ModeToggleAuto": "авто",
|
||||
"ModeToggleAudio": "аудио",
|
||||
"SettingsDisableNotifications": "cкрыть уведомления",
|
||||
"MediaPickerTitle": "выбери, что сохранить",
|
||||
"MediaPickerExplanationPC": "кликни то, что хочешь скачать. также можно скачать правой кнопки мыши.",
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue