frontend: use class instead of id for reoccurring elements
This commit is contained in:
dumbmoron
parent
c04c37a548
commit
4680582ce9
3 changed files with 59 additions and 59 deletions
|
|
@ -107,7 +107,7 @@ a {
|
|||
color: var(--accent-subtext);
|
||||
}
|
||||
.switches::-webkit-scrollbar,
|
||||
#popup-content::-webkit-scrollbar {
|
||||
.popup-content::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
:focus-visible {
|
||||
|
|
@ -450,22 +450,22 @@ button:active,
|
|||
.popup.small.visible {
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.popup.small #popup-header-contents,
|
||||
.popup.small .popup-header-contents,
|
||||
.popup.small .popup-content-inner,
|
||||
.popup.small #popup-header {
|
||||
.popup.small .popup-header {
|
||||
padding: 0;
|
||||
}
|
||||
.popup.small #popup-header {
|
||||
.popup.small .popup-header {
|
||||
position: relative;
|
||||
border: none;
|
||||
}
|
||||
.popup.small #popup-title {
|
||||
.popup.small .popup-title {
|
||||
margin-bottom: 0.6rem;
|
||||
}
|
||||
.popup.small .explanation {
|
||||
margin-bottom: 0.9rem;
|
||||
}
|
||||
#close-error {
|
||||
.close-error {
|
||||
background: var(--accent);
|
||||
color: var(--background);
|
||||
}
|
||||
|
|
@ -520,7 +520,7 @@ button:active,
|
|||
font-size: 1.1rem;
|
||||
padding-bottom: var(--padding-1);
|
||||
}
|
||||
#popup-desc,
|
||||
.popup-desc,
|
||||
.desc-error,
|
||||
#popup-info-desc {
|
||||
width: 100%;
|
||||
|
|
@ -533,7 +533,7 @@ button:active,
|
|||
.desc-error {
|
||||
padding-bottom: 1.5rem;
|
||||
}
|
||||
#popup-title {
|
||||
.popup-title {
|
||||
font-size: 1.5rem;
|
||||
line-height: 1.2em;
|
||||
display: flex;
|
||||
|
|
@ -541,11 +541,11 @@ button:active,
|
|||
margin-bottom: 0.4rem;
|
||||
margin-top: 0.4rem;
|
||||
}
|
||||
#popup-above-title {
|
||||
.popup-above-title {
|
||||
color: var(--accent-subtext);
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
#popup-content {
|
||||
.popup-content {
|
||||
overflow-x: scroll;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
|
|
@ -564,7 +564,7 @@ button:active,
|
|||
.bullpadding {
|
||||
padding-left: 0.58rem;
|
||||
}
|
||||
#popup-header {
|
||||
.popup-header {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
padding-top: calc(env(safe-area-inset-top)/2 + 1.7rem);
|
||||
|
|
@ -646,16 +646,16 @@ button:active,
|
|||
.switch:focus {
|
||||
box-shadow: var(--inset-focus) inset;
|
||||
}
|
||||
#popup-tabs .switch {
|
||||
.popup-tabs .switch {
|
||||
background: none;
|
||||
}
|
||||
.desktop #popup-tabs .switch:hover,
|
||||
#popup-tabs .switch:active {
|
||||
.desktop .popup-tabs .switch:hover,
|
||||
.popup-tabs .switch:active {
|
||||
background: var(--accent-hover-transparent);
|
||||
box-shadow: 0 0 0 0.1rem var(--accent-highlight) inset;
|
||||
}
|
||||
.switch[data-enabled="true"],
|
||||
#popup-tabs .switch[data-enabled="true"] {
|
||||
.popup-tabs .switch[data-enabled="true"] {
|
||||
color: var(--background);
|
||||
background: var(--accent)!important;
|
||||
cursor: default;
|
||||
|
|
@ -693,20 +693,20 @@ button:active,
|
|||
padding: var(--gap-no-icon);
|
||||
overflow: clip;
|
||||
}
|
||||
#back-button {
|
||||
.back-button {
|
||||
padding: 0;
|
||||
background: none;
|
||||
max-width: 4rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
#back-button svg path,
|
||||
.back-button svg path,
|
||||
.collapse-indicator svg path {
|
||||
fill: var(--accent);
|
||||
}
|
||||
.popup-tab-content[data-enabled="false"] {
|
||||
display: none;
|
||||
}
|
||||
#popup-tabs {
|
||||
.popup-tabs {
|
||||
z-index: 999;
|
||||
bottom: 0;
|
||||
position: absolute;
|
||||
|
|
@ -823,7 +823,7 @@ button:active,
|
|||
}
|
||||
.popup-content-inner,
|
||||
.tab-content-settings,
|
||||
#popup-header-contents {
|
||||
.popup-header-contents {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
|
@ -947,15 +947,15 @@ button:active,
|
|||
#bottom #paste,
|
||||
#footer .switch,
|
||||
#audioMode,
|
||||
#popup-content .switches,
|
||||
.popup-content .switches,
|
||||
.checkbox,
|
||||
.changelog-img,
|
||||
.changelog-banner,
|
||||
#close-error,
|
||||
.close-error,
|
||||
.changelog-tag-version,
|
||||
#download-switcher .switch,
|
||||
#popup-about .switch,
|
||||
#popup-tabs .switch,
|
||||
.popup-tabs .switch,
|
||||
.text-to-copy,
|
||||
.text-to-copy.text-backdrop,
|
||||
#filename-preview {
|
||||
|
|
@ -965,16 +965,16 @@ button:active,
|
|||
border-radius: 3px / 4px;
|
||||
}
|
||||
.popup,
|
||||
.scrollable #popup-content {
|
||||
.scrollable .popup-content {
|
||||
border-radius: 8px;
|
||||
}
|
||||
#popup-header .glass-bkg {
|
||||
.popup-header .glass-bkg {
|
||||
border-top-left-radius: 8px 9px;
|
||||
border-top-right-radius: 8px 9px;
|
||||
border-bottom: var(--accent-highlight) solid 0.1rem;
|
||||
top: -1px;
|
||||
}
|
||||
#popup-tabs .glass-bkg {
|
||||
.popup-tabs .glass-bkg {
|
||||
border-bottom-left-radius: 8px 9px;
|
||||
border-bottom-right-radius: 8px 9px;
|
||||
border-top: var(--accent-highlight) solid 0.1rem;
|
||||
|
|
@ -1103,12 +1103,12 @@ button:active,
|
|||
padding-top: calc(env(safe-area-inset-bottom)/2 + 1rem);
|
||||
}
|
||||
.popup,
|
||||
#popup-header .glass-bkg,
|
||||
#popup-tabs .glass-bkg,
|
||||
.popup-header .glass-bkg,
|
||||
.popup-tabs .glass-bkg,
|
||||
.glass-bkg.small {
|
||||
border-radius: 0;
|
||||
}
|
||||
#popup-tabs .glass-bkg {
|
||||
.popup-tabs .glass-bkg {
|
||||
bottom: 0;
|
||||
}
|
||||
.switches {
|
||||
|
|
@ -1141,13 +1141,13 @@ button:active,
|
|||
transform: none;
|
||||
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;
|
||||
}
|
||||
.no-animation .popup.small {
|
||||
transition: none;
|
||||
}
|
||||
#close-error {
|
||||
.close-error {
|
||||
bottom: 3rem;
|
||||
}
|
||||
#picker-holder::-webkit-scrollbar {
|
||||
|
|
@ -1166,13 +1166,13 @@ button:active,
|
|||
max-height: 100%;
|
||||
box-shadow: none;
|
||||
}
|
||||
#popup-tabs {
|
||||
.popup-tabs {
|
||||
padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.5rem);
|
||||
}
|
||||
.popup-content-inner,
|
||||
.tab-content-settings,
|
||||
.popup-tabs-child,
|
||||
#popup-header-contents {
|
||||
.popup-header-contents {
|
||||
padding-left: 0.7rem;
|
||||
padding-right: 0.7rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,27 +59,27 @@ export function popup(obj) {
|
|||
body = ``
|
||||
for (let i = 0; i < obj.body.length; i++) {
|
||||
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"]) {
|
||||
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 `
|
||||
${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 id="popup-header-contents">
|
||||
<div class="popup-header">
|
||||
<div class="popup-header-contents">
|
||||
${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.title ? `<div id="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.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 id="popup-content" class="popup-content-inner">
|
||||
${body}${obj.buttonOnly ? `<button id="close-error" class="switch" onclick="popup('${obj.name}', 0)">${obj.buttonText}</button>` : ''}
|
||||
<div class="popup-content popup-content-inner">
|
||||
${body}${obj.buttonOnly ? `<button class="close-error switch" onclick="popup('${obj.name}', 0)">${obj.buttonText}</button>` : ''}
|
||||
</div>
|
||||
${classes.includes("small") ? `<div class="glass-bkg small"></div>` : ''}
|
||||
${obj.standalone ? `</div>` : ''}`
|
||||
|
|
@ -87,7 +87,7 @@ export function popup(obj) {
|
|||
|
||||
export function multiPagePopup(obj) {
|
||||
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}
|
||||
</button>`;
|
||||
|
||||
|
|
@ -99,16 +99,16 @@ export function multiPagePopup(obj) {
|
|||
|
||||
return `
|
||||
<div id="popup-${obj.name}" class="popup center box scrollable">
|
||||
<div id="popup-content">
|
||||
${obj.header ? `<div id="popup-header" class="popup-header">
|
||||
<div id="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.title ? `<div id="popup-title">${obj.header.title}</div>` : ''}
|
||||
<div class="popup-content">
|
||||
${obj.header ? `<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>
|
||||
<div class="glass-bkg alone"></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="glass-bkg alone"></div>
|
||||
</div>
|
||||
|
|
@ -131,7 +131,7 @@ export function collapsibleList(arr) {
|
|||
}
|
||||
export function popupWithBottomButtons(obj) {
|
||||
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}
|
||||
</button>`
|
||||
|
||||
|
|
@ -140,17 +140,17 @@ export function popupWithBottomButtons(obj) {
|
|||
}
|
||||
return `
|
||||
<div id="popup-${obj.name}" class="popup center box scrollable">
|
||||
<div id="popup-content">
|
||||
${obj.header ? `<div id="popup-header" class="popup-header">
|
||||
<div id="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.title ? `<div id="popup-title">${obj.header.title}</div>` : ''}
|
||||
<div class="popup-content">
|
||||
${obj.header ? `<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>` : ''}
|
||||
${obj.header.explanation ? `<div class="explanation">${obj.header.explanation}</div>` : ''}
|
||||
</div>
|
||||
<div class="glass-bkg alone"></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 class="glass-bkg alone"></div>
|
||||
</div>
|
||||
|
|
@ -171,7 +171,7 @@ export function socialLinks(lang) {
|
|||
}
|
||||
export function settingsCategory(obj) {
|
||||
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>`
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,11 +20,11 @@ export function changelogHistory() { // blockId 0
|
|||
`width="${history[i]["banner"]["width"]}" ` +
|
||||
`height="${history[i]["banner"]["height"]}" ` +
|
||||
`onerror="this.style.opacity=0" loading="lazy">`+
|
||||
`</img>
|
||||
`
|
||||
</div>` : ''}
|
||||
<div id="popup-desc" class="changelog-tags">${history[i]["version"]}</div>
|
||||
<div id="popup-desc" class="changelog-subtitle">${history[i]["title"]}</div>
|
||||
<div id="popup-desc" class="desc-padding">${history[i]["content"]}</div>`
|
||||
<div class="popup-desc changelog-tags">${history[i]["version"]}</div>
|
||||
<div class="popup-desc changelog-subtitle">${history[i]["title"]}</div>
|
||||
<div class="popup-desc desc-padding">${history[i]["content"]}</div>`
|
||||
}
|
||||
render = cleanHTML(render);
|
||||
cache['0'] = render;
|
||||
|
|
|
|||
Loading…
Reference in a new issue