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

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

Browse source 
- 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
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
src/front/assets/meowbalt/error.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
src/front/assets/meowbalt/question.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

99
src/front/cobalt.css
View file

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

4
src/front/cobalt.js
View file

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

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

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

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

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

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

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

28
src/modules/pageRender/page.js
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="manifest" href="manifest.webmanifest">
<link rel="preload" href="fonts/notosansmono.css" as="style">
<link rel="stylesheet" href="fonts/notosansmono.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>
<body id="cobalt-body" ${platform === "d" ? 'class="desktop"' : ''}>
<noscript>
@ -531,7 +533,9 @@ export default function(obj) {
classes: ["small"],
header: {
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')
},
body: switcher({
@ -551,28 +555,14 @@ export default function(obj) {
buttonOnly: true,
classes: ["small"],
header: {
title: t('TitlePopupError'),
emoji: emoji("😿", 78, 1, 1),
emoji: `<img class="popout-meowbalt" `
+ `draggable="false" loading="lazy"`
+ `alt="😿" src="assets/meowbalt/error.png">`,
},
body: `<div id="desc-error" class="desc-padding subtext desc-error"></div>`,
buttonText: t('ErrorPopupCloseButton')
})}
</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="home" style="visibility:hidden">
${urgentNotice({