mirror of
https://github.com/mediacms-io/mediacms.git
synced 2026-01-24 00:53:00 -05:00
lti
This commit is contained in:
Markos Gogoulos
222
templates/lti/select_media.html
Normal file
222
templates/lti/select_media.html
Normal file
@@ -0,0 +1,222 @@
|
||||
{% 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>
|
||||
Reference in New Issue
Block a user