From 97fc0eb60ad2b3a9ac43ec72d4bcb3ec09148027 Mon Sep 17 00:00:00 2001 From: Kio Date: Mon, 20 Jan 2025 10:55:45 -0500 Subject: [PATCH 1/3] Add redirects, and a dynamic "Add an instance please!" button. --- static/crossroad.css | 10 ++++++++++ static/crossroad.html | 4 ++++ static/crossroad.mts | 8 ++++++++ 3 files changed, 22 insertions(+) diff --git a/static/crossroad.css b/static/crossroad.css index 544bc65..811fe80 100644 --- a/static/crossroad.css +++ b/static/crossroad.css @@ -58,6 +58,10 @@ abbr[title] { text-align: start; } +pre#path { + display: inline-block; +} + .flex-vcenter { display: flex; flex-direction: column; @@ -76,6 +80,8 @@ abbr[title] { .flex-row { display: flex; + justify-content: center; + align-items: center;; flex-direction: row; } @@ -161,4 +167,8 @@ abbr[title] { .buttonPanel>* { margin-top: min(var(--xl), 6vh); +} + +.hidden { + display: none; } \ No newline at end of file diff --git a/static/crossroad.html b/static/crossroad.html index 9fe5c11..570d751 100644 --- a/static/crossroad.html +++ b/static/crossroad.html @@ -24,6 +24,10 @@
+ You're about to go to 
.

+                    
+                    
+                

                     

                     

                     
diff --git a/static/crossroad.mts b/static/crossroad.mts
index e7daae0..0cbf049 100644
--- a/static/crossroad.mts
+++ b/static/crossroad.mts
@@ -43,6 +43,9 @@ export const {
 })();
 
 function createInstanceSelectOptions() {
+    if (storageManager.storage.instances.length > 0) {
+        document.querySelector("#no-instance")?.classList.add("hidden")
+    }
     instanceSelectForm.replaceChildren(); // Erase all child nodes
     for (const instance of storageManager.storage.instances) {
         const div = document.createElement("div");
@@ -128,3 +131,8 @@ function redirect(to: string) {
     url.pathname = getTargetPath();
     location.href = url.toString();
 }
+
+document.querySelector("#path")!.innerHTML = getTargetPath()
+if (storageManager.storage.instances.length === 0) {
+    document.querySelector("#no-instance")?.classList.remove("hidden")
+}
\ No newline at end of file
-- 
2.45.3


From e86b79b26e7496a6b842e2695be776088531e80a Mon Sep 17 00:00:00 2001
From: CenTdemeern1 
Date: Mon, 20 Jan 2025 19:36:38 +0100
Subject: [PATCH 2/3] Ship of theseus for commit 97fc0eb

---
 static/crossroad.css  | 18 ++++++++++--------
 static/crossroad.html | 22 ++++++++++++----------
 static/crossroad.mts  | 24 +++++++++++++++---------
 static/dom.mts        | 14 ++++++++++++++
 static/down_arrow.svg |  1 +
 5 files changed, 52 insertions(+), 27 deletions(-)
 create mode 100644 static/down_arrow.svg

diff --git a/static/crossroad.css b/static/crossroad.css
index 811fe80..86c25f2 100644
--- a/static/crossroad.css
+++ b/static/crossroad.css
@@ -58,10 +58,15 @@ abbr[title] {
     text-align: start;
 }
 
-pre#path {
+.inline-block {
     display: inline-block;
 }
 
+.align-content-center {
+    justify-content: center;
+    align-items: center;
+}
+
 .flex-vcenter {
     display: flex;
     flex-direction: column;
@@ -80,8 +85,6 @@ pre#path {
 
 .flex-row {
     display: flex;
-    justify-content: center;
-    align-items: center;;
     flex-direction: row;
 }
 
@@ -123,6 +126,10 @@ pre#path {
     min-height: 100%;
 }
 
+.medium-height {
+    height: var(--medium);
+}
+
 .separator-bottom {
     border-bottom: solid 1px var(--transparent-black);
 }
@@ -161,14 +168,9 @@ pre#path {
 }
 
 .inlineIcon {
-    height: var(--medium);
     vertical-align: text-top;
 }
 
 .buttonPanel>* {
     margin-top: min(var(--xl), 6vh);
-}
-
-.hidden {
- display: none;
 }
\ No newline at end of file
diff --git a/static/crossroad.html b/static/crossroad.html
index 570d751..0bbf31e 100644
--- a/static/crossroad.html
+++ b/static/crossroad.html
@@ -22,16 +22,18 @@
                 

                 
             
-            

-                

-                    You're about to go to 
.

-                    
-                    
-                

-                    

-                    

-                    
-                

+            

+                

+                    

+                        You're about to go to
+                        
.

+                        
+                        
You currently don't have any instances. You should add one!

+                        

+                        

+                        
+                    

+                

                 

                     

                         

diff --git a/static/crossroad.mts b/static/crossroad.mts
index 0cbf049..2e6ee32 100644
--- a/static/crossroad.mts
+++ b/static/crossroad.mts
@@ -1,5 +1,5 @@
 import { initializeAddInstanceFlow } from "./add_instance_flow.mjs";
-import { findButtonOrFail, findDialogOrFail, findFormOrFail, findInputOrFail } from "./dom.mjs";
+import { findButtonOrFail, findDialogOrFail, findFormOrFail, findInputOrFail, findParagraphOrFail, findPreOrFail } from "./dom.mjs";
 import knownSoftware from "./known_software.mjs";
 import storageManager from "./storage_manager.mjs";
 
@@ -39,13 +39,22 @@ export const {
     }
     createInstanceSelectOptions();
     storageManager.addSaveCallback(createInstanceSelectOptions);
+    updateNoInstanceHint();
+    storageManager.addSaveCallback(updateNoInstanceHint);
+
+    findPreOrFail(document.body, "#path").innerText = getTargetPath();
+
     return initializeAddInstanceFlow(detailsDialog, addDialog)
 })();
 
+function updateNoInstanceHint() {
+    findParagraphOrFail(document.body, "#no-instance").style.display =
+        storageManager.storage.instances.length > 0
+            ? "none"
+            : "";
+}
+
 function createInstanceSelectOptions() {
-    if (storageManager.storage.instances.length > 0) {
-        document.querySelector("#no-instance")?.classList.add("hidden")
-    }
     instanceSelectForm.replaceChildren(); // Erase all child nodes
     for (const instance of storageManager.storage.instances) {
         const div = document.createElement("div");
@@ -62,7 +71,7 @@ function createInstanceSelectOptions() {
             const img = new Image();
             img.src = instance.iconURL;
             img.alt = `${instance.name} icon`;
-            img.className = "inlineIcon";
+            img.className = "inlineIcon medium-height";
             label.append(img, " ");
         }
         const small = document.createElement("small");
@@ -132,7 +141,4 @@ function redirect(to: string) {
     location.href = url.toString();
 }
 
-document.querySelector("#path")!.innerHTML = getTargetPath()
-if (storageManager.storage.instances.length === 0) {
-    document.querySelector("#no-instance")?.classList.remove("hidden")
-}
\ No newline at end of file
+export { storageManager };
\ No newline at end of file
diff --git a/static/dom.mts b/static/dom.mts
index 7a7aff5..53d4c36 100644
--- a/static/dom.mts
+++ b/static/dom.mts
@@ -1,6 +1,20 @@
 // I would've LOVED to use generics for this but unfortunately that's not possible.
 // Type safety, but at what cost... >~< thanks TypeScript
 
+export function findPreOrFail(on: Element, selector: string): HTMLPreElement {
+    const element = on.querySelector(selector);
+    if (!(element instanceof HTMLPreElement))
+        throw new Error(`${selector} isn't a pre`);
+    return element;
+}
+
+export function findParagraphOrFail(on: Element, selector: string): HTMLParagraphElement {
+    const element = on.querySelector(selector);
+    if (!(element instanceof HTMLParagraphElement))
+        throw new Error(`${selector} isn't a paragraph`);
+    return element;
+}
+
 export function findDialogOrFail(on: Element, selector: string): HTMLDialogElement {
     const element = on.querySelector(selector);
     if (!(element instanceof HTMLDialogElement))
diff --git a/static/down_arrow.svg b/static/down_arrow.svg
new file mode 100644
index 0000000..875e948
--- /dev/null
+++ b/static/down_arrow.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
-- 
2.45.3


From 8fe980c4bec155490af4cb34976eda2cf9bc86a4 Mon Sep 17 00:00:00 2001
From: CenTdemeern1 
Date: Mon, 20 Jan 2025 20:09:41 +0100
Subject: [PATCH 3/3] rename main css file

---
 static/crossroad.html              | 2 +-
 static/{crossroad.css => main.css} | 0
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename static/{crossroad.css => main.css} (100%)

diff --git a/static/crossroad.html b/static/crossroad.html
index 0bbf31e..4ed6abc 100644
--- a/static/crossroad.html
+++ b/static/crossroad.html
@@ -5,7 +5,7 @@
     
     
     FeDirect
-    
+    
 
 
 
diff --git a/static/crossroad.css b/static/main.css
similarity index 100%
rename from static/crossroad.css
rename to static/main.css
-- 
2.45.3