add intern design

fet2020/intern/forms.py

@@ -152,14 +152,14 @@ class TopicCreateForm(forms.ModelForm):
         model = Topic
         fields = [
             "title",
-            "slug",
+            "shortterm",
             "description",
             "topic_group",
         ]
 
         labels = {
             "title": _("Titel"),
-            "slug": _("Permalink"),
+            "shortterm": _("Kürzel für den Link"),
             "description": _("Beschreibung"),
         }
 
@@ -173,14 +173,14 @@ class TopicUpdateForm(forms.ModelForm):
         model = Topic
         fields = [
             "title",
-            "slug",
+            "shortterm",
             "description",
             "topic_group",
         ]
 
         labels = {
             "title": _("Titel"),
-            "slug": _("Permalink"),
+            "shortterm": _("Kürzel für den Link"),
             "description": _("Beschreibung"),
         }
 
@@ -195,14 +195,14 @@ class AttachmentCreateForm(forms.ModelForm):
 
         fields = [
             "title",
-            "slug",
+            "shortterm",
             "description",
             "topic",
         ]
 
         labels = {
             "title": _("Titel"),
-            "slug": _("Permalink"),
+            "shortterm": _("Kürzel für den Link"),
             "description": _("Beschreibung"),
         }
 
@@ -217,14 +217,14 @@ class AttachmentUpdateForm(forms.ModelForm):
 
         fields = [
             "title",
-            "slug",
+            "shortterm",
             "description",
             "topic",
         ]
 
         labels = {
             "title": _("Titel"),
-            "slug": _("Permalink"),
+            "shortterm": _("Kürzel für den Link"),
             "description": _("Beschreibung"),
         }
 

fet2020/intern/views.py

@@ -156,19 +156,14 @@ class TopicCreateView(LoginRequiredMixin, CreateView):
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
-        context["topic_group"] = self.slug
+       
+        topic_group = TopicGroup.objects.filter(slug=self.slug).first()
+        context["topic_group"] = topic_group
+
         return context
 
     def get_initial(self):
         self.slug = self.kwargs.get("topic_group")
-        topic_group = TopicGroup.objects.filter(slug=self.slug).first()
-
-        context = {
-            "topic_group": topic_group,
-        }
-
-        return context
-
 
 class TopicUpdateView(LoginRequiredMixin, UpdateView):
     model = Topic
@@ -180,17 +175,14 @@ class TopicUpdateView(LoginRequiredMixin, UpdateView):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context["slug"] = self.slug
+        
+        topic = Topic.objects.filter(slug=self.slug).first()
+        context["topic"] = topic
+
         return context
 
     def get_initial(self):
         self.slug = self.kwargs.get("slug")
-        topic = Topic.objects.filter(slug=self.slug).first()
-
-        context = {
-            "topic": topic,
-        }
-
-        return context
 
     def get_success_url(self):
         context = {
@@ -210,17 +202,14 @@ class AttachmentCreateView(LoginRequiredMixin, CreateView):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context["slug"] = self.slug
+        
+        topic = Topic.objects.filter(slug=self.slug).first()
+        context["topic"]= topic
+
         return context
 
     def get_initial(self):
         self.slug = self.kwargs.get("slug")
-        topic = Topic.objects.filter(slug=self.slug).first()
-
-        context = {
-            "topic": topic,
-        }
-
-        return context
 
     def get_success_url(self):
         context = {
@@ -242,19 +231,15 @@ class AttachmentUpdateView(LoginRequiredMixin, UpdateView):
         context = super().get_context_data(**kwargs)
         context["topic_slug"] = self.topic_slug
         context["slug"] = self.slug
+
+        attachment = Attachment.objects.filter(slug=self.slug).first()
+        context["attachment"] = attachment
         return context
 
     def get_initial(self):
         self.topic_slug = self.kwargs.get("topic_slug")
         self.slug = self.kwargs.get("slug")
 
-        attachment = Attachment.objects.filter(slug=self.slug).first()
-        context = {
-            "attachment": attachment,
-        }
-
-        return context
-
     def get_success_url(self):
         context = {
             "topic_slug": self.topic_slug,
@@ -274,21 +259,22 @@ class EtherpadCreateView(LoginRequiredMixin, CreateView):
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
+
+        self.topic_slug = self.kwargs.get("topic_slug")
+        self.slug = self.kwargs.get("slug")
+
         context["topic_slug"] = self.topic_slug
         context["slug"] = self.slug
+
+        attachment = Attachment.objects.filter(slug=self.slug).first()
+        context["attachment"] = attachment
+
         return context
 
     def get_initial(self):
         self.topic_slug = self.kwargs.get("topic_slug")
         self.slug = self.kwargs.get("slug")
 
-        attachment = Attachment.objects.filter(slug=self.slug).first()
-        context = {
-            "attachment": attachment,
-        }
-
-        return context
-
     def get_success_url(self):
         context = {
             "topic_slug": self.topic_slug,
@@ -308,22 +294,19 @@ class FileUploadCreateView(LoginRequiredMixin, CreateView):
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
+
         context["topic_slug"] = self.topic_slug
         context["slug"] = self.slug
 
+        attachment = Attachment.objects.filter(slug=self.kwargs.get("slug")).first()
+        context["attachment"] = attachment
+
         return context
 
     def get_initial(self):
         self.topic_slug = self.kwargs.get("topic_slug")
         self.slug = self.kwargs.get("slug")
 
-        attachment = Attachment.objects.filter(slug=self.kwargs.get("slug")).first()
-        context = {
-            "attachment": attachment,
-        }
-
-        return context
-
     def get_success_url(self):
         context = {
             "topic_slug": self.topic_slug,
@@ -348,18 +331,15 @@ class TaskCreateView(LoginRequiredMixin, CreateView):
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context["slug"] = self.slug
+
+        topic = Topic.objects.filter(slug=self.slug).first()
+        context["topic"] = topic
+        context["task_list"] = topic.task_list
+
         return context
 
     def get_initial(self):
         self.slug = self.kwargs.get("slug")
-        topic = Topic.objects.filter(slug=self.slug).first()
-
-        context = {
-            "topic": topic,
-            "task_list": topic.task_list,
-        }
-
-        return context
 
     def get_success_url(self):
         context = {

fet2020/tasks/forms.py

@@ -175,6 +175,7 @@ class InternTaskCreateForm(TaskCreateForm):
 
         fields = [
             "title",
+            "shortterm",
             "task_list",
             "due_date",
             "assigned_to",
@@ -183,6 +184,7 @@ class InternTaskCreateForm(TaskCreateForm):
 
         labels = {
             "title": _("Titel des Tasks"),
+            "shortterm": _("Kürzel für den Link"),
             "task_list": _("Task-Gruppe"),
             "due_date": _("Fälligkeitsdatum"),
             "assigned_to": _("Zuweisen an"),

fet2020/templates/intern/attachment.html

@@ -1,81 +1,62 @@
-{% extends "layout.html" %}
+{% extends "base.html" %}
 
 {% block content %}
-<div class="grid-container">
-    <div class="grid-x grid-padding-x">
-        <div class="cell padding-top-1">
-            <h3>
-            <a href="{% url 'intern:index' %}#{{ active_topic.topic_group.slug }}">{{ active_topic.topic_group.title }}</a>
-            / <a href="{% url 'intern:topic' active_topic.slug %}">{{ active_topic.title }}</a>
-            / {{ attachment.title }}
-            </h3>
-        </div>
-    </div>
-
-    <div class="intern-hero">
-
-        {% if request.user.is_authenticated %}
-            <div class="grid-x grid-padding-x padding-top-1">
-                <div class="cell large-3 medium-4 small-12">
-                    <a class="button" href="{% url 'intern:attachment-update' active_topic.slug attachment.slug %}">Beschreibung bearbeiten</a>
-                </div>
-            </div>
-        {% endif %}
+<!-- Main Content -->
+<main class="container mx-auto w-full px-4 my-8 flex-1">
+    <h1 class="page-title">Intern</h1>
+    <div class="flex flex-col gap-y-4 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
+        <aside class="flex gap-2 flex-wrap align-bottom text-sm sm:text-base text-gray-600 dark:text-gray-300">
+            <a class="underline hover:text-gray-900 dark:hover:text-gray-100" href="{% url 'intern:index' %}#{{ active_topic.topic_group.slug }}">{{ active_topic.topic_group.title }}</a>
+            <span><i class="fa-solid fa-angle-right"></i></span>
+            <a class="underline hover:text-gray-900 dark:hover:text-gray-100" href="{% url 'intern:topic' active_topic.slug %}">{{ active_topic.title }}</a>
+            <span><i class="fa-solid fa-angle-right"></i></span>
+            <span class="cursor-default">{{ attachment.title }}</span>
+        </aside>
 
         {% if attachment.description %}
-            <div class="padding-top-1 padding-left-1 padding-right-1">
+            <div class="db-page-content-left mt-2">
                 {{ attachment.description|safe }}
-                <hr>
             </div>
         {% endif %}
 
-        <div class="grid-x grid-padding-x">
-            <div class="cell">
-                Etherpad Dokumente:
-                <a href="{% url 'intern:etherpad-create' active_topic.slug attachment.slug %}">
-                    <div class="news-hero-compact">
-                        <div class="news-hero-compact-text">
-                            <p style="margin-bottom: 0rem;">+ neues Etherpad erstellen</p>
-                        </div>
+        <section>
+            <div class="sm:flex flex-row justify-between">
+                <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Etherpad Dokumente:</h2>
+                <!-- <a href="#" class="border border-gray-700 dark:border-gray-300 rounded px-1 py-0.5 hidden sm:block">
+                    <i class="fa-solid fa-plus mr-1"></i>Neues Etherpad erstellen
+                </a> -->
             </div>
+            <div class="documentList rounded divide-y divide-gray-300 dark:divide-gray-600">
+                <a href="{% url 'intern:etherpad-create' active_topic.slug attachment.slug %}" class="flex justify-between">
+                    <h3 class="text-gray-800 dark:text-gray-200"><i class="fa-solid fa-plus fa-fw mr-1"></i>Neues Etherpad erstellen</h2>
                 </a>
 
                 {% for etherpad in etherpads %}
-                <a href="{{ etherpad.etherpad_key }}">
-                    <div class="news-hero-compact">
-                        <div class="news-hero-compact-text">
-                            <p style="margin-bottom: 0rem;">{{ etherpad.title }}</p>
-                        </div>
-                        <div class="news-hero-compact-right">
-                            <p style="margin-bottom: 0rem;">{{ etherpad.date }}</p>
-                        </div>
-                    </div>
+                    <a href="{{ etherpad.etherpad_key }}" class="flex justify-between items-center gap-2">
+                        <h3 class="text-gray-800 dark:text-gray-200">{{ etherpad.title }}</h2>
+                        <span class=" text-gray-700 dark:text-gray-300">{{ etherpad.date }}<span class="ml-2 hidden sm:inline-block"><i class="fas fa-angle-right text-gray-400 dark:text-gray-600"></i></span>
                     </a>
                 {% endfor %}
+            </div>
+        </section>
 
-                Dokumente:
-                <a href="{% url 'intern:file-create' active_topic.slug attachment.slug %}">
-                    <div class="news-hero-compact">
-                        <div class="news-hero-compact-text">
-                            <p style="margin-bottom: 0rem;">+ neue Datei hochladen</p>
-                        </div>
-                    </div>
+        <section>
+            <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100">Dokumente:</h2>
+            <div class="documentList rounded divide-y divide-gray-300 dark:divide-gray-600">
+                <a href="{% url 'intern:file-create' active_topic.slug attachment.slug %}" class="flex justify-between">
+                    <h3 class="text-gray-800 dark:text-gray-200"><i class="fa-solid fa-plus fa-fw mr-1"></i>Neues Dokument hochladen</h2>
                 </a>
 
                 {% for file in files %}
-                <a href="{{ file.file_field.url }}" target="_blank">
-                    <div class="news-hero-compact">
-                        <div class="news-hero-compact-text">
-                            <p style="margin-bottom: 0rem;"><i class="far fa-file"></i> {{ file.title }}</p>
-                        </div>
-                        <div class="news-hero-compact-right">
-                            <p style="margin-bottom: 0rem;">{{ file.date }}</p>
-                        </div>
-                    </div>
+                    <a href="{{ file.file_field.url }}" target="_blank" class="flex justify-between items-center gap-2">
+                        <h3 class="text-gray-800 dark:text-gray-200"><i class="fa-solid fa-file-pdf fa-fw mr-1 hidden sm:inline-block"></i>{{ file.title }}</h2>
+                        <span class=" text-gray-700 dark:text-gray-300">{{ file.date }}<span class="ml-2 hidden sm:inline-block"><i class="fas fa-angle-right text-gray-400 dark:text-gray-600"></i></span>
                     </a>
                 {% endfor %}
             </div>
+        </section>
+
+        <a href="{% url 'intern:attachment-update' active_topic.slug attachment.slug %}" class="btn btn-primary block place-self-end"><i class="fas fa-pen-to-square mr-2"></i>Beschreibung bearbeiten</a>
     </div>
-    </div>
-</div>
+</main>
 {% endblock %}

fet2020/templates/intern/attachment/attachment_create.html

@@ -1,23 +1,45 @@
-{% extends "layout.html" %}
+{% extends 'base.html' %}
 
 {% block content %}
-<div class="grid-container">
-    <div class="grid-x padding-top-1">
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'intern:topic' slug %}">Zurück</a>
-        </div>
-    </div>
-    <hr>
-
-    <h2>Neuen Anhang Ordner erstellen</h2>
-    <div class="grid-x">
-        <div class="cell">
-            <form action="" method="post" enctype="multipart/form-data">
+<!-- Main Content -->
+<main class="container mx-auto w-full px-4 my-8 flex-1">
+    <h1 class="page-title">Anhang Ordner hinzufügen</h1>
+    <div class="w-full h-full flex-1 flex justify-center items-center">
+        <form action="" method="POST" enctype="multipart/form-data" class="w-full max-w-prose sm:px-28 sm:py-4 grid grid-cols-1 gap-y-3 sm:gap-y-6 text-gray-900">
             {% csrf_token %}
-                {{ form }}
-                <input type="submit" class="button" name="btn_input" value="Hinzufügen">
+
+            {% if form.non_field_errors %}
+                <div class="alert alert-danger">
+                    <i class="alert-icon fas fa-check-circle"></i>
+                    <h2 class="alert-title">Fehler:</h2>
+                    <div class="alert-body">{{ form.non_field_errors }}</div>
+                </div>
+            {% endif %}
+
+            <label class="block">
+                <span class="text-gray-700 dark:text-gray-200">{{ form.title.label }}</span>
+                {% if form.title.errors %}
+                    <div class="alert alert-danger">
+                        <div class="alert-body">{{ form.title.errors }}</div>
+                    </div>
+                {% endif %}
+                <input type="text" id="id_title" name="title" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+
+            <label class="block">
+                <span class="text-gray-700 dark:text-gray-200">{{ form.shortterm.label }}</span>
+                {% if form.shortterm.errors %}
+                    <div class="alert alert-danger">
+                        <div class="alert-body">{{ form.shortterm.errors }}</div>
+                    </div>
+                {% endif %}
+                <input type="text" id="id_shortterm" name="shortterm" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+
+            <input type="hidden" name="topic" value="{{ topic.id }}" id="id_topic">
+
+            <input type="submit" class="block btn btn-primary" value="Hinzufügen">
         </form>
     </div>
-    </div>
-</div>
+</main>
 {% endblock %}

fet2020/templates/intern/attachment/attachment_update.html

@@ -1,26 +1,45 @@
-{% extends "layout.html" %}
+{% extends 'base.html' %}
 
 {% block content %}
-<div class="grid-container">
-    <div class="grid-x padding-top-1">
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'intern:attachment' topic_slug slug %}">Zurück</a>
-        </div>
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'admin:intern_attachment_change' attachment.id %}">Anhang Ordner im Admin bearbeiten</a>
-        </div>
-    </div>
-    <hr>
-
-    <h2>Anhang Ordner '{{ attachment.title }}' bearbeiten</h2>
-    <div class="grid-x">
-        <div class="cell">
-            <form action="" method="post" enctype="multipart/form-data">
+<!-- Main Content -->
+<main class="container mx-auto w-full px-4 my-8 flex-1">
+    <h1 class="page-title">Anhang Ordner '{{ attachment.title }}' bearbeiten</h1>
+    <div class="w-full h-full flex-1 flex justify-center items-center">
+        <form action="" method="POST" enctype="multipart/form-data" class="w-full max-w-prose sm:px-28 sm:py-4 grid grid-cols-1 gap-y-3 sm:gap-y-6 text-gray-900">
             {% csrf_token %}
-                {{ form }}
-                <input type="submit" class="button" name="btn_input" value="Bearbeiten">
+
+            {% if form.non_field_errors %}
+                <div class="alert alert-danger">
+                    <i class="alert-icon fas fa-check-circle"></i>
+                    <h2 class="alert-title">Fehler:</h2>
+                    <div class="alert-body">{{ form.non_field_errors }}</div>
+                </div>
+            {% endif %}
+
+            <label class="block">
+                <span class="text-gray-700 dark:text-gray-200">{{ form.title.label }}</span>
+                {% if form.title.errors %}
+                    <div class="alert alert-danger">
+                        <div class="alert-body">{{ form.title.errors }}</div>
+                    </div>
+                {% endif %}
+                <input type="text" id="id_title" name="title" value="{{ attachment.title }}" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+
+            <label class="block">
+                <span class="text-gray-700 dark:text-gray-200">{{ form.shortterm.label }}</span>
+                {% if form.shortterm.errors %}
+                    <div class="alert alert-danger">
+                        <div class="alert-body">{{ form.shortterm.errors }}</div>
+                    </div>
+                {% endif %}
+                <input type="text" id="id_shortterm" name="shortterm" value="{{ attachment.shortterm }}" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+
+            <input type="hidden" name="topic" value="{{ topic.id }}" id="id_topic">
+
+            <input type="submit" class="block btn btn-primary" value="Bearbeiten">
         </form>
     </div>
-    </div>
-</div>
+</main>
 {% endblock %}

fet2020/templates/intern/etherpad_create.html

@@ -1,23 +1,40 @@
-{% extends "layout.html" %}
+{% extends 'base.html' %}
 
 {% block content %}
-<div class="grid-container">
-    <div class="grid-x padding-top-1">
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'intern:attachment' topic_slug slug %}">Zurück</a>
-        </div>
-    </div>
-    <hr>
-
-    <h2>Neues Etherpad erstellen</h2>
-    <div class="grid-x">
-        <div class="cell">
-            <form action="" method="post" enctype="multipart/form-data">
+<!-- Main Content -->
+<main class="container mx-auto w-full px-4 my-8 flex-1">
+    <h1 class="page-title">Etherpad hinzufügen</h1>
+    <div class="w-full h-full flex-1 flex justify-center items-center">
+        <form action="" method="POST" enctype="multipart/form-data" class="w-full max-w-prose sm:px-28 sm:py-4 grid grid-cols-1 gap-y-3 sm:gap-y-6 text-gray-900">
             {% csrf_token %}
-                {{ form }}
-                <input type="submit" class="button" name="btn_input" value="Hinzufügen">
+
+            {% if form.non_field_errors %}
+                <div class="alert alert-danger">
+                    <i class="alert-icon fas fa-check-circle"></i>
+                    <h2 class="alert-title">Fehler:</h2>
+                    <div class="alert-body">{{ form.non_field_errors }}</div>
+                </div>
+            {% endif %}
+
+            <label class="block">
+                <span class="text-gray-700 dark:text-gray-200">{{ form.title.label }}</span>
+                {% if form.title.errors %}
+                    <div class="alert alert-danger">
+                        <div class="alert-body">{{ form.title.errors }}</div>
+                    </div>
+                {% endif %}
+                <input type="text" id="id_title" name="title" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+
+            <label>
+                <span class="text-gray-700 dark:text-gray-200">{{ form.date.label }}</span>
+                <input type="date" id="id_date" name="date" class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+
+            <input type="hidden" name="attachment" value="{{ attachment.id }}" id="id_attachment">
+
+            <input type="submit" class="block btn btn-primary" value="Hinzufügen">
         </form>
     </div>
-    </div>
-</div>
+</main>
 {% endblock %}

fet2020/templates/intern/file_create.html

@@ -1,23 +1,40 @@
-{% extends "layout.html" %}
+{% extends 'base.html' %}
 
 {% block content %}
-<div class="grid-container">
-    <div class="grid-x padding-top-1">
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'intern:attachment' topic_slug slug %}">Zurück</a>
-        </div>
-    </div>
-    <hr>
-
-    <h2>Neue Datei hochladen</h2>
-    <div class="grid-x">
-        <div class="cell">
-            <form action="" method="post" enctype="multipart/form-data">
+<!-- Main Content -->
+<main class="container mx-auto w-full px-4 my-8 flex-1">
+    <h1 class="page-title">Datei hinzufügen</h1>
+    <div class="w-full h-full flex-1 flex justify-center items-center">
+        <form action="" method="POST" enctype="multipart/form-data" class="w-full max-w-prose sm:px-28 sm:py-4 grid grid-cols-1 gap-y-3 sm:gap-y-6 text-gray-900">
             {% csrf_token %}
-                {{ form }}
-                <input type="submit" class="button" name="btn_input" value="Hinzufügen">
+
+            {% if form.non_field_errors %}
+                <div class="alert alert-danger">
+                    <i class="alert-icon fas fa-check-circle"></i>
+                    <h2 class="alert-title">Fehler:</h2>
+                    <div class="alert-body">{{ form.non_field_errors }}</div>
+                </div>
+            {% endif %}
+
+            <label class="block">
+                <span class="text-gray-700 dark:text-gray-200">{{ form.title.label }}</span>
+                {% if form.title.errors %}
+                    <div class="alert alert-danger">
+                        <div class="alert-body">{{ form.title.errors }}</div>
+                    </div>
+                {% endif %}
+                <input type="text" id="id_title" name="title" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+
+            <label>
+                <span class="text-gray-700 dark:text-gray-200">{{ form.file_field.label }}</span>
+                <input type="file" id="id_file_field" name="file_field" class="text-gray-700 dark:text-gray-200 block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+
+            <input type="hidden" name="attachment" value="{{ attachment.id }}" id="id_attachment">
+
+            <input type="submit" class="block btn btn-primary" value="Hinzufügen">
         </form>
     </div>
-    </div>
-</div>
+</main>
 {% endblock %}

fet2020/templates/intern/index.html

@@ -1,85 +1,91 @@
-{% extends "layout.html" %}
+{% extends "base.html" %}
 
 {% block content %}
-<div class="grid-container">
-    <div class="grid-x padding-top-1">
-        {% if request.user.is_authenticated %}
-            <div class="cell large-3 medium-4 small-12">
-                <a class="button" href="{% url 'admin:intern_topicgroup_add' %}">neuen Themenbereich hinzufügen</a>
-            </div>
-        {% endif %}
-    </div>
-
-    {% regroup topic by topic_group as topic_list %}
-    {% for topic in topic_list %}
-        <div class="internheader">
-        <h3>{{ topic.grouper.title }}<a class="headerlink" id="{{ topic.list.0.topic_group.slug }}" href="#{{ topic.list.0.topic_group.slug }}" title="Permalink to {{ topic.grouper }}" style="color: lightgrey;"> #</a></h3>
-        </div>
-
-        {% if topic.grouper.short_description %}
-            {{ topic.grouper.short_description }}
-        {% endif %}
-    
-        <div class="grid-x grid-padding-x">
-        {% for tp in topic.list %}
-            <div class="cell large-2 medium-4 small-6">
-                <a href="{% url 'intern:topic' tp.slug %}">
-                <div class="intern-topic">
-                    <div class="intern-topic-text">
-                    {{ tp.title }}
-                    </div>
-                </div>
-                </a>
+<!-- Main Content -->
+<main class="container mx-auto w-full px-4 my-8 flex-1">
+    <h1 class="page-title">Intern</h1>
+    <div class="flex flex-col gap-y-4 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
+        {% regroup topic by topic_group as topic_group_list %}
+        {% for topic_group in topic_group_list %}
+            <section x-data="{ expandList: $persist(true).as('expandListState-{{ topic_group.grouper.title }}') }">
+                <div class="flex gap-x-6">
+                    <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 cursor-pointer" @click="expandList = ! expandList">
+                        <i class="fa-fw fa-solid fa-angle-right transition transform origin-center"
+                        :class="expandList ? 'rotate-90' : ''"
+                        ></i>
+                        {{ topic_group.grouper.title }}
+                    </h2>
+                    <button class="border border-gray-700 dark:border-gray-300 rounded px-1.5 text-sm hidden sm:block"
+                        x-show="expandList"
+                        x-transition:enter="transition ease-out duration-300"
+                        x-transition:enter-start="transform origin-top opacity-0 -translate-x-6"
+                        x-transition:enter-end="transform origin-top opacity-100 translate-x-0"
+                        x-transition:leave="transition ease-in duration-150"
+                        x-transition:leave-start="transform origin-top opacity-100 translate-x-0"
+                        x-transition:leave-end="transform origin-top opacity-0 -translate-x-6"
+                    ><a href="{% url 'intern:topic-create' topic_group.grouper.slug %}"><i class="fa-solid fa-plus mr-1"></i>Eintrag hinzufügen</a></button>
                 </div>
+                <ul class="ml-7 w-fit" x-show="expandList" x-collapse>
+                    {% for topic in topic_group.list %}
+                        <li><a href="{% url 'intern:topic' topic.slug %}" class="w-full py-1 inline-block">{{ topic.title }}</a></li>
                     {% endfor %}
-            <div class="cell large-2 medium-4 small-6">
-                <a href="{% url 'intern:topic-create' topic.list.0.topic_group.slug %}">
-                <div class="intern-topic">
-                    <div class="intern-topic-text">
-                    +
-                    </div>
-                </div>
+                    <li class="py-1">
+                        <a href="{% url 'intern:topic-create' topic_group.grouper.slug %}" class="border border-gray-700 dark:border-gray-300 rounded px-1.5 py-1 text-sm sm:hidden">
+                            <i class="fa-solid fa-plus mr-1"></i>Eintrag hinzufügen
                         </a>
-            </div>
-        </div>
+                    </li>
+                </ul>
+            </section>
         {% endfor %}
 
         {% for topic_group in empty_topic_groups %}
-        <div class="internheader">
-        <h3>{{ topic_group.title }}<a class="headerlink" id="{{ topic_group.slug }}" href="#{{ topic_group.slug }}" title="Permalink to {{ topic_group.title }}" style="color: lightgrey;"> #</a></h3>
-        </div>
-    
-        <div class="grid-x grid-padding-x">
-            <div class="cell large-2 medium-4 small-6">
-                <a href="{% url 'intern:topic-create' topic_group.slug %}">
-                <div class="intern-topic">
-                    <div class="intern-topic-text">
-                    +
-                    </div>
+            <section x-data="{ expandList: $persist(true).as('expandListState-{{ topic_group.title }}') }">
+                <div class="flex gap-x-6">
+                    <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 cursor-pointer" @click="expandList = ! expandList">
+                        <i class="fa-fw fa-solid fa-angle-right transition transform origin-center"
+                        :class="expandList ? 'rotate-90' : ''"
+                        ></i>
+                        {{ topic_group.title }}
+                    </h2>
+                    <button class="border border-gray-700 dark:border-gray-300 rounded px-1.5 text-sm hidden sm:block"
+                        x-show="expandList"
+                        x-transition:enter="transition ease-out duration-300"
+                        x-transition:enter-start="transform origin-top opacity-0 -translate-x-6"
+                        x-transition:enter-end="transform origin-top opacity-100 translate-x-0"
+                        x-transition:leave="transition ease-in duration-150"
+                        x-transition:leave-start="transform origin-top opacity-100 translate-x-0"
+                        x-transition:leave-end="transform origin-top opacity-0 -translate-x-6"
+                    ><a href="{% url 'intern:topic-create' topic_group.slug %}"><i class="fa-solid fa-plus mr-1"></i>Eintrag hinzufügen</a></button>
                 </div>
+                <ul class="ml-7 w-fit" x-show="expandList" x-collapse>
+                    <li class="py-1">
+                        <a href="{% url 'intern:topic-create' topic_group.slug %}" class="border border-gray-700 dark:border-gray-300 rounded px-1.5 py-1 text-sm sm:hidden">
+                            <i class="fa-solid fa-plus mr-1"></i>Eintrag hinzufügen
                         </a>
-            </div>
-        </div>
+                    </li>
+                </ul>
+            </section>
         {% endfor %}
 
         {% if archive_topic %}
-        <div class="internheader">
-        <h3>Archiv<a class="headerlink" id="archive" href="#archive" title="Permalink to Archiv" style="color: lightgrey;"> #</a></h3>
-        </div>
-    
-        <div class="grid-x grid-padding-x">
-        {% for tp in archive_topic %}
-            <div class="cell large-2 medium-4 small-6">
-                <a href="{% url 'intern:topic' tp.slug %}">
-                <div class="intern-topic">
-                    <div class="intern-topic-text">
-                    {{ tp.title }}
-                    </div>
-                </div>
-                </a>
+            <section x-data="{ expandList: $persist(true).as('expandListState-Archive') }">
+                <div class="flex gap-x-6">
+                    <h2 class="text-lg font-medium text-gray-900 dark:text-gray-100 cursor-pointer" @click="expandList = ! expandList">
+                        <i class="fa-fw fa-solid fa-angle-right transition transform origin-center"
+                        :class="expandList ? 'rotate-90' : ''"
+                        ></i>
+                        Archiv
+                    </h2>
                 </div>
+                <ul class="ml-7 w-fit" x-show="expandList" x-collapse>
+                    {% for topic in archive_topic %}
+                        <li><a href="{% url 'intern:topic' topic.slug %}" class="w-full py-1 inline-block">{{ topic.title }}</a></li>
                     {% endfor %}
-        </div>
+                </ul>
+            </section>
         {% endif %}
-</div>
+
+        <a href="{% url 'admin:intern_topicgroup_add' %}" class="btn btn-primary block w-full"><i class="fas fa-plus-square mr-2"></i>Neuer Themenbereich</a>
+    </div>
+</main>
 {% endblock %}

fet2020/templates/intern/task_create.html

@@ -1,23 +1,68 @@
-{% extends 'layout.html' %}
+{% extends 'base.html' %}
 
 {% block content %}
-<div class="grid-container">
-    <div class="grid-x padding-top-1">
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'intern:topic' slug %}">Zurück</a>
-        </div>
-    </div>
-    <hr>
-
-    <h2>Neuen Task hinzufügen</h2>
-    <div class="grid-x">
-        <div class="cell">
-            <form action="" method="post">
+<!-- Main Content -->
+<main class="container mx-auto w-full px-4 my-8 flex-1">
+    <h1 class="page-title">Task hinzufügen</h1>
+    <div class="w-full h-full flex-1 flex justify-center items-center">
+        <form action="" method="POST" enctype="multipart/form-data" class="w-full max-w-prose sm:px-28 sm:py-4 grid grid-cols-1 gap-y-3 sm:gap-y-6 text-gray-900">
             {% csrf_token %}
-                {{ form }}
-                <input type="submit" class="button" name="btn_input" value="Hinzufügen">
+
+            {% if form.non_field_errors %}
+                <div class="alert alert-danger">
+                    <i class="alert-icon fas fa-check-circle"></i>
+                    <h2 class="alert-title">Fehler:</h2>
+                    <div class="alert-body">{{ form.non_field_errors }}</div>
+                </div>
+            {% endif %}
+
+            <label class="block">
+                <span class="text-gray-700 dark:text-gray-200">{{ form.title.label }}</span>
+                {% if form.title.errors %}
+                    <div class="alert alert-danger">
+                        <div class="alert-body">{{ form.title.errors }}</div>
+                    </div>
+                {% endif %}
+                <input type="text" id="id_title" name="title" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+
+            <label class="block">
+                <span class="text-gray-700 dark:text-gray-200">{{ form.shortterm.label }}</span>
+                {% if form.shortterm.errors %}
+                    <div class="alert alert-danger">
+                        <div class="alert-body">{{ form.shortterm.errors }}</div>
+                    </div>
+                {% endif %}
+                <input type="text" id="id_shortterm" name="shortterm" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+
+            <label>
+                <span class="text-gray-700 dark:text-gray-200">{{ form.due_date.label }}</span>
+                <input type="date" id="id_due_date" name="due_date" class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
+            </label>
+
+            <label>
+                <span class="text-gray-700 dark:text-gray-200">{{ form.assigned_to.label }}</span>
+                {% if form.assigned_to.errors %}
+                    <div class="alert alert-danger">
+                        <div class="alert-body">{{ form.assigned_to.errors }}</div>
+                    </div>
+                {% endif %}
+                <select id="id_assigned_to" name="assigned_to" class="block w-full mt-1 rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50">
+                    {% for elem in form.assigned_to %}
+                        {% if forloop.first %}
+                            <option value="">Alle</option>
+                        {% else %}
+                            {{ elem }}
+                        {% endif %}
+                    {% endfor %}
+                </select>
+            </label>
+
+            <input type="hidden" name="task_list" value="{{ task_list.id }}" id="id_task_list">
+
+            <input type="submit" class="block btn btn-primary" value="Hinzufügen">
         </form>
     </div>
-    </div>
-</div>
+</main>
 {% endblock %}

fet2020/templates/intern/topic.html

@@ -1,71 +1,47 @@
-{% extends "layout.html" %}
+{% extends "base.html" %}
 
 {% block content %}
-<div class="grid-container">
-    <div class="grid-x grid-padding-x">
-        <div class="cell padding-top-1">
-            <h3>
-            <a href="{% url 'intern:index' %}#{{ active_topic.topic_group.slug }}">{{ active_topic.topic_group.title }}</a>
-            / {{ active_topic.title }}
-            </h3>
-        </div>
-    </div>
-
-    <div class="intern-hero">
-        <div class="grid-x padding-top-1 padding-left-1 padding-right-1">
-            <div class="cell large-3 medium-4 small-10">
-                <a class="button" href="{% url 'intern:topic-update' active_topic.slug %}">Thema bearbeiten</a>
-            </div>
-            {% if active_topic.task_list %}
-                <div class="cell large-3 medium-4 small-10">
-                    <a class="button" href="{% url 'intern:task-create' active_topic.slug %}">neuen Task hinzufügen</a>
-                </div>
-            {% endif %}
-        </div>
+<!-- Main Content -->
+<main class="container mx-auto w-full px-4 my-8 flex-1">
+    <h1 class="page-title">Intern</h1>
+    <div class="flex flex-col gap-y-8 max-w-prose mx-auto text-gray-700 dark:text-gray-300">
+        <aside class="flex gap-2 flex-wrap align-bottom text-sm sm:text-base text-gray-600 dark:text-gray-300">
+            <a class="underline hover:text-gray-900 dark:hover:text-gray-100" href="{% url 'intern:index' %}#{{ active_topic.topic_group.slug }}">{{ active_topic.topic_group.title }}</a>
+            <span><i class="fa-solid fa-angle-right"></i></span>
+            <span class="cursor-default">{{ active_topic.title }}</span>
+        </aside>
 
+        <!-- TODO: description -->
         {% if active_topic.description %}
-        <div class="padding-top-1 padding-left-1 padding-right-1">
+            <div class="db-page-content-left">
                 {{ active_topic.description|safe }}
-            <hr>
             </div>
         {% endif %}
 
-        {% if tasks %}
-        <div class="grid-x grid-padding-x">
-            <div class="cell">offene Tasks:</div>
+        <!-- TODO: tasks -->
 
-            {% for task in tasks %}
-            <div class="cell">
-                <a href="{% url 'tasks:task-detail' task.id %}">{{ task }}</a>
-            </div>
-            {% endfor %}
-        </div>
-        <hr>
-        {% endif %}
-
-        <div class="grid-x grid-padding-x">
+        <ul class="flex flex-col gap-1 max-w-fit">
             {% for attachment in attachments %}
-            <div class="cell large-2 medium-4 small-6">
-                <a href="{% url 'intern:attachment' active_topic.slug attachment.slug %}">
-                <div class="intern-topic">
-                    <div class="intern-topic-text">
-                    {{ attachment.title }}
-                    </div>
-                </div>
-                </a>
-            </div>
+                <li><a href="{% url 'intern:attachment' active_topic.slug attachment.slug %}" class="py-1 inline-block">{{ attachment.title }}</a></li>
             {% endfor %}
 
-            <div class="cell large-2 medium-4 small-6">
-                <a href="{% url 'intern:attachment-create' active_topic.slug %}">
-                <div class="intern-topic">
-                    <div class="intern-topic-text">
-                    +
-                    </div>
-                </div>
+            <li class="mt-2">
+                <a href="{% url 'intern:attachment-create' active_topic.slug %}" class="border border-gray-700 dark:border-gray-300 rounded px-1.5 py-1">
+                    <i class="fa-solid fa-plus mr-1"></i>Eintrag hinzufügen
                 </a>
+            </li>
+        </ul>
+        
+        <section class="flex flex-col sm:flex-row justify-end gap-4">
+            <a href="{% url 'intern:topic-update' active_topic.slug %}" class="btn btn-primary block"><i class="fas fa-pen-to-square mr-2"></i>Thema bearbeiten</a>
+            {% if active_topic.task_list %}
+                <a href="{% url 'intern:task-create' active_topic.slug %}" class="btn btn-primary block"><i class="fas fa-plus-square mr-2"></i>Task hinzufügen</a>
+            {% endif %}
+        </section>
     </div>
-        </div>
-    </div>
-</div>
+</main>
+
+
+
+
 {% endblock %}

fet2020/templates/intern/topic/topic_create.html

@@ -1,23 +1,45 @@
-{% extends "layout.html" %}
+{% extends 'base.html' %}
 
 {% block content %}
-<div class="grid-container">
-    <div class="grid-x padding-top-1">
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'intern:index' %}">Zurück</a>
-        </div>
-    </div>
-    <hr>
-
-    <h2>Neues Thema erstellen</h2>
-    <div class="grid-x">
-        <div class="cell">
-            <form action="" method="post" enctype="multipart/form-data">
+<!-- Main Content -->
+<main class="container mx-auto w-full px-4 my-8 flex-1">
+    <h1 class="page-title">Thema hinzufügen</h1>
+    <div class="w-full h-full flex-1 flex justify-center items-center">
+        <form action="" method="POST" enctype="multipart/form-data" class="w-full max-w-prose sm:px-28 sm:py-4 grid grid-cols-1 gap-y-3 sm:gap-y-6 text-gray-900">
             {% csrf_token %}
-                {{ form }}
-                <input type="submit" class="button" name="btn_input" value="Hinzufügen">
+
+            {% if form.non_field_errors %}
+                <div class="alert alert-danger">
+                    <i class="alert-icon fas fa-check-circle"></i>
+                    <h2 class="alert-title">Fehler:</h2>
+                    <div class="alert-body">{{ form.non_field_errors }}</div>
+                </div>
+            {% endif %}
+
+            <label class="block">
+                <span class="text-gray-700 dark:text-gray-200">{{ form.title.label }}</span>
+                {% if form.title.errors %}
+                    <div class="alert alert-danger">
+                        <div class="alert-body">{{ form.title.errors }}</div>
+                    </div>
+                {% endif %}
+                <input type="text" id="id_title" name="title" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+
+            <label class="block">
+                <span class="text-gray-700 dark:text-gray-200">{{ form.shortterm.label }}</span>
+                {% if form.shortterm.errors %}
+                    <div class="alert alert-danger">
+                        <div class="alert-body">{{ form.shortterm.errors }}</div>
+                    </div>
+                {% endif %}
+                <input type="text" id="id_shortterm" name="shortterm" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+
+            <input type="hidden" name="topic_group" value="{{ topic_group.id }}" id="id_topic_group">
+
+            <input type="submit" class="block btn btn-primary" value="Hinzufügen">
         </form>
     </div>
-    </div>
-</div>
+</main>
 {% endblock %}

fet2020/templates/intern/topic/topic_update.html

@@ -1,26 +1,45 @@
-{% extends "layout.html" %}
+{% extends 'base.html' %}
 
 {% block content %}
-<div class="grid-container">
-    <div class="grid-x padding-top-1">
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'intern:topic' slug %}">Zurück</a>
-        </div>
-        <div class="cell large-3 medium-4 small-12">
-            <a class="button" href="{% url 'admin:intern_topic_change' topic.id %}">Thema im Admin bearbeiten</a>
-        </div>
-    </div>
-    <hr>
-
-    <h2>Thema '{{ topic.title }}' bearbeiten</h2>
-    <div class="grid-x">
-        <div class="cell">
-            <form action="" method="post" enctype="multipart/form-data">
+<!-- Main Content -->
+<main class="container mx-auto w-full px-4 my-8 flex-1">
+    <h1 class="page-title">Thema '{{ topic.title }}' bearbeiten</h1>
+    <div class="w-full h-full flex-1 flex justify-center items-center">
+        <form action="" method="POST" enctype="multipart/form-data" class="w-full max-w-prose sm:px-28 sm:py-4 grid grid-cols-1 gap-y-3 sm:gap-y-6 text-gray-900">
             {% csrf_token %}
-                {{ form }}
-                <input type="submit" class="button" name="btn_input" value="Bearbeiten">
+
+            {% if form.non_field_errors %}
+                <div class="alert alert-danger">
+                    <i class="alert-icon fas fa-check-circle"></i>
+                    <h2 class="alert-title">Fehler:</h2>
+                    <div class="alert-body">{{ form.non_field_errors }}</div>
+                </div>
+            {% endif %}
+
+            <label class="block">
+                <span class="text-gray-700 dark:text-gray-200">{{ form.title.label }}</span>
+                {% if form.title.errors %}
+                    <div class="alert alert-danger">
+                        <div class="alert-body">{{ form.title.errors }}</div>
+                    </div>
+                {% endif %}
+                <input type="text" id="id_title" name="title" value="{{ topic.title }}" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+
+            <label class="block">
+                <span class="text-gray-700 dark:text-gray-200">{{ form.shortterm.label }}</span>
+                {% if form.shortterm.errors %}
+                    <div class="alert alert-danger">
+                        <div class="alert-body">{{ form.shortterm.errors }}</div>
+                    </div>
+                {% endif %}
+                <input type="text" id="id_shortterm" name="shortterm" value="{{ topic.shortterm }}" class="mt-1 block w-full rounded-md border-gray-300 dark:border-none shadow-sm focus:border-none focus:ring focus:ring-blue-200 dark:focus:ring-sky-700 focus:ring-opacity-50" required>
+            </label>
+
+            <input type="hidden" name="topic_group" value="{{ topic.topic_group.id }}" id="id_topic_group">
+
+            <input type="submit" class="block btn btn-primary" value="Bearbeiten">
         </form>
     </div>
-    </div>
-</div>
+</main>
 {% endblock %}