mirror of
https://github.com/mediacms-io/mediacms.git
synced 2026-02-04 06:22:59 -05:00
rem
This commit is contained in:
Markos Gogoulos
@@ -1,222 +0,0 @@
|
|||||||
{% 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 (EDW YIANNIS)</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>
|
|
||||||
Reference in New Issue
Block a user