Merge pull request #47 from ishythefishy/contact-form-and-things

Contact form, rejig of homepage, miscellaneous fixes

.gitignore

@@ -40,3 +40,6 @@ Thumbs.db
 
 # Routes
 _routes.txt
+
+# Local Netlify folder
+.netlify

angular.json

@@ -16,7 +16,7 @@
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
             "outputPath": "dist/fretonator-web/browser",
-            "index": "apps/fretonator-web/src/index.html",
+            "index": "apps/fretonator-web/src/index-dev.html",
             "main": "apps/fretonator-web/src/main.ts",
             "polyfills": "apps/fretonator-web/src/polyfills.ts",
             "tsConfig": "apps/fretonator-web/tsconfig.app.json",
@@ -44,6 +44,7 @@
                   "with": "apps/fretonator-web/src/environments/environment.prod.ts"
                 }
               ],
+              "index": "apps/fretonator-web/src/index.html",
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -204,4 +205,4 @@
     }
   },
   "defaultProject": "fretonator-web"
-}
+}

apps/fretonator-web/src/app/app-routing.module.ts

@@ -3,28 +3,34 @@ import { Route, RouterModule, Routes } from '@angular/router';
 
 const home: Route = {
   path: '',
-  loadChildren: () => import('./pages/home/home.module').then((mod) => mod.HomeModule),
+  loadChildren: () => import('./pages/home/home.module').then((mod) => mod.HomeModule)
 };
 
 const about: Route = {
   path: 'about',
-  loadChildren: () => import('./pages/about/about.module').then((mod) => mod.AboutModule),
+  loadChildren: () => import('./pages/about/about.module').then((mod) => mod.AboutModule)
+};
+
+const contact: Route = {
+  path: 'contact',
+  loadChildren: () => import('./pages/contact/contact.module').then((mod) => mod.ContactModule)
 };
 
 const notFound: Route = {
   path: '**',
-  loadChildren: () => import('./pages/not-found/not-found.module').then((mod) => mod.NotFoundModule),
+  loadChildren: () => import('./pages/not-found/not-found.module').then((mod) => mod.NotFoundModule)
 };
 
-const routes: Routes = [home, about, notFound];
+const routes: Routes = [home, about, contact, notFound];
 
 @NgModule({
   imports: [
     RouterModule.forRoot(routes, {
-    initialNavigation: 'enabled',
-    scrollPositionRestoration: 'disabled',
-}),
+      initialNavigation: 'enabled',
+      scrollPositionRestoration: 'disabled'
+    })
   ],
-  exports: [RouterModule],
+  exports: [RouterModule]
 })
-export class AppRoutingModule {}
+export class AppRoutingModule {
+}

apps/fretonator-web/src/app/app.component.spec.ts

@@ -11,9 +11,9 @@ describe('AppComponent', () => {
       imports: [
         RouterTestingModule,
         HeaderModule,
-        FooterModule,
+        FooterModule
       ],
-      declarations: [AppComponent],
+      declarations: [AppComponent]
     }).compileComponents();
   }));
 

apps/fretonator-web/src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.scss'],
+  styleUrls: ['./app.component.scss']
 })
 export class AppComponent {
 }

apps/fretonator-web/src/app/app.module.ts

@@ -16,10 +16,11 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
     BrowserAnimationsModule,
     AppRoutingModule,
     HeaderModule,
-    FooterModule,
+    FooterModule
     // ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
   ],
   providers: [],
-  bootstrap: [AppComponent],
+  bootstrap: [AppComponent]
 })
-export class AppModule {}
+export class AppModule {
+}

apps/fretonator-web/src/app/app.server.module.ts

@@ -9,8 +9,9 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
   imports: [
     AppModule,
     ServerModule,
-    NoopAnimationsModule,
+    NoopAnimationsModule
   ],
-  bootstrap: [AppComponent],
+  bootstrap: [AppComponent]
 })
-export class AppServerModule {}
+export class AppServerModule {
+}

apps/fretonator-web/src/app/common/chips/chip/chip.component.html

@@ -1,6 +1,7 @@
 <a
   [routerLink]="['/', note, noteExtender, mode]"
   [attr.aria-label]="note | createChipLinkTitle: noteExtender: mode"
+  (click)="onClick($event)"
   class="chip"
   [class.chip--active]="selected"
   [class.chip--round]="rounded"

apps/fretonator-web/src/app/common/chips/chip/chip.component.ts

@@ -1,4 +1,4 @@
-import { Component, DoCheck, Input } from '@angular/core';
+import { Component, DoCheck, EventEmitter, Input, Output } from '@angular/core';
 import { Mode } from '../../../util/types';
 import { ActivatedRoute } from '@angular/router';
 
@@ -19,6 +19,7 @@ export class ChipComponent implements DoCheck {
   @Input() selectedColor: SelectedColor = SelectedColor.default;
   @Input() rounded = false;
   @Input() isBaseNote = false;
+  @Output() chipClick = new EventEmitter<MouseEvent>();
   SelectedColor = SelectedColor;
   selected = false;
 
@@ -48,4 +49,8 @@ export class ChipComponent implements DoCheck {
 
     return true;
   }
+
+  onClick(event: MouseEvent) {
+    this.chipClick.emit(event);
+  }
 }

apps/fretonator-web/src/app/common/chips/chip/create-chip-link-title.pipe.ts

@@ -3,10 +3,12 @@ import { Mode, NoteExtenderString } from '../../../util/types';
 import { FretMapService } from '../../fret-map/fret-map.service';
 
 @Pipe({
-  name: 'createChipLinkTitle',
+  name: 'createChipLinkTitle'
 })
 export class CreateChipLinkTitlePipe implements PipeTransform {
-  constructor(public generateFretMapService: FretMapService) {}
+  constructor(public generateFretMapService: FretMapService) {
+  }
+
   transform(
     note: string,
     noteExtender: string,

apps/fretonator-web/src/app/common/chips/chips.component.ts

@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-chips',
   templateUrl: './chips.component.html',
-  styleUrls: ['./chips.component.scss'],
+  styleUrls: ['./chips.component.scss']
 })
 export class ChipsComponent {
 

apps/fretonator-web/src/app/common/chips/chips.module.ts

@@ -9,16 +9,16 @@ import { CreateChipLinkTitlePipe } from './chip/create-chip-link-title.pipe';
   declarations: [
     ChipsComponent,
     ChipComponent,
-    CreateChipLinkTitlePipe,
+    CreateChipLinkTitlePipe
   ],
   imports: [
     CommonModule,
-    RouterModule,
+    RouterModule
   ],
   exports: [
     ChipComponent,
-    ChipsComponent,
-  ],
+    ChipsComponent
+  ]
 })
 export class ChipsModule {
 }

apps/fretonator-web/src/app/common/footer/footer.component.html

@@ -2,7 +2,6 @@
   <div class="footer__inner">
 
     <div class="footer__leftColumn">
-
       <h6 class="footer__sectionTitle">
         Fretonator is open source
       </h6>
@@ -58,15 +57,21 @@ <h6 class="footer__sectionTitle">Who made this?</h6>
       <p class="footer__copy footer__copy--right">I'm a musician and software engineer in Manchester, UK. My goal with
         the Fretonator is to crowdsource feedback and ideas to create the ultimate guitar learning hub that's simple,
         easy and enjoyable to use.</p>
-      <p class="footer__copy footer__copy--right">Feedback/request form coming soon.</p>
+      <a [routerLink]="['/', 'contact']"
+         (click)="onClick()"
+         class="footer__copy footer__copy--right footer__copy--link">Submit your feedback</a>
       <p class="footer__copy footer__copy--right">The Fretonator is free and always will be!</p>
       <a href="https://www.buymeacoffee.com/fretonator"
          rel="nofollow noopener noreferrer"
          target="_blank"
          class="footer__smallButton">
+          <span class="footer__support__svg">
+            <app-coffee-svg></app-coffee-svg>
+          </span>
         Buy me a coffee
       </a>
     </div>
+
   </div>
 
   <p class="footer__copyright">&copy; {{ date | date: 'yyyy' }} Fretonator</p>

apps/fretonator-web/src/app/common/footer/footer.component.scss

@@ -53,14 +53,15 @@
 }
 
 .footer__copy {
-  @include font_bodyCopy();
+  @include font_bodyCopy;
   font-size: pxToRem(15);
   line-height: pxToRem(22);
   color: var(--offwhite);
   display: flex;
   flex-direction: column;
   justify-content: center;
   text-align: center;
+  margin-bottom: pxToRem($grid-unit * 2);
 
   @media screen and (min-width: $screen-med) {
     justify-content: flex-start;
@@ -76,14 +77,26 @@
   }
 }
 
+.footer__copy--link {
+  @include text_link();
+  color: var(--peach);
+  border-color: var(--peach);
+}
+
 .footer__sectionTitle {
-  @include font_medium();
+  @include font_medium;
   font-size: pxToRem(18);
+  line-height: pxToRem(28);
   margin-top: pxToRem($grid-unit);
   margin-bottom: pxToRem($grid-unit);
   color: var(--peach);
   font-weight: var(--font-weight-bold);
   display: flex;
+  text-align: center;
+
+  @media screen and (min-width: $screen-med) {
+    text-align: left;
+  }
 }
 
 .footer__list {
@@ -98,7 +111,7 @@
 }
 
 .footer__listItem {
-  @include font_bodyCopy();
+  @include font_bodyCopy;
   font-size: pxToRem(15);
   line-height: pxToRem(26);
   color: var(--offwhite);
@@ -113,7 +126,7 @@
 }
 
 .footer__copyright {
-  color: var(--grey);
+  color: var(--offwhite);
   font-size: pxToRem(12);
   letter-spacing: var(--letter-spacing-display);
   font-weight: var(--font-weight-bold);

apps/fretonator-web/src/app/common/footer/footer.component.spec.ts

@@ -1,19 +1,32 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { FooterComponent } from './footer.component';
+import { Component } from '@angular/core';
+import { FooterModule } from './footer.module';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('FooterComponent', () => {
-  let component: FooterComponent;
-  let fixture: ComponentFixture<FooterComponent>;
+  @Component({
+    selector: 'app-footer-spec',
+    template: `
+      <app-footer></app-footer>
+    `
+  })
+  class FooterComponentSpec {
+  }
+
+  let component: FooterComponentSpec;
+  let fixture: ComponentFixture<FooterComponentSpec>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [FooterComponent],
+      declarations: [FooterComponentSpec],
+      imports: [FooterModule, RouterTestingModule]
     }).compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(FooterComponent);
+    fixture = TestBed.createComponent(FooterComponentSpec);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

apps/fretonator-web/src/app/common/footer/footer.component.ts

@@ -1,15 +1,18 @@
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component } from '@angular/core';
+import { GlobalService } from '../../global.service';
 
 @Component({
   selector: 'app-footer',
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.scss'],
-  encapsulation: ViewEncapsulation.ShadowDom,
 })
-export class FooterComponent implements OnInit {
+export class FooterComponent {
   date: Date = new Date();
 
-  constructor() {}
+  constructor(private globalService: GlobalService) {
+  }
 
-  ngOnInit(): void {}
+  onClick() {
+    this.globalService.getScrollTarget().scrollIntoView();
+  }
 }

apps/fretonator-web/src/app/common/footer/footer.module.ts

@@ -3,18 +3,16 @@ import { CommonModule } from '@angular/common';
 import { FooterComponent } from './footer.component';
 import { RouterModule } from '@angular/router';
 import { CoffeeModule } from '../svgs/coffee/coffee.module';
-import { CoffeeComponent } from '../svgs/coffee/coffee.component';
 
 @NgModule({
   declarations: [FooterComponent],
   imports: [
     CommonModule,
     RouterModule,
-    CoffeeModule,
+    CoffeeModule
   ],
   exports: [
-    FooterComponent,
-    CoffeeComponent
+    FooterComponent
   ]
 })
 export class FooterModule {