From 9def90daa78656ed07b5b9dc03e07ac858b686dc Mon Sep 17 00:00:00 2001
From: philipp <philipp@hofer.link>
Date: Fri, 19 Apr 2024 12:06:24 +0200
Subject: [PATCH] show information that people should mark msgs as read if
 there are more than 10 unread msgs

---
 templates/includes/macros.html.tera | 28 ++++++++++++++--------------
 templates/index.html.tera           | 14 ++++++++++++--
 2 files changed, 26 insertions(+), 16 deletions(-)

diff --git a/templates/includes/macros.html.tera b/templates/includes/macros.html.tera
index 59660f2..34176c3 100644
--- a/templates/includes/macros.html.tera
+++ b/templates/includes/macros.html.tera
@@ -35,20 +35,20 @@
             </div>
             <div class="flex items-center">
                 {% if loggedin_user.amount_unread_notifications > 0 %}
-                    <a href="/#notification" class="relative inline-flex items-end ms-2 me-3">
-                      <svg 
-                            height="20"
-                            width="24"
-                            aria-hidden="true"
-                            xmlns="http://www.w3.org/2000/svg"
-                            fill="currentColor"
-                            viewBox="0 0 20 24">
-                          <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
-                          <path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
-                      </svg>
-                      <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 }}
-                      </small>
+                    <a href="/#notification"
+                       class="relative inline-flex items-end ms-2 me-3">
+                        <svg height="20"
+                             width="24"
+                             aria-hidden="true"
+                             xmlns="http://www.w3.org/2000/svg"
+                             fill="currentColor"
+                             viewBox="0 0 20 24">
+                            <path d="M1.5 8.67v8.58a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V8.67l-8.928 5.493a3 3 0 0 1-3.144 0L1.5 8.67Z" />
+                            <path d="M22.5 6.908V6.75a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3v.158l9.714 5.978a1.5 1.5 0 0 0 1.572 0L22.5 6.908Z" />
+                        </svg>
+                        <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 }}
+                        </small>
                     </a>
                 {% endif %}
                 <a href="#"
diff --git a/templates/index.html.tera b/templates/index.html.tera
index 3c66d87..84b239d 100644
--- a/templates/index.html.tera
+++ b/templates/index.html.tera
@@ -2,7 +2,11 @@
 {% extends "base" %}
 {% block content %}
     <div class="max-w-screen-lg w-full">
-        <h1 class="h1">Ruder<wbr/>assistent</h1>
+        <h1 class="h1">
+            Ruder
+            <wbr />
+            assistent
+        </h1>
         <div class="grid gap-3 my-5">
             <div class="m-auto">
                 <a href="/planned"
@@ -11,9 +15,15 @@
                     <span class="text-xl px-3">Geplante Ausfahrten</span>
                 </a>
             </div>
-            <div id="notification" 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">
                 <h2 class="h2">Nachrichten</h2>
+                {% if notifications | length > 10 %}
+                    <div class="text-yellow-800 dark:text-yellow-300 text-center p-3">
+                        Du hast viele ungelesene Benachrichtigungen. Um deine Oberfläche übersichtlich zu halten und wichtige Updates nicht zu verpassen, nimm dir bitte einen Moment Zeit, sie zu überprüfen und als gelesen zu markieren (&#10003;).
+                    </div>
+                {% endif %}
                 <div class="divide-y">
                     {% for notification in notifications %}
                         {% if not notification.read_at %}