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

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({