hrfee/jfa-go
1
0
Fork 0
mirror of https://github.com/hrfee/jfa-go.git synced 2024-11-09 20:00:12 +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> <span class="button ~critical @low center " id="accounts-delete-user">{{ .quantityStrings.deleteUser.Singular }}</span>
</div> </div>
<div class="card @low accounts-header table-responsive mt-2"> <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> <thead>
<tr> <tr>
<th><input type="checkbox" value="" id="accounts-select-all"></th> <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"); } get admin(): boolean { return this._admin.classList.contains("chip"); }
set admin(state: boolean) { set admin(state: boolean) {
if (state) { if (state) {
this._admin.classList.add("chip", "~info"); this._admin.classList.remove("hidden")
this._admin.textContent = window.lang.strings("admin"); this._admin.textContent = window.lang.strings("admin");
} else { } else {
this._admin.classList.remove("chip", "~info"); this._admin.classList.add("hidden")
this._admin.textContent = ""; this._admin.textContent = "";
} }
} }
@ -135,10 +135,10 @@ class user implements User, SearchableItem {
get disabled(): boolean { return this._disabled.classList.contains("chip"); } get disabled(): boolean { return this._disabled.classList.contains("chip"); }
set disabled(state: boolean) { set disabled(state: boolean) {
if (state) { if (state) {
this._disabled.classList.add("chip", "~warning"); this._disabled.classList.remove("hidden")
this._disabled.textContent = window.lang.strings("disabled"); this._disabled.textContent = window.lang.strings("disabled");
} else { } else {
this._disabled.classList.remove("chip", "~warning"); this._disabled.classList.add("hidden")
this._disabled.textContent = ""; this._disabled.textContent = "";
} }
} }
@ -185,7 +185,7 @@ class user implements User, SearchableItem {
if (!telegram && !discord && !matrix && !email) return; if (!telegram && !discord && !matrix && !email) return;
let innerHTML = ` let innerHTML = `
<i class="icon ri-settings-2-line ml-2 dropdown-button"></i> <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="dropdown-display lg">
<div class="card ~neutral @low"> <div class="card ~neutral @low">
<div class="supra sm mb-2">${window.lang.strings("contactThrough")}</div> <div class="supra sm mb-2">${window.lang.strings("contactThrough")}</div>
@ -486,13 +486,16 @@ class user implements User, SearchableItem {
constructor(user: User) { constructor(user: User) {
this._row = document.createElement("tr") as HTMLTableRowElement; this._row = document.createElement("tr") as HTMLTableRowElement;
this._row.classList.add("border-b", "border-dashed", "dark:border-dotted", "dark:border-stone-700");
let innerHTML = ` let innerHTML = `
<td><input type="checkbox" class="accounts-select-user" value=""></td> <td><input type="checkbox" class="accounts-select-user" value=""></td>
<td><div class="flex flex-row gap-2 items-center"> <td><div class="flex flex-row gap-2 items-center">
<span class="accounts-username"></span> <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-label-container" title="${window.lang.strings("label")}"></span>
<span class="accounts-admin"></span> <span class="accounts-admin chip ~info hidden"></span>
<span class="accounts-disabled"></span></span> <span class="accounts-disabled chip ~warning hidden"></span></span>
</div>
</div></td> </div></td>
`; `;
if (window.jellyfinLogin) { if (window.jellyfinLogin) {
@ -501,7 +504,7 @@ class user implements User, SearchableItem {
`; `;
} }
innerHTML += ` 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> <span class="accounts-email-container" title="${window.lang.strings("emailAddress")}"></span>
</div></td> </div></td>
`; `;
@ -554,6 +557,7 @@ class user implements User, SearchableItem {
container: this._label, container: this._label,
onSet: this._updateLabel, onSet: this._updateLabel,
customContainerHTML: `<span class="chip ~gray hidden-input-content"></span>`, customContainerHTML: `<span class="chip ~gray hidden-input-content"></span>`,
buttonOnLeft: true,
clickAwayShouldSave: false, 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.input = `<input type="text" class="field ~neutral @low max-w-24 hidden-input-input">`;
} }
this._c.container.innerHTML = ` 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.input}
${this._c.buttonOnLeft ? "" : this._c.customContainerHTML} ${this._c.buttonOnLeft ? "" : this._c.customContainerHTML}
<i class="hidden-input-toggle"></i> <i class="hidden-input-toggle"></i>