@@ -583,7 +591,7 @@ export class activityList extends PaginatedList {
this._ascending = v;
// Setting default sort makes sense, since this is the only sort ever being done.
this._c.defaultSortAscending = this.ascending;
- this._sortDirection.innerHTML = `${window.lang.strings("sortDirection")}
`;
+ this._sortDirection.innerHTML = `${window.lang.strings("sortDirection")}
`;
// NOTE: We don't actually re-sort the list here, instead just use setOrdering to apply this.ascending before a reload.
this._search.setOrdering(this._search.ordering, this._c.defaultSortField, this.ascending);
if (this._hasLoaded) {
diff --git a/ts/modules/common.ts b/ts/modules/common.ts
index db544ec..ffeac57 100644
--- a/ts/modules/common.ts
+++ b/ts/modules/common.ts
@@ -184,18 +184,24 @@ export class notificationBox implements NotificationBox {
private _errorTypes: { [type: string]: boolean } = {};
private _positiveTypes: { [type: string]: boolean } = {};
timeout: number;
- constructor(box: HTMLDivElement, timeout?: number) { this._box = box; this.timeout = timeout || 5; }
+ constructor(box: HTMLDivElement, timeout?: number) {
+ this._box = box;
+ this._box.classList.add("flex", "flex-col", "gap-2");
+ this.timeout = timeout || 5;
+ }
+
+ static baseClasses = ["aside", "flex", "flex-row", "justify-between", "gap-4"];
private _error = (message: string): HTMLElement => {
const noti = document.createElement('aside');
- noti.classList.add("aside", "~critical", "@low", "mt-2", "notification-error");
+ noti.classList.add(...notificationBox.baseClasses, "~critical", "@low", "notification-error");
let error = "";
if (window.lang) {
error = window.lang.strings("error") + ":"
}
- noti.innerHTML = `
${error} ${message}`;
+ noti.innerHTML = `
${error} ${message}
`;
const closeButton = document.createElement('span') as HTMLSpanElement;
- closeButton.classList.add("button", "~critical", "@low", "ml-4");
+ closeButton.classList.add("button", "~critical", "@low");
closeButton.innerHTML = `
`;
closeButton.onclick = () => this._close(noti);
noti.classList.add("animate-slide-in");
@@ -205,10 +211,10 @@ export class notificationBox implements NotificationBox {
private _positive = (bold: string, message: string): HTMLElement => {
const noti = document.createElement('aside');
- noti.classList.add("aside", "~positive", "@low", "mt-2", "notification-positive");
- noti.innerHTML = `
${bold} ${message}`;
+ noti.classList.add(...notificationBox.baseClasses, "~positive", "@low", "notification-positive");
+ noti.innerHTML = `
${bold} ${message}
`;
const closeButton = document.createElement('span') as HTMLSpanElement;
- closeButton.classList.add("button", "~positive", "@low", "ml-4");
+ closeButton.classList.add("button", "~positive", "@low");
closeButton.innerHTML = `
`;
closeButton.onclick = () => this._close(noti);
noti.classList.add("animate-slide-in");
diff --git a/ts/modules/pages.ts b/ts/modules/pages.ts
index d2a6910..35ceab7 100644
--- a/ts/modules/pages.ts
+++ b/ts/modules/pages.ts
@@ -76,13 +76,22 @@ export class PageManager {
}
load(name: string = "") {
+ name = decodeURI(name);
if (!this.pages.has(name)) return window.history.pushState(name || this.defaultName, this.defaultTitle, "")
const p = this.pages.get(name);
this.loadPage(p);
}
loadPage (p: Page) {
- window.history.pushState(p.name || this.defaultName, p.title, p.url + window.location.search);
+ let url = p.url;
+ // Fix ordering of query params and hash
+ if (url.includes("#")) {
+ let split = url.split("#");
+ url = split[0] + window.location.search + "#" + split[1];
+ } else {
+ url = url + window.location.search;
+ }
+ window.history.pushState(p.name || this.defaultName, p.title, url);
}
prev(name: string = "") {
diff --git a/ts/modules/profiles.ts b/ts/modules/profiles.ts
index a627674..480bb24 100644
--- a/ts/modules/profiles.ts
+++ b/ts/modules/profiles.ts
@@ -50,10 +50,12 @@ class profile implements Profile {
get admin(): boolean { return this._adminChip.classList.contains("chip"); }
set admin(state: boolean) {
if (state) {
- this._adminChip.classList.add("chip", "~info", "ml-2");
+ this._adminChip.classList.remove("unfocused");
+ this._adminChip.classList.add("chip", "~info");
this._adminChip.textContent = "Admin";
} else {
- this._adminChip.classList.remove("chip", "~info", "ml-2");
+ this._adminChip.classList.add("unfocused");
+ this._adminChip.classList.remove("chip", "~info");
this._adminChip.textContent = "";
}
}
@@ -115,7 +117,7 @@ class profile implements Profile {
constructor(name: string, p: Profile) {
this._row = document.createElement("tr") as HTMLTableRowElement;
let innerHTML = `
-
|
+
|
|
`;
if (window.ombiEnabled) innerHTML += `
diff --git a/ts/modules/search.ts b/ts/modules/search.ts
index 85ac68a..a0b8418 100644
--- a/ts/modules/search.ts
+++ b/ts/modules/search.ts
@@ -114,9 +114,14 @@ export class BoolQuery extends Query {
super(subject, QueryOperator.Equal);
this.type = "bool";
this._value = value;
- this._card.classList.add("button", "~" + (this._value ? "positive" : "critical"), "@high", "center");
+ this._card.classList.add("button", "@high", "center", "flex", "flex-row", "gap-2");
+ if (this._value) {
+ this._card.classList.add("~positive");
+ } else {
+ this._card.classList.add("~critical");
+ }
this._card.innerHTML = `
-
${subject.name}
+
${subject.name}
`;
}
@@ -156,9 +161,9 @@ export class StringQuery extends Query {
super(subject, QueryOperator.Equal);
this.type = "string";
this._value = value.toLowerCase();
- this._card.classList.add("button", "~neutral", "@low", "center");
+ this._card.classList.add("button", "~neutral", "@low", "center", "flex", "flex-row", "gap-2");
this._card.innerHTML = `
-
${subject.name}: "${this._value}"
+
${subject.name}: "${this._value}"
`;
}
@@ -203,10 +208,10 @@ export class DateQuery extends Query {
super(subject, operator);
this.type = "date";
this._value = value;
- this._card.classList.add("button", "~neutral", "@low", "center");
+ this._card.classList.add("button", "~neutral", "@low", "center", "flex", "flex-row", "gap-2");
let dateText = QueryOperatorToDateText(operator);
this._card.innerHTML = `
-
${subject.name}: ${dateText != "" ? dateText+" " : ""}${value.text}
+
${subject.name}: ${dateText != "" ? dateText+" " : ""}${value.text}
`;
}
@@ -575,6 +580,8 @@ export class Search {
};
generateFilterList = () => {
+ const filterListContainer = document.createElement("div");
+ filterListContainer.classList.add("flex", "flex-row", "flex-wrap", "gap-2");
// Generate filter buttons
for (let queryName of Object.keys(this._c.queries)) {
const query = this._c.queries[queryName];
@@ -585,9 +592,9 @@ export class Search {
}
const container = document.createElement("span") as HTMLSpanElement;
- container.classList.add("button", "button-xl", "~neutral", "@low", "mb-1", "mr-2", "align-bottom");
+ container.classList.add("button", "button-xl", "~neutral", "@low", "align-bottom", "flex", "flex-row", "gap-2");
container.innerHTML = `
-
+
${query.name}
${query.description || ""}
@@ -596,13 +603,13 @@ export class Search {
const pos = document.createElement("button") as HTMLButtonElement;
pos.type = "button";
pos.ariaLabel = `Filter by "${query.name}": True`;
- pos.classList.add("button", "~positive", "ml-2");
+ pos.classList.add("button", "~positive");
pos.innerHTML = `
`;
pos.addEventListener("click", () => this.fillInFilter(queryName, "true"));
const neg = document.createElement("button") as HTMLButtonElement;
neg.type = "button";
neg.ariaLabel = `Filter by "${query.name}": False`;
- neg.classList.add("button", "~critical", "ml-2");
+ neg.classList.add("button", "~critical");
neg.innerHTML = `
`;
neg.addEventListener("click", () => this.fillInFilter(queryName, "false"));
@@ -612,8 +619,8 @@ export class Search {
if (query.string) {
const button = document.createElement("button") as HTMLButtonElement;
button.type = "button";
- button.classList.add("button", "~urge", "ml-2");
- button.innerHTML = `
${window.lang.strings("matchText")}`;
+ button.classList.add("button", "~urge", "flex", "flex-row", "gap-2");
+ button.innerHTML = `
${window.lang.strings("matchText")}`;
// Position cursor between quotes
button.addEventListener("click", () => this.fillInFilter(queryName, `""`, -1));
@@ -623,29 +630,30 @@ export class Search {
if (query.date) {
const onDate = document.createElement("button") as HTMLButtonElement;
onDate.type = "button";
- onDate.classList.add("button", "~urge", "ml-2");
- onDate.innerHTML = `
On Date`;
+ onDate.classList.add("button", "~urge", "flex", "flex-row", "gap-2");
+ onDate.innerHTML = `
On Date`;
onDate.addEventListener("click", () => this.fillInFilter(queryName, `"="`, -1));
const beforeDate = document.createElement("button") as HTMLButtonElement;
beforeDate.type = "button";
- beforeDate.classList.add("button", "~urge", "ml-2");
- beforeDate.innerHTML = `
Before Date`;
+ beforeDate.classList.add("button", "~urge", "flex", "flex-row", "gap-2");
+ beforeDate.innerHTML = `
Before Date`;
beforeDate.addEventListener("click", () => this.fillInFilter(queryName, `"<"`, -1));
const afterDate = document.createElement("button") as HTMLButtonElement;
afterDate.type = "button";
- afterDate.classList.add("button", "~urge", "ml-2");
- afterDate.innerHTML = `
After Date`;
+ afterDate.classList.add("button", "~urge", "flex", "flex-row", "gap-2");
+ afterDate.innerHTML = `
After Date`;
afterDate.addEventListener("click", () => this.fillInFilter(queryName, `">"`, -1));
container.appendChild(onDate);
container.appendChild(beforeDate);
container.appendChild(afterDate);
}
-
- this._c.filterList.appendChild(container);
+
+ filterListContainer.appendChild(container);
}
+ this._c.filterList.appendChild(filterListContainer)
}
onServerSearch = () => {
diff --git a/ts/modules/settings.ts b/ts/modules/settings.ts
index 580a2f1..32715dc 100644
--- a/ts/modules/settings.ts
+++ b/ts/modules/settings.ts
@@ -345,7 +345,7 @@ class DOMList extends DOMSetting implements SList {
container.classList.add("flex", "flex-row", "justify-between");
container.innerHTML = `
-