Merge pull request #120 from SAKPaaS/bugfix/auslastungsanzeige-passt-…

…am-handy-nicht

Bugfix/auslastungsanzeige passt am handy nicht

SAKPaaS/src/app/components/location-details/location-details.component.html

@@ -1,8 +1,7 @@
 <mat-nav-list *ngIf="location$ | async as location">
   <p class="mat-title">{{ location.name }}</p>
   <p class="mat-card-subtitle">{{ location.address | address }}</p>
-  <app-occupancy-view [occupancy]="location.occupancy" [showOccupancyCount]="true"></app-occupancy-view>
-
+  <app-occupancy-view [occupancy]="location.occupancy" [isSearchBar]="false"></app-occupancy-view>
   <mat-divider></mat-divider>
   <mat-grid-list cols="2" rowHeight="5rem">
     <mat-grid-tile colspan="2">

SAKPaaS/src/app/components/location-details/location-details.component.scss

@@ -26,3 +26,7 @@
 p.mat-title {
   margin-bottom: 0;
 }
+
+app-occupancy-view {
+  width: 100%;
+}

SAKPaaS/src/app/components/occupancy-view/occupancy-view.component.html

@@ -1,16 +1,34 @@
-<div class="holder">
-  <img [src]="iconPath" alt="Auslastung:"/>
-  <p>
-    <span class="{{ styleClass }}">
-      {{ text }}
-    </span>
-    <span *ngIf="showOccupancyCount && occupancy.count" class="occupancy-count">
+<ng-container *ngIf="isSearchBar; else isNoSearchBar">
+  <div *ngIf="occupancy.value">
+    <img [src]="iconPath" alt="Auslastung" />
+  </div>
+</ng-container>
+
+<ng-template #isNoSearchBar>
+  <div class="holder">
+    <div>
+      <img [src]="iconPath" alt="Auslastung:"/>
+    </div>
+    <div >
+      <span class="{{ styleClass }}">
+        {{ text }}
+      </span>
+    </div>
+    <div *ngIf="occupancy.count" class="occupancy-count mobile">
+      <span *ngIf="occupancy.count === 1">
+        {{ 'occupancy.count-mobile.one-rating' | translate }}
+      </span>
+      <span *ngIf="occupancy.count !== 1">
+        {{ 'occupancy.count-mobile.multiple-ratings' | translate:{ count: occupancy.count} }}
+      </span>
+    </div>
+    <div *ngIf="!isSearchBar && occupancy.count" class="occupancy-count desktop">
       <span *ngIf="occupancy.count === 1">
-        {{ 'occupancy.count.one-rating' | translate }}
+        {{ 'occupancy.count-desktop.one-rating' | translate }}
       </span>
       <span *ngIf="occupancy.count !== 1">
-        {{ 'occupancy.count.multiple-ratings' | translate:{ count: occupancy.count} }}
+        {{ 'occupancy.count-desktop.multiple-ratings' | translate:{ count: occupancy.count} }}
       </span>
-    </span>
-  </p>
-</div>
+    </div>
+  </div>
+</ng-template>

SAKPaaS/src/app/components/occupancy-view/occupancy-view.component.scss

@@ -17,19 +17,35 @@
 }
 
 .occupancy-count {
-  margin-left: 5px;
   color: var(--greenish-grey);
 }
 
 .holder {
   width: 100%;
-  padding: 0.5rem;
-  img {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  div {
+    padding: 0.5rem;
     display: inline-flex;
-  }
-  p {
-    display: inline-flex;
-    margin-left: 1rem;
     margin-bottom: 0;
   }
 }
+
+.mobile {
+  display: inline-flex !important;
+}
+
+.desktop {
+  display: none !important;
+}
+
+@media (min-width: 601px) {
+  .mobile {
+    display: none !important;
+  }
+
+  .desktop {
+    display: inline-flex !important;
+  }
+}

SAKPaaS/src/app/components/occupancy-view/occupancy-view.component.ts

@@ -16,7 +16,7 @@ export class OccupancyViewComponent implements OnInit, OnDestroy {
   mediumBorder = 0.67;
 
   @Input() occupancy: Occupancy;
-  @Input() showOccupancyCount: boolean;
+  @Input() isSearchBar: boolean;
 
   text: string;
   iconPath: string;

SAKPaaS/src/app/components/search-bar/search-bar.component.html

@@ -6,9 +6,9 @@
       <mat-option *ngFor="let location of filteredLocations$ | async" [value]="location.name"
         (click)="this.locationEmitted.emit(location);">
         <div class="option">
-          <span>{{ location.name }}</span>
-          <span>
-            <app-occupancy-view [occupancy]="location.occupancy" [showOccupancyCount]="false"></app-occupancy-view>
+          <span class="text">{{ location.name }}</span>
+          <span class="occupancy-image">
+            <app-occupancy-view [occupancy]="location.occupancy" [isSearchBar]="true"></app-occupancy-view>
           </span>
         </div>
       </mat-option>

SAKPaaS/src/app/components/search-bar/search-bar.component.scss

@@ -26,16 +26,25 @@
 mat-form-field {
   width: 100%;
 }
-.option-img {
-  margin-right: 8px;
-}
 
 .option {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   width: 100%;
   align-items: center;
+
+  .text {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-right: 10px;
+  }
+
+  .occupancy-image {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
 }
 
 ::ng-deep app-occupancy-view {

SAKPaaS/src/assets/i18n/de.json

@@ -21,6 +21,7 @@
   },
   "occupancy": {
     "count": {
+
       "one-rating": "Basierend auf einer Bewertung",
       "multiple-ratings": "Basierend auf {{count}} Bewertungen"
     },

SAKPaaS/src/assets/i18n/en.json

@@ -20,7 +20,11 @@
 		"button": "I'm here!"
 	},
 	"occupancy": {
-    "count" : {
+    "count-mobile" : {
+      "one-rating": "1 evaluation",
+      "multiple-ratings": "{{count}} evaluations"
+    },
+    "count-desktop" : {
       "one-rating": "Based on one evaluation",
       "multiple-ratings": "Based on {{count}} evaluations"
     },