cato447/tutor-tool
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

updated html

Browse Source
This commit is contained in:
cato447
2026-04-22 21:14:30 +02:00
parent 9f4007c0e9
commit f433f0cf4c
9 changed files with 1100 additions and 1138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
app/templates/macros/ui.html
View File

@@ -76,24 +76,31 @@
{# Course-switcher dropdown (used in admin and index pages). #}
{% macro course_switcher(courses, active_course_name, switch_url_prefix) %}
<div class="relative" id="course-switcher">
{% macro course_switcher(courses, active_course_name, switch_url_prefix, id_suffix='') %}
{% set root_id = 'course-switcher' ~ id_suffix %}
{% set menu_id = 'course-switcher-menu' ~ id_suffix %}
{% set chevron_id = 'course-switcher-chevron' ~ id_suffix %}
<div class="relative" id="{{ root_id }}">
<button
type="button"
onclick="toggleCourseSwitcher()"
data-cs-root="{{ root_id }}"
data-cs-menu="{{ menu_id }}"
data-cs-chevron="{{ chevron_id }}"
onclick="toggleCourseSwitcher(this)"
class="flex items-center gap-2 px-4 py-1.5 rounded-full
bg-surface shadow-md ring-1 ring-border
text-sm font-medium text-text
hover:ring-primary hover:text-primary
transition whitespace-nowrap">
<span id="course-switcher-label">{{ active_course_name }}</span>
<svg class="w-3.5 h-3.5 text-muted transition-transform duration-200" id="course-switcher-chevron"
<span>{{ active_course_name }}</span>
<svg class="w-3.5 h-3.5 text-muted transition-transform duration-200" id="{{ chevron_id }}"
xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 10 6">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 4 4 4-4"/>
</svg>
</button>
<div id="course-switcher-menu"
<div id="{{ menu_id }}"
class="hidden absolute left-1/2 -translate-x-1/2 mt-2 w-52 z-50
bg-surface border border-border rounded-xl shadow-lg overflow-hidden whitespace-nowrap">
{% for course in courses %}
@@ -112,25 +119,4 @@
{% endfor %}
</div>
</div>
<script>
function toggleCourseSwitcher() {
const menu = document.getElementById('course-switcher-menu');
const chevron = document.getElementById('course-switcher-chevron');
const isOpen = !menu.classList.contains('hidden');
menu.classList.toggle('hidden', isOpen);
chevron.style.transform = isOpen ? '' : 'rotate(180deg)';
if (!isOpen) {
// Close when clicking outside
document.addEventListener('click', function handler(e) {
if (!document.getElementById('course-switcher').contains(e.target)) {
menu.classList.add('hidden');
chevron.style.transform = '';
document.removeEventListener('click', handler);
}
});
}
}
</script>
{% endmacro %}