From 6f7c680ed89f027d863ebc02f5b24895d84f32e4 Mon Sep 17 00:00:00 2001
From: Rainer Killinger <killinger@hrz.uni-frankfurt.de>
Date: Tue, 1 Jun 2021 13:06:34 +0200
Subject: [PATCH] fix: canteen module layout

---
 src/app/modules/data/detail/data-detail.html   |  2 +-
 .../mensa/place-mensa-detail.component.ts      |  1 +
 .../types/place/special/mensa/place-mensa.html | 10 ++++------
 .../types/place/special/mensa/place-mensa.scss | 18 ++++++++++++++++++
 src/global.scss                                |  1 +
 5 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 src/app/modules/data/types/place/special/mensa/place-mensa.scss

diff --git a/src/app/modules/data/detail/data-detail.html b/src/app/modules/data/detail/data-detail.html
index 344880d4..be74b780 100644
--- a/src/app/modules/data/detail/data-detail.html
+++ b/src/app/modules/data/detail/data-detail.html
@@ -7,7 +7,7 @@
     <ion-title>{{ 'data.detail.TITLE' | translate }}</ion-title>
   </ion-toolbar>
 </ion-header>
-<ion-content class="ion-padding">
+<ion-content class="ion-no-padding">
   <ion-refresher slot="fixed" (ionRefresh)="refresh($event.target)">
     <ion-refresher-content
       pullingIcon="chevron-down-outline"
diff --git a/src/app/modules/data/types/place/special/mensa/place-mensa-detail.component.ts b/src/app/modules/data/types/place/special/mensa/place-mensa-detail.component.ts
index 241dbf0f..e3978355 100644
--- a/src/app/modules/data/types/place/special/mensa/place-mensa-detail.component.ts
+++ b/src/app/modules/data/types/place/special/mensa/place-mensa-detail.component.ts
@@ -27,6 +27,7 @@ import {PlaceMensaService} from './place-mensa-service';
   providers: [PlaceMensaService],
   selector: 'stapps-place-mensa-detail-content',
   templateUrl: 'place-mensa.html',
+  styleUrls: ['place-mensa.scss'],
 })
 export class PlaceMensaDetailComponent implements AfterViewInit {
   /**
diff --git a/src/app/modules/data/types/place/special/mensa/place-mensa.html b/src/app/modules/data/types/place/special/mensa/place-mensa.html
index 01f3e9c1..018b50b5 100644
--- a/src/app/modules/data/types/place/special/mensa/place-mensa.html
+++ b/src/app/modules/data/types/place/special/mensa/place-mensa.html
@@ -1,11 +1,9 @@
 <ng-container>
   <div *ngIf="dishes | async as dishes; else loading">
-    <ion-segment [(ngModel)]="selectedDay">
-      <ion-segment-button
-        *ngFor="let date of dishes | keyvalue"
-        [value]="date.key"
-      >
-        <ion-label>{{ date.key | amDateFormat: 'dddd, L' }}</ion-label>
+    <ion-segment [(ngModel)]="selectedDay" mode="md">
+      <ion-segment-button *ngFor="let day of dishes | keyvalue" [value]="day.key">
+        <ion-label class="ion-hide-sm-down">{{day.key | amLocal | amDateFormat:'dddd, l'}}</ion-label>
+        <ion-label class="ion-hide-sm-up">{{day.key | amLocal | amDateFormat:'dd, l'}}</ion-label>
       </ion-segment-button>
     </ion-segment>
     <div [ngSwitch]="selectedDay">
diff --git a/src/app/modules/data/types/place/special/mensa/place-mensa.scss b/src/app/modules/data/types/place/special/mensa/place-mensa.scss
new file mode 100644
index 00000000..ba9433a6
--- /dev/null
+++ b/src/app/modules/data/types/place/special/mensa/place-mensa.scss
@@ -0,0 +1,18 @@
+ion-segment-button {
+  text-transform: none;
+}
+
+ion-segment {
+  justify-content: space-between;
+  overflow: auto;
+
+  &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+      display: none;
+  }
+
+  ion-segment-button.segment-button {
+      flex: 1 0 100px;
+  }
+}
diff --git a/src/global.scss b/src/global.scss
index e35371f7..28007d15 100644
--- a/src/global.scss
+++ b/src/global.scss
@@ -9,6 +9,7 @@
 @import "~@ionic/angular/css/text-alignment.css";
 @import "~@ionic/angular/css/text-transformation.css";
 @import "~@ionic/angular/css/flex-utils.css";
+@import "~@ionic/angular/css/display.css";
 
 /* StApps */