admin/cobalt
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

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
Download Patch File Download Diff File Expand all files Collapse all files

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