mirror of
https://github.com/hrfee/jfa-go.git
synced 2024-12-22 09:00:10 +00:00
html/css: fix overlap of top button row on some pages
row with language, light/dark, logout etc. was overlapping with content on small screens on some pages, as I forgot to bring over changes made to the admin page. Also improved some other CSS, and factored out the language menu into html/lang-select.html.
This commit is contained in:
parent
ea57d657fe
commit
11eb907ced
GPG Key ID:
BBC65952848FB1A2
@ -543,26 +543,8 @@
|
|||||||
<div class="page-container m-2 lg:my-20 lg:mx-64 flex flex-col gap-4">
|
<div class="page-container m-2 lg:my-20 lg:mx-64 flex flex-col gap-4">
|
||||||
<div class="top-2 inset-x-2 lg:absolute flex flex-row justify-between">
|
<div class="top-2 inset-x-2 lg:absolute flex flex-row justify-between">
|
||||||
<div class="flex flex-row gap-2">
|
<div class="flex flex-row gap-2">
|
||||||
<span class="dropdown z-[11]" tabindex="0" id="lang-dropdown">
|
{{ template "lang-select.html" . }}
|
||||||
<span class="button ~urge dropdown-button">
|
<span class="button ~warning h-min" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
|
||||||
<i class="ri-global-line"></i>
|
|
||||||
<span class="ml-2 chev"></span>
|
|
||||||
</span>
|
|
||||||
<div class="dropdown-display">
|
|
||||||
<div class="card ~neutral @low">
|
|
||||||
<label class="switch pb-4">
|
|
||||||
<input type="radio" name="lang-time" id="lang-12h">
|
|
||||||
<span>{{ .strings.time12h }}</span>
|
|
||||||
</label>
|
|
||||||
<label class="switch pb-4">
|
|
||||||
<input type="radio" name="lang-time" id="lang-24h">
|
|
||||||
<span>{{ .strings.time24h }}</span>
|
|
||||||
</label>
|
|
||||||
<div id="lang-list"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-row gap-2">
|
<div class="flex flex-row gap-2">
|
||||||
<span class="button ~critical @low unfocused" id="logout-button">{{ .strings.logout }}</span>
|
<span class="button ~critical @low unfocused" id="logout-button">{{ .strings.logout }}</span>
|
||||||
|
|||||||
@ -35,20 +35,11 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{ template "account-linking.html" . }}
|
{{ template "account-linking.html" . }}
|
||||||
<div class="top-2 left-2 absolute">
|
|
||||||
<span class="dropdown" tabindex="0" id="lang-dropdown">
|
|
||||||
<span class="button ~urge dropdown-button">
|
|
||||||
<i class="ri-global-line"></i>
|
|
||||||
<span class="ml-2 chev"></span>
|
|
||||||
</span>
|
|
||||||
<div class="dropdown-display">
|
|
||||||
<div class="card ~neutral @low" id="lang-list">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div id="notification-box"></div>
|
<div id="notification-box"></div>
|
||||||
<div class="page-container m-2 lg:my-20 lg:mx-64">
|
<div class="page-container m-2 lg:my-20 lg:mx-64 flex flex-col gap-4">
|
||||||
|
<div class="top-2 inset-x-2 lg:absolute flex flex-row justify-between">
|
||||||
|
{{ template "lang-select.html" . }}
|
||||||
|
</div>
|
||||||
<div class="card dark:~d_neutral @low">
|
<div class="card dark:~d_neutral @low">
|
||||||
<div class="flex flex-col md:flex-row gap-3 items-baseline mb-2">
|
<div class="flex flex-col md:flex-row gap-3 items-baseline mb-2">
|
||||||
<span class="heading mr-5">
|
<span class="heading mr-5">
|
||||||
|
|||||||
19
html/lang-select.html
Normal file
19
html/lang-select.html
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
<span class="dropdown z-[11]" tabindex="0" id="lang-dropdown">
|
||||||
|
<span class="button ~urge dropdown-button">
|
||||||
|
<i class="ri-global-line"></i>
|
||||||
|
<span class="ml-2 chev"></span>
|
||||||
|
</span>
|
||||||
|
<div class="dropdown-display">
|
||||||
|
<div class="card ~neutral @low flex flex-col gap-2">
|
||||||
|
<label class="switch">
|
||||||
|
<input type="radio" name="lang-time" id="lang-12h">
|
||||||
|
<span>{{ .strings.time12h }}</span>
|
||||||
|
</label>
|
||||||
|
<label class="switch">
|
||||||
|
<input type="radio" name="lang-time" id="lang-24h">
|
||||||
|
<span>{{ .strings.time24h }}</span>
|
||||||
|
</label>
|
||||||
|
<div id="lang-list"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
@ -10,16 +10,7 @@
|
|||||||
<div class="page-container m-2 lg:my-20 lg:mx-64 flex flex-col gap-4">
|
<div class="page-container m-2 lg:my-20 lg:mx-64 flex flex-col gap-4">
|
||||||
<div class="top-2 inset-x-2 lg:absolute flex flex-row justify-between">
|
<div class="top-2 inset-x-2 lg:absolute flex flex-row justify-between">
|
||||||
<div class="flex flex-row gap-2">
|
<div class="flex flex-row gap-2">
|
||||||
<span class="dropdown" tabindex="0" id="lang-dropdown">
|
{{ template "lang-select.html" . }}
|
||||||
<span class="button ~urge dropdown-button">
|
|
||||||
<i class="ri-global-line"></i>
|
|
||||||
<span class="ml-2 chev"></span>
|
|
||||||
</span>
|
|
||||||
<div class="dropdown-display">
|
|
||||||
<div class="card ~neutral @low" id="lang-list">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
<span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
|
<span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -80,33 +80,15 @@
|
|||||||
{{ template "login-modal.html" . }}
|
{{ template "login-modal.html" . }}
|
||||||
{{ template "account-linking.html" . }}
|
{{ template "account-linking.html" . }}
|
||||||
<div id="notification-box"></div>
|
<div id="notification-box"></div>
|
||||||
<div class="top-2 left-2 absolute">
|
<div class="page-container m-2 lg:my-20 lg:mx-64 flex flex-col gap-4 unfocused">
|
||||||
<span class="dropdown" tabindex="0" id="lang-dropdown">
|
<div class="top-2 inset-x-2 lg:absolute flex flex-row justify-between">
|
||||||
<span class="button ~urge dropdown-button">
|
<div class="flex flex-row gap-2">
|
||||||
<i class="ri-global-line"></i>
|
{{ template "lang-select.html" . }}
|
||||||
<span class="ml-2 chev"></span>
|
<span class="button ~warning h-min" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
|
||||||
</span>
|
|
||||||
<div class="dropdown-display">
|
|
||||||
<div class="card ~neutral @low">
|
|
||||||
<label class="switch pb-4">
|
|
||||||
<input type="radio" name="lang-time" id="lang-12h">
|
|
||||||
<span>{{ .strings.time12h }}</span>
|
|
||||||
</label>
|
|
||||||
<label class="switch pb-4">
|
|
||||||
<input type="radio" name="lang-time" id="lang-24h">
|
|
||||||
<span>{{ .strings.time24h }}</span>
|
|
||||||
</label>
|
|
||||||
<div id="lang-list"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
<span class="button ~warning" alt="{{ .strings.theme }}" id="button-theme"><i class="ri-sun-line"></i></span>
|
|
||||||
<span class="button ~critical @low mb-4 unfocused" id="logout-button">{{ .strings.logout }}</span>
|
<span class="button ~critical @low mb-4 unfocused" id="logout-button">{{ .strings.logout }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="top-2 right-2 absolute">
|
<a class="button ~info unfocused h-min" href="/" id="admin-back-button"><i class="ri-arrow-left-fill mr-2"></i>{{ .strings.admin }}</a>
|
||||||
<a class="button ~info unfocused" href="/" id="admin-back-button"><i class="ri-arrow-left-fill mr-2"></i>{{ .strings.admin }}</a>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="page-container m-2 lg:my-20 lg:mx-64 unfocused">
|
|
||||||
<div class="card @low dark:~d_neutral mb-4" id="card-user">
|
<div class="card @low dark:~d_neutral mb-4" id="card-user">
|
||||||
<span class="heading mb-2"></span>
|
<span class="heading mb-2"></span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
1
setup.go
1
setup.go
@ -42,6 +42,7 @@ func (app *appContext) ServeSetup(gc *gin.Context) {
|
|||||||
gc.HTML(200, "setup.html", gin.H{
|
gc.HTML(200, "setup.html", gin.H{
|
||||||
"cssVersion": cssVersion,
|
"cssVersion": cssVersion,
|
||||||
"lang": app.storage.lang.Setup[lang],
|
"lang": app.storage.lang.Setup[lang],
|
||||||
|
"strings": app.storage.lang.Setup[lang].Strings,
|
||||||
"emailLang": app.storage.lang.Email[emailLang],
|
"emailLang": app.storage.lang.Email[emailLang],
|
||||||
"language": app.storage.lang.Setup[lang].JSON,
|
"language": app.storage.lang.Setup[lang].JSON,
|
||||||
"messages": string(msg),
|
"messages": string(msg),
|
||||||
|
|||||||
@ -161,6 +161,7 @@ if (window.userExpiryEnabled) {
|
|||||||
messageEl.textContent = window.userExpiryMessage.replace("{date}", toDateString(time));
|
messageEl.textContent = window.userExpiryMessage.replace("{date}", toDateString(time));
|
||||||
setTimeout(calculateTime, 1000);
|
setTimeout(calculateTime, 1000);
|
||||||
};
|
};
|
||||||
|
document.addEventListener("timefmt-change", calculateTime)
|
||||||
calculateTime();
|
calculateTime();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -83,7 +83,7 @@ export const loadLangSelector = (page: string) => {
|
|||||||
let innerHTML = '';
|
let innerHTML = '';
|
||||||
for (let code in req.response) {
|
for (let code in req.response) {
|
||||||
queryString.set("lang", code);
|
queryString.set("lang", code);
|
||||||
innerHTML += `<a href="?${queryString.toString()}" class="button w-full text-left justify-start ~neutral mb-2 lang-link">${req.response[code]}</a>`;
|
innerHTML += `<a href="?${queryString.toString()}" class="button w-full text-left justify-start ~neutral lang-link">${req.response[code]}</a>`;
|
||||||
queryString.delete("lang");
|
queryString.delete("lang");
|
||||||
}
|
}
|
||||||
list.innerHTML = innerHTML;
|
list.innerHTML = innerHTML;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user