notification-badge #401

Merged
philipp merged 16 commits from notification-badge into main 2024-04-19 16:36:22 +02:00
2 changed files with 24 additions and 24 deletions
Showing only changes of commit c528b8831a - Show all commits

View File

@ -28,11 +28,14 @@
<header class="bg-primary-900 text-white flex justify-center p-3 fixed w-full z-10"> <header class="bg-primary-900 text-white flex justify-center p-3 fixed w-full z-10">
<div class="max-w-screen-xl w-full flex justify-between items-center"> <div class="max-w-screen-xl w-full flex justify-between items-center">
<div class="w-1/3 truncate"> <div class="w-1/3 truncate">
<a class="flex items-center" href="/"> <a href="/">
{{ loggedin_user.name }} {{ loggedin_user.name }}
</a>
</div>
<div class="flex items-center">
{% if loggedin_user.amount_unread_notifications > 0 %} {% if loggedin_user.amount_unread_notifications > 0 %}
<span class="relative inline-flex items-end ms-1"> <a href="/#notification" class="relative inline-flex items-end ms-2 me-3">
<svg <svg
height="20" height="20"
width="24" width="24"
@ -46,11 +49,8 @@
<small class="bg-red-500 rounded-full w-3 h-3 inline-flex justify-center items-center absolute p-1 notification"> <small class="bg-red-500 rounded-full w-3 h-3 inline-flex justify-center items-center absolute p-1 notification">
{{ loggedin_user.amount_unread_notifications }} {{ loggedin_user.amount_unread_notifications }}
</small> </small>
</span>
{% endif %}
</a> </a>
</div> {% endif %}
<div>
<a href="#" <a href="#"
class="inline-flex justify-center rounded-md bg-primary-600 mx-1 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer" class="inline-flex justify-center rounded-md bg-primary-600 mx-1 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer"
data-sidebar="true" data-sidebar="true"

View File

@ -2,7 +2,7 @@
{% extends "base" %} {% extends "base" %}
{% block content %} {% block content %}
<div class="max-w-screen-lg w-full"> <div class="max-w-screen-lg w-full">
<h1 class="h1">Ruderassistent</h1> <h1 class="h1">Ruder<wbr/>assistent</h1>
<div class="grid gap-3 my-5"> <div class="grid gap-3 my-5">
<div class="m-auto"> <div class="m-auto">
<a href="/planned" <a href="/planned"
@ -11,7 +11,7 @@
<span class="text-xl px-3">Geplante Ausfahrten</span> <span class="text-xl px-3">Geplante Ausfahrten</span>
</a> </a>
</div> </div>
<div class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5" <div id="notification" class="bg-white dark:bg-primary-900 text-black dark:text-white rounded-md block shadow mt-5"
role="alert"> role="alert">
<h2 class="h2">Nachrichten</h2> <h2 class="h2">Nachrichten</h2>
<div class="divide-y"> <div class="divide-y">
@ -27,7 +27,7 @@
<div> <div>
{% if not notification.read_at %} {% if not notification.read_at %}
<a href="/notification/{{ notification.id }}/read" class="inline-block"> <a href="/notification/{{ notification.id }}/read" class="inline-block">
<button class="btn btn-alert bg-red-100 dark:bg-red-900" type="button"> <button class="btn btn-primary" type="button">
&#10003; &#10003;
<span class="sr-only">Notification gelesen</span> <span class="sr-only">Notification gelesen</span>
</button> </button>
@ -38,8 +38,8 @@
{% endif %} {% endif %}
{% endfor %} {% endfor %}
</div> </div>
<details class="py-3 bg-gray-200 dark:bg-primary-950 rounded-b-md"> <details class="py-3 border-t rounded-b-md">
<summary class="px-3">Vergangene Nachrichten (14 Tage)</summary> <summary class="px-3 cursor-pointer">Vergangene Nachrichten (14 Tage)</summary>
<div class="divide-y text-sm"> <div class="divide-y text-sm">
{% for notification in notifications %} {% for notification in notifications %}
{% if notification.read_at %} {% if notification.read_at %}