base framework for new Timeline tab+

definitions/base.js

@@ -7795,6 +7795,11 @@ module.exports = function(s,config,lang){
                           label: `${lang['Monitor Map']}`,
                           pageOpen: 'monitorMap',
                       },
+                      {
+                          icon: 'bardcode',
+                          label: `${lang['Timeline']}`,
+                          pageOpen: 'timeline',
+                      },
                       {
                           icon: 'file-o',
                           label: `${lang['FileBin']}`,
@@ -9114,6 +9119,7 @@ module.exports = function(s,config,lang){
                   "color": "blue",
                   "noHeader": true,
                   "noDefaultSectionClasses": true,
+                  "box-wrapper-class": "flex-direction-column",
                   "info": [
                       {
                           "fieldType": "div",

web/assets/css/bs5.timeline.css

@@ -0,0 +1,6 @@
+#timeline-video-canvas {
+    flex-grow: 1;
+}
+#timeline-bottom-strip {
+    background: rgba(0,0,0,0.8);
+}

web/assets/css/dashboard.css

@@ -440,3 +440,10 @@ ul.squeeze {
 .fixed-table-body {
     min-height: 400px;
 }
+
+
+.flex-direction-column {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+}

web/pages/blocks/home/timeline.ejs

@@ -1,5 +1,5 @@
-<main class="page-tab pt-3" id="tab-monitorMap">
-   <form class="dark row">
+<main class="page-tab" id="tab-timeline">
+   <form class="dark">
        <%
          var drawBlock
          var buildOptions