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

frontend: use class instead of id for reoccurring elements

Browse source
This commit is contained in:
dumbmoron 2024-01-13 00:35:07 +00:00
parent c04c37a548
commit 4680582ce9
No known key found for this signature in database
GPG key ID: C59997C76C6A8E5F
3 changed files with 59 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
src/front/cobalt.css
View file

@ -107,7 +107,7 @@ a {
color: var(--accent-subtext); color: var(--accent-subtext);
} }
.switches::-webkit-scrollbar, .switches::-webkit-scrollbar,
#popup-content::-webkit-scrollbar { .popup-content::-webkit-scrollbar {
display: none; display: none;
} }
:focus-visible { :focus-visible {
@ -450,22 +450,22 @@ button:active,
.popup.small.visible { .popup.small.visible {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.popup.small #popup-header-contents, .popup.small .popup-header-contents,
.popup.small .popup-content-inner, .popup.small .popup-content-inner,
.popup.small #popup-header { .popup.small .popup-header {
padding: 0; padding: 0;
} }
.popup.small #popup-header { .popup.small .popup-header {
position: relative; position: relative;
border: none; border: none;
} }
.popup.small #popup-title { .popup.small .popup-title {
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
} }
.popup.small .explanation { .popup.small .explanation {
margin-bottom: 0.9rem; margin-bottom: 0.9rem;
} }
#close-error { .close-error {
background: var(--accent); background: var(--accent);
color: var(--background); color: var(--background);
} }
@ -520,7 +520,7 @@ button:active,
font-size: 1.1rem; font-size: 1.1rem;
padding-bottom: var(--padding-1); padding-bottom: var(--padding-1);
} }
#popup-desc, .popup-desc,
.desc-error, .desc-error,
#popup-info-desc { #popup-info-desc {
width: 100%; width: 100%;
@ -533,7 +533,7 @@ button:active,
.desc-error { .desc-error {
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
} }
#popup-title { .popup-title {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.2em; line-height: 1.2em;
display: flex; display: flex;
@ -541,11 +541,11 @@ button:active,
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
margin-top: 0.4rem; margin-top: 0.4rem;
} }
#popup-above-title { .popup-above-title {
color: var(--accent-subtext); color: var(--accent-subtext);
font-size: 0.8rem; font-size: 0.8rem;
} }
#popup-content { .popup-content {
overflow-x: scroll; overflow-x: scroll;
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
@ -564,7 +564,7 @@ button:active,
.bullpadding { .bullpadding {
padding-left: 0.58rem; padding-left: 0.58rem;
} }
#popup-header { .popup-header {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
padding-top: calc(env(safe-area-inset-top)/2 + 1.7rem); padding-top: calc(env(safe-area-inset-top)/2 + 1.7rem);
@ -646,16 +646,16 @@ button:active,
.switch:focus { .switch:focus {
box-shadow: var(--inset-focus) inset; box-shadow: var(--inset-focus) inset;
} }
#popup-tabs .switch { .popup-tabs .switch {
background: none; background: none;
} }
.desktop #popup-tabs .switch:hover, .desktop .popup-tabs .switch:hover,
#popup-tabs .switch:active { .popup-tabs .switch:active {
background: var(--accent-hover-transparent); background: var(--accent-hover-transparent);
box-shadow: 0 0 0 0.1rem var(--accent-highlight) inset; box-shadow: 0 0 0 0.1rem var(--accent-highlight) inset;
} }
.switch[data-enabled="true"], .switch[data-enabled="true"],
#popup-tabs .switch[data-enabled="true"] { .popup-tabs .switch[data-enabled="true"] {
color: var(--background); color: var(--background);
background: var(--accent)!important; background: var(--accent)!important;
cursor: default; cursor: default;
@ -693,20 +693,20 @@ button:active,
padding: var(--gap-no-icon); padding: var(--gap-no-icon);
overflow: clip; overflow: clip;
} }
#back-button { .back-button {
padding: 0; padding: 0;
background: none; background: none;
max-width: 4rem; max-width: 4rem;
font-size: 1rem; font-size: 1rem;
} }
#back-button svg path, .back-button svg path,
.collapse-indicator svg path { .collapse-indicator svg path {
fill: var(--accent); fill: var(--accent);
} }
.popup-tab-content[data-enabled="false"] { .popup-tab-content[data-enabled="false"] {
display: none; display: none;
} }
#popup-tabs { .popup-tabs {
z-index: 999; z-index: 999;
bottom: 0; bottom: 0;
position: absolute; position: absolute;
@ -823,7 +823,7 @@ button:active,
} }
.popup-content-inner, .popup-content-inner,
.tab-content-settings, .tab-content-settings,
#popup-header-contents { .popup-header-contents {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
@ -947,15 +947,15 @@ button:active,
#bottom #paste, #bottom #paste,
#footer .switch, #footer .switch,
#audioMode, #audioMode,
#popup-content .switches, .popup-content .switches,
.checkbox, .checkbox,
.changelog-img, .changelog-img,
.changelog-banner, .changelog-banner,
#close-error, .close-error,
.changelog-tag-version, .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 {
@ -965,16 +965,16 @@ button:active,
border-radius: 3px / 4px; border-radius: 3px / 4px;
} }
.popup, .popup,
.scrollable #popup-content { .scrollable .popup-content {
border-radius: 8px; border-radius: 8px;
} }
#popup-header .glass-bkg { .popup-header .glass-bkg {
border-top-left-radius: 8px 9px; border-top-left-radius: 8px 9px;
border-top-right-radius: 8px 9px; border-top-right-radius: 8px 9px;
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: 8px 9px;
border-bottom-right-radius: 8px 9px; border-bottom-right-radius: 8px 9px;
border-top: var(--accent-highlight) solid 0.1rem; border-top: var(--accent-highlight) solid 0.1rem;
@ -1103,12 +1103,12 @@ button:active,
padding-top: calc(env(safe-area-inset-bottom)/2 + 1rem); padding-top: calc(env(safe-area-inset-bottom)/2 + 1rem);
} }
.popup, .popup,
#popup-header .glass-bkg, .popup-header .glass-bkg,
#popup-tabs .glass-bkg, .popup-tabs .glass-bkg,
.glass-bkg.small { .glass-bkg.small {
border-radius: 0; border-radius: 0;
} }
#popup-tabs .glass-bkg { .popup-tabs .glass-bkg {
bottom: 0; bottom: 0;
} }
.switches { .switches {
@ -1141,13 +1141,13 @@ button:active,
transform: none; transform: none;
transition: transform 210ms cubic-bezier(0.062, 0.82, 0.165, 1), opacity 130ms ease-in-out; transition: transform 210ms cubic-bezier(0.062, 0.82, 0.165, 1), opacity 130ms ease-in-out;
} }
.popup.small #popup-header { .popup.small .popup-header {
background: none; background: none;
} }
.no-animation .popup.small { .no-animation .popup.small {
transition: none; transition: none;
} }
#close-error { .close-error {
bottom: 3rem; bottom: 3rem;
} }
#picker-holder::-webkit-scrollbar { #picker-holder::-webkit-scrollbar {
@ -1166,13 +1166,13 @@ button:active,
max-height: 100%; max-height: 100%;
box-shadow: none; box-shadow: none;
} }
#popup-tabs { .popup-tabs {
padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.5rem); padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.5rem);
} }
.popup-content-inner, .popup-content-inner,
.tab-content-settings, .tab-content-settings,
.popup-tabs-child, .popup-tabs-child,
#popup-header-contents { .popup-header-contents {
padding-left: 0.7rem; padding-left: 0.7rem;
padding-right: 0.7rem; padding-right: 0.7rem;
} }

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

@ -59,27 +59,27 @@ export function popup(obj) {
body = `` body = ``
for (let i = 0; i < obj.body.length; i++) { for (let i = 0; i < obj.body.length; i++) {
if (obj.body[i]["text"].length > 0) { if (obj.body[i]["text"].length > 0) {
classes = obj.body[i]["classes"] ? obj.body[i]["classes"] : [] classes = obj.body[i]["classes"] ?? []
if (i !== obj.body.length - 1 && !obj.body[i]["nopadding"]) { if (i !== obj.body.length - 1 && !obj.body[i]["nopadding"]) {
classes.push("desc-padding") classes.push("desc-padding")
} }
body += obj.body[i]["raw"] ? obj.body[i]["text"] : `<div id="popup-desc" class="${classes.length > 0 ? classes.join(' ') : ''}">${obj.body[i]["text"]}</div>` body += obj.body[i]["raw"] ? obj.body[i]["text"] : `<div class="${['popup-desc', ...classes].join(' ')}">${obj.body[i]["text"]}</div>`
} }
} }
} }
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 id="popup-header" class="popup-header"> <div class="popup-header">
<div id="popup-header-contents"> <div class="popup-header-contents">
${obj.buttonOnly ? obj.header.emoji : ``} ${obj.buttonOnly ? obj.header.emoji : ``}
${obj.header.aboveTitle ? `<a id="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''} ${obj.header.aboveTitle ? `<a class="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
${obj.header.title ? `<div id="popup-title">${obj.header.title}</div>` : ''} ${obj.header.title ? `<div class="popup-title">${obj.header.title}</div>` : ''}
${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''} ${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
</div> </div>
${!obj.buttonOnly ? `<div class="glass-bkg alone"></div>` : ''} ${!obj.buttonOnly ? `<div class="glass-bkg alone"></div>` : ''}
</div> </div>
<div id="popup-content" class="popup-content-inner"> <div class="popup-content popup-content-inner">
${body}${obj.buttonOnly ? `<button id="close-error" class="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>
${classes.includes("small") ? `<div class="glass-bkg small"></div>` : ''} ${classes.includes("small") ? `<div class="glass-bkg small"></div>` : ''}
${obj.standalone ? `</div>` : ''}` ${obj.standalone ? `</div>` : ''}`
@ -87,7 +87,7 @@ export function popup(obj) {
export function multiPagePopup(obj) { export function multiPagePopup(obj) {
let tabs = ` let tabs = `
<button id="back-button" class="switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}> <button class="back-button switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}>
${backButtonSVG} ${backButtonSVG}
</button>`; </button>`;
@ -99,16 +99,16 @@ export function multiPagePopup(obj) {
return ` return `
<div id="popup-${obj.name}" class="popup center box scrollable"> <div id="popup-${obj.name}" class="popup center box scrollable">
<div id="popup-content"> <div class="popup-content">
${obj.header ? `<div id="popup-header" class="popup-header"> ${obj.header ? `<div class="popup-header">
<div id="popup-header-contents"> <div class="popup-header-contents">
${obj.header.aboveTitle ? `<a id="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''} ${obj.header.aboveTitle ? `<a class="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
${obj.header.title ? `<div id="popup-title">${obj.header.title}</div>` : ''} ${obj.header.title ? `<div class="popup-title">${obj.header.title}</div>` : ''}
${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''} ${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
</div> </div>
<div class="glass-bkg alone"></div> <div class="glass-bkg alone"></div>
</div>` : ''}${tabContent}</div> </div>` : ''}${tabContent}</div>
<div id="popup-tabs" class="switches popup-tabs"> <div class="switches popup-tabs">
<div class="switches popup-tabs-child">${tabs}</div> <div class="switches popup-tabs-child">${tabs}</div>
<div class="glass-bkg alone"></div> <div class="glass-bkg alone"></div>
</div> </div>
@ -131,7 +131,7 @@ export function collapsibleList(arr) {
} }
export function popupWithBottomButtons(obj) { export function popupWithBottomButtons(obj) {
let tabs = ` let tabs = `
<button id="back-button" class="switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}> <button class="back-button switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}>
${backButtonSVG} ${backButtonSVG}
</button>` </button>`
@ -140,17 +140,17 @@ export function popupWithBottomButtons(obj) {
} }
return ` return `
<div id="popup-${obj.name}" class="popup center box scrollable"> <div id="popup-${obj.name}" class="popup center box scrollable">
<div id="popup-content"> <div class="popup-content">
${obj.header ? `<div id="popup-header" class="popup-header"> ${obj.header ? `<div class="popup-header">
<div id="popup-header-contents"> <div class="popup-header-contents">
${obj.header.aboveTitle ? `<a id="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''} ${obj.header.aboveTitle ? `<a class="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
${obj.header.title ? `<div id="popup-title">${obj.header.title}</div>` : ''} ${obj.header.title ? `<div class="popup-title">${obj.header.title}</div>` : ''}
${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''} ${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
${obj.header.explanation ? `<div class="explanation">${obj.header.explanation}</div>` : ''} ${obj.header.explanation ? `<div class="explanation">${obj.header.explanation}</div>` : ''}
</div> </div>
<div class="glass-bkg alone"></div> <div class="glass-bkg alone"></div>
</div>` : ''}${obj.content}</div> </div>` : ''}${obj.content}</div>
<div id="popup-tabs" class="switches popup-tabs"> <div class="switches popup-tabs">
<div id="picker-buttons" class="switches popup-tabs-child">${tabs}</div> <div id="picker-buttons" class="switches popup-tabs-child">${tabs}</div>
<div class="glass-bkg alone"></div> <div class="glass-bkg alone"></div>
</div> </div>
@ -171,7 +171,7 @@ export function socialLinks(lang) {
} }
export function settingsCategory(obj) { export function settingsCategory(obj) {
return `<div id="settings-${obj.name}" class="settings-category"> return `<div id="settings-${obj.name}" class="settings-category">
<div class="category-title">${obj.title ? obj.title : obj.name}</div> <div class="category-title">${obj.title ?? obj.name}</div>
<div class="category-content">${obj.body}</div> <div class="category-content">${obj.body}</div>
</div>` </div>`
} }

8
src/modules/pageRender/onDemand.js
View file

@ -20,11 +20,11 @@ export function changelogHistory() { // blockId 0
`width="${history[i]["banner"]["width"]}" ` + `width="${history[i]["banner"]["width"]}" ` +
`height="${history[i]["banner"]["height"]}" ` + `height="${history[i]["banner"]["height"]}" ` +
`onerror="this.style.opacity=0" loading="lazy">`+ `onerror="this.style.opacity=0" loading="lazy">`+
`</img> `
</div>` : ''} </div>` : ''}
<div id="popup-desc" class="changelog-tags">${history[i]["version"]}</div> <div class="popup-desc changelog-tags">${history[i]["version"]}</div>
<div id="popup-desc" class="changelog-subtitle">${history[i]["title"]}</div> <div class="popup-desc changelog-subtitle">${history[i]["title"]}</div>
<div id="popup-desc" class="desc-padding">${history[i]["content"]}</div>` <div class="popup-desc desc-padding">${history[i]["content"]}</div>`
} }
render = cleanHTML(render); render = cleanHTML(render);
cache['0'] = render; cache['0'] = render;