updated html

This commit is contained in:
2026-04-22 21:14:30 +02:00
parent 9f4007c0e9
commit f433f0cf4c
9 changed files with 1100 additions and 1138 deletions

View File

@@ -6,7 +6,7 @@
{# Override left nav to include course switcher #}
{% block nav_left_extra %}
{{ course_switcher(courses, active_course_name, '/admin/switch_course') }}
{{ course_switcher(courses, active_course_name, '/admin/switch_course', '-admin') }}
{% endblock %}
{% block admin_content %}

View File

@@ -19,6 +19,28 @@
<script src="https://cdn.jsdelivr.net/npm/flowbite@3.1.2/dist/flowbite.min.js"></script>
{% endblock %}
<script>
function toggleCourseSwitcher(btn) {
const root = document.getElementById(btn.dataset.csRoot);
const menu = document.getElementById(btn.dataset.csMenu);
const chevron = document.getElementById(btn.dataset.csChevron);
const isOpen = !menu.classList.contains('hidden');
menu.classList.toggle('hidden', isOpen);
chevron.style.transform = isOpen ? '' : 'rotate(180deg)';
if (!isOpen) {
document.addEventListener('click', function handler(e) {
if (!root.contains(e.target)) {
menu.classList.add('hidden');
chevron.style.transform = '';
document.removeEventListener('click', handler);
}
});
}
}
</script>
{% block scripts_extra %}{% endblock %}
</body>
</html>

View File

@@ -21,7 +21,7 @@
{% block scripts_extra %}
<script>
const notifList = document.getElementById("notif-list");
const socket = io({ transports: ['websocket'] });
const socket = io();
socket.on("confused", data => {
if (notifList.children.length === 1 &&

View File

@@ -27,9 +27,9 @@
</form>
</div>
{# Col 2: course switcher (perfectly centered) #}
{# Desktop header, Col 2 #}
<div class="flex justify-center">
{{ course_switcher(courses, active_course_name, '/switch_course') }}
{{ course_switcher(courses, active_course_name, '/switch_course', '-desktop') }}
</div>
{# Col 3: social + admin (right-aligned) #}
@@ -59,9 +59,6 @@
</form>
</div>
<div class="flex items-center gap-3">
<a href="https://zulip.in.tum.de/#narrow/channel/3234-ITSec-Tutorium-Simon-Bu.C3.9Fmann" target="_blank">
<img src="{{ url_for('static', filename='zulip_icon.svg') }}" class="h-7 w-7">
</a>
<a href="https://discordapp.com/users/306086176585154560" target="_blank">
<img src="{{ url_for('static', filename='discord_icon.svg') }}" class="h-7 w-7">
</a>
@@ -87,10 +84,13 @@
</section>
{% endif %}
{# Mobile, below the banner #}
<div class="flex justify-center md:hidden">
{{ course_switcher(courses, active_course_name, '/switch_course') }}
{{ course_switcher(courses, active_course_name, '/switch_course', '-mobile') }}
</div>
{# ── Password Form ─────────────────────────────────────────── #}
<section class="flex justify-center">
<div class="w-full max-w-md">

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 %}