From fa4e418e36cbe9d3007e9e0e37175219a7abee75 Mon Sep 17 00:00:00 2001 From: wukko Date: Thu, 18 May 2023 23:05:29 +0600 Subject: [PATCH] 5.7: ui improvements - padding (everywhere) has been slightly reduced to fit in more content. - padding is now consistent across ui. - added more info to the "how to save" popup for ios devices. - crypto wallet press-to-copy buttons now look like buttons. - improved looks for smallest screens (iphone 5, 5s, se, etc). --- package.json | 2 +- src/config.json | 3 + src/front/cobalt.css | 98 +++++++++++++++++++++++------- src/localization/languages/en.json | 2 +- src/localization/languages/ru.json | 4 +- src/localization/manager.js | 4 +- src/modules/config.js | 3 +- src/modules/pageRender/elements.js | 2 +- 8 files changed, 89 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index f0a2e512..1382b1f5 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "cobalt", "description": "save what you love", - "version": "5.6", + "version": "5.7", "author": "wukko", "exports": "./src/cobalt.js", "type": "module", diff --git a/src/config.json b/src/config.json index 5635c179..2871c3ea 100644 --- a/src/config.json +++ b/src/config.json @@ -27,6 +27,9 @@ "boosty": "https://boosty.to/wukko" } }, + "links": { + "saveToGalleryShortcut": "https://www.icloud.com/shortcuts/6d4fe6e5bade4150b8759ce20720c7a3" + }, "celebrations": { "01-01": "🎄", "02-17": "😺", diff --git a/src/front/cobalt.css b/src/front/cobalt.css index f7034a66..9f9c8a9c 100644 --- a/src/front/cobalt.css +++ b/src/front/cobalt.css @@ -7,7 +7,8 @@ --padding-1: 0.75rem; --line-height: 1.65rem; --red: rgb(255, 0, 61); - --gap: 0.6rem; + --gap: 0.5rem; + --gap-no-icon: 0.6rem; --rainbow-gradient: linear-gradient(161deg,#ffe454,#ff6964,#fe85e5,#bd26fe,#587ae9,#8ded95); } @media (prefers-color-scheme: dark) { @@ -19,6 +20,7 @@ --accent-unhover: rgb(100, 100, 100); --accent-unhover-2: rgb(110, 110, 110); --background: rgb(0, 0, 0); + --glow-transparency: 0.45; } } @media (prefers-color-scheme: light) { @@ -30,6 +32,7 @@ --accent-unhover: rgb(190, 190, 190); --accent-unhover-2: rgb(110, 110, 110); --background: rgb(255, 255, 255); + --glow-transparency: 0.6; } } [data-theme="dark"] { @@ -40,6 +43,7 @@ --accent-unhover: rgb(100, 100, 100); --accent-unhover-2: rgb(110, 110, 110); --background: rgb(0, 0, 0); + --glow-transparency: 0.45; } [data-theme="light"] { --accent: rgb(25, 25, 25); @@ -49,6 +53,7 @@ --accent-unhover: rgb(190, 190, 190); --accent-unhover-2: rgb(110, 110, 110); --background: rgb(255, 255, 255); + --glow-transparency: 0.6; } html, body { @@ -83,7 +88,7 @@ a { align-items: center; flex-direction: row; flex-wrap: nowrap; - padding: 0.55rem 1rem 0.55rem 0.7rem; + padding: calc(var(--gap) - 0.1rem) calc(var(--gap)*2 - 0.2rem) calc(var(--gap) - 0.1rem) var(--gap); width: auto; margin-right: var(--padding-1); margin-bottom: var(--padding-1); @@ -223,7 +228,7 @@ button:active, color: var(--accent); } #url-input-area { - background: var(--background); + background: none; padding: 0 1rem; width: 100%; color: var(--accent); @@ -345,7 +350,7 @@ button:active, } .changelog-subtitle { font-size: 1.1rem; - padding-bottom: 0.7rem; + padding-bottom: var(--gap-no-icon); } .changelog-banner { width: 100%; @@ -437,7 +442,7 @@ button:active, color: var(--accent-unhover-2); border-bottom: 0.05rem solid var(--accent-unhover-2); padding-bottom: 0.25rem; - margin-bottom: 1rem; + margin-bottom: calc(var(--gap-no-icon)*1.5); } .category-title { text-align: left; @@ -470,7 +475,7 @@ button:active, margin-top: 0.5rem; } .explanation { - margin-top: 1rem; + margin-top: 0.8rem; width: 100%; font-size: 0.8rem; text-align: left; @@ -481,7 +486,7 @@ button:active, color: var(--accent-unhover-2); } .switch { - padding: 0.7rem; + padding: var(--gap-no-icon); width: 100%; text-align: left; color: var(--accent); @@ -511,6 +516,13 @@ button:active, overflow-x: scroll; scrollbar-width: none; } +.switches .switch { + padding-left: calc(var(--gap-no-icon) + 0.1rem); + padding-right: calc(var(--gap-no-icon) + 0.1rem); +} +#popup-settings .switches .switch { + text-align: center; +} .autowidth { width: auto; } @@ -520,12 +532,12 @@ button:active, .text-to-copy { user-select: text; -webkit-user-select: text; - border: var(--border-15); + background: var(--accent-button-bg); padding: var(--padding-1); overflow: auto; } #close-button { - max-width: 2.8rem; + max-width: 2.6rem; margin-left: var(--padding-1); background: var(--background); border: var(--border-15); @@ -536,7 +548,7 @@ button:active, float: right; position: absolute; right: 0; - height: 2.8rem; + height: 2.6rem; } .popup-tab-content { display: none; @@ -548,7 +560,7 @@ button:active, width: 100%; } .popup-tabs { - margin-top: 0.8rem; + margin-top: 0.9rem; } .emoji { margin-right: 0.4rem; @@ -664,7 +676,7 @@ button:active, background: var(--rainbow-gradient); z-index: -2; filter: blur(5px); - opacity: 0.65; + opacity: var(--glow-transparency); } #about-donate-footer:active::before { opacity: 0; @@ -763,9 +775,14 @@ button:active, } } @media screen and (max-width: 320px) { + :root { + --gap: 0.38rem; + --gap-no-icon: 0.38rem; + --line-height: 1.2rem; + } #popup-title { - font-size: 1.3rem; - line-height: 2rem; + font-size: 1.07rem; + line-height: 1.5rem; } .footer-button, #audioMode-false, @@ -779,22 +796,61 @@ button:active, #paste .emoji { margin-right: 0; } - .switch, .checkbox, .category-title, .subtitle, #popup-desc { - font-size: .75rem; + .switch, + .checkbox, + .category-title, + .subtitle, + #popup-desc, + .collapse-title { + font-size: .7rem; + } + .collapse-header { + padding: 0.5rem; + } + #popup-above-title, + #url-input-area { + font-size: 0.6rem; } .explanation { - font-size: .77rem; - margin-top: 0.8rem; + font-size: .6rem; + margin-top: 0.5rem; + line-height: 1rem!important; } #popup-desc { - line-height: 1.4rem; + line-height: 1.2rem; + font-size: .64rem; } .changelog-subtitle, #popup-subtitle { - font-size: 0.9rem!important; + font-size: 0.8rem!important; } .category-title { margin-bottom: 0.8rem; } + .emoji { + height: 18px; + width: 18px; + } + .desc-padding { + padding-bottom: 0.8rem; + } + #logo { + font-size: 0.8rem; + } + .popup, + .popup.scrollable, + .popup.small { + height: 98%; + } + [type=checkbox] { + width: 15px; + height: 15px; + border: 0.12rem solid var(--accent); + } + [type=checkbox]:before { + transform: scaleY(.8)scaleX(.7)rotate(45deg); + left: 3.4px; + top: -2px; + } } @media screen and (max-width: 720px) { #cobalt-main-box #bottom { @@ -804,7 +860,7 @@ button:active, width: 100%; } #footer { - bottom: 4%; + bottom: 4.9%; transform: translate(-50%, 0%); } #footer-buttons { diff --git a/src/localization/languages/en.json b/src/localization/languages/en.json index 20ed2e5e..4f052578 100644 --- a/src/localization/languages/en.json +++ b/src/localization/languages/en.json @@ -47,7 +47,7 @@ "SettingsQualityDescription": "if selected quality isn't available, closest one is used instead.", "LinkGitHubChanges": ">> see previous commits and contribute on github", "NoScriptMessage": "{appName} uses javascript for api requests and interactive interface. you have to allow javascript to use this site. there are no pesty scripts, pinky promise.", - "DownloadPopupDescriptionIOS": "press and hold the download button, hide the video preview, and then select \"download linked file\" to save.", + "DownloadPopupDescriptionIOS": "easiest way to save videos on ios:\n1. add this siri shortcut.\n2. press \"share\" above and select \"save to photos\" in appeared share sheet.\nif asked, review the permission request popup on top, and press \"always allow\".\n\nalternative method: press and hold the download button, hide the video preview, and select \"download linked file\" to download.\nthen, open safari downloads, select the file you downloaded, open share menu, and finally press \"save video\".", "DownloadPopupDescription": "download button opens a new tab with requested file. you can disable this popup in settings.", "DownloadPopupWayToSave": "pick a way to save", "ClickToCopy": "press to copy", diff --git a/src/localization/languages/ru.json b/src/localization/languages/ru.json index d971c261..7f59f356 100644 --- a/src/localization/languages/ru.json +++ b/src/localization/languages/ru.json @@ -47,7 +47,7 @@ "SettingsQualityDescription": "если выбранное качество недоступно, то выбирается ближайшее к нему.", "LinkGitHubChanges": ">> смотри предыдущие изменения на github", "NoScriptMessage": "{appName} использует javascript для обработки ссылок и интерактивного интерфейса. ты должен разрешить использование javascript, чтобы пользоваться сайтом. тут нет никаких зловредных скриптов, обещаю.", - "DownloadPopupDescriptionIOS": "зажми кнопку \"скачать\", затем скрой превью и выбери \"загрузить файл по ссылке\" в появившемся окне.", + "DownloadPopupDescriptionIOS": "наиболее простой метод скачивания видео на ios:\n1. добавь этот сценарий siri.\n2. нажми \"поделиться\" выше и выбери \"save to photos\" в открывшемся окне.\nесли появляется окно с запросом разрешения, то прочитай его, потом нажми \"всегда разрешать\".\n\nальтернативный метод: зажми кнопку \"скачать\", затем скрой превью и выбери \"загрузить файл по ссылке\" в появившемся окне.\nпотом открой загрузки в safari, выбери скачанный файл, нажми иконку \"поделиться\", и, наконец, нажми \"сохранить видео\".", "DownloadPopupDescription": "кнопка скачивания открывает новое окно с файлом. ты можешь отключить выбор метода скачивания файла в настройках.", "DownloadPopupWayToSave": "выбери, как сохранить", "ClickToCopy": "нажми, чтобы скопировать", @@ -94,7 +94,7 @@ "ChangelogPressToHide": "скрыть", "Donate": "задонатить", "DonateSub": "ты можешь помочь!", - "DonateExplanation": "{appName} не пихает рекламу тебе в лицо и не продаёт твои личные данные, а значит работает совершенно бесплатно. но оказывается, что разработка и поддержка сервиса, которым пользуются более 80 тысяч людей, обходится довольно трудно.\n\nесли {appName} тебе помог и ты хочешь поблагодарить разработчика, то это можно сделать через донаты! каждый рубль помогает мне, моим котам, и {appName}! спасибо :)", + "DonateExplanation": "{appName} не пихает рекламу тебе в лицо и не продаёт твои личные данные, а значит работает совершенно бесплатно. но оказывается, что разработка и поддержка сервиса, которым пользуются более 150 тысяч людей, обходится довольно затратно.\n\nесли {appName} тебе помог и ты хочешь поблагодарить разработчика, то это можно сделать через донаты! каждый рубль помогает мне, моим котам, и {appName}! спасибо :)", "DonateVia": "открыть", "DonateHireMe": "...или же ты можешь пригласить меня на работу :)", "SettingsVideoMute": "убрать аудио", diff --git a/src/localization/manager.js b/src/localization/manager.js index 8809d1a5..2f5a334a 100644 --- a/src/localization/manager.js +++ b/src/localization/manager.js @@ -1,5 +1,5 @@ import * as fs from "fs"; -import { appName, repo } from "../modules/config.js"; +import { appName, links, repo } from "../modules/config.js"; import loadJson from "../modules/sub/loadJSON.js"; const locPath = './src/localization/languages'; @@ -19,7 +19,7 @@ export function loadLoc() { loadLoc(); export function replaceBase(s) { - return s.replace(/\n/g, '
').replace(/{appName}/g, appName).replace(/{repo}/g, repo).replace(/\*;/g, "•"); + return s.replace(/\n/g, '
').replace(/{saveToGalleryShortcut}/g, links.saveToGalleryShortcut).replace(/{appName}/g, appName).replace(/{repo}/g, repo).replace(/\*;/g, "•"); } export function replaceAll(lang, str, string, replacement) { let s = replaceBase(str[string]) diff --git a/src/modules/config.js b/src/modules/config.js index 64dfca7d..00b95667 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -16,4 +16,5 @@ export const donations = config.donations, ffmpegArgs = config.ffmpegArgs, supportedAudio = config.supportedAudio, - celebrations = config.celebrations + celebrations = config.celebrations, + links = config.links diff --git a/src/modules/pageRender/elements.js b/src/modules/pageRender/elements.js index 49549857..cdf155ed 100644 --- a/src/modules/pageRender/elements.js +++ b/src/modules/pageRender/elements.js @@ -12,7 +12,7 @@ export function switcher(obj) { } } - if (obj.noParent) return `
${items}
`; + if (obj.noParent) return `
${items}
`; return `
${obj.subtitle ? `
${obj.subtitle}
` : ``}
${items}