From bf5c928e387a338f4536c83405620821335d3d87 Mon Sep 17 00:00:00 2001
From: digital-gnome <31593470+digital-gnome@users.noreply.github.com>
Date: Tue, 28 Nov 2017 08:30:06 -0500
Subject: [PATCH] Event view compress header

Combine all three lines of event view to 2.
---
 web/skins/classic/css/classic/skin.css        |  1 +
 web/skins/classic/css/classic/views/event.css | 91 +++++--------------
 web/skins/classic/css/dark/views/event.css    | 74 +++++----------
 web/skins/classic/css/flat/views/event.css    | 75 ++++++---------
 web/skins/classic/views/event.php             | 28 +++---
 5 files changed, 85 insertions(+), 184 deletions(-)

diff --git a/web/skins/classic/css/classic/skin.css b/web/skins/classic/css/classic/skin.css
index 7220e7410..5393727e1 100644
--- a/web/skins/classic/css/classic/skin.css
+++ b/web/skins/classic/css/classic/skin.css
@@ -349,6 +349,7 @@ th.table-th-sort-rev span.table-th-sort-span {
     margin: 4px auto;
     line-height: 1;
     text-align: left;
+    padding: 3px 0;
 }
 
 #header h2 {
diff --git a/web/skins/classic/css/classic/views/event.css b/web/skins/classic/css/classic/views/event.css
index 951fbc8cf..a45e6e7b8 100644
--- a/web/skins/classic/css/classic/views/event.css
+++ b/web/skins/classic/css/classic/views/event.css
@@ -29,87 +29,42 @@ span.noneCue {
     background: none;
 }
 
+#header {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+}
+
+#header h2, #header a {
+    line-height: 1.1;
+    margin:5px 0 0 0;
+}
+
 #dataBar {
-    width: 100%;
-    margin: 2px auto;
-    text-align: center;
-}
-
-#dataBar #dataTable {
-    width: 100%;
-    table-layout: fixed;
-}
-
-#dataBar #dataTable td {
-    text-align: center;
-    padding: 2px;
+    display: flex;
+    flex-wrap:wrap;
+    justify-content: space-between;
 }
 
 #menuBar1 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
     width: 100%;
     text-align: center;
-    clear: both;
-}
-
-#menuBar1 #nameControl {
-    float: left;
-}
-
-#menuBar1 #nameControl #eventName {
-    margin-right: 4px;
-}
-
-#menuBar1 #replayControl {
-    float: right;
-    margin-left: 8px;
+    margin: 4px 0 0 0;
 }
 
 #menuBar1 #scaleControl {
-    float: right;
-    margin-left: 8px;
+    margin: 0 4px 0 auto;
 }
 
-#menuBar2 {
-    width: 100%;
-    margin-bottom: 4px;
+#menuBar1 div {
+margin: auto 5px;
 }
 
-#menuBar2 div {
-    text-align: left;
-    float: left;
-    padding: 0 12px;
-}
-
-#menuBar2 #closeWindow {
-    float: right;
-    text-align: right;
-}
-
-#menuBar1:after,
-#menuBar2:after {
-    content: ".";
-    display: block;
-    height: 0;
-    font-size: 0;
-    clear: both;
-    visibility: hidden;
-}
-
-#videoBar1 div {
-    text-align: center;
-    float: center;
-}
-
-#videoBar1 #prevEvent {
-    float: left;
-}
-
-#videoBar1 #dlEvent {
-    float: center;
-}
-
-#videoBar1 #nextEvent {
-    float: right;
+#nameControl input[type="button"]{
+height: 100%;
 }
 
 #eventVideo {
diff --git a/web/skins/classic/css/dark/views/event.css b/web/skins/classic/css/dark/views/event.css
index cca16607f..3f8a1197f 100644
--- a/web/skins/classic/css/dark/views/event.css
+++ b/web/skins/classic/css/dark/views/event.css
@@ -29,70 +29,42 @@ span.noneCue {
     background: none;
 }
 
+#header {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+}
+
+#header h2, #header a {
+    line-height: 1.1;
+    margin:5px 0 0 0;
+}
+
 #dataBar {
-    width: 100%;
-    margin: 2px auto;
-    text-align: center;
-}
-
-#dataBar #dataTable {
-    width: 100%;
-    table-layout: fixed;
-}
-
-#dataBar #dataTable td {
-    text-align: center;
-    padding: 2px;
+    display: flex;
+    flex-wrap:wrap;
+    justify-content: space-between;
 }
 
 #menuBar1 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
     width: 100%;
     text-align: center;
-    clear: both;
-}
-
-#menuBar1 #nameControl {
-    float: left;
-}
-
-#menuBar1 #nameControl #eventName {
-    margin-right: 4px;
-}
-
-#menuBar1 #replayControl {
-    float: right;
-    margin-left: 8px;
+    margin: 4px 0 0 0;
 }
 
 #menuBar1 #scaleControl {
-    float: right;
-    margin-left: 8px;
+    margin: 0 4px 0 auto;
 }
 
-#menuBar2 {
-    width: 100%;
-    margin-bottom: 4px;
+#menuBar1 div {
+margin: auto 5px;
 }
 
-#menuBar2 div {
-    text-align: left;
-    float: left;
-    padding: 0 12px;
-}
-
-#menuBar2 #closeWindow {
-    float: right;
-    text-align: right;
-}
-
-#menuBar1:after,
-#menuBar2:after {
-    content: ".";
-    display: block;
-    height: 0;
-    font-size: 0;
-    clear: both;
-    visibility: hidden;
+#nameControl input[type="button"]{
+height: 100%;
 }
 
 #eventVideo {
diff --git a/web/skins/classic/css/flat/views/event.css b/web/skins/classic/css/flat/views/event.css
index bb93d24ba..54619f7be 100644
--- a/web/skins/classic/css/flat/views/event.css
+++ b/web/skins/classic/css/flat/views/event.css
@@ -29,70 +29,47 @@ span.noneCue {
     background: none;
 }
 
+#header {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    margin: 0 0 4px 0;
+}
+
+#header h2, #header a {
+    line-height: 1.1;
+    margin:5px 0 0 0;
+}
+
 #dataBar {
-    width: 100%;
-    margin: 2px auto;
-    text-align: center;
-}
-
-#dataBar #dataTable {
-    width: 100%;
-    table-layout: fixed;
-}
-
-#dataBar #dataTable td {
-    text-align: center;
-    padding: 2px;
+    display: flex;
+    flex-wrap:wrap;
+    justify-content: space-between;
 }
 
 #menuBar1 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
     width: 100%;
     text-align: center;
-    clear: both;
+    margin: 4px 0 0 0;
 }
 
-#menuBar1 #nameControl {
-    float: left;
-}
-
-#menuBar1 #nameControl #eventName {
-    margin-right: 4px;
-}
-
-#menuBar1 #replayControl {
-    float: right;
-    margin-left: 8px;
+#menuBar1 input, #menuBar1 select {
+    padding: 2px 5px;
 }
 
 #menuBar1 #scaleControl {
-    float: right;
-    margin-left: 8px;
+    margin: 0 4px 0 auto;
 }
 
-#menuBar2 {
-    width: 100%;
-    margin-bottom: 4px;
+#menuBar1 div {
+margin: auto 5px;
 }
 
-#menuBar2 div {
-    text-align: left;
-    float: left;
-    padding: 0 12px;
-}
-
-#menuBar2 #closeWindow {
-    float: right;
-    text-align: right;
-}
-
-#menuBar1:after,
-#menuBar2:after {
-    content: ".";
-    display: block;
-    height: 0;
-    font-size: 0;
-    clear: both;
-    visibility: hidden;
+#nameControl input[type="button"]{
+height: 100%;
 }
 
 #eventVideo {
diff --git a/web/skins/classic/views/event.php b/web/skins/classic/views/event.php
index f3665f724..59dd62fcf 100644
--- a/web/skins/classic/views/event.php
+++ b/web/skins/classic/views/event.php
@@ -97,34 +97,26 @@ xhtmlHeaders(__FILE__, translate('Event') );
 <body>
   <div id="page">
     <?php echo getNavBarHTML() ?>
-    <div id="content">
+    <div id="header">
 <?php 
 if ( ! $Event->Id() ) {
   echo 'Event was not found.';
 } else {
 ?>
       <div id="dataBar">
-        <table id="dataTable" class="major">
-          <tr>
-            <td><span id="dataId" title="<?php echo translate('Id') ?>"><?php echo $Event->Id() ?></span></td>
-            <td><span id="dataCause" title="<?php echo $Event->Notes()?validHtmlStr($Event->Notes()):translate('AttrCause') ?>"><?php echo validHtmlStr($Event->Cause()) ?></span></td>
-            <td><span id="dataTime" title="<?php echo translate('Time') ?>"><?php echo strftime( STRF_FMT_DATETIME_SHORT, strtotime($Event->StartTime() ) ) ?></span></td>
-            <td><span id="dataDuration" title="<?php echo translate('Duration') ?>"><?php echo $Event->Length() ?></span>s</td>
-            <td><span id="dataFrames" title="<?php echo translate('AttrFrames')."/".translate('AttrAlarmFrames') ?>"><?php echo $Event->Frames() ?>/<?php echo $Event->AlarmFrames() ?></span></td>
-            <td><span id="dataScore" title="<?php echo translate('AttrTotalScore')."/".translate('AttrAvgScore')."/".translate('AttrMaxScore') ?>"><?php echo $Event->TotScore() ?>/<?php echo $Event->AvgScore() ?>/<?php echo $Event->MaxScore() ?></span></td>
-          </tr>
-        </table>
+        <span id="dataId" title="<?php echo translate('Id') ?>"><?php echo $Event->Id() ?></span>
+        <span id="dataCause" title="<?php echo $Event->Notes()?validHtmlStr($Event->Notes()):translate('AttrCause') ?>"><?php echo validHtmlStr($Event->Cause()) ?></span>
+        <span id="dataTime" title="<?php echo translate('Time') ?>"><?php echo strftime( STRF_FMT_DATETIME_SHORT, strtotime($Event->StartTime() ) ) ?></span>
+        <span id="dataDuration" title="<?php echo translate('Duration') ?>"><?php echo $Event->Length().'s' ?></span>
+        <span id="dataFrames" title="<?php echo translate('AttrFrames')."/".translate('AttrAlarmFrames') ?>"><?php echo $Event->Frames() ?>/<?php echo $Event->AlarmFrames() ?></span>
+        <span id="dataScore" title="<?php echo translate('AttrTotalScore')."/".translate('AttrAvgScore')."/".translate('AttrMaxScore') ?>"><?php echo $Event->TotScore() ?>/<?php echo $Event->AvgScore() ?>/<?php echo $Event->MaxScore() ?></span>
+        <div id="closeWindow"><a href="#" onclick="window.history.back();"><?php echo translate('Back') ?></a></div>
       </div>
       <div id="menuBar1">
-        <div id="scaleControl"><label for="scale"><?php echo translate('Scale') ?></label><?php echo buildSelect( "scale", $scales, "changeScale();" ); ?></div>
-        <div id="replayControl"><label for="replayMode"><?php echo translate('Replay') ?></label><?php echo buildSelect( "replayMode", $replayModes, "changeReplayMode();" ); ?></div>
         <div id="nameControl">
           <input type="text" id="eventName" name="eventName" value="<?php echo validHtmlStr($Event->Name()) ?>" />
           <input type="button" value="<?php echo translate('Rename') ?>" onclick="renameEvent()"<?php if ( !canEdit( 'Events' ) ) { ?> disabled="disabled"<?php } ?>/>
         </div>
-      </div>
-      <div id="menuBar2">
-        <div id="closeWindow"><a href="#" onclick="window.history.back();"><?php echo translate('Back') ?></a></div>
 <?php
 if ( canEdit('Events') ) {
 ?>
@@ -150,7 +142,11 @@ if ( canEdit('Events') ) {
   } // end if Event->DefaultVideo
 ?>
         <div id="exportEvent"><a href="#" onclick="exportEvent();"><?php echo translate('Export') ?></a></div>
+        <div id="scaleControl"><label for="scale"><?php echo translate('Scale') ?></label><?php echo buildSelect( "scale", $scales, "changeScale();" ); ?></div>
+        <div id="replayControl"><label for="replayMode"><?php echo translate('Replay') ?></label><?php echo buildSelect( "replayMode", $replayModes, "changeReplayMode();" ); ?></div>
       </div>
+     </div>
+    <div id="content">
       <div id="eventVideo" class="">
 <?php
 if ( $Event->DefaultVideo() ) {