From 803ee72b0085b443e94e94df77155514f0358029 Mon Sep 17 00:00:00 2001
From: HanishKVC <hanishkvc@gmail.com>
Date: Thu, 30 May 2024 09:41:43 +0530
Subject: [PATCH] SimpleChat:UI: CreateDiv Divs map to GridX2 class

This allows the settings ui to be cleaner structured.
---
 examples/server/public_simplechat/simplechat.css |  8 ++++++++
 examples/server/public_simplechat/ui.mjs         | 12 +++++++++---
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/examples/server/public_simplechat/simplechat.css b/examples/server/public_simplechat/simplechat.css
index 805e57cac..13bfb80b4 100644
--- a/examples/server/public_simplechat/simplechat.css
+++ b/examples/server/public_simplechat/simplechat.css
@@ -25,6 +25,14 @@
     background-color: lightpink;
 }
 
+.gridx2 {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    border-bottom-style: dotted;
+    border-bottom-width: thin;
+    border-bottom-color: lightblue;
+}
+
 .flex-grow {
     flex-grow: 1;
 }
diff --git a/examples/server/public_simplechat/ui.mjs b/examples/server/public_simplechat/ui.mjs
index bd2975827..b2d5b9aea 100644
--- a/examples/server/public_simplechat/ui.mjs
+++ b/examples/server/public_simplechat/ui.mjs
@@ -93,9 +93,11 @@ export function el_create_boolbutton(id, texts, defaultValue, cb) {
  * @param {{ true: string; false: string; }} texts
  * @param {boolean} defaultValue
  * @param {(arg0: boolean) => void} cb
+ * @param {string} className
  */
-export function el_creatediv_boolbutton(id, label, texts, defaultValue, cb) {
+export function el_creatediv_boolbutton(id, label, texts, defaultValue, cb, className="gridx2") {
     let div = document.createElement("div");
+    div.className = className;
     let lbl = document.createElement("label");
     lbl.setAttribute("for", id);
     lbl.innerText = label;
@@ -150,9 +152,11 @@ export function el_create_select(id, options, defaultOption, cb) {
  * @param {{ [x: string]: any; }} options
  * @param {any} defaultOption
  * @param {(arg0: string) => void} cb
+ * @param {string} className
  */
-export function el_creatediv_select(id, label, options, defaultOption, cb) {
+export function el_creatediv_select(id, label, options, defaultOption, cb, className="gridx2") {
     let div = document.createElement("div");
+    div.className = className;
     let lbl = document.createElement("label");
     lbl.setAttribute("for", id);
     lbl.innerText = label;
@@ -192,9 +196,11 @@ export function el_create_input(id, type, defaultValue, cb) {
  * @param {string} type
  * @param {any} defaultValue
  * @param {function(any):void} cb
+ * @param {string} className
  */
-export function el_creatediv_input(id, label, type, defaultValue, cb) {
+export function el_creatediv_input(id, label, type, defaultValue, cb, className="gridx2") {
     let div = document.createElement("div");
+    div.className = className;
     let lbl = document.createElement("label");
     lbl.setAttribute("for", id);
     lbl.innerText = label;