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

accounts: css adjustments

Browse Source 
there is now a border between rows, on light mode a dashed line, on dark
a dotted (looks almost solid). Row height has been changed slightly,
too. Label and edit icon are back to being first after the username, and
the edit button is on the left now. Contact dropdowns now overflow out
of the table properly.
This commit is contained in:
Harvey Tindall 2024-08-28 20:54:50 +01:00
parent ae808c5109
commit a1612949bf
Signed by: hrfee
GPG Key ID: BBC65952848FB1A2
3 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
html/admin.html
View File

@ -802,7 +802,7 @@
<span class="button ~critical @low center " id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
</div>
<div class="card @low accounts-header table-responsive mt-2">
<table class="table text-base leading-4">
<table class="table text-base leading-5">
<thead>
<tr>
<th><input type="checkbox" value="" id="accounts-select-all"></th>

20
ts/modules/accounts.ts
View File

@ -112,10 +112,10 @@ class user implements User, SearchableItem {
get admin(): boolean { return this._admin.classList.contains("chip"); }
set admin(state: boolean) {
if (state) {
this._admin.classList.add("chip", "~info");
this._admin.classList.remove("hidden")
this._admin.textContent = window.lang.strings("admin");
} else {
this._admin.classList.remove("chip", "~info");
this._admin.classList.add("hidden")
this._admin.textContent = "";
}
}
@ -135,10 +135,10 @@ class user implements User, SearchableItem {
get disabled(): boolean { return this._disabled.classList.contains("chip"); }
set disabled(state: boolean) {
if (state) {
this._disabled.classList.add("chip", "~warning");
this._disabled.classList.remove("hidden")
this._disabled.textContent = window.lang.strings("disabled");
} else {
this._disabled.classList.remove("chip", "~warning");
this._disabled.classList.add("hidden")
this._disabled.textContent = "";
}
}
@ -185,7 +185,7 @@ class user implements User, SearchableItem {
if (!telegram && !discord && !matrix && !email) return;
let innerHTML = `
<i class="icon ri-settings-2-line ml-2 dropdown-button"></i>
<div class="dropdown manual">
<div class="dropdown manual over-top">
<div class="dropdown-display lg">
<div class="card ~neutral @low">
<div class="supra sm mb-2">${window.lang.strings("contactThrough")}</div>
@ -486,13 +486,16 @@ class user implements User, SearchableItem {
constructor(user: User) {
this._row = document.createElement("tr") as HTMLTableRowElement;
this._row.classList.add("border-b", "border-dashed", "dark:border-dotted", "dark:border-stone-700");
let innerHTML = `
<td><input type="checkbox" class="accounts-select-user" value=""></td>
<td><div class="flex flex-row gap-2 items-center">
<span class="accounts-username"></span>
<div class="flex flex-row gap-2 items-baseline">
<span class="accounts-label-container" title="${window.lang.strings("label")}"></span>
<span class="accounts-admin"></span>
<span class="accounts-disabled"></span></span>
<span class="accounts-admin chip ~info hidden"></span>
<span class="accounts-disabled chip ~warning hidden"></span></span>
</div>
</div></td>
`;
if (window.jellyfinLogin) {
@ -501,7 +504,7 @@ class user implements User, SearchableItem {
`;
}
innerHTML += `
<td><div class="flex flex-row gap-2 items-center">
<td><div class="flex flex-row gap-2 items-baseline">
<span class="accounts-email-container" title="${window.lang.strings("emailAddress")}"></span>
</div></td>
`;
@ -554,6 +557,7 @@ class user implements User, SearchableItem {
container: this._label,
onSet: this._updateLabel,
customContainerHTML: `<span class="chip ~gray hidden-input-content"></span>`,
buttonOnLeft: true,
clickAwayShouldSave: false,
});

2
ts/modules/ui.ts
View File

@ -27,7 +27,7 @@ export class HiddenInputField {
this._c.input = `<input type="text" class="field ~neutral @low max-w-24 hidden-input-input">`;
}
this._c.container.innerHTML = `
<div class="flex flex-row gap-2 items-center">
<div class="flex flex-row gap-2 items-baseline">
${this._c.buttonOnLeft ? "" : this._c.input}
${this._c.buttonOnLeft ? "" : this._c.customContainerHTML}
<i class="hidden-input-toggle"></i>