commit 3d0501dfff01387d08502f1f610b1154415cb20f
parent 0dd7ef41fab1ff745d975761f2d15374aa24b3d0
Author: Jacob R. Edwards <jacob@jacobedwards.org>
Date: Tue, 6 Aug 2024 12:40:10 -0700
Add grid and list view for floorplans
Diffstat:
6 files changed, 50 insertions(+), 8 deletions(-)
diff --git a/files/css/main.css b/files/css/main.css
@@ -41,7 +41,8 @@ input[type="image"].icon {
width: 2em;
image-rendering: crisp-edges;
margin: .15rem;
- border: .15em solid rgba(0, 0, 0, .2);
+ padding: .15rem;
+ border: .05em solid rgba(0, 0, 0, .2);
border-radius: .4em;
}
diff --git a/files/floorplans/index.html b/files/floorplans/index.html
@@ -11,5 +11,9 @@
<html>
<h1>Floorplans</h1>
+ <input type="image" value="list" class="icon" id="display_method"/>
+
+ <hr>
+
<ul id="floorplans"></ul>
</html>
diff --git a/files/floorplans/main.css b/files/floorplans/main.css
@@ -1,4 +1,4 @@
-#floorplans {
+#floorplans.grid {
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
@@ -7,11 +7,11 @@
padding: 0;
}
-#floorplans > li {
+#floorplans.grid > li {
aspect-ratio: 1;
}
-.floorplan {
+#floorplans.grid > li > .floorplan {
box-sizing: border-box;
display: block;
height: 100%;
@@ -22,16 +22,16 @@
overflow: hidden;
}
-.floorplan > header {
+#floorplans.grid > li > .floorplan > header {
padding: 4%;
background-color: rgba(0, 0, 0, .1);
}
-.floorplan > header > h2 {
+#floorplans.grid > li > .floorplan > header > h2 {
margin: 0 0 .5rem 0 ;
}
-.floorplan > footer {
+#floorplans.grid > li > .floorplan > footer {
background-color: rgba(0, 0, 0, .05);
position: absolute;
bottom: 0;
@@ -41,6 +41,6 @@
border-radius: .2rem 0 0 0;
}
-.floorplan:hover > footer {
+#floorplans.grid > li > .floorplan:hover > footer {
opacity: 100%;
}
diff --git a/files/floorplans/main.js b/files/floorplans/main.js
@@ -1,10 +1,43 @@
function init() {
authorize()
show_bar()
+ display_button = document.getElementById("display_method")
+ if (!display_button) {
+ throw new Error("Expected #display_method")
+ }
+ set_display_method(display_button, "grid")
+
+ display_button.addEventListener("click", toggle_display_method_func(display_button), false)
+
api_fetch("GET", "floorplans/" + localStorage.getItem("username"))
.then(show_floorplans)
}
+function toggle_display_method_func(button) {
+ return function() {
+ set_display_method(button, button.value)
+ }
+}
+
+function set_display_method(button, method) {
+ floorplans = document.getElementById("floorplans")
+ if (!floorplans) {
+ throw new Error("expected #floorplans")
+ }
+ if (method === "list") {
+ floorplans.removeAttribute("class")
+ other = "grid"
+ } else if (method === "grid") {
+ floorplans.setAttribute("class", "grid")
+ other = "list"
+ } else {
+ throw new Error("Invalid method")
+ }
+ button.value = other
+ button.src = "/icons/" + other + "-outline.svg"
+ button.setAttribute("title", "Switch to " + other + " layout")
+}
+
function edit_floorplan_func(item, floorplan) {
return function() {
set_error("Edit not implemented", item)
diff --git a/files/icons/grid-outline.svg b/files/icons/grid-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><rect x="48" y="48" width="176" height="176" rx="20" ry="20" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><rect x="288" y="48" width="176" height="176" rx="20" ry="20" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><rect x="48" y="288" width="176" height="176" rx="20" ry="20" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><rect x="288" y="288" width="176" height="176" rx="20" ry="20" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
+\ No newline at end of file
diff --git a/files/icons/list-outline.svg b/files/icons/list-outline.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><line x1="160" y1="144" x2="448" y2="144" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="160" y1="256" x2="448" y2="256" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="160" y1="368" x2="448" y2="368" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="80" cy="144" r="16" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="80" cy="256" r="16" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><circle cx="80" cy="368" r="16" style="fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
+\ No newline at end of file
