From 4ed899b2599d2d86aef31ee7fdd4809613f15239 Mon Sep 17 00:00:00 2001
From: Luca Rullo <luca@audio-lab.org>
Date: Tue, 31 Oct 2023 20:15:09 +0100
Subject: [PATCH] Add: Arrow to scroll from title

---
 inc/src/app/app.component.html           |  7 ++++---
 inc/src/app/app.component.ts             | 12 ++++++++++--
 inc/src/app/header/header.component.scss |  3 ++-
 inc/src/styles.scss                      | 12 ++++++++++++
 4 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/inc/src/app/app.component.html b/inc/src/app/app.component.html
index 0254352..6027a71 100644
--- a/inc/src/app/app.component.html
+++ b/inc/src/app/app.component.html
@@ -21,6 +21,7 @@
     </div>
     <div class="col right"></div>
   </div>
+  <div class="arrow" (click)="scrollTo('podcasts')"></div>
 </section>
 
 <!-- space -->
@@ -33,7 +34,7 @@
 </section> -->
 <!-- end space -->
 
-<section class="container middle" *ngFor="let n of news; let index;">
+<section id="podcasts" class="container middle" *ngFor="let n of news; let index;">
   <div class="content columns">
     <div class="col center">
       <div class="button big" [ngStyle]="{transform:'translateX('+n.random+'vw)'}">
@@ -43,13 +44,13 @@
   </div>
 </section>
 <!-- space -->
-<section class="container big">
+<!-- <section class="container big">
   <div class="content columns">
     <div class="col left"></div>
     <div class="col center"></div>
     <div class="col right"></div>
   </div>
-</section>
+</section> -->
 <!-- end space -->
 
 <section class="container big text">
diff --git a/inc/src/app/app.component.ts b/inc/src/app/app.component.ts
index 7e30f72..d152d6e 100644
--- a/inc/src/app/app.component.ts
+++ b/inc/src/app/app.component.ts
@@ -1,5 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Inject } from '@angular/core';
 import { PlayerService } from './player.service';
+import { DOCUMENT, Location } from '@angular/common';
 
 @Component({
   selector: 'app-root',
@@ -15,7 +16,8 @@ export class AppComponent implements OnInit {
   news:any[] = [{title:'1',random:0},{title:'1',random:0},{title:'1',random:0},{title:'1',random:0},{title:'1',random:0}]
 
   constructor(
-    public playerService:PlayerService
+    public playerService:PlayerService,
+    @Inject(DOCUMENT) private document: Document
   ) {
 
     playerService.init_app$
@@ -39,4 +41,10 @@ export class AppComponent implements OnInit {
     let min=-40
     return Math.floor(Math.random() * (max - min + 1) + min)
   }
+
+  scrollTo(id:string) {
+    let element:any = document.getElementById(id);
+    element.scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
+
+  }
 }
diff --git a/inc/src/app/header/header.component.scss b/inc/src/app/header/header.component.scss
index 10ff3b6..71ad2df 100644
--- a/inc/src/app/header/header.component.scss
+++ b/inc/src/app/header/header.component.scss
@@ -19,4 +19,5 @@ section.header {
         span { margin:0 12px;}
         a { cursor:pointer;}
     }
-}
\ No newline at end of file
+}
+
diff --git a/inc/src/styles.scss b/inc/src/styles.scss
index 6944afa..3495ada 100644
--- a/inc/src/styles.scss
+++ b/inc/src/styles.scss
@@ -14,6 +14,18 @@ body {
 
 
 section.container {
+    div.arrow {
+        width:32px;
+        height:32px;
+        position:absolute;
+        bottom:16px;
+        left:calc( 50vw - 16px );
+        transform:rotate(45deg);
+        border: 5px solid #000;
+        border-left:0;
+        border-top:0;
+        cursor:pointer;
+    }
     &.big { min-height:100vh;}
     &.middle { min-height: 50vh;}
     &.fixed {