Refactor page structure: Update page classes for consistency

- Changed class from "ots-displays-page" to "ots-static-page ots-displays-page" in multiple Twig view files to standardize page layout.
- Enhanced schedule-page.twig with improved calendar navigation and dropdown management.
- Added global dropdown dismissal functionality to improve user experience across modals and dropdowns.
This commit is contained in:
Matt Batchelder
2026-02-11 20:47:09 -05:00
parent 29b56bef4f
commit b766487411
34 changed files with 4506 additions and 141 deletions

View File

@@ -29,7 +29,7 @@
{% block actionMenu %}{% endblock %}
{% block pageContent %}
<div class="ots-displays-page">
<div class="ots-static-page ots-displays-page">
<div class="page-header ots-page-header">
<h1>{% trans "Schedule" %}</h1>
<p class="text-muted">{% trans "Schedule content to your displays." %}</p>
@@ -222,14 +222,21 @@
</div>
<div class="card-body">
<div class="xibo-calendar-header-container col-xl-12 d-inline-flex justify-content-between">
<div class="xibo-calendar-header text-center d-inline-flex">
<h1 class="page-header"></h1>
</div>
<div class="calendar-loading">
<span id="calendar-progress-table" class="fa fa-spin fa-cog"></span>
<span id="calendar-progress" class="fa fa-spin fa-cog"></span>
<div class="xibo-calendar-header-container col-xl-12">
<div class="ots-calendar-nav">
<button type="button" class="ots-cal-arrow ots-cal-arrow-prev" id="ots-cal-prev" title="{% trans 'Previous' %}">
<i class="fa fa-chevron-left"></i>
</button>
<div class="xibo-calendar-header text-center">
<h1 class="page-header"></h1>
<div class="calendar-loading">
<span id="calendar-progress-table" class="fa fa-spin fa-cog"></span>
<span id="calendar-progress" class="fa fa-spin fa-cog"></span>
</div>
</div>
<button type="button" class="ots-cal-arrow ots-cal-arrow-next" id="ots-cal-next" title="{% trans 'Next' %}">
<i class="fa fa-chevron-right"></i>
</button>
</div>
</div>
@@ -349,4 +356,14 @@
{# Add page source code bundle ( JS ) #}
<script src="{{ theme.rootUri() }}dist/leaflet.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
<script src="{{ theme.rootUri() }}dist/pages/schedule-page.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
<script nonce="{{ cspNonce }}">
$(function() {
$('#ots-cal-prev').on('click', function() {
$('button[data-calendar-nav="prev"]').trigger('click');
});
$('#ots-cal-next').on('click', function() {
$('button[data-calendar-nav="next"]').trigger('click');
});
});
</script>
{% endblock %}