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

@@ -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",

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": "😺",

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;
+        font-size: 1.07rem;
-        line-height: 2rem;
+        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 {
+    .switch,
-        font-size: .75rem;
+    .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;
+        font-size: .6rem;
-        margin-top: 0.8rem;
+        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 {

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 <a class=\"text-backdrop italic\" href=\"{saveToGalleryShortcut}\" target=\"_blank\">this siri shortcut</a>.\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",

src/localization/languages/ru.json

@@ -47,7 +47,7 @@
         "SettingsQualityDescription": "если выбранное качество недоступно, то выбирается ближайшее к нему.",
         "LinkGitHubChanges": ">> смотри предыдущие изменения на github",
         "NoScriptMessage": "{appName} использует javascript для обработки ссылок и интерактивного интерфейса. ты должен разрешить использование javascript, чтобы пользоваться сайтом. тут нет никаких зловредных скриптов, обещаю.",
-        "DownloadPopupDescriptionIOS": "зажми кнопку \"скачать\", затем скрой превью и выбери \"загрузить файл по ссылке\" в появившемся окне.",
+        "DownloadPopupDescriptionIOS": "наиболее простой метод скачивания видео на ios:\n1. добавь <a class=\"text-backdrop italic\" href=\"{saveToGalleryShortcut}\" target=\"_blank\">этот сценарий siri</a>.\n2. нажми \"поделиться\" выше и выбери \"save to photos\" в открывшемся окне.\nесли появляется окно с запросом разрешения, то прочитай его, потом нажми \"всегда разрешать\".\n\nальтернативный метод: зажми кнопку \"скачать\", затем скрой превью и выбери \"загрузить файл по ссылке\" в появившемся окне.\nпотом открой загрузки в safari, выбери скачанный файл, нажми иконку \"поделиться\", и, наконец, нажми \"сохранить видео\".",
         "DownloadPopupDescription": "кнопка скачивания открывает новое окно с файлом. ты можешь отключить выбор метода скачивания файла в настройках.",
         "DownloadPopupWayToSave": "выбери, как сохранить",
         "ClickToCopy": "нажми, чтобы скопировать",
@@ -94,7 +94,7 @@
         "ChangelogPressToHide": "скрыть",
         "Donate": "задонатить",
         "DonateSub": "ты можешь помочь!",
-        "DonateExplanation": "{appName} не пихает рекламу тебе в лицо и не продаёт твои личные данные, а значит работает <span class=\"text-backdrop\">совершенно бесплатно</span>. но оказывается, что разработка и поддержка сервиса, которым пользуются более 80 тысяч людей, обходится довольно трудно.\n\nесли {appName} тебе помог и ты хочешь поблагодарить разработчика, то это можно сделать через донаты! каждый рубль помогает мне, моим котам, и {appName}! спасибо :)",
+        "DonateExplanation": "{appName} не пихает рекламу тебе в лицо и не продаёт твои личные данные, а значит работает <span class=\"text-backdrop\">совершенно бесплатно</span>. но оказывается, что разработка и поддержка сервиса, которым пользуются более 150 тысяч людей, обходится довольно затратно.\n\nесли {appName} тебе помог и ты хочешь поблагодарить разработчика, то это можно сделать через донаты! каждый рубль помогает мне, моим котам, и {appName}! спасибо :)",
         "DonateVia": "открыть",
         "DonateHireMe": "...или же ты можешь <a class=\"text-backdrop italic\" href=\"{s}\" target=\"_blank\">пригласить меня на работу</a> :)",
         "SettingsVideoMute": "убрать аудио",

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, '<br/>').replace(/{appName}/g, appName).replace(/{repo}/g, repo).replace(/\*;/g, "&bull;");
+    return s.replace(/\n/g, '<br/>').replace(/{saveToGalleryShortcut}/g, links.saveToGalleryShortcut).replace(/{appName}/g, appName).replace(/{repo}/g, repo).replace(/\*;/g, "&bull;");
 }
 export function replaceAll(lang, str, string, replacement) {
     let s = replaceBase(str[string])

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

src/modules/pageRender/elements.js

@@ -12,7 +12,7 @@ export function switcher(obj) {
         }
     }
 
-    if (obj.noParent) return `<div class="switches">${items}</div>`;
+    if (obj.noParent) return `<div id="${obj.name}" class="switches">${items}</div>`;
     return `<div id="${obj.name}-switcher" class="switch-container">
             ${obj.subtitle ? `<div class="subtitle">${obj.subtitle}</div>` : ``}
             <div class="switches">${items}</div>