iOS fixes (#68)

* deeper light

* fix home

* more readable date and venue

src/app/app.component.html

@@ -1,4 +1,4 @@
-<mat-sidenav-container [ngClass]="(currentRoute == '/' || currentRoute == '/home')? 'people-back': 'base-back'" class="main-holder people-back">
+<mat-sidenav-container class="main-holder people-back">
   <header class="navigation mat-elevation-z3">
     <app-navigation (homeClicked)="sidenav.toggle()"></app-navigation>
   </header>

src/app/app.component.scss

@@ -3,32 +3,61 @@
 .main-holder {
   min-height: 100%;
   min-width: 100%;
-  background-color: $devfest-blue;
+}
 
+.people-back{
+  background-color: $devfest-blue;
   background-position: top;
   background-size: 100% 100vh;
   background-repeat: no-repeat;
-}
-
-.people-back{
   background-image: linear-gradient(to bottom, $devfest-blue-light, $devfest-blue),
   url(../assets/background_image.jpg);
 }
 
-.base-back{
-  background-image: linear-gradient(to , $devfest-blue-light, $devfest-blue),
-  url(../assets/background_image.jpg);
+
+@media (max-width: 1480px) {
+
+  .main-holder {
+    background-size: 170vw 100vh; /* Force the image to its minimum width */
+  }
+
 }
 
+@media (max-width: 1180px) {
 
-@media (max-width: 1480px) {
+  .main-holder {
+    background-size: 200vw 100vh; /* Force the image to its minimum width */
+  }
+
+}
+
+@media (max-width: 880px) {
+
+  .main-holder {
+    background-size: 220vw 100vh; /* Force the image to its minimum width */
+  }
+
+}
+
+
+@media (max-width: 680px) {
 
   .main-holder {
-    background-size: auto 100vh; /* Force the image to its minimum width */
+    background-size: 250vw 100vh; /* Force the image to its minimum width */
   }
 
 }
 
+
+@media (max-width: 480px) {
+
+  .main-holder {
+    background-size: 300vw 100vh; /* Force the image to its minimum width */
+  }
+
+}
+
+
 .navigation {
   z-index: 10;
   position: fixed;

src/app/components/tickets/tickets.component.ts

@@ -65,7 +65,6 @@ export class TicketsComponent implements OnInit {
         return titoTic.length > 0 ? { publicName: tic.publicName, ...titoTic[0] } : null;
       });
       group.url = url;
-      console.log(group);
       return group;
     });
   }

src/app/pages/home/home.component.html

@@ -2,7 +2,7 @@
   <div class="logo-date-holder">
     <img alt="Devfest logo" src="assets/devfest-logo.svg" />
     <img alt="Devfest date" src="assets/devfest-date.svg" />
-    <img style="width:50%" alt="Devfest venue" src="assets/devfest-venue.svg" />
+    <img style="width:60%" alt="Devfest venue" src="assets/devfest-venue.svg" />
   </div>
   <div class="register-button">
     <a class="info-button" href="home#tickets" color="primary" mat-flat-button>

src/app/pages/home/home.component.scss

@@ -61,6 +61,7 @@
 
     .logo-date-holder {
       max-width: 650px;
+      width: 100%;
     }
 
   }

src/app/shared/directives/lazy.directive.ts

@@ -1,39 +1,50 @@
-import { Directive, AfterViewInit, Output, EventEmitter, ElementRef } from '@angular/core';
+import {
+  Directive,
+  AfterViewInit,
+  Output,
+  EventEmitter,
+  ElementRef,
+} from '@angular/core';
 
 @Directive({
-  selector: '[lazyLoad]'
+  selector: '[lazyLoad]',
 })
 export class LazyDirective implements AfterViewInit {
-
   @Output() public lazyLoad: EventEmitter<any> = new EventEmitter();
 
   private _intersectionObserver?: IntersectionObserver;
 
-  constructor(
-    private _element: ElementRef
-  ) {
-  }
+  constructor(private _element: ElementRef) {}
 
   public ngAfterViewInit() {
-    this._intersectionObserver = new IntersectionObserver(entries => {
-      this.checkForIntersection(entries);
-    }, {});
-    this._intersectionObserver.observe((this._element.nativeElement) as Element);
+    try {
+      this._intersectionObserver = new IntersectionObserver(entries => {
+        this.checkForIntersection(entries);
+      }, {});
+      this._intersectionObserver.observe(this._element
+        .nativeElement as Element);
+    } catch (e) {
+      this.lazyLoad.emit();
+    }
   }
 
-  private checkForIntersection = (entries: Array<IntersectionObserverEntry>) => {
+  private checkForIntersection = (
+    entries: Array<IntersectionObserverEntry>
+  ) => {
     entries.forEach((entry: IntersectionObserverEntry) => {
       if (this.checkIfIntersecting(entry)) {
         this.lazyLoad.emit();
-        this._intersectionObserver.unobserve((this._element.nativeElement) as Element);
+        this._intersectionObserver.unobserve(this._element
+          .nativeElement as Element);
         this._intersectionObserver.disconnect();
       }
     });
-  }
+  };
 
   private checkIfIntersecting(entry: IntersectionObserverEntry) {
-    return (entry as any).isIntersecting && entry.target === this._element.nativeElement;
+    return (
+      (entry as any).isIntersecting &&
+      entry.target === this._element.nativeElement
+    );
   }
-
-
 }

src/colors.scss

@@ -1,2 +1,2 @@
 $devfest-blue: rgba(18, 42, 66, 1);
-$devfest-blue-light: rgba(15, 35, 55, .43);
+$devfest-blue-light: rgba(15, 35, 55, .63);