From 9686dc2ea5dbf0d95fdf7a87a81d8125fe7ce3b7 Mon Sep 17 00:00:00 2001
From: Marcel Schwarz <marcel@icaotix.de>
Date: Fri, 8 Jan 2021 12:36:03 +0100
Subject: [PATCH] Adjust styling and wording in some places

---
 .../app/dashboard/dashboard.component.html    |  2 +-
 .../frontend/src/app/map/map.component.html   |  2 +-
 .../frontend/src/app/map/map.component.scss   |  4 ++++
 .../src/app/map/pop-up/pop-up.component.html  | 19 +++++++------------
 .../frontend/src/app/service/map.service.ts   |  6 +++---
 projects/project-3/frontend/src/styles.scss   |  6 +++++-
 6 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
index 3f85bf0..4b176ae 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
@@ -1,6 +1,6 @@
 <meta content="width=device-width, initial-scale=1.0" name="viewport">
 <mat-toolbar class="toolbar" color="primary">
-  <span routerLink="/">Bike Stations in London</span>
+  <span routerLink="/" id="logo">Bike Stations in London</span>
   <span class="spacer"></span>
   <a color="primary"
      href="https://gitlab.com/marcel.schwarz/geovisualisierung/-/wikis/Projektarbeit%203"
diff --git a/projects/project-3/frontend/src/app/map/map.component.html b/projects/project-3/frontend/src/app/map/map.component.html
index 7dd0540..0d698ff 100644
--- a/projects/project-3/frontend/src/app/map/map.component.html
+++ b/projects/project-3/frontend/src/app/map/map.component.html
@@ -1,6 +1,6 @@
 <div class="myApp">
   <mat-toolbar class="mat-toolbar" color="primary">
-    <span routerLink="/">Bike Stations in London</span>
+    <span routerLink="/" id="logo">Bike Stations in London</span>
     <span class="toolbar-spacer"></span>
     <app-auto-refresh></app-auto-refresh>
     <a class="button-wiki" color="primary"
diff --git a/projects/project-3/frontend/src/app/map/map.component.scss b/projects/project-3/frontend/src/app/map/map.component.scss
index 3dc307d..e955d93 100644
--- a/projects/project-3/frontend/src/app/map/map.component.scss
+++ b/projects/project-3/frontend/src/app/map/map.component.scss
@@ -18,3 +18,7 @@
 #map {
   height: 95vh;
 }
+
+#logo {
+  cursor: pointer;
+}
diff --git a/projects/project-3/frontend/src/app/map/pop-up/pop-up.component.html b/projects/project-3/frontend/src/app/map/pop-up/pop-up.component.html
index 2e0da50..69e15bf 100644
--- a/projects/project-3/frontend/src/app/map/pop-up/pop-up.component.html
+++ b/projects/project-3/frontend/src/app/map/pop-up/pop-up.component.html
@@ -1,12 +1,11 @@
-<mat-card class="mat-elevation-z0" fxFlex fxLayout="column" style="padding: 0">
-  <mat-card-header fxFlex>
-    <mat-card-title>
-      {{station?.commonName}}
-    </mat-card-title>
+<mat-card class="mat-elevation-z0 p-0">
+  <mat-card-header>
+    <mat-card-title>{{station?.commonName}}</mat-card-title>
   </mat-card-header>
-  <mat-card-content fxFlex fxLayout="column" fxLayoutAlign="center center">
-    <div id="chart">
+  <mat-card-content class="d-flex flex-column align-items-center justify-content-center">
+    <div id="chart" class="w-100 ml-n4">
       <apx-chart
+        class="w-100"
         [chart]="chartOptions.chart"
         [colors]="chartOptions.colors"
         [dataLabels]="chartOptions.dataLabels"
@@ -21,10 +20,6 @@
         [yaxis]="chartOptions.yaxis"
       ></apx-chart>
     </div>
-    <div class="button" fxFlex>
-      <button (click)="route()" color="" id="route-button" mat-raised-button>Go to dashboard</button>
-    </div>
+    <button (click)="route()" mat-raised-button id="route-button">Open in dashboard</button>
   </mat-card-content>
-  <mat-card-actions>
-  </mat-card-actions>
 </mat-card>
diff --git a/projects/project-3/frontend/src/app/service/map.service.ts b/projects/project-3/frontend/src/app/service/map.service.ts
index 381aa74..c4ef9da 100644
--- a/projects/project-3/frontend/src/app/service/map.service.ts
+++ b/projects/project-3/frontend/src/app/service/map.service.ts
@@ -185,9 +185,9 @@ export class MapService {
     this.legend.onAdd = () => {
       const div = L.DomUtil.create('div', 'legend');
       div.innerHTML += `<h4>trips from/to bike station</h4>`;
-      div.innerHTML += `<i style="background: red"></i><span>rents with ${this.dashBoardBikePoint.commonName} as destination</span><br>`;
-      div.innerHTML += `<i style="background: green"></i><span>rents with ${this.dashBoardBikePoint.commonName} as start</span><br>`;
-      div.innerHTML += `<i style="background: blue"></i><span>rents with ${this.dashBoardBikePoint.commonName} as destination and start</span>`;
+      div.innerHTML += `<i style="background: green"></i><span>inbound to ${this.dashBoardBikePoint.commonName}</span><br>`;
+      div.innerHTML += `<i style="background: red"></i><span>outbound from ${this.dashBoardBikePoint.commonName}</span><br>`;
+      div.innerHTML += `<i style="background: blue"></i><span>in- and outbound traffic line</span>`;
       return div;
     };
     this.legend.addTo(this.miniMap);
diff --git a/projects/project-3/frontend/src/styles.scss b/projects/project-3/frontend/src/styles.scss
index e24de31..1a4c807 100644
--- a/projects/project-3/frontend/src/styles.scss
+++ b/projects/project-3/frontend/src/styles.scss
@@ -16,7 +16,11 @@ body {
 
 /* WTF ANGULAR!?!?!?! WHY DO I HAVE TO DO THIS? (see table.component.html@7 and table.component.html@50) */
 label.mat-checkbox-layout {
-  margin: 0 !important;
+  margin: 0;
+}
+
+#logo {
+  cursor: pointer;
 }
 
 .legend {