Adjust styling and wording in some places

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"

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"

projects/project-3/frontend/src/app/map/map.component.scss

@@ -18,3 +18,7 @@
 #map {
   height: 95vh;
 }
+
+#logo {
+  cursor: pointer;
+}

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 class="mat-elevation-z0 p-0">
-  <mat-card-header fxFlex>
+  <mat-card-header>
-    <mat-card-title>
+    <mat-card-title>{{station?.commonName}}</mat-card-title>
-      {{station?.commonName}}
-    </mat-card-title>
   </mat-card-header>
-  <mat-card-content fxFlex fxLayout="column" fxLayoutAlign="center center">
+  <mat-card-content class="d-flex flex-column align-items-center justify-content-center">
-    <div id="chart">
+    <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()" mat-raised-button id="route-button">Open in dashboard</button>
-      <button (click)="route()" color="" id="route-button" mat-raised-button>Go to dashboard</button>
-    </div>
   </mat-card-content>
-  <mat-card-actions>
-  </mat-card-actions>
 </mat-card>

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>inbound to ${this.dashBoardBikePoint.commonName}</span><br>`;
-      div.innerHTML += `<i style="background: green"></i><span>rents with ${this.dashBoardBikePoint.commonName} as start</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>rents with ${this.dashBoardBikePoint.commonName} as destination and start</span>`;
+      div.innerHTML += `<i style="background: blue"></i><span>in- and outbound traffic line</span>`;
       return div;
     };
     this.legend.addTo(this.miniMap);

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 {