OTSSigns/OTSSignsTheme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor filter panels and enhance sidebar functionality

Browse Source 
- Updated filter panel toggle icons from chevron-up to chevron-down across multiple pages for consistency.
- Added 'collapsed' class to filter content divs to manage visibility state.
- Enhanced library page button for tidying up media items, replacing the trash icon with a custom SVG broom icon.
- Improved CSS styles for sidebar and page header to ensure visibility and proper layout when the sidebar is collapsed.
- Introduced JavaScript functionality to manage sidebar width and state, including theme toggle for light/dark mode.
- Created a new notification drawer template that adapts based on the compact view state.
This commit is contained in:
Matt Batchelder
2026-02-05 09:04:06 -05:00
parent d8f8c0f916
commit 122d098be4
23 changed files with 2447 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
custom/otssignange/views/authed.twig
View File

@@ -22,6 +22,50 @@
#}
{% extends "base.twig" %}
{% block headContent %}
<script nonce="{{ cspNonce }}">
(function(){
try{
var stored = localStorage.getItem('ots-theme-mode');
var prefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;
var mode = stored || (prefersLight ? 'light' : 'light');
if(mode === 'light') document.documentElement.classList.add('ots-light-mode');
else document.documentElement.classList.remove('ots-light-mode');
}catch(e){}
})();
(function(){
// Apply collapsed sidebar state early to prevent header flashing
try {
var collapsed = localStorage.getItem('otsTheme:sidebarCollapsed');
if (collapsed === 'true') {
// diagnostic
try { console.debug && console.debug('otsTheme:sidebarCollapsed early:', collapsed); } catch(e){}
// Add on <html> immediately; body may not be parsed yet
document.documentElement.classList.add('ots-sidebar-collapsed');
if (document.body) document.body.classList.add('ots-sidebar-collapsed');
// Also set the CSS variable used for collapsed width so layout shifts correctly
try {
var v = getComputedStyle(document.documentElement).getPropertyValue('--ots-sidebar-collapsed-width') || '64px';
document.documentElement.style.setProperty('--ots-sidebar-width', v);
} catch(e){}
try { console.debug && console.debug('applied ots-sidebar-collapsed early'); } catch(e){}
} else {
try { console.debug && console.debug('otsTheme:sidebarCollapsed early: not set'); } catch(e){}
}
} catch (e) {}
})();
</script>
<style nonce="{{ cspNonce }}">html,body{background:#ffffff!important;color:#111111!important}
/* Hide the top header row immediately when sidebar is collapsed to prevent flash */
html.ots-sidebar-collapsed .row.header.header-side,
body.ots-sidebar-collapsed .row.header.header-side,
.ots-sidebar.collapsed ~ .ots-main .row.header.header-side,
.ots-sidebar.collapsed .row.header.header-side { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }
</style>
{% endblock %}
{% block content %}
{% set horizontalNav = currentUser.getOptionValue("navigationMenuPosition", theme.getSetting("NAVIGATION_MENU_POSITION", "vertical")) == "horizontal" %}
@@ -36,7 +80,10 @@
<nav class="navbar navbar-default navbar-expand-lg">
<a class="navbar-brand xibo-logo-container" href="#">
<img class="xibo-logo" src="{{ theme.uri("img/xibologo.png") }}">
<span class="xibo-logo-text">Xibo</span>
<span class="xibo-logo-text">
<span class="brand-line brand-line-top">OTS</span>
<span class="brand-line brand-line-bottom">Signs</span>
</span>
</a>
<!-- Brand and toggle get grouped for better mobile display -->
@@ -78,14 +125,16 @@
<span class="fa fa-bars"></span>
</button>
{% endif %}
<div class="user pull-right">
{% include "authed-user-menu.twig" %}
<div class="user-actions pull-right">
{% if currentUser.featureEnabled("drawer") %}
<div class="user-notif">
{% include "authed-notification-drawer.twig" with { 'compact': true } %}
</div>
{% endif %}
<div class="user">
{% include "authed-user-menu.twig" with { 'compact': true } %}
</div>
</div>
{% if currentUser.featureEnabled("drawer") %}
<div class="user user-notif pull-right">
{% include "authed-notification-drawer.twig" %}
</div>
{% endif %}
{% include "authed-theme-topbar.twig" ignore missing %}
{% endif %}
</div>