From 4ab546bd8eb6bc7875a6f1173ad5cbe539c17601 Mon Sep 17 00:00:00 2001
From: moanos <julian-samuel@gebuehr.net>
Date: Sun, 16 Nov 2025 16:17:19 +0100
Subject: [PATCH] feat: add cover for images and adoption process if inactive

---
 src/fellchensammlung/models.py                | 20 ++++++++
 .../static/fellchensammlung/css/main.scss     | 51 ++++++++++++++-----
 .../details/detail-adoption-notice.html       |  3 ++
 .../partials/adoption_process/base.html       |  3 ++
 4 files changed, 65 insertions(+), 12 deletions(-)

diff --git a/src/fellchensammlung/models.py b/src/fellchensammlung/models.py
index 68f889e..7f73b4a 100644
--- a/src/fellchensammlung/models.py
+++ b/src/fellchensammlung/models.py
@@ -541,6 +541,13 @@ class AdoptionNotice(models.Model):
     def _values_of(list_of_enums):
         return list(map(lambda x: x[0], list_of_enums))
 
+    @property
+    def status_category(self):
+        ansc = AdoptionNoticeStatusChoices
+        for status_category in [ansc.Active, ansc.Disabled, ansc.Closed, ansc.AwaitingAction]:
+            if self.adoption_notice_status in self._values_of(status_category.choices):
+                return status_category.__name__.lower()
+
     @property
     def is_active(self):
         return self.adoption_notice_status in self._values_of(AdoptionNoticeStatusChoices.Active.choices)
@@ -557,6 +564,19 @@ class AdoptionNotice(models.Model):
     def is_awaiting_action(self):
         return self.adoption_notice_status in self._values_of(AdoptionNoticeStatusChoices.AwaitingAction.choices)
 
+    @property
+    def status_description_short(self):
+        if self.is_active:
+            return _("Vermittlung aktiv")
+        elif self.is_disabled:
+            return _("Vermittlung gesperrt")
+        elif self.is_closed:
+            return _("Vermittlung geschlossen")
+        elif self.is_awaiting_action:
+            return _("Wartet auf Freigabe von Moderator*innen")
+        else:
+            raise NotImplementedError()
+
     @property
     def status_description(self):
         return AdoptionNoticeStatusChoicesDescriptions.mapping[self.adoption_notice_status]
diff --git a/src/fellchensammlung/static/fellchensammlung/css/main.scss b/src/fellchensammlung/static/fellchensammlung/css/main.scss
index e24d5ab..151c927 100644
--- a/src/fellchensammlung/static/fellchensammlung/css/main.scss
+++ b/src/fellchensammlung/static/fellchensammlung/css/main.scss
@@ -245,6 +245,34 @@ IMAGES
   flex: 1;
 }
 
+.cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(192, 192, 192, 0.75);
+  z-index: 99;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  transition: opacity 500ms;
+  border-radius: inherit; // ensure border radius of cards is followed, see https://css-tricks.com/preventing-child-background-overflow-with-inherited-border-radii/
+}
+
+.cover:hover {
+  transition: opacity 500ms;
+  opacity: 0;
+
+  // For being able to click the image and for accessibility the cover should have display: none;
+  // This is accepted by W3C: https://front-end.social/@mia/109433817951030826
+  // However this does not yet seem to be supported to be animated by browsers.
+  // Chrome claims to have shipped it: https://chromestatus.com/feature/5154958272364544
+  // However I couldn't get it to work there too.
+  // display: none;
+  // transition: opacity 1000ms, display 100ms;
+}
 
 /**
 AN Cards
@@ -322,11 +350,10 @@ AN Cards
 }
 
 
-
 .notification-container {
-    display: inline-block;
-    position: relative;
-    padding: 0;
+  display: inline-block;
+  position: relative;
+  padding: 0;
 }
 
 .notification-label {
@@ -335,16 +362,16 @@ AN Cards
 
 /* Make the badge float in the top right corner of the button */
 .notification-badge {
-    background-color: #fa3e3e;
-    border-radius: 2px;
-    color: white;
+  background-color: #fa3e3e;
+  border-radius: 2px;
+  color: white;
 
-    padding: 1px 3px;
-    font-size: 8px;
+  padding: 1px 3px;
+  font-size: 8px;
 
-    position: absolute; /* Position the badge within the relatively positioned button */
-    top: 0;
-    right: 0;
+  position: absolute; /* Position the badge within the relatively positioned button */
+  top: 0;
+  right: 0;
 }
 
 
diff --git a/src/fellchensammlung/templates/fellchensammlung/details/detail-adoption-notice.html b/src/fellchensammlung/templates/fellchensammlung/details/detail-adoption-notice.html
index 9945405..5db920a 100644
--- a/src/fellchensammlung/templates/fellchensammlung/details/detail-adoption-notice.html
+++ b/src/fellchensammlung/templates/fellchensammlung/details/detail-adoption-notice.html
@@ -164,6 +164,9 @@
                 {% if adoption_notice.get_photos %}
                     <div class="column block">
                         <div class="card">
+                            {% if not adoption_notice.is_active %}
+                                <div class="cover">{{ adoption_notice.status_description_short }}</div>
+                            {% endif %}
                             <div class="grid card-content">
                                 <div class="gallery">
                                     {% with photo=adoption_notice.get_photos.0 %}
diff --git a/src/fellchensammlung/templates/fellchensammlung/partials/adoption_process/base.html b/src/fellchensammlung/templates/fellchensammlung/partials/adoption_process/base.html
index 6d37813..3cdec1f 100644
--- a/src/fellchensammlung/templates/fellchensammlung/partials/adoption_process/base.html
+++ b/src/fellchensammlung/templates/fellchensammlung/partials/adoption_process/base.html
@@ -7,6 +7,9 @@
             {% translate 'Adoptionsprozess' %}
         </h2>
     </div>
+    {% if not adoption_notice.is_active %}
+        <div class="cover">{{ adoption_notice.status_description_short }}</div>
+    {% endif %}
     <div class="card-content">
         {% include adoption_process_template %}
     </div>