From d6b0d294979aeb7d23137523d9ff5bd5a98c5d94 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Thu, 23 Apr 2026 20:18:17 +0300 Subject: [PATCH 1/6] Fix: bootstrap legend (skin.css) --- web/skins/classic/css/base/skin.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/web/skins/classic/css/base/skin.css b/web/skins/classic/css/base/skin.css index 16ff280fa..25a837e24 100644 --- a/web/skins/classic/css/base/skin.css +++ b/web/skins/classic/css/base/skin.css @@ -1643,6 +1643,12 @@ audio-motion, audio-motion canvas { } */ +/* Fix bootstrap */ +legend { + width: auto; + padding-inline: 0.5em; +} + /* Fix bootstrap-table */ .fixed-table-loading { overflow: hidden; From 8dfbed6d365c279f361be7d859364bc8e798562c Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Fri, 24 Apr 2026 15:34:33 +0300 Subject: [PATCH 2/6] - Style optimization. - Added support for the "flex-col-X" class, where X can be 2 or 3. This is used in cases where, for example, we need to display a theoretical 3 columns, but 1 or 2 of them may not be displayed in certain cases. The remaining columns will then take up all available space. Can be used in conjunction with "col-md/lg-*", which will be placed inside "flex-col-X". --- web/skins/classic/css/base/skin.css | 65 +++++++++- web/skins/classic/css/base/views/user.css | 12 +- web/skins/classic/views/user.php | 140 +++++++++++----------- 3 files changed, 145 insertions(+), 72 deletions(-) diff --git a/web/skins/classic/css/base/skin.css b/web/skins/classic/css/base/skin.css index 25a837e24..120e50e2b 100644 --- a/web/skins/classic/css/base/skin.css +++ b/web/skins/classic/css/base/skin.css @@ -1715,6 +1715,69 @@ video-stream[id^='liveStream'] video{ padding: 0; } +/* +++ For now, let it be like this here, since it might have to be applied to many pages. !!! */ +.user-page #header { + padding-left: 15px; + padding-right: 15px; +} + +.user-page form#contentForm { + display: flex; + flex-direction: column; +} + +.user-page #content-inner { + width: 100%; + height: auto; + padding: 0 15px 15px 15px; + overflow-x: hidden; + overflow-y: auto; +} + +.user-page *[class*="flex-col-"] { + display: flex; +} + +.user-page *[class*="flex-col-"]> * { + display: flex; + flex-grow: 1; +} + +.user-page .flex-col-2 > * { + min-width: 50%; /* For potential 2 columns, to align them by width (if we don't use "col-md/lg-*") */ +} + +.user-page .flex-col-3 > * { + min-width: 33.33333%; /* For potential 3 columns, to align them by width (if we don't use "col-md/lg-*") */ +} + +@media (min-width: 992px) { + .user-page *[class*="flex-col-"]> *[class*="col-lg"] { /* Fix bootstrap for flex-grow: 1 */ + max-width: 100%; + } + + .user-page .col + *[class*="col-lg"], + .user-page *[class*="col-lg"] + .col, + .user-page *[class*="col-lg"] + *[class*="col-lg"] { + padding-left: 0; + } +} + +@media (min-width: 768px) { + .user-page *[class*="flex-col-"]> .col, + .user-page *[class*="flex-col-"]> *[class*="col-md"] { /* Fix bootstrap for flex-grow: 1 */ + max-width: 100%; + } + + .user-page .col + .col, + .user-page .col + *[class*="col-md"], + .user-page *[class*="col-md"] + .col, + .user-page *[class*="col-md"] + *[class*="col-md"] { + padding-left: 0; + } +} +/* --- */ + /* +++ This block should always be located at the end! */ .hidden { display: none; @@ -1746,4 +1809,4 @@ video-stream[id^='liveStream'] video{ .hide-nav-buttons #refreshBtn { display: none; } -/* --- This block should always be located at the end! */ +/* --- This block should always be located at the end! */ \ No newline at end of file diff --git a/web/skins/classic/css/base/views/user.css b/web/skins/classic/css/base/views/user.css index 5f0ff6dd2..57e5a986e 100644 --- a/web/skins/classic/css/base/views/user.css +++ b/web/skins/classic/css/base/views/user.css @@ -1,6 +1,14 @@ +fieldset { + width: 100%; +} + +fieldset .table { + margin-bottom: 0; +} + .BasicInformation, .Permissions { - width: 50%; - float: left; + width: auto; + float: unset; } #GroupsPermissions, diff --git a/web/skins/classic/views/user.php b/web/skins/classic/views/user.php index dfa63578f..6ce02338c 100644 --- a/web/skins/classic/views/user.php +++ b/web/skins/classic/views/user.php @@ -60,7 +60,7 @@ echo getNavBarHTML(); + From 564abeec3751691956c5f853c09edd20658243d2 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Wed, 29 Apr 2026 15:24:30 +0300 Subject: [PATCH 3/6] Update web/skins/classic/css/base/skin.css Ok. Let it be so, anyway, for now more than 3 pillars will not be used. Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- web/skins/classic/css/base/skin.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web/skins/classic/css/base/skin.css b/web/skins/classic/css/base/skin.css index 120e50e2b..adae3657e 100644 --- a/web/skins/classic/css/base/skin.css +++ b/web/skins/classic/css/base/skin.css @@ -1734,11 +1734,13 @@ video-stream[id^='liveStream'] video{ overflow-y: auto; } -.user-page *[class*="flex-col-"] { +.user-page .flex-col-2, +.user-page .flex-col-3 { display: flex; } -.user-page *[class*="flex-col-"]> * { +.user-page .flex-col-2 > *, +.user-page .flex-col-3 > * { display: flex; flex-grow: 1; } From 840c1f0bc239a1bd3ad1814450ff2748117a3541 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Wed, 29 Apr 2026 15:29:22 +0300 Subject: [PATCH 4/6] For now, apply the "legend" style only to the User page (skin.css) --- web/skins/classic/css/base/skin.css | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/web/skins/classic/css/base/skin.css b/web/skins/classic/css/base/skin.css index adae3657e..70d7a17dc 100644 --- a/web/skins/classic/css/base/skin.css +++ b/web/skins/classic/css/base/skin.css @@ -1643,12 +1643,6 @@ audio-motion, audio-motion canvas { } */ -/* Fix bootstrap */ -legend { - width: auto; - padding-inline: 0.5em; -} - /* Fix bootstrap-table */ .fixed-table-loading { overflow: hidden; @@ -1715,7 +1709,12 @@ video-stream[id^='liveStream'] video{ padding: 0; } -/* +++ For now, let it be like this here, since it might have to be applied to many pages. !!! */ +/* +++ IgorA100 For now, let it be like this here, since it might have to be applied to many pages. https://github.com/ZoneMinder/zoneminder/pull/4752 */ +.user-page fieldset legend { + width: auto; + padding-inline: 0.5em; +} + .user-page #header { padding-left: 15px; padding-right: 15px; @@ -1811,4 +1810,4 @@ video-stream[id^='liveStream'] video{ .hide-nav-buttons #refreshBtn { display: none; } -/* --- This block should always be located at the end! */ \ No newline at end of file +/* --- This block should always be located at the end! */ From 16298046c0cb96cb839b915d51f3fbc0971c6e00 Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Wed, 29 Apr 2026 15:50:45 +0300 Subject: [PATCH 5/6] Fix: https://github.com/ZoneMinder/zoneminder/pull/4752#discussion_r3158319612 (user.php) --- web/skins/classic/views/user.php | 56 ++++++++++++++++---------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/web/skins/classic/views/user.php b/web/skins/classic/views/user.php index 6ce02338c..a9410b644 100644 --- a/web/skins/classic/views/user.php +++ b/web/skins/classic/views/user.php @@ -270,7 +270,7 @@ echo htmlSelect('user[HomeView]', $homeview_options, $User->HomeView(), ['class' -
+
@@ -387,46 +387,46 @@ if (canEdit('Groups')) {
-
-
-
- - - - - - - - - - - +
+
+ +
+ + + + + + + + + 0], ['order'=>'Sequence ASC']); foreach ($monitors as $monitor) { if ($monitor->canView()) { echo ' - - - - - - '; + + + + + + '; } else { ZM\Debug("Can't view monitor ".$monitor->Id(). ' ' .$monitor->canView()); } } ?> - -
'.$monitor->Id().''.validHtmlStr($monitor->Name()).''.html_radio('monitor_permission['.$monitor->Id().']', $inve, - $User->Monitor_Permission($monitor->Id())->Permission(), - ['default'=>'Inherit'], - ['data-on-change'=>'updateEffectivePermissions']).''.translate($monitor->effectivePermission($User)).'
'.$monitor->Id().''.validHtmlStr($monitor->Name()).''.html_radio('monitor_permission['.$monitor->Id().']', $inve, + $User->Monitor_Permission($monitor->Id())->Permission(), + ['default'=>'Inherit'], + ['data-on-change'=>'updateEffectivePermissions']).''.translate($monitor->effectivePermission($User)).'
-
-
+ + + +
+ From d7f7279e02bc233d091af8ec4963eb8b883885be Mon Sep 17 00:00:00 2001 From: IgorA100 Date: Wed, 29 Apr 2026 23:22:02 +0300 Subject: [PATCH 6/6] Apply ".flex-col-2" and ".flex-col-3" to all pages, not just the User page (skin.css) This won't cause any problems, as ".flex-col-2" and ".flex-col-3" aren't currently used anywhere else. --- web/skins/classic/css/base/skin.css | 46 +++++++++++++++-------------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/web/skins/classic/css/base/skin.css b/web/skins/classic/css/base/skin.css index 70d7a17dc..7af16b5e9 100644 --- a/web/skins/classic/css/base/skin.css +++ b/web/skins/classic/css/base/skin.css @@ -1709,6 +1709,27 @@ video-stream[id^='liveStream'] video{ padding: 0; } +.flex-col-2, +.flex-col-3 { + display: flex; + flex-wrap: wrap; +} + +.flex-col-2 > *, +.flex-col-3 > * { + display: flex; + flex-grow: 1; + justify-content: center; +} + +.flex-col-2 > * { + min-width: 50%; /* For potential 2 columns, to align them by width (if we don't use "col-md/lg-*") */ +} + +.flex-col-3 > * { + min-width: 33.33333%; /* For potential 3 columns, to align them by width (if we don't use "col-md/lg-*") */ +} + /* +++ IgorA100 For now, let it be like this here, since it might have to be applied to many pages. https://github.com/ZoneMinder/zoneminder/pull/4752 */ .user-page fieldset legend { width: auto; @@ -1733,27 +1754,8 @@ video-stream[id^='liveStream'] video{ overflow-y: auto; } -.user-page .flex-col-2, -.user-page .flex-col-3 { - display: flex; -} - -.user-page .flex-col-2 > *, -.user-page .flex-col-3 > * { - display: flex; - flex-grow: 1; -} - -.user-page .flex-col-2 > * { - min-width: 50%; /* For potential 2 columns, to align them by width (if we don't use "col-md/lg-*") */ -} - -.user-page .flex-col-3 > * { - min-width: 33.33333%; /* For potential 3 columns, to align them by width (if we don't use "col-md/lg-*") */ -} - @media (min-width: 992px) { - .user-page *[class*="flex-col-"]> *[class*="col-lg"] { /* Fix bootstrap for flex-grow: 1 */ + *[class*="flex-col-"]> *[class*="col-lg"] { /* Fix bootstrap for flex-grow: 1 */ max-width: 100%; } @@ -1765,8 +1767,8 @@ video-stream[id^='liveStream'] video{ } @media (min-width: 768px) { - .user-page *[class*="flex-col-"]> .col, - .user-page *[class*="flex-col-"]> *[class*="col-md"] { /* Fix bootstrap for flex-grow: 1 */ + *[class*="flex-col-"]> .col, + *[class*="flex-col-"]> *[class*="col-md"] { /* Fix bootstrap for flex-grow: 1 */ max-width: 100%; }