103 lines
3.3 KiB
HTML
103 lines
3.3 KiB
HTML
|
{% extends "admin/layout.html" %}
|
||
|
|
{% let active_page = "media" %}
|
||
|
|
|
||
|
|
{% block title %}{{ t.media_title }}{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="page-head">
|
||
|
|
<h1>{{ t.media_title }}</h1>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- Client filter -->
|
||
|
|
<div style="margin-bottom:1rem;">
|
||
|
|
<div class="select is-small">
|
||
|
|
<select onchange="window.location.href='/admin/media?lang={{ lang.code() }}' + (this.value ? '&client_id=' + this.value : '')">
|
||
|
|
<option value="">{{ t.media_all_clients }}</option>
|
||
|
|
{% for c in &clients %}
|
||
|
|
<option value="{{ c.id }}" {% if c.id.unwrap() == filter_client_id %}selected{% endif %}>{{ c.name }}</option>
|
||
|
|
{% endfor %}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% if items.is_empty() %}
|
||
|
|
<p class="has-text-grey">{{ t.media_empty }}</p>
|
||
|
|
{% else %}
|
||
|
|
<div class="media-grid">
|
||
|
|
{% for item in &items %}
|
||
|
|
<div class="media-card">
|
||
|
|
{% if item.media.file_type == "photo" %}
|
||
|
|
<a href="/admin/uploads/{{ item.media.id }}" data-lightbox="photo">
|
||
|
|
<img src="/admin/uploads/{{ item.media.id }}" alt="" loading="lazy">
|
||
|
|
</a>
|
||
|
|
{% else %}
|
||
|
|
<a href="/admin/uploads/{{ item.media.id }}" data-lightbox="video">
|
||
|
|
<div class="video-thumb">🎬</div>
|
||
|
|
</a>
|
||
|
|
{% endif %}
|
||
|
|
<div class="media-info">
|
||
|
|
<div class="media-meta">
|
||
|
|
<strong>{{ item.client_name }}</strong>
|
||
|
|
{% if let Some(d) = item.visit_date.as_deref() %}
|
||
|
|
<span style="color:#999;">{{ d }}</span>
|
||
|
|
{% endif %}
|
||
|
|
</div>
|
||
|
|
{% if let Some(cap) = item.media.caption.as_deref() %}
|
||
|
|
<div style="font-size:0.82rem;color:#666;margin-top:0.2rem;">{{ cap }}</div>
|
||
|
|
{% endif %}
|
||
|
|
<form method="post" action="/admin/media/{{ item.media.id }}/delete" onsubmit="return confirm('{{ t.media_delete_confirm }}');" style="margin-top:0.3rem;">
|
||
|
|
<button class="button is-small is-danger is-outlined btn-sm">{{ t.media_delete }}</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
{% endfor %}
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.media-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||
|
|
gap: 0.75rem;
|
||
|
|
}
|
||
|
|
.media-card {
|
||
|
|
background: #fff;
|
||
|
|
border-radius: 10px;
|
||
|
|
border: 1px solid #eee;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.media-card img {
|
||
|
|
width: 100%;
|
||
|
|
height: 160px;
|
||
|
|
object-fit: cover;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.media-card .video-thumb {
|
||
|
|
width: 100%;
|
||
|
|
height: 160px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 3rem;
|
||
|
|
background: #f0f0f0;
|
||
|
|
}
|
||
|
|
.media-info {
|
||
|
|
padding: 0.6rem 0.75rem;
|
||
|
|
}
|
||
|
|
.media-meta {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 0.85rem;
|
||
|
|
}
|
||
|
|
@media (max-width: 480px) {
|
||
|
|
.media-grid {
|
||
|
|
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
|
||
|
|
}
|
||
|
|
.media-card img, .media-card .video-thumb {
|
||
|
|
height: 120px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
{% endblock %}
|