Changes
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;
}