fix settings for mobile

src/webpage/guild.ts

@@ -15,7 +15,6 @@ import {
 	emojipjson,
 	extendedProperties,
 	banObj,
-	addInfoBan,
 	templateSkim,
 } from "./jsontypes.js";
 import {User} from "./user.js";
@@ -25,7 +24,6 @@ import {webhookMenu} from "./webhooks.js";
 import {createImg} from "./utils/utils.js";
 import {Sticker} from "./sticker.js";
 import {ProgessiveDecodeJSON} from "./utils/progessiveLoad.js";
-import {getApiUrls} from "../utils.js";
 
 class Guild extends SnowFlake {
 	owner!: Localuser;

src/webpage/role.ts

@@ -293,10 +293,10 @@ class RoleList extends Buttons {
 		div.innerHTML = "";
 		div.append(this.buttonListGen(div2)); //not actually sure why the html is needed
 	}
-	buttonMap = new WeakMap<HTMLButtonElement, Role>();
+	buttonRoleMap = new WeakMap<HTMLButtonElement, Role>();
 	dragged?: HTMLButtonElement;
 	buttonDragEvents(button: HTMLButtonElement, role: Role) {
-		this.buttonMap.set(button, role);
+		this.buttonRoleMap.set(button, role);
 		button.addEventListener("dragstart", (e) => {
 			this.dragged = button;
 			e.stopImmediatePropagation();
@@ -318,7 +318,7 @@ class RoleList extends Buttons {
 		});
 
 		button.addEventListener("drop", (_) => {
-			const role2 = this.buttonMap.get(this.dragged as HTMLButtonElement);
+			const role2 = this.buttonRoleMap.get(this.dragged as HTMLButtonElement);
 			if (!role2) return;
 			const index2 = this.guild.roles.indexOf(role2);
 			this.guild.roles.splice(index2, 1);
@@ -390,6 +390,7 @@ class RoleList extends Buttons {
 		buttonTable.append(roleRow);
 		for (const thing of this.buttons) {
 			const button = document.createElement("button");
+			this.buttonMap.set(thing[0], button);
 			button.classList.add("SettingsButton");
 			button.textContent = thing[0];
 			const role = this.guild.roleids.get(thing[1]);
@@ -407,6 +408,7 @@ class RoleList extends Buttons {
 				}
 			}
 			button.onclick = (_) => {
+				html.classList.remove("mobileHidden");
 				this.generateHTMLArea(thing[1], html);
 				if (this.warndiv) {
 					this.warndiv.remove();

src/webpage/settings.ts

@@ -13,6 +13,7 @@ interface OptionsElement<x> {
 export class Buttons implements OptionsElement<unknown> {
 	readonly name: string;
 	readonly buttons: [string, Options | string][];
+	readonly buttonMap = new Map<Options | string, HTMLElement>();
 	buttonList!: HTMLDivElement;
 	warndiv!: HTMLElement;
 	value: unknown;
@@ -41,10 +42,11 @@ export class Buttons implements OptionsElement<unknown> {
 		buttonList.classList.add(this.top ? "flexttb" : "flexltr");
 		this.buttonList = buttonList;
 		const htmlarea = document.createElement("div");
-		htmlarea.classList.add("flexgrow");
+		htmlarea.classList.add("flexgrow", "settingsHTMLArea");
 		const buttonTable = this.generateButtons(htmlarea);
 		if (this.buttons[0]) {
 			this.generateHTMLArea(this.buttons[0][1], htmlarea);
+			htmlarea.classList.add("mobileHidden");
 		}
 		buttonList.append(buttonTable);
 		buttonList.append(htmlarea);
@@ -54,10 +56,12 @@ export class Buttons implements OptionsElement<unknown> {
 	}
 	makeButtonHTML(buttond: [string, string | Options], optionsArea: HTMLElement) {
 		const button = document.createElement("button");
+		this.buttonMap.set(buttond[1], button);
 		button.classList.add("SettingsButton");
 		button.textContent = buttond[0];
 		button.onclick = (_) => {
 			this.generateHTMLArea(buttond[1], optionsArea);
+			optionsArea.classList.remove("mobileHidden");
 			if (this.warndiv) {
 				this.warndiv.remove();
 			}
@@ -80,7 +84,19 @@ export class Buttons implements OptionsElement<unknown> {
 		div.textContent = str;
 		return div;
 	}
+	last?: Options | string;
 	generateHTMLArea(buttonInfo: Options | string, htmlarea: HTMLElement) {
+		if (this.last) {
+			const elm = this.buttonMap.get(this.last);
+			if (elm) {
+				elm.classList.remove("activeSetting");
+			}
+		}
+		this.last = buttonInfo;
+		const elm = this.buttonMap.get(buttonInfo);
+		if (elm) {
+			elm.classList.add("activeSetting");
+		}
 		let html: HTMLElement;
 		if (buttonInfo instanceof Options) {
 			buttonInfo.subOptions = undefined;
@@ -90,6 +106,7 @@ export class Buttons implements OptionsElement<unknown> {
 		}
 		htmlarea.innerHTML = "";
 		htmlarea.append(html);
+		return html;
 	}
 	changed(html: HTMLElement) {
 		this.warndiv = html;
@@ -970,6 +987,18 @@ class Options implements OptionsElement<void> {
 	}
 	generateName(): (HTMLElement | string)[] {
 		const build: (HTMLElement | string)[] = [];
+		if (this.owner instanceof Buttons) {
+			const span = document.createElement("span");
+			span.classList.add("svg-intoMenu", "svgicon", "mobileback");
+			build.push(span);
+			span.onclick = () => {
+				const container = this.container.deref();
+				if (!container) return;
+				if (!container.parentElement) return;
+				if (!container.parentElement.parentElement) return;
+				container.parentElement.parentElement.classList.add("mobileHidden");
+			};
+		}
 		if (this.subOptions) {
 			if (this.name !== "") {
 				const name = document.createElement("span");

src/webpage/style.css

@@ -525,6 +525,7 @@ textarea {
 .svg-voicensfw {
 	mask: url(/icons/voicensfw.svg);
 }
+
 .svgicon {
 	display: block;
 	height: 100%;
@@ -534,6 +535,11 @@ textarea {
 	aspect-ratio: 1/1;
 	flex-shrink: 0;
 }
+.mobileback {
+	visibility: hidden;
+	height: 0px;
+	width: 0px;
+}
 #searchX {
 	width: 0.16in;
 	height: 0.16in;
@@ -2397,18 +2403,25 @@ fieldset input[type="radio"] {
 	box-sizing: border-box;
 	overflow-y: auto;
 }
+
 .SettingsButton {
 	width: 100%;
 	padding: 8px 12px;
 	background: transparent;
 	color: var(--primary-text-soft);
 	border: none;
-	transition: none;
+	transition: background 0.1s;
+}
+.activeSetting {
+	background: color-mix(in srgb, var(--secondary-bg) 60%, transparent);
 }
 .SettingsButton:hover {
 	background: var(--settings-panel-hover);
 	color: var(--primary-text-prominent);
 }
+.activeSetting:hover {
+	background: color-mix(in srgb, var(--secondary-bg) 40%, transparent);
+}
 .addrole {
 	height: 10px;
 	width: 10px;
@@ -2747,8 +2760,16 @@ fieldset input[type="radio"] {
 		font-size: 1.2rem;
 	}
 	.settingbuttons {
-		height: 100px;
+		height: 100%;
 		width: 100%;
+		z-index: 1;
+		position: absolute;
+	}
+	.settingsHTMLArea {
+		z-index: 2;
+		height: 100%;
+		background: var(--primary-bg);
+		transition: transform 0.2s;
 	}
 	.nonimagecenter .settingbuttons {
 		height: auto;
@@ -2762,6 +2783,15 @@ fieldset input[type="radio"] {
 	.rolesheader {
 		margin: 6px 12px;
 	}
+	.mobileback {
+		width: 20px;
+		height: 20px;
+		visibility: visible;
+		cursor: pointer;
+	}
+	.mobileHidden {
+		transform: translate(100%, 0px);
+	}
 }
 .friendcontainer {
 	display: flex;