chore(cookie-policy): reactivate the cookie policy banner (DSP-1727) (#…

…461) * chore(cookie-policy): reactivate the cookie policy banner (DSP-1727) * fix(cookie-policy): bug fix in cookie policy link * chore(cookie-policy): better sentence
dasch-swiss · Jun 11, 2021 · ac99fbc · ac99fbc
1 parent a13b8ba
commit ac99fbc
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 56 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -8,4 +8,16 @@
         <router-outlet></router-outlet>
     </div>
 
+    <!-- cookie information banner -->
+    <div class="cookie-banner" *ngIf="showCookieBanner">
+        <p class="note">
+            This web-application uses cookies to provide you with a greater user experience. By using the application you
+            accept our <span class="link" (click)="goToCookiePolicy()">use of cookies</span>.
+        </p>
+        <div class="action">
+            <button mat-flat-button color="accent" (click)="closeCookieBanner()">
+                ACCEPT
+            </button>
+        </div>
+    </div>
 </div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -0,0 +1,28 @@
+@import "../assets/style/theme";
+
+
+.cookie-banner {
+  position: fixed;
+  bottom: 0;
+  height: 128px;
+  width: 100%;
+  background: rgba(0, 0, 0, 0.75);
+  color: #fff;
+  z-index: 100;
+  // display: inline-flex;
+  padding: 24px 0;
+
+  .note {
+    text-align: center;
+
+    .link {
+      color: $accent;
+      text-decoration: underline;
+    }
+  }
+
+  .action button {
+    margin: 0 auto 24px auto;
+    display: block;
+  }
+}
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,5 +1,6 @@
 import { Component, OnInit } from '@angular/core';
 import { Title } from '@angular/platform-browser';
+import { Router } from '@angular/router';
 
 @Component({
     selector: 'app-root',
@@ -8,17 +9,33 @@ import { Title } from '@angular/platform-browser';
 })
 export class AppComponent implements OnInit {
 
+    showCookieBanner = true;
     session = false;
 
     constructor(
-        private _titleService: Title) {
+        private _router: Router,
+        private _titleService: Title
+    ) {
 
         // set the page title
         this._titleService.setTitle('DaSCH Service Platform');
 
     }
 
     ngOnInit() {
+        if (sessionStorage.getItem('cookieBanner') === null) {
+            sessionStorage.setItem('cookieBanner', JSON.stringify(this.showCookieBanner));
+        } else {
+            this.showCookieBanner = JSON.parse(sessionStorage.getItem('cookieBanner'));
+        }
+    }
+
+    goToCookiePolicy() {
+        this._router.navigate(['cookie-policy']);
+    }
 
+    closeCookieBanner() {
+        this.showCookieBanner = !this.showCookieBanner;
+        sessionStorage.setItem('cookieBanner', JSON.stringify(this.showCookieBanner));
     }
 }
diff --git a/src/app/main/cookie-policy/cookie-policy.component.scss b/src/app/main/cookie-policy/cookie-policy.component.scss
@@ -0,0 +1,3 @@
+.content.large.middle {
+  padding-bottom: 196px;
+}
diff --git a/src/app/main/main.component.html b/src/app/main/main.component.html
@@ -1,17 +1,6 @@
 <!-- show landing page in case of guest user -->
 <div class="landing-page">
-    <div class="cookie-banner" *ngIf="showCookieBanner">
-        <p class="note">
-            This web-application uses cookies to provide you with great user experience. By using the application you
-            accept our
-            <a href="./cookie-policy">use of cookies</a>.
-        </p>
-        <div class="action">
-            <button mat-flat-button color="accent" (click)="closeCookieBanner()">
-                ACCEPT
-            </button>
-        </div>
-    </div>
+
     <!-- introduction: headline, info and parallax background image -->
     <section class="intro parallax-wrapper bg-1">
         <div class="parallax-curtain">

diff --git a/src/app/main/main.component.scss b/src/app/main/main.component.scss
@@ -74,32 +74,6 @@ section {
   }
 }
 
-.cookie-banner {
-  position: fixed;
-  bottom: 0;
-  height: 128px;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.75);
-  color: #fff;
-  z-index: 100;
-  // display: inline-flex;
-  padding: 24px 0;
-
-  .note {
-    text-align: center;
-
-    a {
-      color: inherit;
-      text-decoration: underline;
-    }
-  }
-
-  .action button {
-    margin: 0 auto 24px auto;
-    display: block;
-  }
-}
-
 .app-headline {
   line-height: 1.5;
   letter-spacing: 2px;
@@ -119,14 +93,6 @@ section {
     height: 140px;
   }
 
-  .help-page,
-  .landing-page {
-    .features,
-    .projects {
-      //   width: calc(100% - 16px);
-    }
-  }
-
   .research {
     .content-research {
       padding: 16px 0 1px 0 !important;

diff --git a/src/app/main/main.component.ts b/src/app/main/main.component.ts
@@ -84,11 +84,6 @@ export class MainComponent implements OnInit {
     }
 
     ngOnInit() {
-        if (sessionStorage.getItem('cookieBanner') === null) {
-            sessionStorage.setItem('cookieBanner', JSON.stringify(this.showCookieBanner));
-        } else {
-            this.showCookieBanner = JSON.parse(sessionStorage.getItem('cookieBanner'));
-        }
         this.loadProjects();
     }
 
@@ -127,8 +122,4 @@ export class MainComponent implements OnInit {
         );
     }
 
-    closeCookieBanner() {
-        this.showCookieBanner = !this.showCookieBanner;
-        sessionStorage.setItem('cookieBanner', JSON.stringify(this.showCookieBanner));
-    }
 }