Event view compress header

Combine all three lines of event view to 2.
This commit is contained in:
digital-gnome 2017-11-28 08:30:06 -05:00
parent 50d5a8991d
commit bf5c928e38
5 changed files with 85 additions and 184 deletions

View File

@ -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 {

View File

@ -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 {

View File

@ -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 {

View File

@ -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 {

View File

@ -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() ) {