From 9d02c32b5a687a395261acb5b2da75b6f2b2202f Mon Sep 17 00:00:00 2001
From: Cathy Hu <cathy.hu@fau.de>
Date: Fri, 4 Sep 2020 12:50:19 +0200
Subject: [PATCH] [frontend] Add heading banner

---
 .../src/app/dashboard/board/board.component.html  | 10 ++++------
 .../src/app/dashboard/board/board.component.scss  | 15 ++++++++++++++-
 .../src/app/dashboard/hoods/hoods.component.scss  |  3 ++-
 .../src/app/homepage/homepage.component.html      |  2 +-
 .../src/app/homepage/homepage.component.ts        |  9 ++++-----
 .../src/app/hoodpage/hoodpage.component.html      |  4 ++--
 .../src/app/hoodpage/hoodpage.component.scss      |  7 +++----
 .../src/app/hoodspage/hoodspage.component.html    |  5 +++--
 .../src/app/hoodspage/hoodspage.component.scss    |  2 +-
 .../src/app/hoodspage/hoodspage.component.ts      |  1 +
 .../organizerspage/organizerspage.component.html  |  2 +-
 .../organizerspage/organizerspage.component.ts    |  9 ++++-----
 .../shared/heading-one/heading-one.component.html |  1 +
 .../shared/heading-one/heading-one.component.scss | 14 ++++++++++++++
 .../shared/heading-one/heading-one.component.ts   | 14 ++++++++++++++
 kibicara-frontend/src/app/shared/shared.module.ts |  3 +++
 16 files changed, 72 insertions(+), 29 deletions(-)
 create mode 100644 kibicara-frontend/src/app/shared/heading-one/heading-one.component.html
 create mode 100644 kibicara-frontend/src/app/shared/heading-one/heading-one.component.scss
 create mode 100644 kibicara-frontend/src/app/shared/heading-one/heading-one.component.ts

diff --git a/kibicara-frontend/src/app/dashboard/board/board.component.html b/kibicara-frontend/src/app/dashboard/board/board.component.html
index b910b06..7311f5c 100644
--- a/kibicara-frontend/src/app/dashboard/board/board.component.html
+++ b/kibicara-frontend/src/app/dashboard/board/board.component.html
@@ -1,15 +1,13 @@
+<app-heading-one
+  *ngIf="hood$ | async as hood"
+  [title]="hood.name + ' (Hood)'"
+></app-heading-one>
 <div class="back">
   <a mat-button [routerLink]="['/dashboard']"
     ><mat-icon>keyboard_backspace</mat-icon> back</a
   >
 </div>
 <div class="dashboard">
-  <mat-card>
-    <mat-card-title *ngIf="hood$ | async as hood">
-      Your Hood - <strong>{{ hood.name }}</strong>
-    </mat-card-title>
-  </mat-card>
-
   <mat-tab-group>
     <mat-tab label="Filters">
       <app-hoodsettings [hoodId]="hoodId"> </app-hoodsettings>
diff --git a/kibicara-frontend/src/app/dashboard/board/board.component.scss b/kibicara-frontend/src/app/dashboard/board/board.component.scss
index f3fa8dd..48a0ae3 100644
--- a/kibicara-frontend/src/app/dashboard/board/board.component.scss
+++ b/kibicara-frontend/src/app/dashboard/board/board.component.scss
@@ -3,9 +3,22 @@
 }
 
 .dashboard {
-  margin: 10px;
+  margin-top: 0px;
+  margin-left: 10%;
+  margin-right: 10%;
+  margin-bottom: 2%;
+  @media (max-width: 600px) {
+    margin-left: 5%;
+    margin-right: 5%;
+  }
 }
 
 .back {
   color: grey;
+  margin-top: 0px;
+  margin-bottom: 0px;
+  margin-left: 10px;
+  @media (max-width: 600px) {
+    margin-left: 0;
+  }
 }
diff --git a/kibicara-frontend/src/app/dashboard/hoods/hoods.component.scss b/kibicara-frontend/src/app/dashboard/hoods/hoods.component.scss
index 08d432b..87348a3 100644
--- a/kibicara-frontend/src/app/dashboard/hoods/hoods.component.scss
+++ b/kibicara-frontend/src/app/dashboard/hoods/hoods.component.scss
@@ -11,8 +11,9 @@
 }
 
 h1 {
-  font-size: 2.3125rem;
   line-height: 3rem;
+  font-size: 46px;
+  font-weight: 500;
 }
 
 p {
diff --git a/kibicara-frontend/src/app/homepage/homepage.component.html b/kibicara-frontend/src/app/homepage/homepage.component.html
index 1dc1d5a..0671adc 100644
--- a/kibicara-frontend/src/app/homepage/homepage.component.html
+++ b/kibicara-frontend/src/app/homepage/homepage.component.html
@@ -1 +1 @@
-<p>homepage works!</p>
+<app-heading-one [title]="title"></app-heading-one>
diff --git a/kibicara-frontend/src/app/homepage/homepage.component.ts b/kibicara-frontend/src/app/homepage/homepage.component.ts
index 710ca29..374bd69 100644
--- a/kibicara-frontend/src/app/homepage/homepage.component.ts
+++ b/kibicara-frontend/src/app/homepage/homepage.component.ts
@@ -3,13 +3,12 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-homepage',
   templateUrl: './homepage.component.html',
-  styleUrls: ['./homepage.component.scss']
+  styleUrls: ['./homepage.component.scss'],
 })
 export class HomepageComponent implements OnInit {
+  title = 'Kibicara';
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }
diff --git a/kibicara-frontend/src/app/hoodpage/hoodpage.component.html b/kibicara-frontend/src/app/hoodpage/hoodpage.component.html
index e636aab..faa37e9 100644
--- a/kibicara-frontend/src/app/hoodpage/hoodpage.component.html
+++ b/kibicara-frontend/src/app/hoodpage/hoodpage.component.html
@@ -1,6 +1,6 @@
+<app-heading-one [title]="hood.name"></app-heading-one>
 <div class="container">
-  <h1 class="heading">Hood - {{ hood.name }}</h1>
-  <div>
+  <div class="markdown">
     <markdown class="markdown" [data]="hood.landingpage"></markdown>
   </div>
 
diff --git a/kibicara-frontend/src/app/hoodpage/hoodpage.component.scss b/kibicara-frontend/src/app/hoodpage/hoodpage.component.scss
index 27ddfd6..3eb37b8 100644
--- a/kibicara-frontend/src/app/hoodpage/hoodpage.component.scss
+++ b/kibicara-frontend/src/app/hoodpage/hoodpage.component.scss
@@ -1,8 +1,7 @@
 .container {
   display: grid;
-  margin-left: 15%;
-  margin-right: 15%;
-  margin-top: 5%;
+  margin-left: 10%;
+  margin-right: 10%;
   margin-bottom: 5%;
   gap: 30px;
 }
@@ -13,5 +12,5 @@
 }
 
 .markdown {
-  margin-bottom: 50px;
+  margin-top: 20px;
 }
diff --git a/kibicara-frontend/src/app/hoodspage/hoodspage.component.html b/kibicara-frontend/src/app/hoodspage/hoodspage.component.html
index 99068ec..e9613d4 100644
--- a/kibicara-frontend/src/app/hoodspage/hoodspage.component.html
+++ b/kibicara-frontend/src/app/hoodspage/hoodspage.component.html
@@ -1,6 +1,7 @@
-<div class="banner">
+<!-- <div class="banner">
   <h1>Discover hoods</h1>
-</div>
+</div> -->
+<app-heading-one [title]="title"></app-heading-one>
 <div class="page">
   <mat-form-field class="searchbar">
     <mat-label> <mat-icon>search</mat-icon> Search for hoods</mat-label>
diff --git a/kibicara-frontend/src/app/hoodspage/hoodspage.component.scss b/kibicara-frontend/src/app/hoodspage/hoodspage.component.scss
index c3435b1..33f0595 100644
--- a/kibicara-frontend/src/app/hoodspage/hoodspage.component.scss
+++ b/kibicara-frontend/src/app/hoodspage/hoodspage.component.scss
@@ -13,7 +13,7 @@
 .page {
   padding-left: 10%;
   padding-right: 10%;
-  padding-bottom: 10%;
+  margin-bottom: 5%;
 }
 
 .list {
diff --git a/kibicara-frontend/src/app/hoodspage/hoodspage.component.ts b/kibicara-frontend/src/app/hoodspage/hoodspage.component.ts
index 4eb25fe..e21275a 100644
--- a/kibicara-frontend/src/app/hoodspage/hoodspage.component.ts
+++ b/kibicara-frontend/src/app/hoodspage/hoodspage.component.ts
@@ -9,6 +9,7 @@ import { HoodsService } from '../core/api/api/hoods.service';
 export class HoodspageComponent implements OnInit {
   hoods$;
   searchText: string;
+  title = 'Discover hoods';
 
   constructor(private readonly hoodsService: HoodsService) {}
 
diff --git a/kibicara-frontend/src/app/organizerspage/organizerspage.component.html b/kibicara-frontend/src/app/organizerspage/organizerspage.component.html
index eb47177..0671adc 100644
--- a/kibicara-frontend/src/app/organizerspage/organizerspage.component.html
+++ b/kibicara-frontend/src/app/organizerspage/organizerspage.component.html
@@ -1 +1 @@
-<p>organizerspage works!</p>
+<app-heading-one [title]="title"></app-heading-one>
diff --git a/kibicara-frontend/src/app/organizerspage/organizerspage.component.ts b/kibicara-frontend/src/app/organizerspage/organizerspage.component.ts
index 095220f..3242704 100644
--- a/kibicara-frontend/src/app/organizerspage/organizerspage.component.ts
+++ b/kibicara-frontend/src/app/organizerspage/organizerspage.component.ts
@@ -3,13 +3,12 @@ import { Component, OnInit } from '@angular/core';
 @Component({
   selector: 'app-organizerspage',
   templateUrl: './organizerspage.component.html',
-  styleUrls: ['./organizerspage.component.scss']
+  styleUrls: ['./organizerspage.component.scss'],
 })
 export class OrganizerspageComponent implements OnInit {
+  title = 'Hood administration';
 
-  constructor() { }
-
-  ngOnInit(): void {
-  }
+  constructor() {}
 
+  ngOnInit(): void {}
 }
diff --git a/kibicara-frontend/src/app/shared/heading-one/heading-one.component.html b/kibicara-frontend/src/app/shared/heading-one/heading-one.component.html
new file mode 100644
index 0000000..7941a6a
--- /dev/null
+++ b/kibicara-frontend/src/app/shared/heading-one/heading-one.component.html
@@ -0,0 +1 @@
+<h1 class="h1">{{ title }}</h1>
diff --git a/kibicara-frontend/src/app/shared/heading-one/heading-one.component.scss b/kibicara-frontend/src/app/shared/heading-one/heading-one.component.scss
new file mode 100644
index 0000000..87c44c7
--- /dev/null
+++ b/kibicara-frontend/src/app/shared/heading-one/heading-one.component.scss
@@ -0,0 +1,14 @@
+.h1 {
+  background-color: #46277a;
+  height: 10%;
+  min-height: 70px;
+  padding-left: 10%;
+  padding-top: 5%;
+  color: white;
+  font-size: 46px;
+  font-weight: 500;
+  @media (max-width: 600px) {
+    padding-top: 10%;
+    font-size: 30px;
+  }
+}
diff --git a/kibicara-frontend/src/app/shared/heading-one/heading-one.component.ts b/kibicara-frontend/src/app/shared/heading-one/heading-one.component.ts
new file mode 100644
index 0000000..2071759
--- /dev/null
+++ b/kibicara-frontend/src/app/shared/heading-one/heading-one.component.ts
@@ -0,0 +1,14 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-heading-one',
+  templateUrl: './heading-one.component.html',
+  styleUrls: ['./heading-one.component.scss'],
+})
+export class HeadingOneComponent implements OnInit {
+  @Input() title;
+
+  constructor() {}
+
+  ngOnInit(): void {}
+}
diff --git a/kibicara-frontend/src/app/shared/shared.module.ts b/kibicara-frontend/src/app/shared/shared.module.ts
index 6645dd2..04c3a2e 100644
--- a/kibicara-frontend/src/app/shared/shared.module.ts
+++ b/kibicara-frontend/src/app/shared/shared.module.ts
@@ -8,6 +8,7 @@ import { CommonModule } from '@angular/common';
 import { Ng2SearchPipeModule } from 'ng2-search-filter';
 import { YesNoDialogComponent } from './yes-no-dialog/yes-no-dialog.component';
 import { OverlayComponent } from './overlay/overlay.component';
+import { HeadingOneComponent } from './heading-one/heading-one.component';
 
 @NgModule({
   declarations: [
@@ -15,6 +16,7 @@ import { OverlayComponent } from './overlay/overlay.component';
     NotFoundComponent,
     YesNoDialogComponent,
     OverlayComponent,
+    HeadingOneComponent,
   ],
   imports: [
     MaterialModule,
@@ -27,6 +29,7 @@ import { OverlayComponent } from './overlay/overlay.component';
   exports: [
     ToolbarComponent,
     NotFoundComponent,
+    HeadingOneComponent,
     MaterialModule,
     ReactiveFormsModule,
     FormsModule,