mirror of
https://github.com/mediacms-io/mediacms.git
synced 2026-01-20 15:22:58 -05:00
223 lines
6.9 KiB
HTML
223 lines
6.9 KiB
HTML
{% load static %}
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Select Media - MediaCMS</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 20px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.header {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
margin: 0 0 10px 0;
|
|
}
|
|
.filter-bar {
|
|
background: white;
|
|
padding: 15px;
|
|
border-radius: 8px;
|
|
margin-bottom: 20px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
}
|
|
.media-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 80px;
|
|
}
|
|
.media-card {
|
|
background: white;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
transition: transform 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
.media-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.15);
|
|
}
|
|
.media-card.selected {
|
|
border: 3px solid #2196F3;
|
|
}
|
|
.media-thumbnail {
|
|
width: 100%;
|
|
height: 180px;
|
|
object-fit: cover;
|
|
background: #eee;
|
|
}
|
|
.media-info {
|
|
padding: 15px;
|
|
}
|
|
.media-title {
|
|
font-weight: 600;
|
|
margin: 0 0 5px 0;
|
|
font-size: 14px;
|
|
}
|
|
.media-meta {
|
|
font-size: 12px;
|
|
color: #666;
|
|
}
|
|
.checkbox-wrapper {
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 10px;
|
|
}
|
|
.checkbox-wrapper input[type="checkbox"] {
|
|
width: 20px;
|
|
height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.bottom-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: white;
|
|
padding: 20px;
|
|
box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.btn {
|
|
padding: 12px 24px;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.btn-primary {
|
|
background: #2196F3;
|
|
color: white;
|
|
}
|
|
.btn-primary:hover {
|
|
background: #1976D2;
|
|
}
|
|
.btn-secondary {
|
|
background: #f0f0f0;
|
|
color: #333;
|
|
}
|
|
.selected-count {
|
|
color: #666;
|
|
}
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: #999;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>Select Media to Embed</h1>
|
|
<p>Choose one or more media items to add to your course</p>
|
|
</div>
|
|
|
|
<div class="filter-bar">
|
|
<label>
|
|
<input type="checkbox" id="myMediaOnly" {% if show_my_media_only %}checked{% endif %}>
|
|
Show only my media
|
|
</label>
|
|
</div>
|
|
|
|
<form id="selectMediaForm" method="post">
|
|
{% csrf_token %}
|
|
<div class="media-grid">
|
|
{% for media in media_list %}
|
|
<div class="media-card" data-media-id="{{ media.id }}" onclick="toggleMedia({{ media.id }})">
|
|
<div style="position: relative;">
|
|
{% if media.thumbnail_url %}
|
|
<img src="{{ media.thumbnail_url }}" alt="{{ media.title }}" class="media-thumbnail">
|
|
{% else %}
|
|
<div class="media-thumbnail" style="display: flex; align-items: center; justify-content: center; background: #e0e0e0;">
|
|
<span style="font-size: 48px;">🎬</span>
|
|
</div>
|
|
{% endif %}
|
|
<div class="checkbox-wrapper">
|
|
<input type="checkbox" name="media_ids[]" value="{{ media.id }}" id="media_{{ media.id }}">
|
|
</div>
|
|
</div>
|
|
<div class="media-info">
|
|
<h3 class="media-title">{{ media.title }}</h3>
|
|
<div class="media-meta">
|
|
By {{ media.user.name|default:media.user.username }}<br>
|
|
{{ media.add_date|date:"M d, Y" }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% empty %}
|
|
<div class="empty-state">
|
|
<h3>No media found</h3>
|
|
<p>Try adjusting your filter settings</p>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="bottom-bar">
|
|
<span class="selected-count">
|
|
<strong id="selectedCount">0</strong> media selected
|
|
</span>
|
|
<div>
|
|
<button type="button" class="btn btn-secondary" onclick="window.close()">Cancel</button>
|
|
<button type="submit" class="btn btn-primary" id="submitBtn" disabled>Add to Course</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
function toggleMedia(mediaId) {
|
|
const checkbox = document.getElementById('media_' + mediaId);
|
|
checkbox.checked = !checkbox.checked;
|
|
updateSelection();
|
|
}
|
|
|
|
function updateSelection() {
|
|
const checkboxes = document.querySelectorAll('input[name="media_ids[]"]');
|
|
let count = 0;
|
|
|
|
checkboxes.forEach(cb => {
|
|
const card = cb.closest('.media-card');
|
|
if (cb.checked) {
|
|
card.classList.add('selected');
|
|
count++;
|
|
} else {
|
|
card.classList.remove('selected');
|
|
}
|
|
});
|
|
|
|
document.getElementById('selectedCount').textContent = count;
|
|
document.getElementById('submitBtn').disabled = count === 0;
|
|
}
|
|
|
|
// Initialize
|
|
document.querySelectorAll('input[name="media_ids[]"]').forEach(cb => {
|
|
cb.addEventListener('change', function(e) {
|
|
e.stopPropagation();
|
|
updateSelection();
|
|
});
|
|
});
|
|
|
|
// My media filter
|
|
document.getElementById('myMediaOnly').addEventListener('change', function() {
|
|
const url = new URL(window.location);
|
|
url.searchParams.set('my_media_only', this.checked);
|
|
window.location = url.toString();
|
|
});
|
|
|
|
updateSelection();
|
|
</script>
|
|
</body>
|
|
</html>
|