hrfee/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-12-22 09:00:10 +00:00
Code Issues Projects Releases Wiki Activity

ui: general adjustments

Browse Source
This commit is contained in:
Harvey Tindall 2023-12-22 21:40:56 +00:00
parent d1affe271c
commit e8666d5bf2
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
4 changed files with 23 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
css/base.css
View File

@ -575,7 +575,6 @@ input[type="checkbox" i], [class^="ri-"], [class*=" ri-"], .ri-refresh-line:befo
cursor: pointer; cursor: pointer;
} }
.g-recaptcha { .g-recaptcha {
overflow: hidden; overflow: hidden;
width: 296px; width: 296px;
@ -587,3 +586,8 @@ input[type="checkbox" i], [class^="ri-"], [class*=" ri-"], .ri-refresh-line:befo
.g-recaptcha iframe { .g-recaptcha iframe {
margin: -2px 0px 0px -4px; margin: -2px 0px 0px -4px;
} }
.dropdown-manual-toggle {
margin-bottom: -0.5rem;
padding-bottom: 0.5rem;
}

24
html/admin.html
View File

@ -532,8 +532,8 @@
{{ end }} {{ end }}
<div class="page-container"> <div class="page-container">
<div class="mb-4"> <div class="mb-4">
<header class="flex flex-wrap items-center justify-between"> <header>
<div> <div class="flex flex-row overflow-x-scroll items-center">
<span id="button-tab-invites" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 mb-2 px-5">{{ .strings.invites }}</span> <span id="button-tab-invites" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 mb-2 px-5">{{ .strings.invites }}</span>
<span id="button-tab-accounts" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 mb-2 px-5">{{ .strings.accounts }}</span> <span id="button-tab-accounts" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 mb-2 px-5">{{ .strings.accounts }}</span>
<span id="button-tab-activity" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 mb-2 px-5">{{ .strings.activity }}</span> <span id="button-tab-activity" class="text-3xl button portal ~neutral dark:~d_neutral @low mr-2 mb-2 px-5">{{ .strings.activity }}</span>
@ -700,7 +700,7 @@
<div class="flex flex-col md:flex-row align-middle gap-2"> <div class="flex flex-col md:flex-row align-middle gap-2">
<div class="flex flex-row align-middle justify-between md:justify-normal"> <div class="flex flex-row align-middle justify-between md:justify-normal">
<span class="text-3xl font-bold mr-4">{{ .strings.accounts }}</span> <span class="text-3xl font-bold mr-4">{{ .strings.accounts }}</span>
<button class="button ~neutral @low center dropdown-manual-toggle" id="accounts-filter-button" tabindex="0">{{ .strings.filters }}</button> <span class="dropdown-manual-toggle"><button class="h-100 button ~neutral @low center" id="accounts-filter-button" tabindex="0">{{ .strings.filters }}</button></span>
</div> </div>
<div class="flex flex-row align-middle w-100"> <div class="flex flex-row align-middle w-100">
<input type="search" class="field ~neutral @low input search mr-2" id="accounts-search" placeholder="{{ .strings.search }}"> <input type="search" class="field ~neutral @low input search mr-2" id="accounts-search" placeholder="{{ .strings.search }}">
@ -718,11 +718,11 @@
<button type="button" class="button ~neutral @low center mx-2 hidden"><span id="accounts-sort-by-field"></span> <i class="ri-close-line ml-2 text-2xl"></i></button> <button type="button" class="button ~neutral @low center mx-2 hidden"><span id="accounts-sort-by-field"></span> <i class="ri-close-line ml-2 text-2xl"></i></button>
<span id="accounts-filter-area"></span> <span id="accounts-filter-area"></span>
</div> </div>
<div class="supra py-1 sm">{{ .strings.actions }}</div> <div class="supra pt-1 pb-2 sm">{{ .strings.actions }}</div>
<div class="flex flex-row flex-wrap gap-3 mb-4"> <div class="flex flex-row flex-wrap gap-3 mb-4">
<span class="button ~neutral @low center " id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span> <span class="button ~neutral @low center " id="accounts-add-user">{{ .quantityStrings.addUser.Singular }}</span>
<div id="accounts-announce-dropdown" class="dropdown pb-0i " tabindex="0"> <div id="accounts-announce-dropdown" class="dropdown pb-0i " tabindex="0">
<span class="w-100 button ~info @low center" id="accounts-announce">{{ .strings.announce }}</span> <span class="w-100 button ~info @low center items-baseline" id="accounts-announce">{{ .strings.announce }}</span>
<div class="dropdown-display"> <div class="dropdown-display">
<div class="card ~neutral @low"> <div class="card ~neutral @low">
<span class="supra sm">{{ .strings.templates }}</span> <span class="supra sm">{{ .strings.templates }}</span>
@ -735,7 +735,7 @@
<span class="button ~urge @low center " id="accounts-enable-referrals">{{ .strings.enableReferrals }}</span> <span class="button ~urge @low center " id="accounts-enable-referrals">{{ .strings.enableReferrals }}</span>
{{ end }} {{ end }}
<div id="accounts-expiry-dropdown" class="dropdown pb-0i " tabindex="0"> <div id="accounts-expiry-dropdown" class="dropdown pb-0i " tabindex="0">
<span class="w-100 button ~positive @low center" id="accounts-expiry-dropdown-button">{{ .strings.expiry }} <i class="ri-arrow-down-s-line ml-2"></i></span> <span class="w-100 button ~positive @low center items-baseline" id="accounts-expiry-dropdown-button">{{ .strings.expiry }} <i class="ri-arrow-down-s-line ml-2"></i></span>
<div class="dropdown-display"> <div class="dropdown-display">
<div class="card ~neutral @low"> <div class="card ~neutral @low">
<span class="button ~warning full-width @low center" id="accounts-extend-expiry">{{ .strings.extendExpiry }}</span> <span class="button ~warning full-width @low center" id="accounts-extend-expiry">{{ .strings.extendExpiry }}</span>
@ -800,7 +800,7 @@
<div class="flex flex-row align-middle justify-between md:justify-normal"> <div class="flex flex-row align-middle justify-between md:justify-normal">
<span class="text-3xl font-bold mr-4">{{ .strings.activity }}</span> <span class="text-3xl font-bold mr-4">{{ .strings.activity }}</span>
<div class="flex flex-row align-middle"> <div class="flex flex-row align-middle">
<span class="button ~neutral @low center dropdown-manual-toggle" id="activity-filter-button">{{ .strings.filters }}</span> <span class="dropdown-manual-toggle"><button class="h-100 button ~neutral @low center" id="activity-filter-button">{{ .strings.filters }}</button></span>
<button class="button ~neutral @low ml-2" id="activity-sort-direction">{{ .strings.sortDirection }}</button> <button class="button ~neutral @low ml-2" id="activity-sort-direction">{{ .strings.sortDirection }}</button>
</div> </div>
</div> </div>
@ -816,12 +816,12 @@
</div> </div>
</div> </div>
</div> </div>
<div class="flex flex-row justify-between py-2"> <div class="flex flex-row justify-between pt-3 pb-2">
<div class="supra sm hidden" id="activity-search-options-header">{{ .strings.searchOptions }}</div> <div class="supra sm hidden" id="activity-search-options-header">{{ .strings.searchOptions }}</div>
<div class="supra sm"> <div class="supra sm flex flex-row gap-2">
<span id="activity-total-records" class="mx-2"></span> <span id="activity-total-records"></span>
<span id="activity-loaded-records" class="mx-2"></span> <span id="activity-loaded-records"></span>
<span id="activity-shown-records" class="mx-2"></span> <span id="activity-shown-records"></span>
</div> </div>
</div> </div>
<div class="row -mx-2 mb-2"> <div class="row -mx-2 mb-2">

2
ts/modules/search.ts
View File

@ -311,7 +311,7 @@ export class Search {
} }
const container = document.createElement("span") as HTMLSpanElement; const container = document.createElement("span") as HTMLSpanElement;
container.classList.add("button", "button-xl", "~neutral", "@low", "mb-1", "mr-2"); container.classList.add("button", "button-xl", "~neutral", "@low", "mb-1", "mr-2", "align-bottom");
container.innerHTML = ` container.innerHTML = `
<div class="flex flex-col mr-2"> <div class="flex flex-col mr-2">
<span>${query.name}</span> <span>${query.name}</span>

5
ts/modules/tabs.ts
View File

@ -22,13 +22,18 @@ export class Tabs implements Tabs {
switch = (tabID: string, noRun: boolean = false, keepURL: boolean = false) => { switch = (tabID: string, noRun: boolean = false, keepURL: boolean = false) => {
this._current = tabID; this._current = tabID;
let baseOffset = -1;
for (let t of this.tabs) { for (let t of this.tabs) {
if (baseOffset == -1) baseOffset = t.buttonEl.offsetLeft;
if (t.tabID == tabID) { if (t.tabID == tabID) {
t.buttonEl.classList.add("active", "~urge"); t.buttonEl.classList.add("active", "~urge");
if (t.preFunc && !noRun) { t.preFunc(); } if (t.preFunc && !noRun) { t.preFunc(); }
t.tabEl.classList.remove("unfocused"); t.tabEl.classList.remove("unfocused");
if (t.postFunc && !noRun) { t.postFunc(); } if (t.postFunc && !noRun) { t.postFunc(); }
document.dispatchEvent(new CustomEvent("tab-change", { detail: keepURL ? "" : tabID })); document.dispatchEvent(new CustomEvent("tab-change", { detail: keepURL ? "" : tabID }));
// t.buttonEl.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
t.buttonEl.parentElement.scrollTo(t.buttonEl.offsetLeft-baseOffset, 0);
} else { } else {
t.buttonEl.classList.remove("active"); t.buttonEl.classList.remove("active");
t.buttonEl.classList.remove("~urge"); t.buttonEl.classList.remove("~urge");