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

also restyle noticeboard using flex

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