UI layout

2 files changed, 60 insertions, 51 deletions

diff --git a/scripts/main.js b/scripts/main.js
index b8de9e4..5483adf 100644
--- a/scripts/main.js
+++ b/scripts/main.js
@@ -108,8 +108,8 @@ ${cell_y * (CELL_SIZE + 1) + 1})`}, ASSET_WHITE_BG, TILES[idx].inner_svg);
 
 function PlanView({plan, mouse_state})
 {
-    console.debug("Looking at plan ", plan);
-    return h("div", {},
+    return h("div", {"id": "PlanView"},
+             h("div", {"id": "EntryIndicator"}, "⬇️"),
              h(PlanGridView, {content: plan, mouse_state: mouse_state}));
 }
 
@@ -190,13 +190,17 @@ function App({initial_state})
     }
 
     return h("div", {},
-             h(FloorSelector, {floor: state.floor + 1,
-                               on_floor_change: onFloorChange}),
-             h(AssetsView, {on_drag_begin: onDragAssetBegin,
-                            on_drag_end: onDragAssetEnd}),
+             h("div", {"class": "MainWrapper"},
+               h("aside", {},
+                 h(FloorSelector, {floor: state.floor + 1,
+                                   on_floor_change: onFloorChange}),
+                 h("div", {"class": "LabeledPanel"},
+                   h("h2", {}, "Rooms"),
+                   h(AssetsView, {on_drag_begin: onDragAssetBegin,
+                                  on_drag_end: onDragAssetEnd}))),
+               h(PlanView, {plan: state.plan[state.floor],
+                            mouse_state: state.mouse_state})),
              h("hr", {}),
-             h(PlanView, {plan: state.plan[state.floor],
-                          mouse_state: state.mouse_state}),
              h("div", {},
                h("textarea", {readonly: true}, state.plan_code)),
              h("div", {"class": "ButtonRow"},
diff --git a/styles.css b/styles.css
index 69ab118..8279e75 100644
--- a/styles.css
+++ b/styles.css
@@ -95,10 +95,36 @@ html
 
 .Dialog
 {
-    max-width: 800px;
+    max-width: 910px;
     margin: 0px auto;
 }
 
+.LabeledPanel
+{
+    border-top: solid var(--color-border-light-1) 1px;
+    border-right: solid var(--color-border-dark-1) 1px;
+    border-bottom: solid var(--color-border-dark-1) 1px;
+    border-left: solid var(--color-border-light-1) 1px;
+
+    box-shadow: 1px 1px var(--color-border-light-1),
+                -1px -1px var(--color-border-dark-1);
+    padding: 1ex;
+    padding-top: 0px;
+    margin: 2ex 0px;
+}
+
+.LabeledPanel > h3, .LabeledPanel > h2
+{
+    font-weight: normal;
+    display: inline-block;
+    position: relative;
+    top: calc(-0.5em);
+    left: 1ex;
+    background-color: var(--color-bg);
+    padding: 0px 1ex 0px 1ex;
+    margin: 0px;
+}
+
 input[type="number"]
 {
     appearance: none;
@@ -248,28 +274,6 @@ table.InputFields
     flex-grow: 1;
 }
 
-.Asset
-{
-    display: inline-block;
-    border: solid black 1px;
-    width: 34px;
-    height: 34px;
-}
-
-
-
-/* Prevent SVG elements from interferring with drag n drop. */
-#Grid *
-{
-    pointer-events: none;
-}
-
-nav
-{
-    display: flex;
-    justify-content: space-between;
-}
-
 #Links
 {
     box-shadow: inset -1px -1px var(--color-border-light-2),
@@ -302,28 +306,29 @@ table.TableView
     }
 }
 
-#Links table
+.MainWrapper
 {
-    table-layout: fixed;
-
-    th:nth-child(1)
-    {
-        width: 10em;
-    }
+    display: flex;
+    gap: 10px;
+}
 
-    td:nth-child(2)
-    {
-        overflow: hidden;
-        white-space: nowrap;
-    }
+.Asset
+{
+    display: inline-block;
+    border: solid black 1px;
+    width: 34px;
+    height: 34px;
+}
 
-    th:nth-child(3), th:nth-child(4)
-    {
-        width: 55px;
-    }
+#EntryIndicator
+{
+    font-size: 150%;
+    text-align: center;
+    margin-bottom: 10px;
+}
 
-    td:nth-child(3), td:nth-child(4)
-    {
-        text-align: center;
-    }
+/* Prevent SVG elements from interferring with drag n drop. */
+#Grid *
+{
+    pointer-events: none;
 }