From 982fb1653b3c1253aac9366733f14c22c94d2537 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thea=20Sch=C3=B6bl?= <wulkanat@gmail.com>
Date: Fri, 24 Feb 2023 10:50:38 +0000
Subject: [PATCH] feat: add content to empty catalogs

---
 .../data/detail/data-detail-content.html      |  4 +-
 .../data/detail/data-detail-content.scss      | 61 +++++++++++++------
 src/app/modules/data/detail/data-detail.scss  | 10 ++-
 .../data/list/simple-data-list.component.ts   |  7 +--
 .../modules/data/list/simple-data-list.html   |  5 +-
 .../modules/data/list/simple-data-list.scss   | 22 +++++++
 .../types/catalog/catalog-detail-content.html | 16 +++++
 .../types/catalog/catalog-detail-content.scss | 14 +++++
 .../types/place/place-detail-content.html     | 10 +--
 .../types/place/place-detail-content.scss     | 19 +++++-
 src/assets/i18n/de.json                       |  3 +-
 src/assets/i18n/en.json                       |  3 +-
 src/theme/util/_mixins.scss                   | 15 ++++-
 13 files changed, 155 insertions(+), 34 deletions(-)

diff --git a/src/app/modules/data/detail/data-detail-content.html b/src/app/modules/data/detail/data-detail-content.html
index 93062257..9dff31b9 100644
--- a/src/app/modules/data/detail/data-detail-content.html
+++ b/src/app/modules/data/detail/data-detail-content.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2023 StApps
   ~ This program is free software: you can redistribute it and/or modify it
   ~ under the terms of the GNU General Public License as published by the Free
   ~ Software Foundation, version 3.
@@ -28,7 +28,7 @@
 <stapps-origin-detail [origin]="item.origin"></stapps-origin-detail>
 
 <ng-template #defaultContent>
-  <div [ngSwitch]="item.type">
+  <div [ngSwitch]="item.type" class="content-switch">
     <stapps-article-detail-content
       [item]="$any(item)"
       *ngSwitchCase="'article'"
diff --git a/src/app/modules/data/detail/data-detail-content.scss b/src/app/modules/data/detail/data-detail-content.scss
index 3f00b3d8..cf4b23e8 100644
--- a/src/app/modules/data/detail/data-detail-content.scss
+++ b/src/app/modules/data/detail/data-detail-content.scss
@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -14,6 +14,48 @@
  */
 @import 'src/theme/util/_mixins.scss';
 
+stapps-origin-detail {
+  // css hack to make the element stick to the bottom of the scroll container even
+  // when the content is not filling it
+  position: sticky;
+  top: 100vh;
+}
+
+.content-switch {
+  // prevent a scrollbar from appearing in some cases
+  margin-block-start: -1px !important;
+  flex: 1;
+  display: flex;
+  padding: 0 var(--spacing-md);
+
+  ::ng-deep > * {
+    display: flex;
+    height: fit-content;
+    width: 100%;
+    flex-direction: column;
+    @include border-radius-in-parallax(var(--border-radius-default));
+    overflow: hidden;
+    position: relative;
+    margin-block-start: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1);
+    margin-block-end: var(--spacing-xl);
+    background-color: var(--ion-color-primary-contrast);
+    @include content-padding();
+
+    & > ion-thumbnail {
+      background: var(--ion-color-primary);
+    }
+
+    // Firefox doesn't support this yet...
+    @supports selector(:has(*)) {
+      & > .expand-when-space,
+      &:has(> .expand-when-space) {
+        height: unset;
+        flex: 1;
+      }
+    }
+  }
+}
+
 :host ::ng-deep {
   ion-slides.work-locations {
     ion-slide {
@@ -49,21 +91,4 @@
     padding-top: 0;
     padding-bottom: 0;
   }
-
-  > div {
-    padding: 0 var(--spacing-md);
-
-    & > * {
-      display: block;
-      @include border-radius-in-parallax(var(--border-radius-default));
-      overflow: hidden;
-      position: relative;
-      top: calc((var(--header-spacing-bottom) - var(--spacing-xl)) * -1);
-      background-color: var(--ion-color-primary-contrast);
-
-      & > ion-thumbnail {
-        background: var(--ion-color-primary);
-      }
-    }
-  }
 }
diff --git a/src/app/modules/data/detail/data-detail.scss b/src/app/modules/data/detail/data-detail.scss
index b996acb0..e0bb2c37 100644
--- a/src/app/modules/data/detail/data-detail.scss
+++ b/src/app/modules/data/detail/data-detail.scss
@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -25,6 +25,14 @@
   }
 }
 
+ion-content > div > stapps-data-detail-content,
+ion-content > div {
+  min-height: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
 ::ng-deep {
   ion-slides.work-locations {
     ion-slide {
diff --git a/src/app/modules/data/list/simple-data-list.component.ts b/src/app/modules/data/list/simple-data-list.component.ts
index 4c962561..9e4b0f80 100644
--- a/src/app/modules/data/list/simple-data-list.component.ts
+++ b/src/app/modules/data/list/simple-data-list.component.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -28,9 +28,6 @@ import {DataListContext} from './data-list.component';
   styleUrls: ['simple-data-list.scss'],
 })
 export class SimpleDataListComponent implements OnInit, OnDestroy {
-  /**
-   * All SCThings to display
-   */
   @Input() items?: Promise<SCThings[] | undefined>;
 
   /**
@@ -45,6 +42,8 @@ export class SimpleDataListComponent implements OnInit, OnDestroy {
    */
   @Input() listHeader?: string;
 
+  @Input() emptyListMessage?: string;
+
   @ContentChild(TemplateRef) listItemTemplateRef: TemplateRef<DataListContext<SCThings>>;
 
   /**
diff --git a/src/app/modules/data/list/simple-data-list.html b/src/app/modules/data/list/simple-data-list.html
index dad3e8d5..a6ca7720 100644
--- a/src/app/modules/data/list/simple-data-list.html
+++ b/src/app/modules/data/list/simple-data-list.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2023 StApps
   ~ This program is free software: you can redistribute it and/or modify it
   ~ under the terms of the GNU General Public License as published by the Free
   ~ Software Foundation, version 3.
@@ -22,6 +22,9 @@
       ></ng-container>
     </ng-container>
   </ion-list>
+  <ion-label class="empty-list-message" *ngIf="emptyListMessage && (items | async)?.length === 0">{{
+    emptyListMessage
+  }}</ion-label>
 </ng-container>
 <ng-template #loading>
   <ion-list>
diff --git a/src/app/modules/data/list/simple-data-list.scss b/src/app/modules/data/list/simple-data-list.scss
index e69de29b..8fb8b57f 100644
--- a/src/app/modules/data/list/simple-data-list.scss
+++ b/src/app/modules/data/list/simple-data-list.scss
@@ -0,0 +1,22 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+.empty-list-message {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--ion-color-medium);
+  min-height: 300px;
+}
diff --git a/src/app/modules/data/types/catalog/catalog-detail-content.html b/src/app/modules/data/types/catalog/catalog-detail-content.html
index 77fe4f14..e67413ac 100644
--- a/src/app/modules/data/types/catalog/catalog-detail-content.html
+++ b/src/app/modules/data/types/catalog/catalog-detail-content.html
@@ -1,6 +1,22 @@
+<!--
+  ~ Copyright (C) 2023 StApps
+  ~ This program is free software: you can redistribute it and/or modify it
+  ~ under the terms of the GNU General Public License as published by the Free
+  ~ Software Foundation, version 3.
+  ~
+  ~ This program is distributed in the hope that it will be useful, but WITHOUT
+  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+  ~ more details.
+  ~
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
+  -->
+
 <stapps-simple-data-list
   id="simple-data-list"
   [items]="items"
   [singleType]="true"
   [listHeader]="'type' | thingTranslate: item | titlecase"
+  [emptyListMessage]="'catalog.detail.EMPTY_CATALOG' | translate"
 ></stapps-simple-data-list>
diff --git a/src/app/modules/data/types/catalog/catalog-detail-content.scss b/src/app/modules/data/types/catalog/catalog-detail-content.scss
index e69de29b..bc381711 100644
--- a/src/app/modules/data/types/catalog/catalog-detail-content.scss
+++ b/src/app/modules/data/types/catalog/catalog-detail-content.scss
@@ -0,0 +1,14 @@
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
diff --git a/src/app/modules/data/types/place/place-detail-content.html b/src/app/modules/data/types/place/place-detail-content.html
index 50c6ab85..dcbe89ae 100644
--- a/src/app/modules/data/types/place/place-detail-content.html
+++ b/src/app/modules/data/types/place/place-detail-content.html
@@ -1,5 +1,5 @@
 <!--
-  ~ Copyright (C) 2022 StApps
+  ~ Copyright (C) 2023 StApps
   ~ This program is free software: you can redistribute it and/or modify it
   ~ under the terms of the GNU General Public License as published by the Free
   ~ Software Foundation, version 3.
@@ -41,7 +41,9 @@
   </ion-card>
 </ng-container>
 <ng-container *ngIf="hasValidLocation">
-  <ion-card class="map-widget">
-    <stapps-map-widget [place]="item" expandable="true"></stapps-map-widget>
-  </ion-card>
+  <stapps-map-widget
+    class="map-widget expand-when-space"
+    [place]="item"
+    expandable="true"
+  ></stapps-map-widget>
 </ng-container>
diff --git a/src/app/modules/data/types/place/place-detail-content.scss b/src/app/modules/data/types/place/place-detail-content.scss
index efd2774c..15281020 100644
--- a/src/app/modules/data/types/place/place-detail-content.scss
+++ b/src/app/modules/data/types/place/place-detail-content.scss
@@ -1,4 +1,21 @@
-ion-card.map-widget {
+/*!
+ * Copyright (C) 2023 StApps
+ * This program is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation, version 3.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along with
+ * this program. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+.map-widget {
+  position: relative;
   height: 300px;
+  min-height: 300px;
   width: auto;
 }
diff --git a/src/assets/i18n/de.json b/src/assets/i18n/de.json
index 724741af..f0e00c12 100644
--- a/src/assets/i18n/de.json
+++ b/src/assets/i18n/de.json
@@ -252,7 +252,8 @@
   "catalog": {
     "title": "Vorlesungsverzeichnis",
     "detail": {
-      "EMPTY_SEMESTER": "Keine Verzeichnisdaten für das ausgewählte Semester vorhanden"
+      "EMPTY_SEMESTER": "Keine Verzeichnisdaten für das ausgewählte Semester vorhanden",
+      "EMPTY_CATALOG": "Keine Veranstaltung in diesem Bereich gefunden"
     }
   },
   "library": {
diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
index 292e6953..f50874ec 100644
--- a/src/assets/i18n/en.json
+++ b/src/assets/i18n/en.json
@@ -252,7 +252,8 @@
   "catalog": {
     "title": "course catalog",
     "detail": {
-      "EMPTY_SEMESTER": "No catalog data available for selected semester"
+      "EMPTY_SEMESTER": "No catalog data available for selected semester",
+      "EMPTY_CATALOG": "No events were found in this area"
     }
   },
   "library": {
diff --git a/src/theme/util/_mixins.scss b/src/theme/util/_mixins.scss
index 8ac7f841..d7e2b6b7 100644
--- a/src/theme/util/_mixins.scss
+++ b/src/theme/util/_mixins.scss
@@ -1,5 +1,5 @@
 /*!
- * Copyright (C) 2022 StApps
+ * Copyright (C) 2023 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -22,36 +22,43 @@
     @content;
   }
 }
+
 @mixin ion-sm-down {
   @media (max-width: 575.98px) {
     @content;
   }
 }
+
 @mixin ion-md-up {
   @media (min-width: 768px) {
     @content;
   }
 }
+
 @mixin ion-md-down {
   @media (max-width: 767.98px) {
     @content;
   }
 }
+
 @mixin ion-lg-up {
   @media (min-width: 992px) {
     @content;
   }
 }
+
 @mixin ion-lg-down {
   @media (max-width: 991.98px) {
     @content;
   }
 }
+
 @mixin ion-xl-up {
   @media (min-width: 1200px) {
     @content;
   }
 }
+
 @mixin ion-xl-down {
   @media (max-width: 1199.98px) {
     @content;
@@ -83,3 +90,9 @@
   // and disregard border radius in some cases
   transform: translateZ(0);
 }
+
+@mixin content-padding {
+  margin-inline-start: calc(
+    clamp(0px, (100% - var(--preferred-content-width)) / 2, var(--content-inline-start-padding-bias))
+  );
+}