122d098be4
- 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.
184 lines
9.2 KiB
Twig
184 lines
9.2 KiB
Twig
{#
|
|
/**
|
|
* Copyright (C) 2020-2025 Xibo Signage Ltd
|
|
*
|
|
* Xibo - Digital Signage - https://xibosignage.com
|
|
*
|
|
* This file is part of Xibo.
|
|
*
|
|
* Xibo is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* any later version.
|
|
*
|
|
* Xibo is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with Xibo. If not, see <http://www.gnu.org/licenses/>.
|
|
*/
|
|
#}
|
|
{% 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" %}
|
|
|
|
{% if not hideNavigation %}
|
|
{% set hideNavigation = currentUser.getOptionValue("hideNavigation", "0") %}
|
|
{% endif %}
|
|
|
|
<div {% if hideNavigation == "0" and not horizontalNav and not forceHide %}id="page-wrapper"{% endif %} class="active">
|
|
|
|
{% if hideNavigation == "0" and not forceHide %}
|
|
{% if horizontalNav %}
|
|
<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">
|
|
<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 -->
|
|
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbar-collapse-1" aria-controls="navbarNav" aria-expanded="false">
|
|
<span class="fa fa-bars"></span>
|
|
</button>
|
|
|
|
<!-- Collect the nav links, forms, and other content for toggling -->
|
|
<div class="navbar-collapse collapse justify-content-between" id="navbar-collapse-1">
|
|
{% include "authed-topbar.twig" %}
|
|
|
|
<ul class="nav navbar-nav navbar-right">
|
|
{% include "authed-theme-topbar.twig" ignore missing %}
|
|
{% if currentUser.featureEnabled("drawer") %}
|
|
{% include "authed-notification-drawer.twig" %}
|
|
{% endif %}
|
|
{% include "authed-user-menu.twig" %}
|
|
</ul>
|
|
</div><!-- /.navbar-collapse -->
|
|
</nav>
|
|
{% else %}
|
|
<div class="navbar-collapse navbar-collapse-side collapse" id="navbar-collapse-1">
|
|
{% include "authed-sidebar.twig" %}
|
|
</div>
|
|
{% endif %}
|
|
{% endif %}
|
|
|
|
<div id="content-wrapper">
|
|
<div class="page-content">
|
|
{% if not horizontalNav or hideNavigation == "1" or forceHide %}
|
|
<div class="row header header-side">
|
|
<div class="col-sm-12">
|
|
<div class="meta pull-left xibo-logo-container">
|
|
<div class="page"><img class="xibo-logo" src="{{ theme.uri("img/xibologo.png") }}"></div>
|
|
</div>
|
|
{% if not forceHide %}
|
|
{% if not hideNavigation == "1" %}
|
|
<button type="button" class="pull-right navbar-toggler navbar-toggler-side" data-toggle="collapse" data-target="#navbar-collapse-1" aria-controls="navbarNav" aria-expanded="false">
|
|
<span class="fa fa-bars"></span>
|
|
</button>
|
|
{% endif %}
|
|
<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>
|
|
{% include "authed-theme-topbar.twig" ignore missing %}
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
{% block actionMenu %}{% endblock %}
|
|
|
|
{% if settings.INSTANCE_SUSPENDED == "partial" %}
|
|
<div class="alert alert-warning">{{ "CMS suspended. Displays will show cached content. Please contact your administrator."|trans }}</div>
|
|
{% endif %}
|
|
|
|
{% block pageContent %}{% endblock %}
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
{% block pageFooter %}{% endblock %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% set helpLinks = helpService.getLinksForPage(route) %}
|
|
{% set faultViewEnabled = currentUser.featureEnabled("fault.view") %}
|
|
|
|
{# Hide in mobile view (sm/<768px) #}
|
|
<div id="help-pane" class="d-none d-md-flex help-pane"
|
|
data-help-links="{{ helpLinks|json_encode }}"
|
|
data-url-help-landing-page={{ helpService.getLandingPage() }}
|
|
data-fault-view-enabled={{faultViewEnabled}}
|
|
data-fault-view-url={{ url_for("fault.view") }}
|
|
>
|
|
<div class="help-pane-container" style="display: none;">
|
|
</div>
|
|
<div class="help-pane-btn">
|
|
<i class="fas fa-question"></i>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block javaScriptTemplates %}
|
|
{# File upload templates and scripts #}
|
|
{% include "include-file-upload.twig" %}
|
|
{% endblock %} |