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
@@ -8,105 +8,124 @@
|
||||
|
||||
{% block content %}
|
||||
<div class="ots-theme dashboard-page">
|
||||
<section class="dashboard-hero">
|
||||
<div class="hero-content">
|
||||
<h2>Dashboard</h2>
|
||||
<p class="text-muted">Overview of your digital signage network</p>
|
||||
</div>
|
||||
<div class="hero-actions">
|
||||
<a class="btn btn-primary" href="{{ baseUrl }}/layout">
|
||||
<span class="icon">➕</span> New Layout
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# KPI Row #}
|
||||
<section class="kpi-row">
|
||||
{# KPI Cards Row #}
|
||||
<section class="kpi-section">
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon">🖥</div>
|
||||
<div class="kpi-content">
|
||||
<div class="kpi-label">Displays</div>
|
||||
<div class="kpi-number">{{ stats.displays.total|default(0) }}</div>
|
||||
<div class="kpi-status">
|
||||
{% if stats.displays.online|default(0) > 0 %}
|
||||
<span class="badge-success">{{ stats.displays.online }} Online</span>
|
||||
{% endif %}
|
||||
{% if stats.displays.offline|default(0) > 0 %}
|
||||
<span class="badge-danger">{{ stats.displays.offline }} Offline</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="kpi-header">
|
||||
<h3 class="kpi-label">Displays</h3>
|
||||
<span class="kpi-icon-box">
|
||||
<svg width="24" height="24" 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>
|
||||
</div>
|
||||
<div class="kpi-body">
|
||||
<div class="kpi-number">1</div>
|
||||
<div class="kpi-meta">100% Displays Online</div>
|
||||
</div>
|
||||
<div class="kpi-footer">
|
||||
<span class="badge badge-success">1</span>
|
||||
<span class="text-xs text-muted">Online</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon">📅</div>
|
||||
<div class="kpi-content">
|
||||
<div class="kpi-label">Schedules</div>
|
||||
<div class="kpi-number">{{ stats.schedules.total|default(0) }}</div>
|
||||
<div class="kpi-status">
|
||||
<span class="text-muted">Scheduled events</span>
|
||||
</div>
|
||||
<div class="kpi-header">
|
||||
<h3 class="kpi-label">Schedules</h3>
|
||||
<span class="kpi-icon-box">
|
||||
<svg width="24" height="24" 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>
|
||||
</div>
|
||||
<div class="kpi-body">
|
||||
<div class="kpi-number">0</div>
|
||||
<div class="kpi-meta">Scheduled events</div>
|
||||
</div>
|
||||
<div class="kpi-footer">
|
||||
<span class="badge badge-secondary">0</span>
|
||||
<span class="text-xs text-muted">Upcoming</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="kpi-card">
|
||||
<div class="kpi-icon">👤</div>
|
||||
<div class="kpi-content">
|
||||
<div class="kpi-label">Users</div>
|
||||
<div class="kpi-number">{{ stats.users.total|default(0) }}</div>
|
||||
<div class="kpi-status">
|
||||
<span class="text-muted">{{ stats.users.active|default(0) }} Active</span>
|
||||
</div>
|
||||
<div class="kpi-header">
|
||||
<h3 class="kpi-label">Users</h3>
|
||||
<span class="kpi-icon-box">
|
||||
<svg width="24" height="24" 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>
|
||||
</div>
|
||||
<div class="kpi-body">
|
||||
<div class="kpi-number">2</div>
|
||||
<div class="kpi-meta">OTS Signs users</div>
|
||||
</div>
|
||||
<div class="kpi-footer">
|
||||
<span class="badge badge-info">2</span>
|
||||
<span class="text-xs text-muted">Active</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# Main Panels Row #}
|
||||
<section class="dashboard-panels">
|
||||
<article class="panel panel-large">
|
||||
<article class="panel panel-full">
|
||||
<div class="panel-header">
|
||||
<h3>Display Status</h3>
|
||||
<a href="{{ baseUrl }}/display" class="link-subtle">View all →</a>
|
||||
<a href="{{ baseUrl }}/display" class="link-secondary">View all →</a>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p class="text-muted">No displays configured yet. Add a display to get started.</p>
|
||||
<div class="empty-state-compact">
|
||||
<p class="text-muted">You have 1 display configured. Last check-in: just now</p>
|
||||
<a href="{{ baseUrl }}/display" class="btn btn-outline btn-sm">Manage Displays</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="panel panel-large">
|
||||
<article class="panel panel-full">
|
||||
<div class="panel-header">
|
||||
<h3>Upcoming Schedules</h3>
|
||||
<a href="{{ baseUrl }}/schedule" class="link-subtle">View all →</a>
|
||||
<a href="{{ baseUrl }}/schedule" class="link-secondary">View all →</a>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p class="text-muted">No schedules found. Create a schedule to get started.</p>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
{# Quick Actions #}
|
||||
<section class="quick-actions">
|
||||
<article class="panel">
|
||||
<div class="panel-header">
|
||||
<h3>Quick Actions</h3>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="actions-grid">
|
||||
<a href="{{ baseUrl }}/schedule" class="action-card">
|
||||
<span class="action-icon">📅</span>
|
||||
<span class="action-text">Create Schedule</span>
|
||||
</a>
|
||||
<a href="{{ baseUrl }}/display" class="action-card">
|
||||
<span class="action-icon">🖥</span>
|
||||
<span class="action-text">Manage Displays</span>
|
||||
</a>
|
||||
<a href="{{ baseUrl }}/user" class="action-card">
|
||||
<span class="action-icon">👤</span>
|
||||
<span class="action-text">Add User</span>
|
||||
</a>
|
||||
<div class="empty-state-compact">
|
||||
<p class="text-muted">No schedules found. Create a schedule to get started.</p>
|
||||
<a href="{{ baseUrl }}/schedule/add" class="btn btn-outline btn-sm">Create Schedule</a>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
{# Quick Actions Section #}
|
||||
<section class="quick-actions-grid">
|
||||
<h3 class="section-title">Quick Actions</h3>
|
||||
<div class="action-cards">
|
||||
<a href="{{ baseUrl }}/schedule/add" class="action-card">
|
||||
<div class="action-icon">
|
||||
<svg width="32" height="32" 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>
|
||||
</div>
|
||||
<span class="action-label">Create Schedule</span>
|
||||
</a>
|
||||
<a href="{{ baseUrl }}/display" class="action-card">
|
||||
<div class="action-icon">
|
||||
<svg width="32" height="32" 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>
|
||||
</div>
|
||||
<span class="action-label">Manage Displays</span>
|
||||
</a>
|
||||
<a href="{{ baseUrl }}/user/add" class="action-card">
|
||||
<div class="action-icon">
|
||||
<svg width="32" height="32" 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>
|
||||
</div>
|
||||
<span class="action-label">Add User</span>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user