feat: Enhance OTS Signage theme with improved sidebar, dropdowns, and UI interactions
- Updated sidebar functionality to include a close button and improved mobile responsiveness. - Introduced dropdown menus for user actions and enhanced search functionality in the topbar. - Refined page interactions for folder and media item selections. - Modernized sidebar navigation with icons and improved layout for better user experience. - Enhanced media and display pages with updated layouts and statistics display. - Improved overall styling and responsiveness across various components.
This commit is contained in:
Matt Batchelder
@@ -1,69 +1,104 @@
|
||||
{#
|
||||
OTS Signage Modern Theme - Sidebar Override
|
||||
Modern left navigation sidebar with collapsible state
|
||||
Modern left navigation sidebar with collapsible state and icons
|
||||
#}
|
||||
<nav class="ots-sidebar" aria-label="Main navigation">
|
||||
<div class="sidebar-header">
|
||||
<a href="{{ baseUrl }}/" class="brand-link">
|
||||
<img src="{{ baseUrl }}/theme/custom/otssignange/img/192x192.png" alt="{{ app_name }}" class="brand-logo" />
|
||||
<span class="brand-text">{{ app_name }}</span>
|
||||
<span class="brand-icon">🎯</span>
|
||||
<span class="brand-text">OTS Signs</span>
|
||||
</a>
|
||||
<button class="sidebar-close-btn" aria-label="Close sidebar">
|
||||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-content">
|
||||
<ul class="sidebar-nav">
|
||||
<li class="nav-section">
|
||||
<li>
|
||||
<a href="{{ baseUrl }}" class="nav-item {% if pageTitle == 'Dashboard' %}active{% endif %}">
|
||||
<span class="nav-icon">📊</span>
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/>
|
||||
</svg>
|
||||
<span class="nav-text">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-section-title">Content</li>
|
||||
<li class="nav-section-divider">
|
||||
<span class="nav-label">Content</span>
|
||||
</li>
|
||||
<li><a href="{{ baseUrl }}/library" class="nav-item">
|
||||
<span class="nav-icon">📁</span>
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
<span class="nav-text">Media Library</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/layout" class="nav-item">
|
||||
<span class="nav-icon">📐</span>
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/>
|
||||
</svg>
|
||||
<span class="nav-text">Layouts</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/playlist" class="nav-item">
|
||||
<span class="nav-icon">▶</span>
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polygon points="23 7 16 12 23 17 23 7"/><rect x="1" y="5" width="15" height="14" rx="2" ry="2"/>
|
||||
</svg>
|
||||
<span class="nav-text">Playlists</span>
|
||||
</a></li>
|
||||
|
||||
<li class="nav-section-title">Display</li>
|
||||
<li class="nav-section-divider">
|
||||
<span class="nav-label">Displays</span>
|
||||
</li>
|
||||
<li><a href="{{ baseUrl }}/display" class="nav-item">
|
||||
<span class="nav-icon">🖥</span>
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><path d="M12 17v4"/><path d="M8 21h8"/>
|
||||
</svg>
|
||||
<span class="nav-text">Displays</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/display-group" class="nav-item">
|
||||
<span class="nav-icon">📺</span>
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="2" y="2" width="8" height="8" rx="1" ry="1"/><rect x="14" y="2" width="8" height="8" rx="1" ry="1"/><rect x="2" y="14" width="8" height="8" rx="1" ry="1"/><rect x="14" y="14" width="8" height="8" rx="1" ry="1"/>
|
||||
</svg>
|
||||
<span class="nav-text">Display Groups</span>
|
||||
</a></li>
|
||||
|
||||
<li class="nav-section-title">Scheduling</li>
|
||||
<li class="nav-section-divider">
|
||||
<span class="nav-label">Scheduling</span>
|
||||
</li>
|
||||
<li><a href="{{ baseUrl }}/schedule" class="nav-item">
|
||||
<span class="nav-icon">📅</span>
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><path d="M16 2v4"/><path d="M8 2v4"/><line x1="3" y1="10" x2="21" y2="10"/>
|
||||
</svg>
|
||||
<span class="nav-text">Schedules</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/dayparting" class="nav-item">
|
||||
<span class="nav-icon">⏰</span>
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="9"/><polyline points="12 6 12 12 16 14"/>
|
||||
</svg>
|
||||
<span class="nav-text">Day Parting</span>
|
||||
</a></li>
|
||||
|
||||
<li class="nav-section-title">Administration</li>
|
||||
<li class="nav-section-divider">
|
||||
<span class="nav-label">Administration</span>
|
||||
</li>
|
||||
<li><a href="{{ baseUrl }}/user" class="nav-item">
|
||||
<span class="nav-icon">👤</span>
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
|
||||
</svg>
|
||||
<span class="nav-text">Users</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/user-group" class="nav-item">
|
||||
<span class="nav-icon">👥</span>
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/>
|
||||
</svg>
|
||||
<span class="nav-text">User Groups</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/settings" class="nav-item">
|
||||
<span class="nav-icon">⚙️</span>
|
||||
<svg class="nav-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"/><path d="M12 1v6m0 6v6M4.22 4.22l4.24 4.24m2.12 2.12l4.24 4.24M1 12h6m6 0h6m-16.78 7.78l4.24-4.24m2.12-2.12l4.24-4.24"/>
|
||||
</svg>
|
||||
<span class="nav-text">Settings</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
@@ -71,18 +106,11 @@
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="user-info">
|
||||
<div class="user-avatar">{{ user.username|first|upper }}</div>
|
||||
<div class="user-avatar user-avatar-lg">{{ user.username|first|upper }}</div>
|
||||
<div class="user-details">
|
||||
<div class="user-name">{{ user.username }}</div>
|
||||
<div class="user-role text-xs">Administrator</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sidebar-controls">
|
||||
<button class="btn-ghost" data-action="toggle-theme" aria-label="Toggle theme" title="Toggle dark/light mode">
|
||||
<span class="icon">🌓</span>
|
||||
</button>
|
||||
<a href="{{ baseUrl }}/logout" class="btn-ghost" aria-label="Sign out" title="Sign out">
|
||||
<span class="icon">🚪</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
Reference in New Issue
Block a user