feat: add cover for images and adoption process if inactive

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]

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;
 }
 
 

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 %}

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>