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,6 +1,6 @@
|
||||
{#
|
||||
OTS Signage Modern Theme - Displays Page Override
|
||||
Two-column layout with folder panel on left
|
||||
Two-column layout with folder panel on left, modern display table
|
||||
#}
|
||||
{% extends "authed.twig" %}
|
||||
|
||||
@@ -8,22 +8,52 @@
|
||||
|
||||
{% block content %}
|
||||
<div class="ots-theme two-column-layout">
|
||||
<aside class="left-panel">
|
||||
<aside class="left-panel displays-sidebar">
|
||||
<div class="panel-header">
|
||||
<h3>Folders</h3>
|
||||
<button class="btn-icon-sm" aria-label="Expand/collapse">
|
||||
<span>✎</span>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="12 3 20 9 12 15 4 9 12 3"/><polyline points="4 15 12 21 20 15"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="folder-tree">
|
||||
<div class="folder-item active">
|
||||
<span class="folder-icon">📁</span>
|
||||
<svg class="folder-icon" width="18" height="18" 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="folder-name">All Items</span>
|
||||
</div>
|
||||
<div class="folder-item">
|
||||
<span class="folder-icon">📂</span>
|
||||
<svg class="folder-icon" width="18" height="18" 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="folder-name">Root Folder</span>
|
||||
</div>
|
||||
<div class="folder-item">
|
||||
<svg class="folder-icon" width="18" height="18" 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="folder-name">TEMPLATE_DemoHolder</span>
|
||||
</div>
|
||||
<div class="folder-item" style="margin-left: 16px;">
|
||||
<svg class="folder-icon" width="18" height="18" 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="folder-name">Hospitality</span>
|
||||
</div>
|
||||
<div class="folder-item" style="margin-left: 16px;">
|
||||
<svg class="folder-icon" width="18" height="18" 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="folder-name">Retail</span>
|
||||
</div>
|
||||
<div class="folder-item">
|
||||
<svg class="folder-icon" width="18" height="18" 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="folder-name">OTS Signs Internal</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -34,10 +64,15 @@
|
||||
</div>
|
||||
|
||||
<div class="content-toolbar">
|
||||
<input type="search" placeholder="Search displays…" class="form-control search-field" />
|
||||
<div class="search-wrapper">
|
||||
<svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="search" placeholder="Search displays…" class="form-control search-field" />
|
||||
</div>
|
||||
<div class="toolbar-actions">
|
||||
<button class="btn btn-outline">Columns</button>
|
||||
<a href="{{ baseUrl }}/display/add" class="btn btn-primary">Add Display</a>
|
||||
<button class="btn btn-outline btn-sm">Columns</button>
|
||||
<a href="{{ baseUrl }}/display/add" class="btn btn-primary btn-sm">Add Display</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -60,22 +95,26 @@
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Display</th>
|
||||
<th>Status</th>
|
||||
<th>Folder</th>
|
||||
<th>Group</th>
|
||||
<th>Last Check-in</th>
|
||||
<th>Actions</th>
|
||||
<th style="width: 25%;">Display</th>
|
||||
<th style="width: 15%;">Status</th>
|
||||
<th style="width: 20%;">Folder</th>
|
||||
<th style="width: 15%;">Group</th>
|
||||
<th style="width: 15%;">Last Check-in</th>
|
||||
<th style="width: 10%;">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Test1</td>
|
||||
<td><strong>Test1</strong></td>
|
||||
<td><span class="badge badge-success">Online</span></td>
|
||||
<td>TEMPLATE_DemoHolder</td>
|
||||
<td>Test Screens</td>
|
||||
<td>-</td>
|
||||
<td>just now</td>
|
||||
<td><button class="btn-icon-sm" aria-label="Actions">⋮</button></td>
|
||||
<td><span class="text-xs">just now</span></td>
|
||||
<td>
|
||||
<button class="btn-icon-sm" aria-label="Actions">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="2"/><circle cx="12" cy="12" r="2"/><circle cx="12" cy="19" r="2"/></svg>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user