feat: revamp dashboard mensa section

src/app/modules/data/elements/offers-in-list.html

@@ -1,16 +1,16 @@
 <!--
-  ~ Copyright (C) 2022 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.
+  ~ 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.
+  ~ 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/>.
+  ~ You should have received a copy of the GNU General Public License along with
+  ~ this program. If not, see <https://www.gnu.org/licenses/>.
   -->
 
 <div>
@@ -24,7 +24,7 @@
       {{ 'data.detail.offers.sold_out' | translate }}
     </h2>
   </ion-text>
-  <p *ngIf="_offers[0].inPlace && !soldOut">
+  <p *ngIf="_offers[0].inPlace && !soldOut" class="place">
     <ion-icon name="pin_drop"></ion-icon>{{ _offers[0].inPlace.name
     }}<span *ngIf="_offers.length > 1">...</span>
   </p>

src/app/modules/data/list/data-list-item.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.
@@ -12,7 +12,7 @@
  * You should have received a copy of the GNU General Public License along with
  * this program. If not, see <https://www.gnu.org/licenses/>.
  */
-import {Component, ContentChild, Input, TemplateRef} from '@angular/core';
+import {Component, ContentChild, HostBinding, Input, TemplateRef} from '@angular/core';
 import {SCThings} from '@openstapps/core';
 import {DataRoutingService} from '../data-routing.service';
 import {DataListContext} from './data-list.component';
@@ -40,8 +40,14 @@ export class DataListItemComponent {
 
   @Input() lines = 'inset';
 
+  @Input() appearance: 'normal' | 'square' = 'normal';
+
   @ContentChild(TemplateRef) contentTemplateRef: TemplateRef<DataListContext<SCThings>>;
 
+  @HostBinding('class.square') get square() {
+    return this.appearance === 'square';
+  }
+
   constructor(private readonly dataRoutingService: DataRoutingService) {}
 
   /**

src/app/modules/data/list/data-list-item.html

@@ -112,7 +112,11 @@
           ></stapps-long-inline-text>
         </p>
       </div>
-      <stapps-action-chip-list slot="end" [item]="item"></stapps-action-chip-list>
+      <stapps-action-chip-list
+        *ngIf="appearance !== 'square'"
+        slot="end"
+        [item]="item"
+      ></stapps-action-chip-list>
     </div>
   </ion-label>
 </ng-template>

src/app/modules/data/list/data-list-item.scss

@@ -41,3 +41,43 @@ ion-item {
     }
   }
 }
+
+:host.square ::ng-deep {
+  ion-item {
+    margin: 0;
+  }
+
+  ion-row {
+    flex-direction: column;
+    justify-content: space-between;
+    height: 120px;
+  }
+
+  ion-col {
+    flex-grow: 0;
+    flex-basis: min-content;
+  }
+
+  .title {
+    display: -webkit-box;
+    white-space: break-spaces;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    overflow: hidden;
+  }
+
+  .title-sub {
+    display: none;
+  }
+
+  // fix for Safari
+  stapps-offers-in-list {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+  }
+
+  stapps-offers-in-list .place {
+    display: none;
+  }
+}