1. Add scroll target to footer link

2. Rearrange home page to follow 'how-to', add an extra step into 'how-to' and standardise layout
3. Small refactors and optimisations of code style etc

Author: Salma Alam-Naylor

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

@@ -3,33 +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),
+  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, 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/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

@@ -58,6 +58,7 @@ <h6 class="footer__sectionTitle">Who made this?</h6>
         the Fretonator is to crowdsource feedback and ideas to create the ultimate guitar learning hub that's simple,
         easy and enjoyable to use.</p>
       <a [routerLink]="['/', 'contact']"
+         (click)="onLinkClick()"
          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"

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

@@ -53,7 +53,7 @@
 }
 
 .footer__copy {
-  @include font_bodyCopy();
+  @include font_bodyCopy;
   font-size: pxToRem(15);
   line-height: pxToRem(22);
   color: var(--offwhite);
@@ -84,13 +84,19 @@
 }
 
 .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 {
@@ -105,7 +111,7 @@
 }
 
 .footer__listItem {
-  @include font_bodyCopy();
+  @include font_bodyCopy;
   font-size: pxToRem(15);
   line-height: pxToRem(26);
   color: var(--offwhite);