287e03da42
- 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.
129 lines
5.1 KiB
Twig
129 lines
5.1 KiB
Twig
{#
|
|
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 media-sidebar">
|
|
<div class="panel-header">
|
|
<h3>Folders</h3>
|
|
<button class="btn-icon-sm" aria-label="New folder">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<div class="folder-tree">
|
|
<div class="folder-item active">
|
|
<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 Files</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">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">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>
|
|
</svg>
|
|
<span class="folder-name">Images</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">
|
|
<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="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 your images and videos for digital signage</p>
|
|
</div>
|
|
|
|
<div class="content-toolbar">
|
|
<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 media…" class="form-control search-field" />
|
|
</div>
|
|
<div class="toolbar-actions">
|
|
<button class="btn btn-outline btn-sm">All Media</button>
|
|
<a href="{{ baseUrl }}/library/add" class="btn btn-primary btn-sm">Upload Media</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="stat-row">
|
|
<div class="stat-box">
|
|
<div class="stat-label">Total Files</div>
|
|
<div class="stat-value">4</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-label">Storage Used</div>
|
|
<div class="stat-value">12.3 MB</div>
|
|
</div>
|
|
<div class="stat-box">
|
|
<div class="stat-label">Storage Limit</div>
|
|
<div class="stat-value">5 GB</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="media-grid">
|
|
<div class="media-item">
|
|
<div class="media-thumbnail">
|
|
<img src="https://images.unsplash.com/photo-1444080748397-f442aa95c3e5?w=400&h=300&fit=crop" alt="Galaxy space" />
|
|
<span class="media-type-badge">Image</span>
|
|
</div>
|
|
<div class="media-info">
|
|
<p class="media-name">2000x1158</p>
|
|
<p class="media-size text-xs text-muted">3.3 MB • 1920x1112</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="media-item">
|
|
<div class="media-thumbnail">
|
|
<img src="https://images.unsplash.com/photo-1478098711619-69891b0ec21a?w=400&h=300&fit=crop" alt="Cat portrait" />
|
|
<span class="media-type-badge">Image</span>
|
|
</div>
|
|
<div class="media-info">
|
|
<p class="media-name">Images.jpg</p>
|
|
<p class="media-size text-xs text-muted">5.2 KB • 194x260</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="media-item">
|
|
<div class="media-thumbnail">
|
|
<img src="https://images.unsplash.com/photo-1577720643272-265b434c829c?w=400&h=300&fit=crop" alt="OTS Logo" />
|
|
<span class="media-type-badge">Image</span>
|
|
</div>
|
|
<div class="media-info">
|
|
<p class="media-name">OTS Logo</p>
|
|
<p class="media-size text-xs text-muted">2.9 KB • 360x350</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="media-item">
|
|
<div class="media-thumbnail">
|
|
<img src="https://images.unsplash.com/photo-1590080876-8b7f22b5d5fa?w=400&h=300&fit=crop" alt="Sunrise Hotel" />
|
|
<span class="media-type-badge">Image</span>
|
|
</div>
|
|
<div class="media-info">
|
|
<p class="media-name">suncrest hotel l...</p>
|
|
<p class="media-size text-xs text-muted">4.1 KB • 5824x3401</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
{% endblock %} |