BETTERZON-78 - grid added, structured as in Adobe XD mockup

Frontend/package.json

@@ -29,8 +29,8 @@
         "karma-firefox-launcher": "^2.1.0",
         "ng": "0.0.0",
         "ng-apexcharts": "^1.5.6",
-        "ngx-cookieconsent": "^2.2.3",
         "ngx-bootstrap": "^6.2.0",
+        "ngx-cookieconsent": "^2.2.3",
         "rxjs": "~6.6.0",
         "tslib": "^2.0.3",
         "zone.js": "~0.10.2"

Frontend/src/app/app.component.html

@@ -1,7 +1,7 @@
 <app-top-bar></app-top-bar>
-
+<div class="page-content">
-<router-outlet></router-outlet>
+    <router-outlet></router-outlet>
-
+</div>
 <app-bottom-bar></app-bottom-bar>
 
 

Frontend/src/app/components/bottom-bar/bottom-bar.component.css

@@ -1,28 +1,30 @@
-.bottom-bar-container {
+.bottom-bar-wrapper {
-    background-color: black
-;
-    width: 100%;
-    height: 68px;
-    position: fixed;
-    padding: 16px;
-    align-items: center;
-    bottom: 0;
     display: grid;
-    grid-template-columns: 100px auto 100px;
+    grid-template-columns: repeat(3, 1fr);
+    grid-template-rows: 70px 70px 70px;
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
 }
 
-.betterzonlogo {
+.folge-uns-item {
-    grid-column-start: 1;
+    grid-column: 2; grid-row: 1;
-    grid-column-end: 2;
+    justify-self: center;
 }
 
-.references {
+.link-items {
-    grid-column-start: 2;
+    grid-column: 2; grid-row: 2;
-    grid-column-end: 3;
+    justify-self: center;
-    align-items: center;
 }
 
-.copyright {
+.footer-links li {
-    grid-column-start: 3;
+    display: inline;
-    grid-column-end: 4;
+    margin-right: 60px;
+}
+
+.bottom-logo {
+    grid-column: 1; grid-row: 3;
+}
+
+.bottom-info {
+    grid-column: 3; grid-row: 3;
 }

Frontend/src/app/components/bottom-bar/bottom-bar.component.html

@@ -1,14 +1,25 @@
-<div class="bottom-bar-container">
+<div class="bottom-bar-wrapper">
-    <div class="betterzonlogo">
+    <div class="folge-uns-item">
-        <a>
+        <p>FOLGE UNS</p>
-            <img src="assets/images/Betterzon.svg" [routerLink]="''" alt="Betterzon Logo" width="50px">
-        </a>
     </div>
-    <div class="references">
+    <div class="link-items">
-        <mat-icon aria-hidden="false" aria-label="Example home icon" [routerLink]="''">home</mat-icon>
+        <ul style="list-style-type:none" class="footer-links">
+            <li><a>GiT</a></li>
+            <li><a>BLOG</a></li>
+            <li><a>Wiki</a></li>
+            <li><a>YouTrack</a></li>
+        </ul>
     </div>
-    <div class="copyright">
+    <div class="bottom-logo">
-        Betterzon ©2020
+        <p>BETTERZON</p>
+    </div>
+    <div class="bottom-info">
+        <ul style="list-style-type:none" class="footer-links">
+            <li><a>COOKIES</a></li>
+            <li><a>NUTZUNGSBEDINGUNGEN</a></li>
+            <li><a>IMPRESSUM</a></li>
+        </ul>
     </div>
 </div>
 
+

Frontend/src/app/components/top-bar/top-bar.component.css

@@ -1,3 +1 @@
-.column {
+
-    width: 33.33%;
-}

Frontend/src/app/pages/landingpage/landingpage.component.html

@@ -1,4 +1,3 @@
-
 <div id="mainComponents">
     <div id="searchContainer">
         <input type="text" [(ngModel)]="searchInput" placeholder="Search" (keyup.enter)="startedSearch()">
@@ -15,4 +14,3 @@
         </div>
     </div>
 </div>
-<app-footer></app-footer>

Frontend/src/styles.css

@@ -1,22 +1,13 @@
+/* general settings */
+
 * {
-    font-family: 'Roboto', Arial, sans-serif;
-    color: #616161;
     box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
 }
 
-body {
+html, body {
+    height: 100%;
     margin: 0;
-}
+    background-color: #FFFFFF;
-
-.container {
-    display: flex;
-    flex-direction: row;
-}
-
-router-outlet + *  {
-    padding: 0 16px;
 }
 
 /* Text */
@@ -33,6 +24,10 @@ h1, h2 {
     font-weight: lighter;
 }
 
+h3 {
+    font-size: 18px;
+}
+
 p {
     font-size: 14px;
 }
@@ -41,7 +36,7 @@ p {
 
 a {
     cursor: pointer;
-    color: #1976d2;
+    color: #000000;
     text-decoration: none;
 }
 
@@ -49,6 +44,12 @@ a:hover {
     opacity: 0.8;
 }
 
+a, p{
+    font-size: 16px;
+}
+
+/* links */
+
 /* Input */
 
 input {
@@ -107,7 +108,7 @@ label {
 app-top-bar {
     width: 100%;
     height: 68px;
-    background-color: #1976d2;
+    background-color: #f2f2f2;
     padding: 16px;
     display: flex;
     flex-direction: row;
@@ -116,9 +117,21 @@ app-top-bar {
     box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 6px 10px 0 rgba(0,0,0,.14),0 1px 18px 0 rgba(0,0,0,.12)
 }
 
-app-top-bar, app-bottom-bar h1 {
+app-top-bar h1 {
     color: white;
     margin: 0;
 }
 
+/* Bottom Bar */
+app-bottom-bar{
+    background-color: #F8F8F8;
+    width: 1640px;
+    height: 210px;
+    position: fixed;
+    padding: 16px;
+    margin-top: 90px;
+    bottom: 0;
+    flex-direction: row;
+}
+