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.
2026-02-11 20:47:09 -05:00
parent 29b56bef4f
commit b766487411
34 changed files with 4506 additions and 141 deletions
--- a/custom/otssignange/views/applications-page.twig
+++ b/custom/otssignange/views/applications-page.twig
@@ -12,7 +12,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 "Applications" %}</h1>
            <p class="text-muted">{% trans "Manage API applications and connectors." %}</p>
--- a/custom/otssignange/views/authed.twig
+++ b/custom/otssignange/views/authed.twig
@@ -28,7 +28,7 @@
                        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');
+                                var mode = stored || (prefersLight ? 'light' : 'dark');
                                if(mode === 'light') document.documentElement.classList.add('ots-light-mode');
                                else document.documentElement.classList.remove('ots-light-mode');
                        }catch(e){}
--- a/custom/otssignange/views/campaign-page.twig
+++ b/custom/otssignange/views/campaign-page.twig
@@ -28,7 +28,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 "Campaigns" %}</h1>
            <p class="text-muted">{% trans "Manage your campaigns and ad campaigns." %}</p>
--- a/custom/otssignange/views/command-page.twig
+++ b/custom/otssignange/views/command-page.twig
@@ -29,7 +29,7 @@


 {% block pageContent %}
-    <div class="ots-displays-page">
+    <div class="ots-static-page ots-displays-page">
        <div class="page-header ots-page-header">
            <h1>{% trans "Commands" %}</h1>
            <p class="text-muted">{% trans "Create and manage commands for Displays." %}</p>
--- a/custom/otssignange/views/dataset-page.twig
+++ b/custom/otssignange/views/dataset-page.twig
@@ -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 "DataSets" %}</h1>
            <p class="text-muted">{% trans "Manage structured data sources." %}</p>
--- a/custom/otssignange/views/daypart-page.twig
+++ b/custom/otssignange/views/daypart-page.twig
@@ -28,7 +28,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 "Dayparting" %}</h1>
            <p class="text-muted">{% trans "Manage time-based scheduling rules." %}</p>
--- a/custom/otssignange/views/display-page.twig
+++ b/custom/otssignange/views/display-page.twig
@@ -65,7 +65,7 @@
 {% 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 "Displays" %}</h1>
            <p class="text-muted">{% trans "Manage your player fleet and status." %}</p>
@@ -337,7 +337,7 @@
                                </table>

                                <!-- Map -->
-                                <div class="row">
+                                <div class="row" id="map-view-container" style="display:none;">
                                    <div class="col-sm-12">
                                        <div class="map-legend" style="display:none; position: absolute; z-index: 500; right: 20px; top: 10px;">
                                            <div class="display-map-legend" style="font-size: 12px;">
@@ -404,4 +404,96 @@
    {# 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/display-page.bundle.min.js?v={{ version }}&rev={{revision}}" nonce="{{ cspNonce }}"></script>
+
+    {# Initialize map/list view toggle AFTER all other scripts load #}
+    <script type="text/javascript" nonce="{{ cspNonce }}">
+        function initMapListToggle() {
+            var mapBtn = document.getElementById('map_button');
+            var listBtn = document.getElementById('list_button');
+            var mapViewContainer = document.getElementById('map-view-container');
+            // DataTables wraps the <table> in a div with id "displays_wrapper"
+            var tableWrapper = document.getElementById('displays_wrapper');
+            // Fallback: if DataTables hasn't wrapped it yet, target the table itself
+            if (!tableWrapper) {
+                tableWrapper = document.getElementById('displays');
+            }
+
+            if (!mapBtn || !listBtn || !mapViewContainer || !tableWrapper) {
+                console.warn('Map/list toggle: required elements not found:', {
+                    mapBtn: !!mapBtn,
+                    listBtn: !!listBtn,
+                    mapViewContainer: !!mapViewContainer,
+                    tableWrapper: !!tableWrapper
+                });
+                return;
+            }
+
+            console.log('Map/list toggle initialized');
+
+            // Show list view by default
+            tableWrapper.style.display = '';
+            mapViewContainer.style.display = 'none';
+            listBtn.classList.add('active');
+            mapBtn.classList.remove('active');
+
+            // Map button click handler
+            mapBtn.addEventListener('click', function(e) {
+                e.preventDefault();
+                console.log('Map button clicked');
+                mapViewContainer.style.display = 'block';
+                tableWrapper.style.display = 'none';
+                mapBtn.classList.add('active');
+                listBtn.classList.remove('active');
+
+                // Leaflet can't size itself in a hidden container.
+                // After making the map visible, tell every Leaflet map
+                // instance inside it to recalculate its dimensions.
+                setTimeout(function() {
+                    var mapEl = document.getElementById('display-map');
+                    if (mapEl) {
+                        // Leaflet stores its instance on the DOM element as _leaflet_map
+                        var leafletKeys = Object.keys(mapEl).filter(function(k) {
+                            return k.indexOf('_leaflet_map') === 0 || k === '_leaflet';
+                        });
+                        // Try the standard _leaflet_map key
+                        if (mapEl._leaflet_map) {
+                            mapEl._leaflet_map.invalidateSize();
+                            console.log('Leaflet invalidateSize called via _leaflet_map');
+                        }
+                        // Also try iterating over Leaflet-stamped keys
+                        for (var i = 0; i < leafletKeys.length; i++) {
+                            var inst = mapEl[leafletKeys[i]];
+                            if (inst && typeof inst.invalidateSize === 'function') {
+                                inst.invalidateSize();
+                                console.log('Leaflet invalidateSize called via', leafletKeys[i]);
+                            }
+                        }
+                        // Fallback: dispatch a resize event so Leaflet picks it up
+                        window.dispatchEvent(new Event('resize'));
+                    }
+                }, 200);
+            });
+
+            // List button click handler
+            listBtn.addEventListener('click', function(e) {
+                e.preventDefault();
+                console.log('List button clicked');
+                tableWrapper.style.display = '';
+                mapViewContainer.style.display = 'none';
+                listBtn.classList.add('active');
+                mapBtn.classList.remove('active');
+            });
+        }
+
+        // Wait for DOM to be ready
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', function() {
+                // Give the page bundle time to initialize DataTables
+                setTimeout(initMapListToggle, 500);
+            });
+        } else {
+            // Give the page bundle time to initialize DataTables
+            setTimeout(initMapListToggle, 500);
+        }
+    </script>
 {% endblock %}
--- a/custom/otssignange/views/displaygroup-page.twig
+++ b/custom/otssignange/views/displaygroup-page.twig
@@ -28,7 +28,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 "Display Groups" %}</h1>
            <p class="text-muted">{% trans "Organize Displays into logical groups." %}</p>
--- a/custom/otssignange/views/displayprofile-page.twig
+++ b/custom/otssignange/views/displayprofile-page.twig
@@ -28,7 +28,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 "Display Settings" %}</h1>
            <p class="text-muted">{% trans "Manage Display settings profiles." %}</p>
--- a/custom/otssignange/views/fonts-page.twig
+++ b/custom/otssignange/views/fonts-page.twig
@@ -12,7 +12,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 "Fonts" %}</h1>
            <p class="text-muted">{% trans "Manage fonts for your signage content." %}</p>
--- a/custom/otssignange/views/include-file-upload.twig
+++ b/custom/otssignange/views/include-file-upload.twig
@@ -0,0 +1,800 @@
+{#
+/**
+ * OTS Signage — Modern Upload Media Modal
+ * Replaces the core Xibo include-file-upload.twig with a redesigned,
+ * drag-and-drop, multi-file upload experience.
+ *
+ * Reuses the existing openUploadForm(options) API so every page
+ * (library, layout, fonts, player software, dataset, etc.) keeps working
+ * without any caller changes.
+ *
+ * Dependencies already present in Xibo: jQuery, jQuery UI, jQuery File Upload,
+ * Bootstrap 4 modal, moment.js.
+ */
+#}
+
+{# ── Upload Modal Markup ────────────────────────────────────────────────── #}
+<div class="modal fade ots-upload-modal" id="ots-upload-modal" tabindex="-1"
+     role="dialog" aria-labelledby="ots-upload-modal-title" aria-modal="true">
+  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
+    <div class="modal-content ots-upload-content">
+
+      {# Header #}
+      <div class="modal-header ots-upload-header">
+        <h5 class="modal-title ots-upload-title" id="ots-upload-modal-title"></h5>
+        <button type="button" class="ots-upload-close" data-dismiss="modal" aria-label="Close">
+          <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
+        </button>
+      </div>
+
+      {# Body #}
+      <div class="modal-body ots-upload-body">
+
+        {# Tab switcher: File / URL #}
+        <div class="ots-upload-tabs" id="ots-upload-tabs">
+          <button type="button" class="ots-upload-tab active" data-tab="file" id="ots-tab-file">
+            <i class="fas fa-file-upload"></i> File
+          </button>
+          <button type="button" class="ots-upload-tab" data-tab="url" id="ots-tab-url">
+            <i class="fas fa-link"></i> URL
+          </button>
+        </div>
+
+        {# ── FILE TAB ──────────────────────────────────────────────── #}
+        <div class="ots-upload-tab-content" id="ots-upload-tab-file">
+
+        {# Folder selector row – shown only when options.folderSelector is true #}
+        <div class="ots-upload-folder-row d-none" id="ots-upload-folder-row">
+          <span class="ots-upload-folder-label" id="ots-upload-folder-label"></span>
+          <button type="button" class="btn btn-sm ots-upload-folder-btn" id="ots-upload-folder-btn" title="">
+            <i class="fas fa-folder-open"></i> <span id="ots-upload-folder-text"></span>
+          </button>
+        </div>
+
+        {# Max file size notice #}
+        <div class="ots-upload-notice d-none" id="ots-upload-size-notice"></div>
+
+        {# Drop-zone #}
+        <form id="ots-upload-form" enctype="multipart/form-data" method="POST">
+          <div class="ots-upload-dropzone" id="ots-upload-dropzone" role="button" tabindex="0"
+               aria-label="Drag and drop files here or click to browse">
+            <div class="ots-upload-dropzone-inner">
+              <div class="ots-upload-dropzone-icon">
+                <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
+                  <rect x="4" y="8" width="40" height="32" rx="6" stroke="currentColor" stroke-width="2" fill="none"/>
+                  <path d="M24 30V18m0 0l-6 6m6-6l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+                </svg>
+              </div>
+              <p class="ots-upload-dropzone-text">
+                <strong id="ots-upload-drop-label">Drop files here</strong><br>
+                <span class="ots-upload-dropzone-sub">or <span class="ots-upload-browse-link">browse your computer</span></span>
+              </p>
+            </div>
+          </div>
+          {# File input lives outside the dropzone to avoid click-event loops #}
+          <input type="file" id="ots-upload-input" name="files[]" multiple class="ots-upload-input-hidden" />
+        </form>
+
+        {# Valid extensions badge #}
+        <div class="ots-upload-ext-info d-none" id="ots-upload-ext-info"></div>
+
+        {# Options row (update in layouts / delete old revisions) #}
+        <div class="ots-upload-options d-none" id="ots-upload-options"></div>
+
+        {# File list / queue #}
+        <div class="ots-upload-queue d-none" id="ots-upload-queue">
+          <div class="ots-upload-queue-header">
+            <span class="ots-upload-queue-title">Files</span>
+            <span class="ots-upload-queue-count" id="ots-upload-queue-count"></span>
+          </div>
+          <ul class="ots-upload-file-list" id="ots-upload-file-list"></ul>
+        </div>
+
+        </div>{# /ots-upload-tab-file #}
+
+        {# ── URL TAB ───────────────────────────────────────────────── #}
+        <div class="ots-upload-tab-content d-none" id="ots-upload-tab-url">
+          <div class="ots-upload-url-section">
+            <div class="ots-upload-url-icon">
+              <svg width="40" height="40" viewBox="0 0 40 40" fill="none">
+                <path d="M17 23l6-6m-3.5.5a5 5 0 017.07 0l1.42 1.42a5 5 0 010 7.07l-2.83 2.83a5 5 0 01-7.07 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                <path d="M23 17l-6 6m3.5-.5a5 5 0 00-7.07 0l-1.42-1.42a5 5 0 010-7.07l2.83-2.83a5 5 0 017.07 0" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+              </svg>
+            </div>
+            <p class="ots-upload-url-desc">Add media from an external URL</p>
+            <div class="ots-upload-url-fields">
+              <div class="ots-upload-url-field">
+                <label for="ots-upload-url-input">URL</label>
+                <input type="url" id="ots-upload-url-input" class="form-control ots-upload-url-input"
+                       placeholder="https://example.com/image.jpg" autocomplete="off" />
+              </div>
+              <button type="button" class="btn ots-upload-btn-start ots-upload-url-add" id="ots-upload-url-add">
+                <i class="fas fa-plus"></i> Add to queue
+              </button>
+            </div>
+            {# URL queue list #}
+            <div class="ots-upload-queue d-none" id="ots-upload-url-queue">
+              <div class="ots-upload-queue-header">
+                <span class="ots-upload-queue-title">URLs</span>
+                <span class="ots-upload-queue-count" id="ots-upload-url-queue-count"></span>
+              </div>
+              <ul class="ots-upload-file-list" id="ots-upload-url-list"></ul>
+            </div>
+          </div>
+        </div>{# /ots-upload-tab-url #}
+
+      </div>
+
+      {# Footer #}
+      <div class="modal-footer ots-upload-footer">
+        <button type="button" class="btn ots-upload-btn-cancel" data-dismiss="modal" id="ots-upload-btn-cancel">Cancel</button>
+        <button type="button" class="btn ots-upload-btn-start d-none" id="ots-upload-btn-start">
+          <i class="fas fa-cloud-upload-alt"></i> <span id="ots-upload-btn-start-label">Start upload</span>
+        </button>
+        <button type="button" class="btn ots-upload-btn-done d-none" id="ots-upload-btn-done">Done</button>
+      </div>
+
+    </div>
+  </div>
+</div>
+
+{# ── Upload JavaScript ──────────────────────────────────────────────────── #}
+<script type="text/javascript" nonce="{{ cspNonce }}">
+/**
+ * openUploadForm(options)
+ * Drop-in replacement for the core Xibo openUploadForm.
+ * Keeps the same options API so existing page callers (library, layout, fonts,
+ * player-software, dataset) work without modification.
+ *
+ * Options shape (all optional except url):
+ * {
+ *   url:              String   – POST endpoint
+ *   title:            String   – modal title
+ *   initialisedBy:    String   – an identifier for the caller
+ *   buttons: {
+ *     main: { label, className, callback }
+ *   },
+ *   templateOptions: {
+ *     multi:           Boolean  – allow multiple files (default true)
+ *     trans: { addFiles, startUpload, cancelUpload, selectFolder, ... },
+ *     upload: { maxSize, maxSizeMessage, validExt, validExtensionsMessage },
+ *     folderSelector:  Boolean,
+ *     currentWorkingFolderId: Number,
+ *     oldMediaId:      Number   – when replacing a media item
+ *     oldFolderId:     Number,
+ *     updateInAllChecked:        Boolean,
+ *     deleteOldRevisionsChecked: Boolean,
+ *   },
+ *   uploadDoneEvent:   Function – called when all uploads finish
+ * }
+ */
+window.openUploadForm = function openUploadForm(options) {
+  'use strict';
+
+  options = options || {};
+  var tOpts = options.templateOptions || {};
+  var trans = tOpts.trans || {};
+  var upload = tOpts.upload || {};
+  var multi = tOpts.multi !== false;
+
+  // ── References ──
+  var $modal     = $('#ots-upload-modal');
+  var $title     = $('#ots-upload-modal-title');
+  var $dropzone  = $('#ots-upload-dropzone');
+  var $form      = $('#ots-upload-form');
+  var $input     = $('#ots-upload-input');
+  var $queue     = $('#ots-upload-queue');
+  var $fileList  = $('#ots-upload-file-list');
+  var $queueCount= $('#ots-upload-queue-count');
+  var $btnStart  = $('#ots-upload-btn-start');
+  var $btnDone   = $('#ots-upload-btn-done');
+  var $btnCancel = $('#ots-upload-btn-cancel');
+  var $startLabel= $('#ots-upload-btn-start-label');
+  var $folderRow = $('#ots-upload-folder-row');
+  var $sizeNotice= $('#ots-upload-size-notice');
+  var $extInfo   = $('#ots-upload-ext-info');
+  var $optionsRow= $('#ots-upload-options');
+  var $dropLabel = $('#ots-upload-drop-label');
+
+  // ── Extra references for URL tab ──
+  var $tabFile   = $('#ots-tab-file');
+  var $tabUrl    = $('#ots-tab-url');
+  var $panelFile = $('#ots-upload-tab-file');
+  var $panelUrl  = $('#ots-upload-tab-url');
+  var $urlInput  = $('#ots-upload-url-input');
+  var $urlAddBtn = $('#ots-upload-url-add');
+  var $urlQueue  = $('#ots-upload-url-queue');
+  var $urlList   = $('#ots-upload-url-list');
+  var $urlCount  = $('#ots-upload-url-queue-count');
+  var urlQueue   = [];   // { url, id, status, $el, xhr }
+
+  // ── Reset state ──
+  $fileList.empty();
+  $urlList.empty();
+  $queue.addClass('d-none');
+  $urlQueue.addClass('d-none');
+  $btnStart.addClass('d-none');
+  $btnDone.addClass('d-none');
+  $folderRow.addClass('d-none');
+  $sizeNotice.addClass('d-none');
+  $extInfo.addClass('d-none');
+  $optionsRow.addClass('d-none').empty();
+  $input.val('');
+  $urlInput.val('');
+  $dropzone.removeClass('ots-upload-dropzone--over ots-upload-dropzone--has-files');
+
+  // Reset to file tab
+  $tabFile.addClass('active');
+  $tabUrl.removeClass('active');
+  $panelFile.removeClass('d-none');
+  $panelUrl.addClass('d-none');
+
+  // ── Populate UI from options ──
+  $title.text(options.title || 'Upload');
+  $startLabel.text(trans.startUpload || 'Start upload');
+  $btnCancel.text(trans.cancelUpload || 'Cancel');
+  $dropLabel.text(trans.addFiles || 'Drop files here');
+
+  if (!multi) {
+    $input.removeAttr('multiple');
+  } else {
+    $input.attr('multiple', 'multiple');
+  }
+
+  // Max file size notice
+  if (upload.maxSizeMessage) {
+    $sizeNotice.text(upload.maxSizeMessage).removeClass('d-none');
+  }
+
+  // Valid extensions
+  if (upload.validExt) {
+    var extList = upload.validExt.replace(/\|/g, ', ');
+    var extMsg  = upload.validExtensionsMessage || ('Allowed: ' + extList);
+    $extInfo.text(extMsg).removeClass('d-none');
+  }
+
+  // Folder selector
+  if (tOpts.folderSelector) {
+    $folderRow.removeClass('d-none');
+    $('#ots-upload-folder-label').text((trans.selectedFolder || 'Current Folder:'));
+    $('#ots-upload-folder-text').text(trans.selectFolder || 'Select Folder');
+    $('#ots-upload-folder-btn').attr('title', trans.selectFolderTitle || 'Change folder');
+
+    // Wire folder-selector button using the CMS's built-in folder-tree modal
+    // (templates['folder-tree'], initJsTreeAjax — provided by the Xibo core)
+    $('#ots-upload-folder-btn').off('click').on('click', function() {
+      var modalId = 'ots-upload-folder-tree-modal';
+      var containerId = 'ots-upload-folder-form-tree';
+      var $ftModal = $('#' + modalId);
+
+      // ── First open: build the modal from the Handlebars template ──
+      if ($ftModal.length === 0 && typeof templates !== 'undefined' && templates['folder-tree']) {
+        var folderTreeTpl = templates['folder-tree'];
+        var treeConfig = {
+          container: containerId,
+          modal: modalId
+        };
+        if (typeof translations !== 'undefined' && translations.folderTree) {
+          treeConfig.trans = translations.folderTree;
+        }
+        $('body').append(folderTreeTpl(treeConfig));
+        $ftModal = $('#' + modalId);
+
+        // Inject OK / Cancel footer
+        var $footer = $ftModal.find('.modal-footer');
+        if ($footer.length === 0) {
+          $footer = $('<div class="modal-footer"></div>');
+          $ftModal.find('.modal-content').append($footer);
+        }
+        $footer.empty().append(
+          '<button type="button" class="btn btn-sm ots-upload-btn-cancel" data-dismiss="modal">Cancel</button>' +
+          '<button type="button" class="btn btn-sm ots-upload-btn-start" id="ots-folder-confirm-btn">' +
+            '<i class="fas fa-check"></i> OK' +
+          '</button>'
+        );
+
+        // Configure as static backdrop once
+        $ftModal.modal({ backdrop: 'static', keyboard: true, show: false });
+
+        // Fix stacked-modal body class when this modal closes
+        $ftModal.on('hidden.bs.modal', function() {
+          if ($('.modal:visible').length) {
+            $(document.body).addClass('modal-open');
+          }
+        });
+      }
+
+      if ($ftModal.length === 0) {
+        console.warn('Folder tree template not available');
+        return;
+      }
+
+      // ── Every open: reset pending selection and re-init jstree ──
+      var pendingFolderId = tOpts.currentWorkingFolderId || null;
+      var pendingFolderName = null;
+
+      // Destroy previous jstree instance so it re-initialises cleanly
+      var $treeContainer = $ftModal.find('#' + containerId);
+      if ($treeContainer.jstree && $treeContainer.jstree(true)) {
+        try { $treeContainer.jstree('destroy'); } catch(e) {}
+      }
+
+      // Initialise jstree
+      if (typeof initJsTreeAjax === 'function') {
+        initJsTreeAjax($treeContainer, 'ots-upload-form', true, 600);
+      }
+
+      // Show the modal (works on first and subsequent opens)
+      $ftModal.modal('show');
+
+      // Bind selection handler after the modal is visible + jstree auto-select settles
+      $ftModal.off('shown.bs.modal.otsUpload').on('shown.bs.modal.otsUpload', function() {
+        setTimeout(function() {
+          $treeContainer.off('select_node.jstree.otsUpload')
+            .on('select_node.jstree.otsUpload', function(e, data) {
+              if (data && data.node) {
+                pendingFolderId = data.node.id;
+                pendingFolderName = data.node.text || data.node.id;
+              }
+            });
+        }, 500);
+      });
+
+      // OK button — apply selection and close
+      $ftModal.find('#ots-folder-confirm-btn').off('click').on('click', function() {
+        if (pendingFolderId) {
+          tOpts.currentWorkingFolderId = pendingFolderId;
+          $('#ots-upload-folder-text').text(pendingFolderName || pendingFolderId);
+        }
+        $ftModal.modal('hide');
+      });
+    });
+  }
+
+  // Done button
+  var mainBtn = (options.buttons && options.buttons.main) || {};
+  $btnDone.text(mainBtn.label || 'Done');
+  if (mainBtn.className) {
+    $btnDone.attr('class', 'btn ots-upload-btn-done d-none ' + mainBtn.className);
+  }
+
+  // ── Internal state ──
+  var fileQueue   = [];   // { file, id, status, $el, xhr }
+  var nextId      = 0;
+  var uploading   = false;
+  var uploadCount = 0;
+  var successCount= 0;
+
+  // ── Helper: human-readable size ──
+  function humanSize(bytes) {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / 1048576).toFixed(1) + ' MB';
+  }
+
+  // ── Helper: valid extension check ──
+  function isExtAllowed(filename) {
+    if (!upload.validExt) return true;
+    var ext = filename.split('.').pop().toLowerCase();
+    var allowed = upload.validExt.toLowerCase().split('|');
+    return allowed.indexOf(ext) !== -1;
+  }
+
+  // ── Helper: generate preview (images only) ──
+  function generatePreview(file, $thumb) {
+    if (file.type && file.type.indexOf('image/') === 0 && file.size < 10 * 1048576) {
+      var reader = new FileReader();
+      reader.onload = function(e) {
+        $thumb.css('background-image', 'url(' + e.target.result + ')').addClass('has-preview');
+      };
+      reader.readAsDataURL(file);
+    } else {
+      // Icon based on type
+      var icon = 'fa-file';
+      if (file.type && file.type.indexOf('video/') === 0) icon = 'fa-file-video';
+      else if (file.type && file.type.indexOf('audio/') === 0) icon = 'fa-file-audio';
+      else if (file.type && file.type.indexOf('application/pdf') === 0) icon = 'fa-file-pdf';
+      else if (file.name && /\.(xlsx?|csv)$/i.test(file.name)) icon = 'fa-file-excel';
+      $thumb.html('<i class="fas ' + icon + '"></i>');
+    }
+  }
+
+  // ── Add files to queue ──
+  function addFiles(files) {
+    for (var i = 0; i < files.length; i++) {
+      var file = files[i];
+
+      // Multi check
+      if (!multi && fileQueue.length >= 1) {
+        // Replace existing file
+        fileQueue = [];
+        $fileList.empty();
+      }
+
+      var id = nextId++;
+      var extOk = isExtAllowed(file.name);
+      var sizeOk = !upload.maxSize || file.size <= upload.maxSize;
+
+      var statusClass = '';
+      var statusText = humanSize(file.size);
+      if (!extOk) { statusClass = 'ots-upload-file--error'; statusText = 'Invalid file type'; }
+      else if (!sizeOk) { statusClass = 'ots-upload-file--error'; statusText = 'File too large'; }
+
+      var $el = $(
+        '<li class="ots-upload-file-item ' + statusClass + '" data-id="' + id + '">' +
+          '<div class="ots-upload-file-thumb"></div>' +
+          '<div class="ots-upload-file-info">' +
+            '<span class="ots-upload-file-name">' + $('<span>').text(file.name).html() + '</span>' +
+            '<span class="ots-upload-file-meta">' + statusText + '</span>' +
+            '<div class="ots-upload-file-progress"><div class="ots-upload-file-progress-bar"></div></div>' +
+          '</div>' +
+          '<button type="button" class="ots-upload-file-remove" aria-label="Remove" title="Remove">' +
+            '<i class="fas fa-times"></i>' +
+          '</button>' +
+        '</li>'
+      );
+
+      generatePreview(file, $el.find('.ots-upload-file-thumb'));
+
+      $el.find('.ots-upload-file-remove').on('click', (function(fileId) {
+        return function() { removeFile(fileId); };
+      })(id));
+
+      $fileList.append($el);
+
+      fileQueue.push({
+        file: file,
+        id: id,
+        status: (extOk && sizeOk) ? 'pending' : 'error',
+        $el: $el,
+        xhr: null
+      });
+    }
+
+    updateQueueUI();
+  }
+
+  // ── Remove file ──
+  function removeFile(id) {
+    fileQueue = fileQueue.filter(function(f) {
+      if (f.id === id) {
+        f.$el.slideUp(200, function() { $(this).remove(); });
+        if (f.xhr) { try { f.xhr.abort(); } catch(e){} }
+        return false;
+      }
+      return true;
+    });
+    updateQueueUI();
+  }
+
+  // ── Queue UI update ──
+  function updateQueueUI() {
+    var validFiles = fileQueue.filter(function(f) { return f.status === 'pending'; });
+    var total = fileQueue.length;
+    $queueCount.text(total + ' file' + (total !== 1 ? 's' : ''));
+    if (total > 0) {
+      $queue.removeClass('d-none');
+      $dropzone.addClass('ots-upload-dropzone--has-files');
+    } else {
+      $queue.addClass('d-none');
+      $dropzone.removeClass('ots-upload-dropzone--has-files');
+    }
+    // Show start button only when there are valid pending files and not already uploading
+    if (validFiles.length > 0 && !uploading) {
+      $btnStart.removeClass('d-none');
+    } else if (!uploading) {
+      $btnStart.addClass('d-none');
+    }
+  }
+
+  // ── Upload all pending items (files + URLs) ──
+  function startUpload() {
+    var filePending = fileQueue.filter(function(f) { return f.status === 'pending'; });
+    var urlPending  = urlQueue.filter(function(f)  { return f.status === 'pending'; });
+    var allPending  = filePending.concat(urlPending);
+    if (allPending.length === 0) return;
+    uploading = true;
+    uploadCount = allPending.length;
+    successCount = 0;
+
+    $btnStart.addClass('d-none');
+    $btnCancel.text(trans.cancelUpload || 'Cancel');
+
+    // Upload sequentially
+    var idx = 0;
+    function uploadNext() {
+      if (idx >= allPending.length) {
+        uploading = false;
+        onAllDone();
+        return;
+      }
+      var item = allPending[idx++];
+      if (item.file) {
+        uploadSingle(item, uploadNext);
+      } else if (item.url) {
+        uploadUrlItem(item, uploadNext);
+      } else {
+        uploadNext();
+      }
+    }
+    uploadNext();
+  }
+
+  // ── Upload a single file ──
+  function uploadSingle(item, callback) {
+    item.status = 'uploading';
+    item.$el.addClass('ots-upload-file--uploading');
+
+    var formData = new FormData();
+    formData.append('files[]', item.file, item.file.name);
+
+    // Standard Xibo hidden fields
+    if (tOpts.currentWorkingFolderId) formData.append('folderId', tOpts.currentWorkingFolderId);
+    if (tOpts.oldMediaId) formData.append('oldMediaId', tOpts.oldMediaId);
+    if (tOpts.oldFolderId) formData.append('oldFolderId', tOpts.oldFolderId);
+
+    // Checkboxes
+    $optionsRow.find('input[type="checkbox"]').each(function() {
+      formData.append($(this).attr('name'), $(this).is(':checked') ? '1' : '0');
+    });
+
+    var $bar = item.$el.find('.ots-upload-file-progress-bar');
+    var $meta = item.$el.find('.ots-upload-file-meta');
+
+    item.xhr = $.ajax({
+      url: options.url,
+      type: 'POST',
+      data: formData,
+      processData: false,
+      contentType: false,
+      xhr: function() {
+        var xhr = new XMLHttpRequest();
+        xhr.upload.addEventListener('progress', function(e) {
+          if (e.lengthComputable) {
+            var pct = Math.round((e.loaded / e.total) * 100);
+            $bar.css('width', pct + '%');
+            $meta.text(pct + '%');
+          }
+        });
+        return xhr;
+      },
+      success: function(response) {
+        item.status = 'done';
+        item.$el.removeClass('ots-upload-file--uploading').addClass('ots-upload-file--done');
+        $bar.css('width', '100%');
+        $meta.text('Complete');
+        successCount++;
+        if (typeof options.uploadDoneEvent === 'function') {
+          options.uploadDoneEvent(item.file, response);
+        }
+        callback();
+      },
+      error: function(xhr) {
+        item.status = 'error';
+        item.$el.removeClass('ots-upload-file--uploading').addClass('ots-upload-file--error');
+        var msg = 'Upload failed';
+        try { msg = JSON.parse(xhr.responseText).message || msg; } catch(e){}
+        $meta.text(msg);
+        $bar.css('width', '0%');
+        callback();
+      }
+    });
+  }
+
+  // ── All uploads finished ──
+  function onAllDone() {
+    $btnDone.removeClass('d-none');
+    $btnStart.addClass('d-none');
+    $queueCount.text(successCount + '/' + uploadCount + ' uploaded');
+  }
+
+  // ── Drag & drop ──
+  $dropzone.off('.otsUpload').on({
+    'dragenter.otsUpload dragover.otsUpload': function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      $dropzone.addClass('ots-upload-dropzone--over');
+    },
+    'dragleave.otsUpload': function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      $dropzone.removeClass('ots-upload-dropzone--over');
+    },
+    'drop.otsUpload': function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      $dropzone.removeClass('ots-upload-dropzone--over');
+      var dt = e.originalEvent.dataTransfer;
+      if (dt && dt.files && dt.files.length) {
+        addFiles(dt.files);
+      }
+    }
+  });
+
+  // Click to browse — use native .click() on the raw DOM element;
+  // jQuery's .trigger('click') does NOT open the file picker in most browsers.
+  $dropzone.off('click.otsUpload').on('click.otsUpload', function(e) {
+    // Don't trigger if clicking on the remove button inside the queue
+    if ($(e.target).closest('.ots-upload-file-remove').length) return;
+    $input[0].click();
+  });
+
+  // Keyboard accessibility on dropzone
+  $dropzone.off('keydown.otsUpload').on('keydown.otsUpload', function(e) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      $input[0].click();
+    }
+  });
+
+  // File input change
+  $input.off('change.otsUpload').on('change.otsUpload', function() {
+    if (this.files && this.files.length) {
+      addFiles(this.files);
+      // Reset so the same file can be re-selected
+      this.value = '';
+    }
+  });
+
+  // Start upload button
+  $btnStart.off('click.otsUpload').on('click.otsUpload', function() {
+    startUpload();
+  });
+
+  // Done button
+  $btnDone.off('click.otsUpload').on('click.otsUpload', function() {
+    if (mainBtn.callback) {
+      mainBtn.callback();
+    }
+    $modal.modal('hide');
+  });
+
+  // Clean up on modal close
+  $modal.off('hidden.bs.modal.otsUpload').on('hidden.bs.modal.otsUpload', function() {
+    // Abort any in-progress uploads
+    fileQueue.forEach(function(f) {
+      if (f.xhr) { try { f.xhr.abort(); } catch(e){} }
+    });
+    fileQueue = [];
+    $fileList.empty();
+    uploading = false;
+  });
+
+  // ── Tab switching ──
+  $tabFile.off('click.otsUpload').on('click.otsUpload', function() {
+    $tabFile.addClass('active');
+    $tabUrl.removeClass('active');
+    $panelFile.removeClass('d-none');
+    $panelUrl.addClass('d-none');
+  });
+  $tabUrl.off('click.otsUpload').on('click.otsUpload', function() {
+    $tabUrl.addClass('active');
+    $tabFile.removeClass('active');
+    $panelUrl.removeClass('d-none');
+    $panelFile.addClass('d-none');
+  });
+
+  // ── URL: add to queue ──
+  function addUrlToQueue(url) {
+    if (!url || !url.trim()) return;
+    url = url.trim();
+    var id = nextId++;
+    var displayName = url.length > 60 ? url.substring(0, 57) + '...' : url;
+
+    var $el = $(
+      '<li class="ots-upload-file-item" data-id="' + id + '">' +
+        '<div class="ots-upload-file-thumb"><i class="fas fa-link"></i></div>' +
+        '<div class="ots-upload-file-info">' +
+          '<span class="ots-upload-file-name">' + $('<span>').text(displayName).html() + '</span>' +
+          '<span class="ots-upload-file-meta">Ready</span>' +
+          '<div class="ots-upload-file-progress"><div class="ots-upload-file-progress-bar"></div></div>' +
+        '</div>' +
+        '<button type="button" class="ots-upload-file-remove" aria-label="Remove" title="Remove">' +
+          '<i class="fas fa-times"></i>' +
+        '</button>' +
+      '</li>'
+    );
+
+    $el.find('.ots-upload-file-remove').on('click', (function(fileId) {
+      return function() { removeUrlItem(fileId); };
+    })(id));
+
+    $urlList.append($el);
+    urlQueue.push({ url: url, id: id, status: 'pending', $el: $el, xhr: null });
+    updateUrlQueueUI();
+  }
+
+  function removeUrlItem(id) {
+    urlQueue = urlQueue.filter(function(f) {
+      if (f.id === id) {
+        f.$el.slideUp(200, function() { $(this).remove(); });
+        if (f.xhr) { try { f.xhr.abort(); } catch(e){} }
+        return false;
+      }
+      return true;
+    });
+    updateUrlQueueUI();
+  }
+
+  function updateUrlQueueUI() {
+    var pending = urlQueue.filter(function(f) { return f.status === 'pending'; });
+    var total = urlQueue.length;
+    $urlCount.text(total + ' URL' + (total !== 1 ? 's' : ''));
+    if (total > 0) {
+      $urlQueue.removeClass('d-none');
+    } else {
+      $urlQueue.addClass('d-none');
+    }
+    if (pending.length > 0 && !uploading) {
+      $btnStart.removeClass('d-none');
+    } else if (!uploading && fileQueue.filter(function(f) { return f.status === 'pending'; }).length === 0) {
+      $btnStart.addClass('d-none');
+    }
+  }
+
+  $urlAddBtn.off('click.otsUpload').on('click.otsUpload', function() {
+    addUrlToQueue($urlInput.val());
+    $urlInput.val('').focus();
+  });
+
+  // Allow Enter key in URL input to add
+  $urlInput.off('keydown.otsUpload').on('keydown.otsUpload', function(e) {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      addUrlToQueue($urlInput.val());
+      $urlInput.val('').focus();
+    }
+  });
+
+  // ── Upload a single URL item ──
+  function uploadUrlItem(item, callback) {
+    item.status = 'uploading';
+    item.$el.addClass('ots-upload-file--uploading');
+    var $bar = item.$el.find('.ots-upload-file-progress-bar');
+    var $meta = item.$el.find('.ots-upload-file-meta');
+    $bar.css('width', '50%');
+    $meta.text('Downloading...');
+
+    var postData = { url: item.url };
+    if (tOpts.currentWorkingFolderId) postData.folderId = tOpts.currentWorkingFolderId;
+
+    item.xhr = $.ajax({
+      url: options.url,
+      type: 'POST',
+      data: postData,
+      success: function(response) {
+        item.status = 'done';
+        item.$el.removeClass('ots-upload-file--uploading').addClass('ots-upload-file--done');
+        $bar.css('width', '100%');
+        $meta.text('Complete');
+        successCount++;
+        if (typeof options.uploadDoneEvent === 'function') {
+          options.uploadDoneEvent(null, response);
+        }
+        callback();
+      },
+      error: function(xhr) {
+        item.status = 'error';
+        item.$el.removeClass('ots-upload-file--uploading').addClass('ots-upload-file--error');
+        var msg = 'Upload failed';
+        try { msg = JSON.parse(xhr.responseText).message || msg; } catch(e){}
+        $meta.text(msg);
+        $bar.css('width', '0%');
+        callback();
+      }
+    });
+  }
+
+  // ── Clean up URL queue on modal close ──
+  $modal.off('hidden.bs.modal.otsUploadUrl').on('hidden.bs.modal.otsUploadUrl', function() {
+    urlQueue.forEach(function(f) {
+      if (f.xhr) { try { f.xhr.abort(); } catch(e){} }
+    });
+    urlQueue = [];
+    $urlList.empty();
+  });
+
+  // ── Show modal ──
+  $modal.modal({ backdrop: 'static', keyboard: true });
+};
+</script>
--- a/custom/otssignange/views/layout-page.twig
+++ b/custom/otssignange/views/layout-page.twig
@@ -6,7 +6,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 "Layouts" %}</h1>
            <p class="text-muted">{% trans "Manage and design your layouts." %}</p>
--- a/custom/otssignange/views/library-page.twig
+++ b/custom/otssignange/views/library-page.twig
@@ -29,7 +29,7 @@


 {% block pageContent %}
-    <div class="ots-displays-page">
+    <div class="ots-static-page ots-displays-page">
        <div class="page-header ots-page-header">
            <h1>{% trans "Media" %}</h1>
            <p class="text-muted">{% trans "Manage your media library." %}</p>
@@ -140,9 +140,7 @@
                                    <div id="breadcrumbs"></div>
                                    {% if currentUser.featureEnabledCount(["library.add", "library.modify"]) > 0 or settings.SETTING_LIBRARY_TIDY_ENABLED == 1 %}
                                        {% if currentUser.featureEnabled("library.add") %}
-                                            <button class="btn btn-sm btn-success ots-toolbar-btn" href="#" id="libraryUploadForm" title="{% trans "Add a new media item to the library" %}"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>
-                                            <button class="btn btn-sm btn-success ots-toolbar-btn XiboFormButton" title="{% trans "Add a new media item to the library via external URL" %}" href="{{ url_for("library.uploadUrl.form") }}"><i class="fa fa-link" aria-hidden="true"></i></button>
-                                        {% endif %}
+                                            <button class="btn btn-sm btn-success ots-toolbar-btn" href="#" id="libraryUploadForm" title="{% trans "Add a new media item to the library" %}"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>                                        {% endif %}
                                        {% if settings.SETTING_LIBRARY_TIDY_ENABLED == 1 and currentUser.featureEnabled("library.modify") %}
                                            <button class="btn btn-sm btn-warning ots-toolbar-btn XiboFormButton btn-tidy" title="{% trans "Run through the library and remove unused and unnecessary files" %}" href="{{ url_for("library.tidy.form") }}"><i class="fa fa-broom" aria-hidden="true"></i></button>
                                        {% endif %}
@@ -410,6 +408,15 @@
         * Media Edit form
         */
        function mediaEditFormOpen(dialog) {
+            // ── OTS: Style the edit-media modal to match the upload modal ──
+            // dialog IS the .modal element (returned by bootbox.dialog())
+            dialog.addClass('ots-edit-media-modal');
+
+            // Also apply via the global enhancer in case the class wasn't added
+            if (typeof window.otsEnhanceModal === 'function') {
+                window.otsEnhanceModal(dialog);
+            }
+
            // Create a new button
            var footer = dialog.find(".modal-footer");
            var mediaId = dialog.find("#mediaEditForm").data().mediaId;
--- a/custom/otssignange/views/menuboard-page.twig
+++ b/custom/otssignange/views/menuboard-page.twig
@@ -28,7 +28,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 "Menu Boards" %}</h1>
            <p class="text-muted">{% trans "Manage your menu boards and content." %}</p>
--- a/custom/otssignange/views/module-page.twig
+++ b/custom/otssignange/views/module-page.twig
@@ -12,7 +12,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 "Modules" %}</h1>
            <p class="text-muted">{% trans "Manage installed modules." %}</p>
--- a/custom/otssignange/views/override-styles.twig
+++ b/custom/otssignange/views/override-styles.twig
--- a/custom/otssignange/views/playersoftware-page.twig
+++ b/custom/otssignange/views/playersoftware-page.twig
@@ -28,7 +28,7 @@


 {% block pageContent %}
-    <div class="ots-displays-page">
+    <div class="ots-static-page ots-displays-page">
        <div class="page-header ots-page-header">
            <h1>{% trans "Player Versions" %}</h1>
            <p class="text-muted">{% trans "Manage player software versions and downloads." %}</p>
--- a/custom/otssignange/views/playlist-page.twig
+++ b/custom/otssignange/views/playlist-page.twig
@@ -26,7 +26,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 "Playlists" %}</h1>
            <p class="text-muted">{% trans "Create and manage content playlists." %}</p>
--- a/custom/otssignange/views/resolution-page.twig
+++ b/custom/otssignange/views/resolution-page.twig
@@ -29,7 +29,7 @@


 {% block pageContent %}
-    <div class="ots-displays-page">
+    <div class="ots-static-page ots-displays-page">
        <div class="page-header ots-page-header">
            <h1>{% trans "Resolutions" %}</h1>
            <p class="text-muted">{% trans "Manage display resolutions." %}</p>
--- a/custom/otssignange/views/schedule-page.twig
+++ b/custom/otssignange/views/schedule-page.twig
@@ -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 %}
--- a/custom/otssignange/views/settings-page.twig
+++ b/custom/otssignange/views/settings-page.twig
@@ -13,7 +13,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 "Settings" %}</h1>
            <p class="text-muted">{% trans "Configure CMS settings." %}</p>
--- a/custom/otssignange/views/syncgroup-page.twig
+++ b/custom/otssignange/views/syncgroup-page.twig
@@ -28,7 +28,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 "Sync Groups" %}</h1>
            <p class="text-muted">{% trans "Create and manage synchronized Display groups." %}</p>
--- a/custom/otssignange/views/tag-page.twig
+++ b/custom/otssignange/views/tag-page.twig
@@ -12,7 +12,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 "Tags" %}</h1>
            <p class="text-muted">{% trans "Manage content tags." %}</p>
--- a/custom/otssignange/views/task-page.twig
+++ b/custom/otssignange/views/task-page.twig
@@ -12,7 +12,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 "Tasks" %}</h1>
            <p class="text-muted">{% trans "Manage scheduled system tasks." %}</p>
--- a/custom/otssignange/views/template-page.twig
+++ b/custom/otssignange/views/template-page.twig
@@ -28,7 +28,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 "Templates" %}</h1>
            <p class="text-muted">{% trans "Manage your reusable templates." %}</p>
--- a/custom/otssignange/views/theme-scripts.twig
+++ b/custom/otssignange/views/theme-scripts.twig
@@ -1131,6 +1131,9 @@
   * (before Bootstrap sees it), prevent Bootstrap from handling it, and
   * manage show/hide/position entirely ourselves.
   */
+  // Module-level reference to row dropdown's closeMenu, set by initRowDropdowns().
+  var _closeRowDropdown = null;
+
  function initRowDropdowns() {
    var TOGGLE_SEL = '.dropdown-menu-container [data-toggle="dropdown"], .btn-group [data-toggle="dropdown"]';
    var activeMenu = null;   // currently open menu element (in <body>)
@@ -1209,6 +1212,9 @@
      activeTrigger = null;
    }

+    // Expose closeMenu so closeAllDropdowns() can reach it
+    _closeRowDropdown = closeMenu;
+
    // Intercept clicks in CAPTURE phase — runs BEFORE Bootstrap's handler.
    document.addEventListener('click', function(e) {
      var toggle = e.target.closest(TOGGLE_SEL);
@@ -1263,6 +1269,121 @@
    });
  }

+  /**
+   * Close every open dropdown / popover on the page.
+   * Covers: Bootstrap 4 native dropdowns, OTS custom dropdowns,
+   * the user-menu, notification drawer, and DataTable row menus.
+   */
+  function closeAllDropdowns() {
+    try {
+      // 0. Close row dropdown managed by initRowDropdowns()
+      if (typeof _closeRowDropdown === 'function') _closeRowDropdown();
+
+      // Also force-remove any stray ots-row-dropdown elements left on <body>
+      document.querySelectorAll('.ots-row-dropdown').forEach(function(m) {
+        m.classList.remove('show', 'ots-row-dropdown');
+        m.style.cssText = '';
+      });
+
+      // 1. Bootstrap 4 native dropdowns (.show on the wrapper or the menu)
+      document.querySelectorAll('.dropdown.show, .btn-group.show').forEach(function(el) {
+        el.classList.remove('show');
+        var m = el.querySelector('.dropdown-menu.show');
+        if (m) m.classList.remove('show');
+      });
+      document.querySelectorAll('.dropdown-menu.show').forEach(function(m) {
+        m.classList.remove('show');
+      });
+
+      // 2. OTS custom dropdowns that use .active
+      document.querySelectorAll('.dropdown.active, .ots-topbar-action .dropdown.active, .ots-page-actions .dropdown.active').forEach(function(el) {
+        el.classList.remove('active');
+      });
+
+      // 3. User menu (body-level floating menu)
+      var userMenu = document.querySelector('.ots-user-menu-body.ots-user-menu-open');
+      if (userMenu) {
+        userMenu.classList.remove('ots-user-menu-open');
+        var userDropdown = document.querySelector('#navbarUserMenu');
+        if (userDropdown) {
+          var dd = userDropdown.closest('.dropdown');
+          if (dd) dd.classList.remove('active', 'show');
+        }
+      }
+
+      // 4. DataTable button collections
+      document.querySelectorAll('.dt-buttons.active').forEach(function(w) {
+        w.classList.remove('active');
+      });
+      document.querySelectorAll('.dt-button-collection.show').forEach(function(c) {
+        c.classList.remove('show');
+        c.style.display = 'none';
+      });
+
+      // 5. jQuery-level Bootstrap cleanup (if available)
+      var jq = window.jQuery || window.$;
+      if (jq) {
+        jq('.dropdown-toggle[aria-expanded="true"]').attr('aria-expanded', 'false');
+        jq('.dropdown-menu.show').removeClass('show');
+        jq('.dropdown.show, .btn-group.show').removeClass('show');
+      }
+    } catch (err) {
+      // never let this break the page
+    }
+  }
+
+  /**
+   * Wire up global listeners that trigger closeAllDropdowns().
+   * Called once from init().
+   */
+  function initGlobalDropdownDismiss() {
+    // ── Close when a Bootstrap modal / dialog opens ─────────────────
+    document.addEventListener('show.bs.modal', closeAllDropdowns, true);
+    try {
+      var jq = window.jQuery || window.$;
+      if (jq) {
+        jq(document).on('show.bs.modal', closeAllDropdowns);
+        // Xibo opens modals when .XiboFormButton / .XiboAjaxSubmit are clicked
+        jq(document).on('click', '.XiboFormButton, .XiboAjaxSubmit, .XiboFormRender', function() {
+          closeAllDropdowns();
+        });
+      }
+    } catch (e) {}
+
+    // ── Close when any <a> inside a dropdown is clicked (page nav) ──
+    document.addEventListener('click', function(e) {
+      var link = e.target.closest('.dropdown-menu a, .ots-topbar a.nav-link, .ots-topbar a.dropdown-item, .XiboFormButton');
+      if (link && !e.defaultPrevented) {
+        closeAllDropdowns();
+      }
+    });
+
+    // ── Close on History navigation (Xibo uses pushState for AJAX pages) ──
+    window.addEventListener('popstate', closeAllDropdowns);
+    // Intercept pushState / replaceState so we catch Xibo's AJAX navigation
+    try {
+      var origPush = history.pushState;
+      var origReplace = history.replaceState;
+      history.pushState = function() {
+        origPush.apply(this, arguments);
+        closeAllDropdowns();
+      };
+      history.replaceState = function() {
+        origReplace.apply(this, arguments);
+        closeAllDropdowns();
+      };
+    } catch (e) {}
+
+    // ── Close when main content area changes (AJAX page swap) ───────
+    try {
+      var content = document.getElementById('content') || document.querySelector('.ots-content');
+      if (content) {
+        var contentObs = new MutationObserver(debounce(closeAllDropdowns, 80));
+        contentObs.observe(content, { childList: true });
+      }
+    } catch (e) {}
+  }
+
  /**
   * Initialize all features when DOM is ready
   */
@@ -1273,6 +1394,7 @@
    initThemeToggle();
    initDropdowns();
    initRowDropdowns();
+    initGlobalDropdownDismiss();
    initSearch();
    initPageInteractions();
    initDataTables();
@@ -1301,6 +1423,57 @@
  }
 })();

+/**
+ * OTS: Enhance all Xibo form modals to match the upload modal design.
+ * Runs on every shown.bs.modal event and also exposed as window.otsEnhanceModal()
+ * for direct invocation from form callbacks like mediaEditFormOpen.
+ */
+(function() {
+  'use strict';
+
+  var OTS_CLOSE_SVG = '<button type="button" class="ots-upload-close" data-dismiss="modal" aria-label="Close">' +
+    '<svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M15 5L5 15M5 5l10 10" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>' +
+    '</button>';
+
+  function enhanceModal(modal) {
+    var $m = window.jQuery ? window.jQuery(modal) : null;
+    if (!$m || !$m.length) return;
+
+    // Don't re-enhance
+    if ($m.data('ots-enhanced')) return;
+    $m.data('ots-enhanced', true);
+
+    // Skip the custom upload modal (it has its own styling)
+    if ($m.hasClass('ots-upload-modal') || $m.attr('id') === 'ots-upload-modal') return;
+
+    // Add the OTS edit modal class
+    $m.addClass('ots-edit-media-modal');
+
+    // Replace the default close button with SVG version
+    var $closeBtn = $m.find('.modal-header .close, .modal-header button[data-dismiss="modal"]:not(.ots-upload-close)');
+    if ($closeBtn.length) {
+      $closeBtn.first().replaceWith(OTS_CLOSE_SVG);
+    }
+  }
+
+  // Expose globally so page callbacks can invoke it directly
+  window.otsEnhanceModal = enhanceModal;
+
+  // Hook into every modal show event
+  if (window.jQuery) {
+    window.jQuery(document).on('shown.bs.modal', '.modal', function() {
+      enhanceModal(this);
+    });
+  } else {
+    document.addEventListener('shown.bs.modal', function(e) {
+      var modal = e.target;
+      if (modal && modal.classList && modal.classList.contains('modal')) {
+        enhanceModal(modal);
+      }
+    }, true);
+  }
+})();
+
 // Replace broken QR images in user profile modals with a friendly placeholder
 function initUserProfileQrFix() {
  function replaceIfEmptyDataUri(el) {
--- a/custom/otssignange/views/transition-page.twig
+++ b/custom/otssignange/views/transition-page.twig
@@ -12,7 +12,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 "Transitions" %}</h1>
            <p class="text-muted">{% trans "Manage display transitions." %}</p>
--- a/custom/otssignange/views/user-page.twig
+++ b/custom/otssignange/views/user-page.twig
@@ -12,7 +12,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 "Users" %}</h1>
            <p class="text-muted">{% trans "Manage system users and permissions." %}</p>
--- a/custom/otssignange/views/usergroup-page.twig
+++ b/custom/otssignange/views/usergroup-page.twig
@@ -12,7 +12,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 "User Groups" %}</h1>
            <p class="text-muted">{% trans "Manage user groups and permissions." %}</p>