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; margin: 4px auto;
line-height: 1; line-height: 1;
text-align: left; text-align: left;
padding: 3px 0;
} }
#header h2 { #header h2 {

View File

@ -29,87 +29,42 @@ span.noneCue {
background: none; 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 { #dataBar {
width: 100%; display: flex;
margin: 2px auto; flex-wrap:wrap;
text-align: center; justify-content: space-between;
}
#dataBar #dataTable {
width: 100%;
table-layout: fixed;
}
#dataBar #dataTable td {
text-align: center;
padding: 2px;
} }
#menuBar1 { #menuBar1 {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%; width: 100%;
text-align: center; 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 #scaleControl { #menuBar1 #scaleControl {
float: right; margin: 0 4px 0 auto;
margin-left: 8px;
} }
#menuBar2 { #menuBar1 div {
width: 100%; margin: auto 5px;
margin-bottom: 4px;
} }
#menuBar2 div { #nameControl input[type="button"]{
text-align: left; height: 100%;
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;
} }
#eventVideo { #eventVideo {

View File

@ -29,70 +29,42 @@ span.noneCue {
background: none; 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 { #dataBar {
width: 100%; display: flex;
margin: 2px auto; flex-wrap:wrap;
text-align: center; justify-content: space-between;
}
#dataBar #dataTable {
width: 100%;
table-layout: fixed;
}
#dataBar #dataTable td {
text-align: center;
padding: 2px;
} }
#menuBar1 { #menuBar1 {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%; width: 100%;
text-align: center; 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 #scaleControl { #menuBar1 #scaleControl {
float: right; margin: 0 4px 0 auto;
margin-left: 8px;
} }
#menuBar2 { #menuBar1 div {
width: 100%; margin: auto 5px;
margin-bottom: 4px;
} }
#menuBar2 div { #nameControl input[type="button"]{
text-align: left; height: 100%;
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;
} }
#eventVideo { #eventVideo {

View File

@ -29,70 +29,47 @@ span.noneCue {
background: none; 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 { #dataBar {
width: 100%; display: flex;
margin: 2px auto; flex-wrap:wrap;
text-align: center; justify-content: space-between;
}
#dataBar #dataTable {
width: 100%;
table-layout: fixed;
}
#dataBar #dataTable td {
text-align: center;
padding: 2px;
} }
#menuBar1 { #menuBar1 {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%; width: 100%;
text-align: center; text-align: center;
clear: both; margin: 4px 0 0 0;
} }
#menuBar1 #nameControl { #menuBar1 input, #menuBar1 select {
float: left; padding: 2px 5px;
}
#menuBar1 #nameControl #eventName {
margin-right: 4px;
}
#menuBar1 #replayControl {
float: right;
margin-left: 8px;
} }
#menuBar1 #scaleControl { #menuBar1 #scaleControl {
float: right; margin: 0 4px 0 auto;
margin-left: 8px;
} }
#menuBar2 { #menuBar1 div {
width: 100%; margin: auto 5px;
margin-bottom: 4px;
} }
#menuBar2 div { #nameControl input[type="button"]{
text-align: left; height: 100%;
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;
} }
#eventVideo { #eventVideo {

View File

@ -97,34 +97,26 @@ xhtmlHeaders(__FILE__, translate('Event') );
<body> <body>
<div id="page"> <div id="page">
<?php echo getNavBarHTML() ?> <?php echo getNavBarHTML() ?>
<div id="content"> <div id="header">
<?php <?php
if ( ! $Event->Id() ) { if ( ! $Event->Id() ) {
echo 'Event was not found.'; echo 'Event was not found.';
} else { } else {
?> ?>
<div id="dataBar"> <div id="dataBar">
<table id="dataTable" class="major"> <span id="dataId" title="<?php echo translate('Id') ?>"><?php echo $Event->Id() ?></span>
<tr> <span id="dataCause" title="<?php echo $Event->Notes()?validHtmlStr($Event->Notes()):translate('AttrCause') ?>"><?php echo validHtmlStr($Event->Cause()) ?></span>
<td><span id="dataId" title="<?php echo translate('Id') ?>"><?php echo $Event->Id() ?></span></td> <span id="dataTime" title="<?php echo translate('Time') ?>"><?php echo strftime( STRF_FMT_DATETIME_SHORT, strtotime($Event->StartTime() ) ) ?></span>
<td><span id="dataCause" title="<?php echo $Event->Notes()?validHtmlStr($Event->Notes()):translate('AttrCause') ?>"><?php echo validHtmlStr($Event->Cause()) ?></span></td> <span id="dataDuration" title="<?php echo translate('Duration') ?>"><?php echo $Event->Length().'s' ?></span>
<td><span id="dataTime" title="<?php echo translate('Time') ?>"><?php echo strftime( STRF_FMT_DATETIME_SHORT, strtotime($Event->StartTime() ) ) ?></span></td> <span id="dataFrames" title="<?php echo translate('AttrFrames')."/".translate('AttrAlarmFrames') ?>"><?php echo $Event->Frames() ?>/<?php echo $Event->AlarmFrames() ?></span>
<td><span id="dataDuration" title="<?php echo translate('Duration') ?>"><?php echo $Event->Length() ?></span>s</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><span id="dataFrames" title="<?php echo translate('AttrFrames')."/".translate('AttrAlarmFrames') ?>"><?php echo $Event->Frames() ?>/<?php echo $Event->AlarmFrames() ?></span></td> <div id="closeWindow"><a href="#" onclick="window.history.back();"><?php echo translate('Back') ?></a></div>
<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>
</div> </div>
<div id="menuBar1"> <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"> <div id="nameControl">
<input type="text" id="eventName" name="eventName" value="<?php echo validHtmlStr($Event->Name()) ?>" /> <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 } ?>/> <input type="button" value="<?php echo translate('Rename') ?>" onclick="renameEvent()"<?php if ( !canEdit( 'Events' ) ) { ?> disabled="disabled"<?php } ?>/>
</div> </div>
</div>
<div id="menuBar2">
<div id="closeWindow"><a href="#" onclick="window.history.back();"><?php echo translate('Back') ?></a></div>
<?php <?php
if ( canEdit('Events') ) { if ( canEdit('Events') ) {
?> ?>
@ -150,7 +142,11 @@ if ( canEdit('Events') ) {
} // end if Event->DefaultVideo } // end if Event->DefaultVideo
?> ?>
<div id="exportEvent"><a href="#" onclick="exportEvent();"><?php echo translate('Export') ?></a></div> <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>
<div id="content">
<div id="eventVideo" class=""> <div id="eventVideo" class="">
<?php <?php
if ( $Event->DefaultVideo() ) { if ( $Event->DefaultVideo() ) {