Frontend: Responsive board

Signed-off-by: Fred Boniface <fred@fjla.uk>

UpNext.md

@@ -2,10 +2,7 @@
 
 ## Frontend:
 
-* Alerts box should not be clickable, bar should be.
 * Enable text search for `locationName` on find-code page.
-* Responsive text sizes for boards.
-* Build metrics page
 
 ### In Progress:
 
@@ -26,6 +23,8 @@
     - "corpus": 3ALPHA, NLC
 * DB Indexes:.
     - "corpus": NLCDESC(TEXT)
+* Build metrics page
+* Responsive text sizes for boards.
 
 ## Backend:
 

static/js/lib.board.js

@@ -102,9 +102,9 @@ async function displayAlerts(array) {
         document.getElementById("alert_bar_note").textContent = `There are ${counter} active alerts`
 
     }
+    document.getElementById("output").style = "margin-top:195px;" /* The margin for the train table needs to be adjusted if the alert box exists. */
     document.getElementById("alerts").style = "display:block"
     document.getElementById("alerts_bar").style = "display:block"
-    document.getElementById("output").style = "margin-top:95px" /* The margin for the train table needs to be adjusted if the alert box exists. */
 }
 
 

static/styles/boards.css

@@ -86,6 +86,7 @@
     height: 40px;
     background-color: var(--main-alert-color);
     color: var(--second-text-color);
+    cursor: pointer;
 }
 
 #alert_icon{
@@ -116,6 +117,7 @@
     font-weight: 900;
     color: var(--second-text-color);
     transition: transform 0.25s linear;
+    cursor: pointer;
 }
 
 #alerts_msg{
@@ -171,21 +173,21 @@ caption{
 .detail-name{
     text-align: left;
 }
-
+.name-item, .name, .plat, .time {
+    font-size: 12px;
+}
 .name-item {
     color: var(--board-name-color);
-    font-size: 12px;
+    cursor: pointer;
 }
 
 .plat{
     width: 4%;
-    font-size: 12px;
     text-align: center;
 }
 
 .time{
     width: 11.5%;
-    font-size: 12px;
     text-align: center;
 }
 .msg{
@@ -197,6 +199,38 @@ caption{
     color: var(--note-text-color);
 }
 
+.close-data {
+    position: absolute;
+    right: 19px;
+    top: -8px;
+    font-weight: 900;
+    cursor: pointer;
+}
+
+@media (min-width: 800px) {
+    .name-item, .name, .plat, .time, .close-data {
+        font-size: 16px;
+    }
+    .msg {
+        font-size: 13px
+    }
+}
+@media (min-width: 1000px) {
+    .name-item, .name, .plat, .time, .close-data {
+        font-size: 18px;
+    }
+    .msg {
+        font-size: 14px
+    }
+}
+@media (min-width: 1600px) {
+    .name-item, .name, .plat, .time, .close-data {
+        font-size: 20px;
+    }
+    .msg {
+        font-size: 15px
+    }
+}
 
 .call-data {
     display: none;
@@ -217,11 +251,19 @@ caption{
     overflow: auto;
 }
 
-.close-data {
+.detail-name {
-    position: absolute;
+    overflow: hidden;
-    right: 19px;
+}
-    top: -8px;
+
-    font-weight: 900;
+.detail-name:after {
+    content: "";
+    display: inline-block;
+    height: 0.5em;
+    vertical-align: bottom;
+    width: 100%;
+    margin-right: -100%;
+    margin-left: 30px;
+    border-top: 1px solid;
 }
 
 .call-table {
@@ -237,6 +279,22 @@ caption{
     font-size: 13px;
 }
 
+@media (min-width: 800px) {
+    .detail-table-content {
+        font-size: 20px;
+    }
+}
+@media (min-width: 1000px) {
+    .detail-table-content {
+        font-size: 21px;
+    }
+}
+@media (min-width: 1600px) {
+    .detail-table-content {
+        font-size: 22px;
+    }
+}
+
 .changed{
     animation: pulse-change 1.5s linear infinite;
 }