feature: choose which noticeboard components to display with the link builder

also restyle noticeboard using flex

Disco.Web/ClientSource/Style/Config.css

@@ -1438,15 +1438,12 @@ h1.Config_DocumentTemplates {
   background-color: #f0e277;
   color: #000000;
 }
-#Config_ReportPrefs_Builder .report {
+#Config_ReportPrefs_Builder > form > div {
   margin-bottom: 10px;
 }
 #Config_ReportPrefs_Builder .report ul {
   margin-left: 10px;
 }
-#Config_ReportPrefs_Builder .theme {
-  margin-bottom: 10px;
-}
 #Config_ReportPrefs_Builder .theme > select {
   margin-left: 10px;
 }
@@ -1468,6 +1465,10 @@ h1.Config_DocumentTemplates {
 #Config_ReportPrefs_Builder .filter div.options .method label {
   margin-right: 14px;
 }
+#Config_ReportPrefs_Builder #Config_ReportPrefs_Builder_Components {
+  display: flex;
+  justify-content: space-around;
+}
 #Config_ReportPrefs_Builder_Buttonpane {
   padding-right: 0.3em;
 }

Disco.Web/ClientSource/Style/Config.less

@@ -1664,17 +1664,17 @@ h1.Config_DocumentTemplates {
 }
 
 #Config_ReportPrefs_Builder {
-    .report {
+    & > form > div {
         margin-bottom: 10px;
+    }
 
+    .report {
         ul {
             margin-left: 10px;
         }
     }
 
     .theme {
-        margin-bottom: 10px;
-
         & > select {
             margin-left: 10px;
         }
@@ -1703,6 +1703,11 @@ h1.Config_DocumentTemplates {
             }
         }
     }
+
+    #Config_ReportPrefs_Builder_Components {
+        display: flex;
+        justify-content: space-around;
+    }
 }
 
 #Config_ReportPrefs_Builder_Buttonpane {

Disco.Web/ClientSource/Style/Public/HeldDevicesNoticeboard.css

@@ -2714,16 +2714,15 @@ h4 {
 div#page {
   margin: 0px;
   padding: 0px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
   height: 100%;
 }
 header,
 #header {
-  position: relative;
   color: #fff;
   background-color: #333;
-  margin: 0;
-  padding: 0;
-  height: 34px;
 }
 header #heading,
 #header #heading {
@@ -2758,29 +2757,30 @@ header #credits i,
   display: none;
 }
 #mainSection {
-  display: block;
-  position: relative;
-  height: calc(100% - 34px);
+  flex-grow: 1;
+  display: flex;
+  flex-direction: row;
+  padding: 6px 6px 0 6px;
+  gap: 6px;
 }
 #mainSection .list {
-  height: calc(100% - 25px);
-  float: left;
-  margin: 15px 0 0 6px;
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 }
 #mainSection .list h3 {
   font-family: "Segoe UI", Arial, Verdana, Tahoma, sans-serif;
   font-weight: lighter;
   font-stretch: condensed;
   text-transform: uppercase;
-  margin-left: 10px;
-  margin-bottom: 10px;
+  margin-left: 6px;
+  margin-bottom: 4px;
   font-size: 1.4em;
-  height: 30px;
   color: #fff;
 }
 #mainSection .list div.content {
-  height: calc(100% - 30px);
   overflow: hidden;
+  flex-grow: 1;
 }
 #mainSection .list div.content div.noContent {
   font-family: "Segoe UI", Arial, Verdana, Tahoma, sans-serif;
@@ -2823,15 +2823,6 @@ header #credits i,
   visibility: hidden;
   font-size: 0;
 }
-#mainSection #inProcess {
-  width: calc(28% - 8px);
-}
-#mainSection #readyForReturn {
-  width: calc(36% - 8px);
-}
-#mainSection #waitingForUserAction {
-  width: calc(36% - 8px);
-}
 footer,
 #footer {
   position: absolute;
@@ -2866,6 +2857,15 @@ body.status-error #statusError span {
 body.status-error #mainSection {
   opacity: 0.3;
 }
+body.hide-inProcess #inProcess {
+  display: none !important;
+}
+body.hide-readyForReturn #readyForReturn {
+  display: none !important;
+}
+body.hide-waitingForUserAction #waitingForUserAction {
+  display: none !important;
+}
 /* Themes */
 body.theme-default {
   background: linear-gradient(to bottom, #165180, #1e6dab) left top repeat-x #1e6dab;

Disco.Web/ClientSource/Style/Public/HeldDevicesNoticeboard.less

@@ -24,16 +24,15 @@ h1, h2, h3, h4 {
 div#page {
     margin: 0px;
     padding: 0px;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
     height: 100%;
 }
 
 header, #header {
-    position: relative;
     color: @white;
     background-color: @HeaderBackgroundColour;
-    margin: 0;
-    padding: 0;
-    height: 34px;
 
     #heading {
         margin-left: 4px;
@@ -69,30 +68,31 @@ header, #header {
 }
 
 #mainSection {
-    display: block;
-    position: relative;
-    height: calc(~"100% - 34px");
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    padding: 6px 6px 0 6px;
+    gap: 6px;
 
     .list {
-        height: calc(~"100% - 25px");
-        float: left;
-        margin: 15px 0 0 6px;
+        flex-grow: 1;
+        display: flex;
+        flex-direction: column;
 
         h3 {
             font-family: @FontFamilyHeading;
             font-weight: @FontWeightHeading;
             font-stretch: @FontStretchHeading;
             text-transform: uppercase;
-            margin-left: 10px;
-            margin-bottom: 10px;
+            margin-left: 6px;
+            margin-bottom: 4px;
             font-size: 1.4em;
-            height: 30px;
             color: @white;
         }
 
         div.content {
-            height: calc(~"100% - 30px");
             overflow: hidden;
+            flex-grow: 1;
 
             div.noContent {
                 font-family: @FontFamilyHeading;
@@ -141,18 +141,6 @@ header, #header {
             }
         }
     }
-
-    #inProcess {
-        width: calc(~"28% - 8px");
-    }
-
-    #readyForReturn {
-        width: calc(~"36% - 8px");
-    }
-
-    #waitingForUserAction {
-        width: calc(~"36% - 8px");
-    }
 }
 
 footer, #footer {
@@ -163,39 +151,60 @@ footer, #footer {
     display: block;
 }
 
-body.status-connecting {
-    #statusConnecting {
-        display: inline-block;
-        color: @StatusAlert;
-        margin-left: 14px;
-        line-height: 34px;
+body {
 
-        span {
-            padding-left: 4px;
-            font-size: .8em;
+    &.status-connecting {
+        #statusConnecting {
+            display: inline-block;
+            color: @StatusAlert;
+            margin-left: 14px;
+            line-height: 34px;
+
+            span {
+                padding-left: 4px;
+                font-size: .8em;
+            }
+        }
+
+        #mainSection {
+            display: none;
         }
     }
 
-    #mainSection {
-        display: none;
-    }
-}
+    &.status-error {
+        #statusError {
+            display: inline-block;
+            color: @StatusAlert;
+            margin-left: 14px;
+            line-height: 34px;
 
-body.status-error {
-    #statusError {
-        display: inline-block;
-        color: @StatusAlert;
-        margin-left: 14px;
-        line-height: 34px;
+            span {
+                padding-left: 4px;
+                font-size: .8em;
+            }
+        }
 
-        span {
-            padding-left: 4px;
-            font-size: .8em;
+        #mainSection {
+            opacity: 0.3;
         }
     }
 
-    #mainSection {
-        opacity: 0.3;
+    &.hide-inProcess {
+        #inProcess {
+            display: none !important;
+        }
+    }
+
+    &.hide-readyForReturn {
+        #readyForReturn {
+            display: none !important;
+        }
+    }
+
+    &.hide-waitingForUserAction {
+        #waitingForUserAction {
+            display: none !important;
+        }
     }
 }