Enhance OTS Signage Theme with Icon Dashboard and UI Improvements
- Updated theme.js to refine dropdown initialization, excluding user menu handling. - Modified authed.twig to allow CSS variable theming for background and text colors, and adjusted content wrapper classes based on navigation state. - Adjusted override-styles.twig to improve layout responsiveness and ensure proper styling for horizontal navigation mode. - Enhanced theme-scripts.twig to improve user menu functionality, including repositioning and click handling. - Introduced a new dashboard-icon-page.twig for a stylized icon dashboard, featuring card-based buttons for quick access to various functionalities, along with custom styles for better user experience.
This commit is contained in:
Matt Batchelder
@@ -468,7 +468,7 @@ body {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 4px;
|
||||
height: 56px;
|
||||
height: 67px;
|
||||
z-index: 1100;
|
||||
position: relative;
|
||||
width: auto;
|
||||
@@ -555,6 +555,47 @@ nav.navbar + #content-wrapper .page-content {
|
||||
padding-top: 56px;
|
||||
}
|
||||
|
||||
/* Horizontal nav mode: no sidebar, so remove sidebar margin from content */
|
||||
nav.navbar + #content-wrapper {
|
||||
margin-left: 0 !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
padding-left: 20px !important;
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
|
||||
nav.navbar + #content-wrapper .page-content {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
nav.navbar + #content-wrapper .page-content .row {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
nav.navbar + #content-wrapper .page-content [class*="col-"] {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
nav.navbar + #content-wrapper .page-content > .row > .col-sm-12 {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
nav.navbar + #content-wrapper .page-header {
|
||||
margin-left: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
/* Page background follows the light/dark theme when horizontal nav is active */
|
||||
nav.navbar + #content-wrapper,
|
||||
nav.navbar + #content-wrapper .page-content {
|
||||
background-color: var(--color-background) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
|
||||
/* Right-side controls: notification bell + account menu */
|
||||
.navbar-collapse .navbar-nav.navbar-right {
|
||||
margin-left: auto;
|
||||
@@ -580,9 +621,9 @@ nav.navbar + #content-wrapper .page-content {
|
||||
z-index: 1100 !important;
|
||||
background-color: var(--color-surface-elevated) !important;
|
||||
border-bottom: 1px solid var(--color-border) !important;
|
||||
height: 56px !important;
|
||||
min-height: 56px !important;
|
||||
max-height: 56px !important;
|
||||
height: 67px !important;
|
||||
min-height: 67px !important;
|
||||
max-height: 67px !important;
|
||||
margin: 0 !important;
|
||||
padding: 0 !important;
|
||||
overflow: visible !important;
|
||||
@@ -601,7 +642,7 @@ body:not(.ots-sidebar-collapsed) .ots-topbar-strip {
|
||||
display: flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: space-between !important;
|
||||
height: 56px !important;
|
||||
height: 67px !important;
|
||||
padding: 0 16px !important;
|
||||
margin: 0 !important;
|
||||
gap: 12px !important;
|
||||
@@ -3008,28 +3049,50 @@ legend {
|
||||
.modal,
|
||||
.modal-body,
|
||||
.modal-footer {
|
||||
background-color: transparent !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
color: var(--modal-body-text, var(--color-text-primary)) !important;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background-color: var(--color-surface) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
background-color: var(--modal-bg, var(--color-surface)) !important;
|
||||
color: var(--modal-body-text, var(--color-text-primary)) !important;
|
||||
border: 1px solid var(--modal-border, var(--color-border)) !important;
|
||||
border-radius: var(--modal-radius, var(--ots-radius-lg)) !important;
|
||||
box-shadow: var(--modal-shadow) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal-backdrop,
|
||||
.modal-backdrop.show,
|
||||
.modal-backdrop.in {
|
||||
background-color: rgba(0, 0, 0, 0.3) !important;
|
||||
backdrop-filter: blur(4px) !important;
|
||||
background-color: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.3)) !important;
|
||||
backdrop-filter: blur(var(--modal-backdrop-blur, 4px)) !important;
|
||||
-webkit-backdrop-filter: blur(var(--modal-backdrop-blur, 4px)) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: var(--color-surface-elevated) !important;
|
||||
border-bottom: 1px solid var(--color-border) !important;
|
||||
background-color: var(--modal-header-bg, var(--color-surface-elevated)) !important;
|
||||
border-bottom: 1px solid var(--modal-header-border, var(--color-border)) !important;
|
||||
padding: 16px 20px !important;
|
||||
}
|
||||
|
||||
.modal-title,
|
||||
.modal-header h4,
|
||||
.modal-header h5 {
|
||||
color: var(--modal-header-text, var(--color-text-primary)) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
background-color: var(--modal-body-bg, transparent) !important;
|
||||
color: var(--modal-body-text, var(--color-text-primary)) !important;
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background-color: var(--modal-footer-bg, transparent) !important;
|
||||
border-top: 1px solid var(--modal-footer-border, var(--color-border)) !important;
|
||||
padding: 12px 20px !important;
|
||||
}
|
||||
|
||||
.dropdown-menu a,
|
||||
@@ -3373,6 +3436,7 @@ a.text-muted:hover {
|
||||
}
|
||||
|
||||
/* Light mode token overrides so layout backgrounds follow theme */
|
||||
html.ots-light-mode,
|
||||
body.ots-light-mode {
|
||||
--ots-bg: var(--color-background);
|
||||
--ots-surface: var(--color-surface);
|
||||
@@ -3450,7 +3514,8 @@ hr {
|
||||
background: var(--ots-bg);
|
||||
}
|
||||
|
||||
#content-wrapper {
|
||||
/* Only apply sidebar content gap when in sidebar mode (inside #page-wrapper) */
|
||||
#page-wrapper #content-wrapper {
|
||||
padding-left: var(--ots-sidebar-content-gap);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -3459,12 +3524,23 @@ hr {
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
/* Override Bootstrap col padding inside page-content */
|
||||
.page-content > .row > .col-sm-12 {
|
||||
/* Override Bootstrap col padding inside page-content (sidebar mode only) */
|
||||
#page-wrapper .page-content > .row > .col-sm-12 {
|
||||
padding-left: 16px;
|
||||
padding-right: 16px;
|
||||
}
|
||||
|
||||
/* Horizontal nav: ensure no extra left padding leaks through */
|
||||
nav.navbar + #content-wrapper {
|
||||
padding-left: 20px !important;
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
|
||||
nav.navbar + #content-wrapper .page-content > .row > .col-sm-12 {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
NAVBAR / TOPBAR
|
||||
============================================================================= */
|
||||
@@ -3475,8 +3551,8 @@ hr {
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--ots-border);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
height: 56px;
|
||||
min-height: 56px;
|
||||
height: 67px;
|
||||
min-height: 67px;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -3649,30 +3725,44 @@ hr {
|
||||
|
||||
.widget,
|
||||
.card,
|
||||
.panel,
|
||||
.modal-content {
|
||||
.panel {
|
||||
background: var(--color-surface) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-base);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: var(--modal-bg, var(--color-surface)) !important;
|
||||
border: 1px solid var(--modal-border, var(--color-border)) !important;
|
||||
border-radius: var(--modal-radius, var(--ots-radius-lg)) !important;
|
||||
box-shadow: var(--modal-shadow) !important;
|
||||
}
|
||||
|
||||
.widget-title,
|
||||
.panel-heading,
|
||||
.card-header,
|
||||
.modal-header {
|
||||
.card-header {
|
||||
background: var(--color-surface-elevated) !important;
|
||||
border-bottom: 1px solid var(--color-border) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: var(--modal-header-bg, var(--color-surface-elevated)) !important;
|
||||
border-bottom: 1px solid var(--modal-header-border, var(--color-border)) !important;
|
||||
color: var(--modal-header-text, var(--color-text-primary)) !important;
|
||||
}
|
||||
|
||||
.widget-body,
|
||||
.panel-body,
|
||||
.card-body,
|
||||
.modal-body {
|
||||
.card-body {
|
||||
color: var(--ots-text);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
color: var(--modal-body-text, var(--ots-text));
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
BUTTONS
|
||||
============================================================================= */
|
||||
@@ -3913,30 +4003,121 @@ textarea:focus {
|
||||
============================================================================= */
|
||||
|
||||
.modal-content {
|
||||
border-radius: var(--radius-lg);
|
||||
background-color: var(--color-surface) !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
border: 1px solid var(--color-border) !important;
|
||||
border-radius: var(--modal-radius, var(--ots-radius-lg));
|
||||
background-color: var(--modal-bg, var(--color-surface)) !important;
|
||||
color: var(--modal-body-text, var(--color-text-primary)) !important;
|
||||
border: 1px solid var(--modal-border, var(--color-border)) !important;
|
||||
box-shadow: var(--modal-shadow) !important;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.modal,
|
||||
.modal-header,
|
||||
.modal-body,
|
||||
.modal-footer {
|
||||
background-color: transparent !important;
|
||||
color: var(--color-text-primary) !important;
|
||||
color: var(--modal-body-text, var(--color-text-primary)) !important;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background-color: var(--modal-header-bg, var(--color-surface-elevated)) !important;
|
||||
border-bottom: 1px solid var(--modal-header-border, var(--ots-border)) !important;
|
||||
padding: 16px 20px !important;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
background-color: var(--modal-body-bg, transparent) !important;
|
||||
padding: 20px !important;
|
||||
}
|
||||
|
||||
.modal-backdrop,
|
||||
.modal-backdrop.show,
|
||||
.modal-backdrop.in {
|
||||
background-color: rgba(0, 0, 0, 0.3) !important;
|
||||
backdrop-filter: blur(4px) !important;
|
||||
background-color: var(--modal-backdrop-bg, rgba(0, 0, 0, 0.3)) !important;
|
||||
backdrop-filter: blur(var(--modal-backdrop-blur, 4px)) !important;
|
||||
-webkit-backdrop-filter: blur(var(--modal-backdrop-blur, 4px)) !important;
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
border-top: 1px solid var(--ots-border);
|
||||
background-color: var(--modal-footer-bg, transparent) !important;
|
||||
border-top: 1px solid var(--modal-footer-border, var(--ots-border)) !important;
|
||||
padding: 12px 20px !important;
|
||||
}
|
||||
|
||||
/* Modal footer buttons — secondary */
|
||||
.modal-footer .btn,
|
||||
.modal-footer button {
|
||||
border-radius: var(--ots-radius-sm) !important;
|
||||
border: 1px solid var(--modal-border, var(--ots-border)) !important;
|
||||
background: var(--modal-body-bg, var(--ots-surface-3)) !important;
|
||||
color: var(--modal-body-text, var(--ots-text)) !important;
|
||||
transition: background var(--ots-transition),
|
||||
color var(--ots-transition),
|
||||
border-color var(--ots-transition);
|
||||
}
|
||||
|
||||
.modal-footer .btn:hover,
|
||||
.modal-footer button:hover {
|
||||
background: rgba(79, 140, 255, 0.08) !important;
|
||||
border-color: var(--ots-primary) !important;
|
||||
color: var(--ots-primary) !important;
|
||||
}
|
||||
|
||||
/* Modal footer buttons — primary */
|
||||
.modal-footer .btn-primary,
|
||||
.modal-footer .btn.btn-primary {
|
||||
background: var(--ots-primary) !important;
|
||||
color: #0b1020 !important;
|
||||
border-color: var(--ots-primary-2, var(--ots-primary)) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.modal-footer .btn-primary:hover {
|
||||
background: var(--ots-primary-2, var(--color-primary-dark)) !important;
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
/* Modal footer buttons — danger */
|
||||
.modal-footer .btn-danger {
|
||||
background: var(--ots-danger) !important;
|
||||
color: #ffffff !important;
|
||||
border-color: var(--ots-danger) !important;
|
||||
}
|
||||
|
||||
/* Modal close button */
|
||||
.modal-header .close,
|
||||
.modal-header [data-dismiss="modal"] {
|
||||
color: var(--modal-close-color, var(--ots-text-muted)) !important;
|
||||
opacity: 1 !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
.modal-header .close:hover,
|
||||
.modal-header [data-dismiss="modal"]:hover {
|
||||
color: var(--modal-close-hover, var(--ots-text)) !important;
|
||||
}
|
||||
|
||||
/* Modal form controls */
|
||||
.modal-body .form-control,
|
||||
.modal-body input[type="text"],
|
||||
.modal-body input[type="number"],
|
||||
.modal-body input[type="email"],
|
||||
.modal-body input[type="password"],
|
||||
.modal-body textarea,
|
||||
.modal-body select {
|
||||
background-color: var(--modal-input-bg, var(--ots-bg)) !important;
|
||||
border: 1px solid var(--modal-input-border, var(--ots-border)) !important;
|
||||
border-radius: var(--ots-radius-sm) !important;
|
||||
color: var(--modal-input-text, var(--ots-text)) !important;
|
||||
}
|
||||
|
||||
.modal-body .form-control:focus,
|
||||
.modal-body input:focus,
|
||||
.modal-body textarea:focus,
|
||||
.modal-body select:focus {
|
||||
border-color: var(--modal-input-focus-border, var(--ots-primary)) !important;
|
||||
box-shadow: 0 0 0 3px var(--modal-input-focus-ring, rgba(79, 140, 255, 0.2)) !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
@@ -4076,3 +4257,65 @@ textarea:focus {
|
||||
text-indent: 0 !important;
|
||||
list-style: none !important;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
HORIZONTAL NAV — FINAL OVERRIDE (must be last in file to win cascade)
|
||||
Applied when the top navbar is active and there is no sidebar.
|
||||
============================================================================= */
|
||||
nav.navbar + #content-wrapper,
|
||||
.navbar.navbar-expand-lg ~ #content-wrapper,
|
||||
.navbar-default.navbar-expand-lg ~ #content-wrapper {
|
||||
margin-left: 0 !important;
|
||||
padding-left: 20px !important;
|
||||
padding-right: 20px !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
nav.navbar + #content-wrapper .page-content,
|
||||
.navbar.navbar-expand-lg ~ #content-wrapper .page-content {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
nav.navbar + #content-wrapper .page-content .row,
|
||||
.navbar.navbar-expand-lg ~ #content-wrapper .page-content .row {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
nav.navbar + #content-wrapper .page-content [class*="col-"],
|
||||
nav.navbar + #content-wrapper .page-content > .row > .col-sm-12,
|
||||
.navbar.navbar-expand-lg ~ #content-wrapper .page-content [class*="col-"],
|
||||
.navbar.navbar-expand-lg ~ #content-wrapper .page-content > .row > .col-sm-12 {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
/* =============================================================================
|
||||
HORIZONTAL NAV — CLASS-BASED OVERRIDE (highest cascade priority)
|
||||
.ots-horizontal-nav is added directly to #content-wrapper in authed.twig
|
||||
============================================================================= */
|
||||
#content-wrapper.ots-horizontal-nav {
|
||||
margin-left: 0 !important;
|
||||
padding-left: 30px !important;
|
||||
padding-right: 30px !important;
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
#content-wrapper.ots-horizontal-nav .page-content {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
#content-wrapper.ots-horizontal-nav .page-content .row {
|
||||
margin-left: 0 !important;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
#content-wrapper.ots-horizontal-nav .page-content [class*="col-"],
|
||||
#content-wrapper.ots-horizontal-nav .page-content > .row > .col-sm-12 {
|
||||
padding-left: 0 !important;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user