OTSSigns/OTSSignsTheme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Enhance OTS Signage theme with improved sidebar, dropdowns, and UI interactions

Browse Source 
- 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
2026-02-04 07:17:33 -05:00
parent efe206a589
commit 287e03da42
11 changed files with 3429 additions and 1534 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
custom/otssignange/views/authed.twig
View File

@@ -11,11 +11,11 @@
{% endblock %}
{% block htmlTag %}
<html lang="en" data-ots-theme="v1">
<html lang="en" data-ots-theme="v1" data-mode="dark">
{% endblock %}
{% block body %}
<body class="ots-theme">
<body class="ots-theme ots-dark-mode">
<div class="ots-shell">
{% include "authed-sidebar.twig" %}
@@ -24,7 +24,9 @@
<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>
<svg class="icon" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
</svg>
</button>
<div class="topbar-title">
<h1 class="page-title">{{ pageTitle|default('Dashboard') }}</h1>
@@ -34,17 +36,22 @@
<div class="topbar-right">
<form action="{{ baseUrl }}/search" class="topbar-search" method="get" role="search">
<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="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>
<button class="topbar-btn" aria-label="Notifications" title="Notifications">
<svg class="icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/>
</svg>
</button>
<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>
<span class="avatar avatar-sm">{{ user.username|first|upper }}</span>
</button>
<ul class="dropdown-menu" role="menu">
<ul class="dropdown-menu dropdown-right" role="menu">
<li><a href="{{ baseUrl }}/profile" role="menuitem">Profile</a></li>
<li><a href="{{ baseUrl }}/logout" role="menuitem">Sign out</a></li>
</ul>
@@ -62,7 +69,7 @@
{% block footer %}
<footer class="ots-footer">
<p class="text-muted">&copy; {{ currentDate|date('Y') }} {{ app_name }}. Powered by <a href="https://xibosignage.com">Xibo</a>.</p>
<p class="text-muted text-xs">&copy; {{ currentDate|date('Y') }} {{ app_name }}. Powered by <a href="https://xibosignage.com">Xibo</a>.</p>
</footer>
{% endblock %}
</div>