Optimised content for learn

Author: Salma Alam-Naylor

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`FretonatorComponent should create 1`] = `FretonatorComponentSpec {}`;

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

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
 import { FretMap, Mode } from '../../../util/types';
 import { NotePlaybackService } from '../../playback/note-playback.service';
 

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

@@ -3,19 +3,8 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 import { FretonatorComponent } from './fretonator.component';
 import { FretonatorModule } from './fretonator.module';
 import { Component } from '@angular/core';
-import { By } from '@angular/platform-browser';
 
 describe('FretonatorComponent', () => {
-
-  const selectors = {
-    twelveButton: By.css('.fretboard__toggleButton--twelve'),
-    twentyFourButton: By.css('.fretboard__toggleButton--twentyFour')
-  };
-
-  const classNames = {
-    toggleFretButtonSelected: 'fretboard__toggleButton--active'
-  };
-
   @Component({
     selector: 'app-fretonator-spec',
     template: `
@@ -54,5 +43,6 @@ describe('FretonatorComponent', () => {
 
   it('should create', () => {
     expect(component).toBeTruthy();
+    expect(component).toMatchSnapshot();
   });
 });

apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.html

@@ -1,7 +1,7 @@
 <div class="similarModes" *ngIf="similarModes.length > 0 && !isTheoretical">
   <h4 class="similarModes__title">Did you know?</h4>
-  <p class="similarModes__copy">If you know the patterns of {{modeDisplayString}} on the fretboard,
-    you can transfer those shapes to the modes below.</p>
+  <p class="similarModes__copy">If you know {{modeDisplayString}} on the fretboard,
+    you can already play the modes below!</p>
 
   <div class="chipsContainer">
     <app-chips>
@@ -13,12 +13,18 @@ <h4 class="similarModes__title">Did you know?</h4>
     </app-chips>
   </div>
 
-  <p class="similarModes__copy">There are only 7 patterns you need to learn. Once you've memorised those patterns,
-    you can play any of the 7 standard modes <em>(Ionian, Dorian, Phrygian, Lydian, Mixolydian, Aolian, Locrian</em>)
-    from
-    any starting note, anywhere on the fretboard.</p>
-  <p class="similarModes__copy">These patterns always appear in the same order, one after the other.</p>
+  <p class="similarModes__copy">In order to play and jam in all 7 of the main modes, you <span class="emphasis">only need to learn 7
+    patterns</span>.
+  </p>
+  <p class="similarModes__copy">These patterns always appear in <span class="emphasis">the exact same order</span>
+    across
+    the fretboard, regardless of the starting note or mode.</p>
+
+  <p class="similarModes__copy">You might have heard this named as the <span
+    class="emphasis">3 note per string</span> method. Learn more about this and the 7 standard modes of the major scale
+    in our
+    learning hub.</p>
   <a [routerLink]="['/', 'learn', 'patterns']"
      [state]="{scrollToTop: true}"
-     class="similarModes__cta">Learn more</a>
+     class="similarModes__cta">Learn about patterns</a>
 </div>

apps/fretonator-web/src/app/common/fretonator/similar-modes/similar-modes.component.scss

@@ -39,6 +39,11 @@
   }
 }
 
+.emphasis {
+  font-weight: var(--font-weight-bold);
+  font-style: italic;
+}
+
 .similarModes__cta {
   @include hard_button_base;
   margin-left: auto;

apps/fretonator-web/src/app/pages/learn/learn-index/learn-index.component.html

@@ -2,6 +2,7 @@
 
 <div class="learn__container">
   <h1 class="learn__title">Learn Guitar Theory</h1>
+  <h2 class="learn__subtitle">Fretonator Learning Hub</h2>
   <p class="learn__introCopy">Welcome to the Fretonator learning hub, where you can learn music theory tailored to the
     guitar, guitar techniques and essential maintenance skills.</p>
   <p class="learn__introCopy">We'll be adding new content regularly, so please keep checking back!</p>

apps/fretonator-web/src/app/pages/learn/learn-index/learn-index.component.scss

@@ -12,6 +12,10 @@
   @include content_title;
 }
 
+.learn__subtitle {
+  @include fretonator_section_title;
+}
+
 .learn__introCopy {
   @include content_intro_copy;
 }

apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.html

@@ -1,6 +1,11 @@
 <app-stripe-banner></app-stripe-banner>
 
+
 <div class="patterns__container">
+  <div class="breadcrumbs">
+    <a [routerLink]="['/', 'learn']" class="breadcrumbs__link">
+      Go back to the Learn Hub</a>
+  </div>
   <div class="patterns__intro">
     <h1 class="patterns__title">Learn the 7 scale patterns on the guitar</h1>
   </div>
@@ -14,20 +19,13 @@ <h5 class="patterns__subtitle">You only need to learn 7 patterns</h5>
     the fretboard,
     regardless of the starting note or mode.
   </p>
-  <p class="patterns__copy">Use the fretboard below to explore the patterns of each mode (shown in black). Tap each mode
-    above the
-    fretboard to highlight the root position pattern for each mode. You'll notice that each pattern shifts over one or
-    two frets, and the patterns overlap.</p>
-  <p class="patterns__copy">You can also jam using the purple notes - they're all part of the same mode, just using
-    different positions.</p>
-  <p class="patterns__copy">This means that once you have learned the 7 patterns and how they fit together, you can
-    play in any key and any mode across the whole fretboard.
-  </p>
+  <p class="patterns__copy">Use the fretboard below to explore the patterns of each mode (shown in black). Notice that
+    each pattern is made of <span class="emphasis">3 notes per string</span>.</p>
 </div>
 
 
 <div class="patterns__container">
-  <h5 class="patterns__smallTitle">Learn patterns</h5>
+  <h5 class="patterns__smallTitle">Choose a pattern</h5>
 
   <div class="chips">
     <button *ngFor="let mode of modeSelectors"
@@ -46,6 +44,14 @@ <h5 class="patterns__smallTitle">Learn patterns</h5>
 </div>
 
 <div class="patterns__container">
+  <p class="patterns__copy">Tap each mode above the fretboard to highlight the <span class="emphasis">root position pattern</span>
+    for each mode.
+    You'll notice that each pattern shifts up one or two frets, and the patterns overlap.</p>
+  <p class="patterns__copy">You can also jam using the purple notes - they're all part of the same mode, just using
+    different positions.</p>
+  <p class="patterns__copy">Once you have learned the 7 patterns and how they fit together, <span class="emphasis">you can
+    play in any key and any mode across the whole fretboard.</span>
+  </p>
   <p class="patterns__copy">For example, you want to jam in C Mixolydian? Move the Mixolydian pattern to the 8th fret
     on the low E string (C) and the whole 7-mode pattern
     moves with it - you can now use all of those notes!</p>
@@ -54,7 +60,7 @@ <h5 class="patterns__smallTitle">Learn patterns</h5>
   </p>
   <p class="patterns__subtitle">This works for ANY key and ANY of the 7 modes.
   </p>
-  <p class="patterns__copy">Try it out - Use the Fretonator on the home page and see how these patterns fit together.
+  <p class="patterns__copy">Try it out! Use the Fretonator on the home page and see how these patterns fit together.
     You'll soon realise that there's a lot less to memorise than you think!
   </p>
   <p class="patterns__copy">If you want to write some songs using these modes, check out the chords that work with
@@ -67,8 +73,8 @@ <h5 class="patterns__smallTitle">Learn patterns</h5>
 </div>
 
 <div class="patterns__container">
-  <h2 class="patterns__subtitle">The theory behind the the standard modes</h2>
-  <h3 class="patterns__copy">The 7 standard modes on the guitar are generated by starting on different notes of the
+  <h2 class="patterns__subtitle">And finally: the theory behind the the standard modes</h2>
+  <h3 class="patterns__copy">The 7 standard modes are generated by starting on different notes of the
     major scale (which is, in fact, called the Ionian mode).</h3>
   <div class="card">
     <h4 class="card__title">Modes of the major scale</h4>
@@ -119,4 +125,7 @@ <h5 class="card__title">A fun mnemonic</h5>
     </ol>
     <p class="patterns__copy">What other ways have you used to remember the order of the 7 modes of the major scale?</p>
   </div>
+  <a [routerLink]="['/']"
+     [state]="{scrollToTop: true}"
+     class="patterns__cta">Return to the Fretonator</a>
 </div>

apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.scss

@@ -3,6 +3,19 @@
 @import '../../../../styles/typography';
 @import '../../../../styles/content';
 
+.breadcrumbs {
+  margin-top: pxToRem($grid-unit * 2);
+  margin-bottom: pxToRem($grid-unit * 2);
+}
+
+.breadcrumbs__link {
+  @include text_link;
+}
+
+.breadcrumbs__link__svg {
+  color: inherit;
+}
+
 .patterns__container {
   @include content_container;
   margin-bottom: pxToRem($grid-unit * 6);

apps/fretonator-web/src/styles/_mixins.scss

@@ -23,7 +23,7 @@
   font-size: inherit;
   color: var(--grey);
   cursor: pointer;
-  border-bottom: pxToRem(1) solid var(--grey);
+  border-bottom: pxToRem(2) solid var(--grey);
   padding-bottom: pxToRem(1);
   transition: color 0.1s ease-in-out, border-color 0.1s ease-in-out;