web: new popup with meowbalt, fixes, removed migration popup

- new popup style featuring meowbalt
- removed migration popup
- rounder corners
- bottom glass-bkg in popups is no longer rounded on top right (accidentally matched as :last-child)
- small popup is now of fixed width on desktop
- small popup animation should be smoother on mobile
- better ui scaling across resolutions
This commit is contained in:
wukko 2024-03-06 19:12:04 +06:00
parent 3315be4350
commit ea7ac37a0f
8 changed files with 79 additions and 74 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

View file

@ -192,7 +192,7 @@ input[type="text"],
z-index: -1; z-index: -1;
position: absolute; position: absolute;
border: var(--accent-highlight) solid 0.15rem; border: var(--accent-highlight) solid 0.15rem;
border-radius: 8px/9px; border-radius: 22px;
} }
.desktop button:hover, .desktop button:hover,
.desktop .switch:hover, .desktop .switch:hover,
@ -441,11 +441,17 @@ button:active,
-webkit-backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
} }
.popup.small { .popup.small {
width: 20%; width: 21rem;
box-shadow: 0px 0px 60px 0px var(--accent-hover); box-shadow: 0px 0px 60px 0px var(--accent-hover);
padding: 1.7rem; padding: 18px;
transform: translate(-50%,-50%)scale(.95); transform: translate(-50%,-50%)scale(.95);
pointer-events: all; pointer-events: all;
border-radius: 22px;
}
.popup.small .popup-content-inner {
display: flex;
flex-direction: column;
gap: 18px;
} }
.popup.small.visible { .popup.small.visible {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
@ -462,12 +468,30 @@ button:active,
.popup.small .popup-title { .popup.small .popup-title {
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
} }
.popup.small .explanation {
margin-bottom: 0.9rem;
}
.popup.small .close-error.switch { .popup.small .close-error.switch {
background: var(--accent)!important; background: var(--accent)!important;
color: var(--background); color: var(--background);
height: 2.5rem;
}
#popup-error,
#popup-download {
display: flex;
flex-direction: column;
padding-top: 4rem;
}
#popup-error {
justify-content: center;
align-items: center;
}
.popout-meowbalt {
position: absolute;
top: -7rem;
user-select: none;
-webkit-user-select: none;
pointer-events: none;
height: 180px;
width: 180px;
aspect-ratio: 1/1;
} }
.popup.scrollable { .popup.scrollable {
height: 95%; height: 95%;
@ -531,7 +555,8 @@ button:active,
-webkit-user-select: text; -webkit-user-select: text;
} }
.desc-error { .desc-error {
padding-bottom: 1.5rem; padding-bottom: 0rem;
text-align: center;
} }
.popup-title { .popup-title {
font-size: 1.5rem; font-size: 1.5rem;
@ -957,44 +982,43 @@ button:active,
.changelog-img, .changelog-img,
.changelog-banner, .changelog-banner,
.close-error, .close-error,
.changelog-tag-version,
#download-switcher .switch, #download-switcher .switch,
#popup-about .switch, #popup-about .switch,
.popup-tabs .switch, .popup-tabs .switch,
.text-to-copy, .text-to-copy,
.text-to-copy.text-backdrop, .text-to-copy.text-backdrop,
#filename-preview { #filename-preview {
border-radius: 6px / 7px; border-radius: 8px / 9px;
} }
[type=checkbox] { [type=checkbox] {
border-radius: 3px / 4px; border-radius: 3px / 4px;
} }
.popup, .popup,
.scrollable .popup-content { .scrollable .popup-content {
border-radius: 8px; border-radius: 12px;
} }
.popup-header .glass-bkg { .popup-header .glass-bkg {
border-top-left-radius: 8px 9px; border-top-left-radius: 11px 12px;
border-top-right-radius: 8px 9px; border-top-right-radius: 11px 12px;
border-bottom: var(--accent-highlight) solid 0.1rem; border-bottom: var(--accent-highlight) solid 0.1rem;
top: -1px; top: -1px;
} }
.popup-tabs .glass-bkg { .popup-tabs .glass-bkg {
border-bottom-left-radius: 8px 9px; border-bottom-left-radius: 11px 12px;
border-bottom-right-radius: 8px 9px; border-bottom-right-radius: 11px 12px;
border-top: var(--accent-highlight) solid 0.1rem; border-top: var(--accent-highlight) solid 0.1rem;
bottom: -1px; bottom: -1px;
} }
.switches :first-child { .switches .switch:first-child {
border-top-left-radius: 6px 7px; border-top-left-radius: 8px 9px;
border-bottom-left-radius: 6px 7px; border-bottom-left-radius: 8px 9px;
} }
.switches :last-child { .switches .switch:last-child {
border-top-right-radius: 6px 7px; border-top-right-radius: 8px 9px;
border-bottom-right-radius: 6px 7px; border-bottom-right-radius: 8px 9px;
} }
.text-backdrop { .text-backdrop {
border-radius: 3px / 4px; border-radius: 4px / 5px;
} }
.collapse-list:first-child, .collapse-list:first-child,
.collapse-list:first-child .collapse-header { .collapse-list:first-child .collapse-header {
@ -1017,17 +1041,11 @@ button:active,
} }
/* adapt the page according to screen size */ /* adapt the page according to screen size */
@media screen and (max-width: 1550px) { @media screen and (max-width: 1550px) {
.popup.small {
width: 25%
}
.popup { .popup {
width: 40%; width: 40%;
} }
} }
@media screen and (max-width: 1440px) { @media screen and (max-width: 1440px) {
.popup.small {
width: 30%
}
.popup { .popup {
width: 45%; width: 45%;
} }
@ -1038,17 +1056,11 @@ button:active,
} }
} }
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
.popup.small {
width: 35%
}
.popup { .popup {
width: 55%; width: 55%;
} }
} }
@media screen and (max-width: 1025px) { @media screen and (max-width: 1025px) {
.popup.small {
width: 40%
}
.popup { .popup {
width: 60%; width: 60%;
} }
@ -1058,6 +1070,16 @@ button:active,
width: 75%; width: 75%;
} }
} }
@media screen and (max-width: 680px) {
.popup {
width: 90%;
}
}
@media screen and (max-width: 660px) {
#cobalt-main-box {
width: calc(100% - (0.7rem * 2));
}
}
/* mobile page */ /* mobile page */
@media screen and (max-width: 499px) { @media screen and (max-width: 499px) {
.tab { .tab {
@ -1070,10 +1092,7 @@ button:active,
width: calc(100% - 1.3rem); width: calc(100% - 1.3rem);
} }
} }
@media screen and (max-width: 660px) { @media screen and (max-width: 535px) {
#cobalt-main-box {
width: calc(100% - (0.7rem * 2));
}
#cobalt-main-box #bottom { #cobalt-main-box #bottom {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
@ -1128,7 +1147,7 @@ button:active,
transform: unset; transform: unset;
} }
.popup.small { .popup.small {
width: calc(100% - 1.7rem * 2); width: calc(100% - 18px * 2);
height: auto; height: auto;
top: unset; top: unset;
bottom: 0; bottom: 0;
@ -1143,8 +1162,8 @@ button:active,
border-top: var(--accent-highlight) solid 0.15rem; border-top: var(--accent-highlight) solid 0.15rem;
} }
.popup.small.visible { .popup.small.visible {
transform: none; transform: translateY(0rem);
transition: transform 210ms cubic-bezier(0.062, 0.82, 0.165, 1), opacity 130ms ease-in-out; transition: transform 250ms cubic-bezier(0.075, 0.82, 0.165, 1), opacity 130ms ease-in-out;
} }
.popup.small .popup-header { .popup.small .popup-header {
background: none; background: none;

View file

@ -600,15 +600,11 @@ window.onload = () => {
if (setUn !== null) { if (setUn !== null) {
if (setUn) { if (setUn) {
sSet("migrated", "true") sSet("migrated", "true")
eid("desc-migration").innerHTML += `<br><br>${loc.DataTransferSuccess}`
} else {
eid("desc-migration").innerHTML += `<br><br>${loc.DataTransferError}`
} }
} }
} }
loadSettings(); loadSettings();
detectColorScheme(); detectColorScheme();
popup("migration", 1);
} }
window.history.replaceState(null, '', window.location.pathname); window.history.replaceState(null, '', window.location.pathname);

View file

@ -16,7 +16,6 @@
"AccessibilityOpenDonate": "open donation popup", "AccessibilityOpenDonate": "open donation popup",
"TitlePopupAbout": "what's cobalt?", "TitlePopupAbout": "what's cobalt?",
"TitlePopupSettings": "settings", "TitlePopupSettings": "settings",
"TitlePopupError": "uh-oh...",
"TitlePopupChangelog": "what's new?", "TitlePopupChangelog": "what's new?",
"TitlePopupDonate": "support cobalt", "TitlePopupDonate": "support cobalt",
"TitlePopupDownload": "how to save?", "TitlePopupDownload": "how to save?",

View file

@ -16,7 +16,6 @@
"AccessibilityOpenDonate": "сделать пожертвование", "AccessibilityOpenDonate": "сделать пожертвование",
"TitlePopupAbout": "что за кобальт?", "TitlePopupAbout": "что за кобальт?",
"TitlePopupSettings": "настройки", "TitlePopupSettings": "настройки",
"TitlePopupError": "опаньки...",
"TitlePopupChangelog": "что нового?", "TitlePopupChangelog": "что нового?",
"TitlePopupDonate": "поддержи кобальт", "TitlePopupDonate": "поддержи кобальт",
"TitlePopupDownload": "как сохранить?", "TitlePopupDownload": "как сохранить?",

View file

@ -69,15 +69,17 @@ export function popup(obj) {
} }
return ` return `
${obj.standalone ? `<div id="popup-${obj.name}" class="popup center${!obj.buttonOnly ? " box" : ''}${classes.length > 0 ? ' ' + classes.join(' ') : ''}">` : ''} ${obj.standalone ? `<div id="popup-${obj.name}" class="popup center${!obj.buttonOnly ? " box" : ''}${classes.length > 0 ? ' ' + classes.join(' ') : ''}">` : ''}
<div class="popup-header"> ${obj.buttonOnly ? obj.header.emoji : ``}
<div class="popup-header-contents"> ${obj.name === "error" ? `` :
${obj.buttonOnly ? obj.header.emoji : ``} `<div class="popup-header">
${obj.header.aboveTitle ? `<a class="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''} <div class="popup-header-contents">
${obj.header.title ? `<div class="popup-title">${obj.header.title}</div>` : ''} ${obj.header.aboveTitle ? `<a class="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''} ${obj.header.title ? `<div class="popup-title">${obj.header.title}</div>` : ''}
</div> ${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
${!obj.buttonOnly ? `<div class="glass-bkg alone"></div>` : ''} </div>
</div> ${!obj.buttonOnly ? `<div class="glass-bkg alone"></div>` : ''}
</div>`
}
<div class="popup-content popup-content-inner"> <div class="popup-content popup-content-inner">
${body}${obj.buttonOnly ? `<button class="close-error switch" onclick="popup('${obj.name}', 0)">${obj.buttonText}</button>` : ''} ${body}${obj.buttonOnly ? `<button class="close-error switch" onclick="popup('${obj.name}', 0)">${obj.buttonText}</button>` : ''}
</div> </div>

View file

@ -68,10 +68,12 @@ export default function(obj) {
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
<link rel="manifest" href="manifest.webmanifest"> <link rel="manifest" href="manifest.webmanifest">
<link rel="preload" href="fonts/notosansmono.css" as="style">
<link rel="stylesheet" href="fonts/notosansmono.css"> <link rel="stylesheet" href="fonts/notosansmono.css">
<link rel="stylesheet" href="cobalt.css"> <link rel="stylesheet" href="cobalt.css">
<link rel="preload" href="fonts/notosansmono.css" as="style">
<link rel="preload" href="assets/meowbalt/error.png" as="image">
<link rel="preload" href="assets/meowbalt/question.png" as="image">
</head> </head>
<body id="cobalt-body" ${platform === "d" ? 'class="desktop"' : ''}> <body id="cobalt-body" ${platform === "d" ? 'class="desktop"' : ''}>
<noscript> <noscript>
@ -531,7 +533,9 @@ export default function(obj) {
classes: ["small"], classes: ["small"],
header: { header: {
closeAria: t('AccessibilityGoBack'), closeAria: t('AccessibilityGoBack'),
emoji: emoji("🐱", 78, 1, 1), emoji: `<img class="popout-meowbalt" `
+ `draggable="false" loading="lazy"`
+ `alt="😿" src="assets/meowbalt/question.png">`,
title: t('TitlePopupDownload') title: t('TitlePopupDownload')
}, },
body: switcher({ body: switcher({
@ -551,28 +555,14 @@ export default function(obj) {
buttonOnly: true, buttonOnly: true,
classes: ["small"], classes: ["small"],
header: { header: {
title: t('TitlePopupError'), emoji: `<img class="popout-meowbalt" `
emoji: emoji("😿", 78, 1, 1), + `draggable="false" loading="lazy"`
+ `alt="😿" src="assets/meowbalt/error.png">`,
}, },
body: `<div id="desc-error" class="desc-padding subtext desc-error"></div>`, body: `<div id="desc-error" class="desc-padding subtext desc-error"></div>`,
buttonText: t('ErrorPopupCloseButton') buttonText: t('ErrorPopupCloseButton')
})} })}
</div> </div>
<div id="popup-migration-container" class="popup-from-bottom">
${popup({
name: "migration",
standalone: true,
buttonOnly: true,
classes: ["small"],
header: {
title: t('NewDomainWelcomeTitle'),
emoji: emoji("😸", 78, 1, 1),
},
body: `<div id="desc-migration" class="desc-padding subtext desc-error">${t('NewDomainWelcome')}</div>`,
buttonText: t('ErrorPopupCloseButton')
})}
<div id="popup-backdrop-message" onclick="popup('message', 0)"></div>
</div>
<div id="popup-backdrop" onclick="hideAllPopups()"></div> <div id="popup-backdrop" onclick="hideAllPopups()"></div>
<div id="home" style="visibility:hidden"> <div id="home" style="visibility:hidden">
${urgentNotice({ ${urgentNotice({