From 8fbbd9b32cff7e64921ec6bf2fd8c13973a4a49d Mon Sep 17 00:00:00 2001
From: James Read <contact@jread.com>
Date: Thu, 23 May 2024 09:21:57 +0100
Subject: [PATCH] feature: displays have basic styling (#317)

---
 webui.dev/js/marshaller.js |  1 +
 webui.dev/style.css        | 22 ++++++++++++----------
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/webui.dev/js/marshaller.js b/webui.dev/js/marshaller.js
index 961890a..722dc4f 100644
--- a/webui.dev/js/marshaller.js
+++ b/webui.dev/js/marshaller.js
@@ -422,6 +422,7 @@ function createDirectoryBreadcrumb (title, link) {
 function marshalDisplay (item, fieldset) {
   const display = document.createElement('div')
   display.innerHTML = item.title
+  display.classList.add('display')
 
   fieldset.appendChild(display)
 }
diff --git a/webui.dev/style.css b/webui.dev/style.css
index 0649c62..68a2c8b 100644
--- a/webui.dev/style.css
+++ b/webui.dev/style.css
@@ -202,22 +202,13 @@ tr.log-row span.icon {
 
 .error {
   background-color: salmon;
+  color: black;
 }
 
 .title.temporary-status-message {
   color: gray;
 }
 
-div.entity {
-  background-color: white;
-  box-shadow: 0 0 10px 0 #444;
-  display: grid;
-  grid-column: auto / span 2;
-  grid-row: auto / span 2;
-  grid-template-rows: auto min-content;
-  grid-template-columns: minmax(min-content, auto);
-}
-
 h2 {
   display: inline-block;
   font-size: 1em;
@@ -472,6 +463,13 @@ div.toolbar * {
   margin-right: 1em;
 }
 
+div.display {
+  align-content: center;
+  border: 1px solid #666;
+  box-shadow: 0 0 6px 0 #aaa;
+  border-radius: .7em;
+}
+
 @media screen and (width <= 600px) {
   fieldset {
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
@@ -575,4 +573,8 @@ div.toolbar * {
   div.toolbar {
     background-color: black;
   }
+
+  div.display {
+    box-shadow: 0 0 6px 0 #444;
+  }
 }