blitzwing/cobalt-7
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

front: optimise ui (mostly address area)

Browse source 
- using :first-child and :last-child instead of classes for switchers
- improved scaling
- less mess in css
This commit is contained in:
wukko 2023-12-25 23:57:33 +06:00
parent ca04acc468
commit 1fbd0a2c05
5 changed files with 48 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
src/front/cobalt.css
View file

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

6
src/localization/languages/en.json
View file

@ -76,12 +76,12 @@
"ImagePickerExplanationPhone": "press and hold an image to save it.", "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}.", "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}.", "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", "ChangelogOlder": "previous versions",
"ChangelogPressToExpand": "expand", "ChangelogPressToExpand": "expand",
"Miscellaneous": "miscellaneous", "Miscellaneous": "miscellaneous",
"ModeToggleAuto": "auto mode", "ModeToggleAuto": "auto",
"ModeToggleAudio": "audio mode", "ModeToggleAudio": "audio",
"SettingsDisableNotifications": "hide notifications", "SettingsDisableNotifications": "hide notifications",
"MediaPickerTitle": "pick what to save", "MediaPickerTitle": "pick what to save",
"MediaPickerExplanationPC": "click or right click to download what you want.", "MediaPickerExplanationPC": "click or right click to download what you want.",

6
src/localization/languages/ru.json
View file

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

6
src/modules/pageRender/elements.js
View file

@ -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"/> <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>` </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) { export function switcher(obj) {
let items = ``; let items = ``;
if (obj.name === "download") { if (obj.name === "download") {
@ -17,8 +19,6 @@ export function switcher(obj) {
} else { } else {
for (let i = 0; i < obj.items.length; i++) { for (let i = 0; i < obj.items.length; i++) {
let classes = obj.items[i]["classes"] ? obj.items[i]["classes"] : []; 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>` 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++) { for (let i = 0; i < arr.length; i++) {
let classes = arr[i]["classes"] ? arr[i]["classes"] : []; 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(' ') : ''}"> 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-header" onclick="expandCollapsible(event)">
<div class="collapse-title">${arr[i]["title"]}</div> <div class="collapse-title">${arr[i]["title"]}</div>

5
src/modules/pageRender/page.js
View file

@ -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 { services as s, authorInfo, version, repo, donations, supportedAudio, links } from "../config.js";
import { getCommitInfo } from "../sub/currentCommit.js"; import { getCommitInfo } from "../sub/currentCommit.js";
import loc from "../../localization/manager.js"; import loc from "../../localization/manager.js";
@ -571,7 +571,8 @@ export default function(obj) {
<div id="logo">${t("AppTitleCobalt")}${betaTag()}</div> <div id="logo">${t("AppTitleCobalt")}${betaTag()}</div>
<div id="download-area"> <div id="download-area">
<div id="top"> <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> <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')}"> <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> </div>