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,7 +350,6 @@ AN Cards
 }
 
 
-
 .notification-container {
   display: inline-block;
   position: relative;

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>