mirror of
https://github.com/ZoneMinder/zoneminder.git
synced 2026-10-02 07:25:02 -04:00
feat: put the monitor name, dvr controls and replay status on one row
These three blocks stacked under the event video and each took a full line. Wrap them in a new #eventControls flex row: monitor name left, transport buttons centred, replay status right, wrapping onto separate lines when the viewport is too narrow. The span#rate was never closed, so #progress, #currentTime, #zoom and #fps were nested inside it. Close it, otherwise the whole status line lays out as a single flex item. The three children are flex containers themselves so their contents centre vertically while the boxes stay stretched to the row height. scaleToFit() measures the bottom edge of #replayStatus to decide how tall the video can be, and stretching keeps that edge at the bottom of the row, so auto scaling is unchanged. The new rules are scoped under #eventControls, which outranks the duplicated single-id rules in the classic and dark event.css. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Isaac ConnorandClaude Opus 5 committed
1 parent
710c6f07e8
commit
ce4588bcc1
2 files changed
+86
-46
No files matched your search
@@ -146,6 +146,43 @@ height: 100%;
|
||||
grid-area: 1/1;
|
||||
}
|
||||
|
||||
/* The monitor name, the DVR transport buttons and the replay status share one
|
||||
row under the video. #replayStatus stays the last child because scaleToFit()
|
||||
measures its bottom edge to size the video. */
|
||||
#eventControls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
|
||||
#eventControls > .monitorStatus,
|
||||
#eventControls > #dvrControls,
|
||||
#eventControls > #replayStatus {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
margin: 3px 0 2px;
|
||||
clear: none;
|
||||
}
|
||||
|
||||
#eventControls > .monitorStatus {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
#eventControls > #dvrControls {
|
||||
flex: 0 0 auto;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
#eventControls > #replayStatus {
|
||||
flex: 1 1 auto;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
#monitorStatus {
|
||||
width: 100%;
|
||||
margin-top: 3px;
|
||||
|
||||
@@ -491,56 +491,59 @@ if (defined('AUDIO_MOTION_ENABLED') && AUDIO_MOTION_ENABLED) echo '
|
||||
</audio-motion>
|
||||
' . PHP_EOL;
|
||||
?>
|
||||
<div class="monitorStatus">
|
||||
<span class="MonitorName"><?php echo validHtmlStr($monitor->Name()) . " (". translate('ID'). "=" . $monitor->Id() . ")"; ?> </span>
|
||||
<span class="stream-info-status-track"></span>
|
||||
</div>
|
||||
<p id="dvrControls">
|
||||
<button type="button" id="prevBtn" title="<?php echo translate('Prev') ?>" class="inactive" data-on-click-true="streamPrev">
|
||||
<i class="material-icons md-18">skip_previous</i>
|
||||
</button>
|
||||
<button type="button" id="fastRevBtn" title="<?php echo translate('Rewind') ?>" class="inactive" data-on-click-true="streamFastRev">
|
||||
<i class="material-icons md-18">fast_rewind</i>
|
||||
</button>
|
||||
<button type="button" id="slowRevBtn" title="<?php echo translate('StepBack') ?>" class="unavail" disabled="disabled" data-on-click-true="streamSlowRev">
|
||||
<i class="material-icons md-18">chevron_left</i>
|
||||
</button>
|
||||
<button type="button" id="pauseBtn" title="<?php echo translate('Pause') ?>" class="inactive" data-on-click="pauseClicked">
|
||||
<i class="material-icons md-18">pause</i>
|
||||
</button>
|
||||
<button type="button" id="playBtn" title="<?php echo translate('Play') ?>" class="active" disabled="disabled" data-on-click="playClicked">
|
||||
<i class="material-icons md-18">play_arrow</i>
|
||||
</button>
|
||||
<button type="button" id="slowFwdBtn" title="<?php echo translate('StepForward') ?>" class="unavail" disabled="disabled" data-on-click-true="streamSlowFwd">
|
||||
<i class="material-icons md-18">chevron_right</i>
|
||||
</button>
|
||||
<button type="button" id="fastFwdBtn" title="<?php echo translate('FastForward') ?>" class="inactive" data-on-click-true="streamFastFwd">
|
||||
<i class="material-icons md-18">fast_forward</i>
|
||||
</button>
|
||||
<!--<button type="button" id="zoomOutBtn" title="<?php echo translate('ZoomOut') ?>" class="unavail" disabled="disabled" data-on-click="clickZoomOut">
|
||||
<i class="material-icons md-18">zoom_out</i>
|
||||
</button>-->
|
||||
<button type="button" id="fullscreenBtn" title="<?php echo translate('Fullscreen') ?>" class="avail" data-on-click="fullscreenClicked">
|
||||
<i class="material-icons md-18">fullscreen</i>
|
||||
</button>
|
||||
<button type="button" id="nextBtn" title="<?php echo translate('Next') ?>" class="inactive" data-on-click-true="streamNext">
|
||||
<i class="material-icons md-18">skip_next</i>
|
||||
</button>
|
||||
</p>
|
||||
<div id="replayStatus">
|
||||
<span id="mode"><?php echo translate('Mode') ?>: <span id="modeValue">Replay</span></span>
|
||||
<span id="rate"><?php echo translate('Rate') ?>:
|
||||
<div id="eventControls">
|
||||
<div class="monitorStatus">
|
||||
<span class="MonitorName"><?php echo validHtmlStr($monitor->Name()) . " (". translate('ID'). "=" . $monitor->Id() . ")"; ?> </span>
|
||||
<span class="stream-info-status-track"></span>
|
||||
</div>
|
||||
<p id="dvrControls">
|
||||
<button type="button" id="prevBtn" title="<?php echo translate('Prev') ?>" class="inactive" data-on-click-true="streamPrev">
|
||||
<i class="material-icons md-18">skip_previous</i>
|
||||
</button>
|
||||
<button type="button" id="fastRevBtn" title="<?php echo translate('Rewind') ?>" class="inactive" data-on-click-true="streamFastRev">
|
||||
<i class="material-icons md-18">fast_rewind</i>
|
||||
</button>
|
||||
<button type="button" id="slowRevBtn" title="<?php echo translate('StepBack') ?>" class="unavail" disabled="disabled" data-on-click-true="streamSlowRev">
|
||||
<i class="material-icons md-18">chevron_left</i>
|
||||
</button>
|
||||
<button type="button" id="pauseBtn" title="<?php echo translate('Pause') ?>" class="inactive" data-on-click="pauseClicked">
|
||||
<i class="material-icons md-18">pause</i>
|
||||
</button>
|
||||
<button type="button" id="playBtn" title="<?php echo translate('Play') ?>" class="active" disabled="disabled" data-on-click="playClicked">
|
||||
<i class="material-icons md-18">play_arrow</i>
|
||||
</button>
|
||||
<button type="button" id="slowFwdBtn" title="<?php echo translate('StepForward') ?>" class="unavail" disabled="disabled" data-on-click-true="streamSlowFwd">
|
||||
<i class="material-icons md-18">chevron_right</i>
|
||||
</button>
|
||||
<button type="button" id="fastFwdBtn" title="<?php echo translate('FastForward') ?>" class="inactive" data-on-click-true="streamFastFwd">
|
||||
<i class="material-icons md-18">fast_forward</i>
|
||||
</button>
|
||||
<!--<button type="button" id="zoomOutBtn" title="<?php echo translate('ZoomOut') ?>" class="unavail" disabled="disabled" data-on-click="clickZoomOut">
|
||||
<i class="material-icons md-18">zoom_out</i>
|
||||
</button>-->
|
||||
<button type="button" id="fullscreenBtn" title="<?php echo translate('Fullscreen') ?>" class="avail" data-on-click="fullscreenClicked">
|
||||
<i class="material-icons md-18">fullscreen</i>
|
||||
</button>
|
||||
<button type="button" id="nextBtn" title="<?php echo translate('Next') ?>" class="inactive" data-on-click-true="streamNext">
|
||||
<i class="material-icons md-18">skip_next</i>
|
||||
</button>
|
||||
</p>
|
||||
<div id="replayStatus">
|
||||
<span id="mode"><?php echo translate('Mode') ?>: <span id="modeValue">Replay</span></span>
|
||||
<span id="rate"><?php echo translate('Rate') ?>:
|
||||
<?php
|
||||
#rates are defined in skins/classic/includes/config.php
|
||||
echo htmlSelect('rate', $rates, intval($rate), array('id'=>'rateValue'));
|
||||
#rates are defined in skins/classic/includes/config.php
|
||||
echo htmlSelect('rate', $rates, intval($rate), array('id'=>'rateValue'));
|
||||
?>
|
||||
<span id="progress"<?php echo ZM_WEB_SHOW_PROGRESS ? '' : ' style="display:none;"' ?>><?php echo translate('Progress') ?>: <span id="progressValue">0</span>s</span>
|
||||
<span id="currentTime"><?php echo translate('Time') ?>: <span id="currentTimeValue"></span></span>
|
||||
<span id="zoom"><?php echo translate('Zoom') ?>: <span id="zoomValue">1</span>x</span>
|
||||
</span>
|
||||
<span id="progress"<?php echo ZM_WEB_SHOW_PROGRESS ? '' : ' style="display:none;"' ?>><?php echo translate('Progress') ?>: <span id="progressValue">0</span>s</span>
|
||||
<span id="currentTime"><?php echo translate('Time') ?>: <span id="currentTimeValue"></span></span>
|
||||
<span id="zoom"><?php echo translate('Zoom') ?>: <span id="zoomValue">1</span>x</span>
|
||||
<?php if (!$video_tag) { ?>
|
||||
<span id="fps"><?php echo translate('FPS') ?>: <span id="fpsValue"></span></span>
|
||||
<span id="fps"><?php echo translate('FPS') ?>: <span id="fpsValue"></span></span>
|
||||
<?php } ?>
|
||||
</div>
|
||||
</div><!--replayStatus-->
|
||||
</div><!--eventControls-->
|
||||
</div><!--eventVideo-->
|
||||
</div><!--wrapperEventVideo-->
|
||||
</div><!-- class="row" -->
|
||||
|
||||
Reference in new issue
Block a user