init
This commit is contained in:
Matt Batchelder
88
custom/otssignange/views/authed-sidebar.twig
Normal file
88
custom/otssignange/views/authed-sidebar.twig
Normal file
@@ -0,0 +1,88 @@
|
||||
{#
|
||||
OTS Signage Modern Theme - Sidebar Override
|
||||
Modern left navigation sidebar with collapsible state
|
||||
#}
|
||||
<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>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-content">
|
||||
<ul class="sidebar-nav">
|
||||
<li class="nav-section">
|
||||
<a href="{{ baseUrl }}" class="nav-item {% if pageTitle == 'Dashboard' %}active{% endif %}">
|
||||
<span class="nav-icon">📊</span>
|
||||
<span class="nav-text">Dashboard</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-section-title">Content</li>
|
||||
<li><a href="{{ baseUrl }}/library" class="nav-item">
|
||||
<span class="nav-icon">📁</span>
|
||||
<span class="nav-text">Media Library</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/layout" class="nav-item">
|
||||
<span class="nav-icon">📐</span>
|
||||
<span class="nav-text">Layouts</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/playlist" class="nav-item">
|
||||
<span class="nav-icon">▶</span>
|
||||
<span class="nav-text">Playlists</span>
|
||||
</a></li>
|
||||
|
||||
<li class="nav-section-title">Display</li>
|
||||
<li><a href="{{ baseUrl }}/display" class="nav-item">
|
||||
<span class="nav-icon">🖥</span>
|
||||
<span class="nav-text">Displays</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/display-group" class="nav-item">
|
||||
<span class="nav-icon">📺</span>
|
||||
<span class="nav-text">Display Groups</span>
|
||||
</a></li>
|
||||
|
||||
<li class="nav-section-title">Scheduling</li>
|
||||
<li><a href="{{ baseUrl }}/schedule" class="nav-item">
|
||||
<span class="nav-icon">📅</span>
|
||||
<span class="nav-text">Schedules</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/dayparting" class="nav-item">
|
||||
<span class="nav-icon">⏰</span>
|
||||
<span class="nav-text">Day Parting</span>
|
||||
</a></li>
|
||||
|
||||
<li class="nav-section-title">Administration</li>
|
||||
<li><a href="{{ baseUrl }}/user" class="nav-item">
|
||||
<span class="nav-icon">👤</span>
|
||||
<span class="nav-text">Users</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/user-group" class="nav-item">
|
||||
<span class="nav-icon">👥</span>
|
||||
<span class="nav-text">User Groups</span>
|
||||
</a></li>
|
||||
<li><a href="{{ baseUrl }}/settings" class="nav-item">
|
||||
<span class="nav-icon">⚙️</span>
|
||||
<span class="nav-text">Settings</span>
|
||||
</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<div class="sidebar-user">
|
||||
<div class="user-info">
|
||||
<div class="user-avatar">{{ user.username|first|upper }}</div>
|
||||
<div class="user-name">{{ user.username }}</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>
|
||||
76
custom/otssignange/views/authed.twig
Normal file
76
custom/otssignange/views/authed.twig
Normal file
@@ -0,0 +1,76 @@
|
||||
{#
|
||||
OTS Signage Modern Theme - Authenticated Shell Override
|
||||
Replaces the header and shell structure with a modern topbar + sidebar layout
|
||||
#}
|
||||
{% extends "base.twig" %}
|
||||
|
||||
{% block head %}
|
||||
{{ parent() }}
|
||||
<link rel="stylesheet" href="{{ baseUrl }}/theme/custom/otssignange/css/override.css" />
|
||||
<link rel="stylesheet" href="{{ baseUrl }}/theme/custom/otssignange/css/client.css" />
|
||||
{% endblock %}
|
||||
|
||||
{% block htmlTag %}
|
||||
<html lang="en" data-ots-theme="v1">
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<body class="ots-theme">
|
||||
<div class="ots-shell">
|
||||
{% include "authed-sidebar.twig" %}
|
||||
|
||||
<div class="ots-main">
|
||||
{% block header %}
|
||||
<header class="ots-topbar">
|
||||
<div class="topbar-left">
|
||||
<button class="btn-ghost topbar-toggle" data-action="toggle-sidebar" aria-label="Toggle sidebar" title="Toggle sidebar">
|
||||
<span class="icon">☰</span>
|
||||
</button>
|
||||
<div class="topbar-title">
|
||||
<h1 class="page-title">{{ pageTitle|default('Dashboard') }}</h1>
|
||||
{% if pageSubtitle is defined %}<p class="page-subtitle">{{ pageSubtitle }}</p>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="topbar-right">
|
||||
<form action="{{ baseUrl }}/search" class="topbar-search" method="get" role="search">
|
||||
<input type="text" name="q" placeholder="Search…" aria-label="Search" class="search-input" />
|
||||
</form>
|
||||
<div class="topbar-actions">
|
||||
<a href="{{ baseUrl }}/notification" class="topbar-btn" aria-label="Notifications" title="Notifications">
|
||||
<span class="icon">🔔</span>
|
||||
</a>
|
||||
<div class="dropdown user-menu">
|
||||
<button class="topbar-btn user-btn" aria-label="User menu" aria-expanded="false">
|
||||
<span class="avatar">{{ user.username|first|upper }}</span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a href="{{ baseUrl }}/profile" role="menuitem">Profile</a></li>
|
||||
<li><a href="{{ baseUrl }}/logout" role="menuitem">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
{% endblock %}
|
||||
|
||||
<main class="ots-content">
|
||||
{% block content %}
|
||||
<!-- Content inserted here by page templates -->
|
||||
{% endblock %}
|
||||
</main>
|
||||
|
||||
{% block footer %}
|
||||
<footer class="ots-footer">
|
||||
<p class="text-muted">© {{ currentDate|date('Y') }} {{ app_name }}. Powered by <a href="https://xibosignage.com">Xibo</a>.</p>
|
||||
</footer>
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% block scripts %}
|
||||
{{ parent() }}
|
||||
<script src="{{ baseUrl }}/theme/custom/otssignange/js/theme.js"></script>
|
||||
{% endblock %}
|
||||
</body>
|
||||
{% endblock %}
|
||||
112
custom/otssignange/views/dashboard.twig
Normal file
112
custom/otssignange/views/dashboard.twig
Normal file
@@ -0,0 +1,112 @@
|
||||
{#
|
||||
OTS Signage Modern Theme - Dashboard Page Override
|
||||
Modern dashboard with KPI cards, status panels, and quick actions
|
||||
#}
|
||||
{% extends "authed.twig" %}
|
||||
|
||||
{% block pageTitle %}Dashboard{% endblock %}
|
||||
|
||||
{% 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">
|
||||
<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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{# Main Panels Row #}
|
||||
<section class="dashboard-panels">
|
||||
<article class="panel panel-large">
|
||||
<div class="panel-header">
|
||||
<h3>Display Status</h3>
|
||||
<a href="{{ baseUrl }}/display" class="link-subtle">View all →</a>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<p class="text-muted">No displays configured yet. Add a display to get started.</p>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="panel panel-large">
|
||||
<div class="panel-header">
|
||||
<h3>Upcoming Schedules</h3>
|
||||
<a href="{{ baseUrl }}/schedule" class="link-subtle">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>
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</div>
|
||||
{% endblock %}
|
||||
85
custom/otssignange/views/displays.twig
Normal file
85
custom/otssignange/views/displays.twig
Normal file
@@ -0,0 +1,85 @@
|
||||
{#
|
||||
OTS Signage Modern Theme - Displays Page Override
|
||||
Two-column layout with folder panel on left
|
||||
#}
|
||||
{% extends "authed.twig" %}
|
||||
|
||||
{% block pageTitle %}Displays{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="ots-theme two-column-layout">
|
||||
<aside class="left-panel">
|
||||
<div class="panel-header">
|
||||
<h3>Folders</h3>
|
||||
<button class="btn-icon-sm" aria-label="Expand/collapse">
|
||||
<span>✎</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="folder-tree">
|
||||
<div class="folder-item active">
|
||||
<span class="folder-icon">📁</span>
|
||||
<span class="folder-name">All Items</span>
|
||||
</div>
|
||||
<div class="folder-item">
|
||||
<span class="folder-icon">📂</span>
|
||||
<span class="folder-name">Root Folder</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="content-panel">
|
||||
<div class="page-header">
|
||||
<h1>Displays</h1>
|
||||
<p class="text-muted">Manage and monitor your digital signage displays</p>
|
||||
</div>
|
||||
|
||||
<div class="content-toolbar">
|
||||
<input type="search" placeholder="Search displays…" class="form-control search-field" />
|
||||
<div class="toolbar-actions">
|
||||
<button class="btn btn-outline">Columns</button>
|
||||
<a href="{{ baseUrl }}/display/add" class="btn btn-primary">Add Display</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<div class="stat-box">
|
||||
<div class="stat-label">Total</div>
|
||||
<div class="stat-value">1</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-label">Online</div>
|
||||
<div class="stat-value text-success">1</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-label">Offline</div>
|
||||
<div class="stat-value text-danger">0</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Test1</td>
|
||||
<td><span class="badge badge-success">Online</span></td>
|
||||
<td>Test Screens</td>
|
||||
<td>-</td>
|
||||
<td>just now</td>
|
||||
<td><button class="btn-icon-sm" aria-label="Actions">⋮</button></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
0
custom/otssignange/views/index.html
Normal file
0
custom/otssignange/views/index.html
Normal file
73
custom/otssignange/views/media.twig
Normal file
73
custom/otssignange/views/media.twig
Normal file
@@ -0,0 +1,73 @@
|
||||
{#
|
||||
OTS Signage Modern Theme - Media Library Page Override
|
||||
Two-column layout with folder panel on left, media grid on right
|
||||
#}
|
||||
{% extends "authed.twig" %}
|
||||
|
||||
{% block pageTitle %}Media Library{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="ots-theme two-column-layout">
|
||||
<aside class="left-panel">
|
||||
<div class="panel-header">
|
||||
<h3>Folders</h3>
|
||||
<button class="btn-icon-sm" aria-label="New folder">
|
||||
<span>+</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="folder-tree">
|
||||
<div class="folder-item active">
|
||||
<span class="folder-icon">📁</span>
|
||||
<span class="folder-name">All Files</span>
|
||||
</div>
|
||||
<div class="folder-item">
|
||||
<span class="folder-icon">📂</span>
|
||||
<span class="folder-name">Root Folder</span>
|
||||
</div>
|
||||
<div class="folder-item">
|
||||
<span class="folder-icon">🖼</span>
|
||||
<span class="folder-name">Images</span>
|
||||
</div>
|
||||
<div class="folder-item">
|
||||
<span class="folder-icon">🎬</span>
|
||||
<span class="folder-name">Videos</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="content-panel">
|
||||
<div class="page-header">
|
||||
<h1>Media Library</h1>
|
||||
<p class="text-muted">Upload and manage media files for your displays</p>
|
||||
</div>
|
||||
|
||||
<div class="content-toolbar">
|
||||
<input type="search" placeholder="Search media…" class="form-control search-field" />
|
||||
<div class="toolbar-actions">
|
||||
<button class="btn btn-outline">Upload</button>
|
||||
<a href="{{ baseUrl }}/library/add" class="btn btn-primary">Add Media</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<div class="stat-box">
|
||||
<div class="stat-label">Files</div>
|
||||
<div class="stat-value">0</div>
|
||||
</div>
|
||||
<div class="stat-box">
|
||||
<div class="stat-label">Storage Used</div>
|
||||
<div class="stat-value">0 MB</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="media-grid">
|
||||
<div class="empty-state">
|
||||
<div class="empty-icon">🎞</div>
|
||||
<h3>No media files</h3>
|
||||
<p>Upload images, videos, and documents to get started.</p>
|
||||
<a href="{{ baseUrl }}/library/add" class="btn btn-primary">Upload Media</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user