192 lines
8.1 KiB
HTML
192 lines
8.1 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block title %}{{ category.title }} - Forum{% endblock %}
|
|
|
|
{% block extra_css %}
|
|
<style>
|
|
.thread-item {
|
|
transition: all 0.2s ease;
|
|
}
|
|
.thread-item:hover {
|
|
transform: translateX(2px);
|
|
}
|
|
.thread-pinned {
|
|
border-left-width: 4px;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 py-8">
|
|
<!-- Breadcrumb Navigation -->
|
|
<div class="mb-6 flex items-center text-sm">
|
|
<a href="{{ url_for('community') }}" class="opacity-75 hover:opacity-100 transition-opacity">
|
|
<i class="fas fa-home mr-1"></i> Forum
|
|
</a>
|
|
<span class="mx-2 opacity-50">/</span>
|
|
<span class="font-medium">{{ category.title }}</span>
|
|
</div>
|
|
|
|
<!-- Kategorie-Header -->
|
|
<div class="mb-8 flex flex-wrap items-center justify-between gap-4">
|
|
<div class="flex items-center">
|
|
<!-- Kategorie-Icon -->
|
|
<div class="w-12 h-12 rounded-xl mr-4 flex items-center justify-center text-white"
|
|
style="background-color: {{ node.color_code or '#6d28d9' }}">
|
|
<i class="fas {{ node.icon or 'fa-folder' }} text-2xl"></i>
|
|
</div>
|
|
|
|
<!-- Kategorie-Info -->
|
|
<div>
|
|
<h1 class="text-2xl font-bold">{{ category.title }}</h1>
|
|
<p class="opacity-75">{{ category.description }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Neues Thema erstellen -->
|
|
<a href="{{ url_for('new_post', category_id=category.id) }}"
|
|
class="px-5 py-2.5 rounded-lg transition-all duration-300 flex items-center"
|
|
x-bind:class="darkMode
|
|
? 'bg-indigo-700 hover:bg-indigo-600 text-white'
|
|
: 'bg-indigo-500 hover:bg-indigo-600 text-white'">
|
|
<i class="fas fa-plus-circle mr-2"></i>
|
|
Neues Thema
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Threads anzeigen -->
|
|
<div class="mb-8 rounded-xl overflow-hidden"
|
|
x-bind:class="darkMode ? 'bg-gray-800/60 border border-white/10' : 'bg-white border border-gray-200'">
|
|
|
|
<!-- Header -->
|
|
<div class="p-4 border-b" x-bind:class="darkMode ? 'border-white/10' : 'border-gray-200'">
|
|
<div class="grid grid-cols-12 gap-4">
|
|
<div class="col-span-7 font-medium">Thema</div>
|
|
<div class="col-span-1 text-center font-medium hidden md:block">Antworten</div>
|
|
<div class="col-span-2 text-center font-medium hidden md:block">Autor</div>
|
|
<div class="col-span-2 text-center font-medium hidden md:block">Letzte Antwort</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Thread-Liste -->
|
|
{% if threads_data %}
|
|
{% for thread_data in threads_data %}
|
|
{% set thread = thread_data.thread %}
|
|
<div class="thread-item p-4 border-b last:border-b-0 {{ 'thread-pinned' if thread.is_pinned }}"
|
|
x-bind:class="darkMode
|
|
? 'border-white/10 hover:bg-gray-700/50 {{ 'border-l-yellow-500' if thread.is_pinned }}'
|
|
: 'border-gray-200 hover:bg-gray-50 {{ 'border-l-yellow-500' if thread.is_pinned }}'">
|
|
<a href="{{ url_for('forum_post', post_id=thread.id) }}" class="block">
|
|
<div class="grid grid-cols-12 gap-4">
|
|
<!-- Thema -->
|
|
<div class="col-span-12 md:col-span-7">
|
|
<div class="flex items-start">
|
|
<!-- Status-Icons -->
|
|
<div class="flex flex-col items-center mr-3 pt-1">
|
|
{% if thread.is_pinned %}
|
|
<i class="fas fa-thumbtack text-yellow-500" title="Angepinnt"></i>
|
|
{% endif %}
|
|
{% if thread.is_locked %}
|
|
<i class="fas fa-lock text-red-500 mt-1" title="Gesperrt"></i>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Themen-Info -->
|
|
<div>
|
|
<h3 class="font-medium leading-snug mb-1 {% if thread.is_locked %}opacity-70{% endif %}">
|
|
{{ thread.title }}
|
|
</h3>
|
|
<div class="flex items-center text-xs opacity-70 mt-1">
|
|
<span><i class="fas fa-eye mr-1"></i> {{ thread.view_count }}</span>
|
|
<span class="mx-2 block md:hidden">•</span>
|
|
<span class="block md:hidden"><i class="fas fa-reply mr-1"></i> {{ thread_data.reply_count }}</span>
|
|
<span class="mx-2">•</span>
|
|
<span><i class="fas fa-clock mr-1"></i> {{ thread.created_at.strftime('%d.%m.%Y, %H:%M') }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Antworten -->
|
|
<div class="col-span-1 text-center hidden md:flex items-center justify-center">
|
|
<span class="px-2.5 py-1 rounded-full text-sm font-medium"
|
|
x-bind:class="darkMode
|
|
? 'bg-indigo-900/40 text-indigo-300'
|
|
: 'bg-indigo-100 text-indigo-800'">
|
|
{{ thread_data.reply_count }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Autor -->
|
|
<div class="col-span-2 text-center hidden md:flex items-center justify-center">
|
|
<div class="flex items-center">
|
|
<div class="w-7 h-7 rounded-full flex items-center justify-center text-white text-xs font-medium overflow-hidden mr-2"
|
|
style="background: linear-gradient(135deg, #8b5cf6, #6366f1);">
|
|
{% if thread.author.avatar %}
|
|
<img src="{{ thread.author.avatar }}" alt="{{ thread.author.username }}" class="w-full h-full object-cover">
|
|
{% else %}
|
|
{{ thread.author.username[0].upper() }}
|
|
{% endif %}
|
|
</div>
|
|
<span class="text-sm truncate max-w-[80px]">{{ thread.author.username }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Letzte Antwort -->
|
|
<div class="col-span-2 text-center hidden md:block text-sm">
|
|
{% if thread_data.latest_reply %}
|
|
<div>{{ thread_data.latest_reply.created_at.strftime('%d.%m.%Y') }}</div>
|
|
<div class="opacity-75 text-xs">{{ thread_data.latest_reply.created_at.strftime('%H:%M') }} Uhr</div>
|
|
{% else %}
|
|
<span class="opacity-60">Keine Antworten</span>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<div class="p-8 text-center">
|
|
<div class="text-3xl mb-3 opacity-30"><i class="fas fa-comments"></i></div>
|
|
<h3 class="text-xl font-semibold mb-2">Keine Themen vorhanden</h3>
|
|
<p class="opacity-75 mb-4">In dieser Kategorie wurden noch keine Themen erstellt.</p>
|
|
<a href="{{ url_for('new_post', category_id=category.id) }}"
|
|
class="inline-block px-5 py-2.5 rounded-lg transition-all duration-300"
|
|
x-bind:class="darkMode
|
|
? 'bg-indigo-700 hover:bg-indigo-600 text-white'
|
|
: 'bg-indigo-500 hover:bg-indigo-600 text-white'">
|
|
<i class="fas fa-plus-circle mr-2"></i>
|
|
Erstes Thema erstellen
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Link zur Mindmap -->
|
|
<div class="rounded-xl p-5 mb-4 flex items-center"
|
|
x-bind:class="darkMode ? 'bg-purple-900/20 border border-purple-800/30' : 'bg-purple-50 border border-purple-100'">
|
|
<div class="text-3xl mr-4 opacity-80">
|
|
<i class="fas fa-diagram-project" style="color: {{ node.color_code }}"></i>
|
|
</div>
|
|
<div>
|
|
<h3 class="font-medium mb-1">Mindmap-Knotenpunkt: {{ node.name }}</h3>
|
|
<p class="text-sm opacity-75">In der Mindmap findest du weitere Informationen zu diesem Themenbereich.</p>
|
|
</div>
|
|
<div class="ml-auto">
|
|
<a href="{{ url_for('mindmap') }}"
|
|
class="px-4 py-2 rounded-lg inline-block text-sm transition-all"
|
|
x-bind:class="darkMode
|
|
? 'bg-purple-800/60 hover:bg-purple-700/60 text-white'
|
|
: 'bg-white hover:bg-purple-100 text-purple-800 border border-purple-200'">
|
|
Zur Mindmap
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
// Hier können bei Bedarf kategoriespezifische Scripts eingefügt werden
|
|
</script>
|
|
{% endblock %} |