Skip to content

Commit 45cab69

Browse files
author
Salma Alam-Naylor
committed
Content for learn/patterns
1 parent 599d0a1 commit 45cab69

File tree

9 files changed

+222
-19
lines changed

9 files changed

+222
-19
lines changed

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

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,7 @@
3030
}
3131

3232
.grid__item {
33-
background-color: var(--white);
34-
padding: pxToRem($grid-unit * 2);
35-
border: pxToRem(2) solid var(--foreground-color-base);
36-
text-decoration: none;
37-
color: var(--foreground-color-base);
38-
@include hard_box_shadow(var(--grey));
33+
@include card;
3934
}
4035

4136
.grid__item--link {
@@ -65,7 +60,7 @@
6560
.grid__item__button {
6661
@include hard_button_base(
6762
var(--black),
68-
var(--peach),
63+
var(--offwhite),
6964
var(--purple)
7065
);
7166
}

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

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,20 @@
1-
import { Component } from '@angular/core';
1+
import { Component, OnInit } from '@angular/core';
2+
import { MetaService } from '../../../common/meta/meta.service';
23

34
@Component({
45
selector: 'app-learn-index',
56
templateUrl: './learn-index.component.html',
67
styleUrls: ['./learn-index.component.scss']
78
})
8-
export class LearnIndexComponent {
9+
export class LearnIndexComponent implements OnInit {
10+
pageDescription = 'Welcome to the Fretonator learning hub, where you can learn music theory tailored to the guitar, guitar techniques and essential maintenance skills.';
11+
pageTitle = 'Learn guitar theory with the Fretonator - the ultimate interactive free guitar theory tool';
12+
pageUrl = 'https://www.fretonator.com/learn';
13+
14+
constructor(private metaService: MetaService) {
15+
}
16+
17+
ngOnInit(): void {
18+
this.metaService.updateAllGenericMeta(this.pageUrl, this.pageTitle, this.pageDescription);
19+
}
920
}

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

Lines changed: 104 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,32 @@
33
<div class="patterns__container">
44
<div class="patterns__intro">
55
<h1 class="patterns__title">Learn the 7 scale patterns on the guitar</h1>
6-
<h1 class="patterns__subtitle">The 3 note per string method</h1>
76
</div>
87
</div>
8+
<div class="patterns__container">
9+
<h5 class="patterns__subtitle">You only need to learn 7 patterns</h5>
10+
<p class="patterns__copy">In order to play and jam in all 7 of the main modes, you <span class="emphasis">only need to learn 7
11+
patterns</span>.
12+
</p>
13+
<p class="patterns__copy">These patterns always appear in <span class="emphasis">the exact same order</span> across
14+
the fretboard,
15+
regardless of the starting note or mode.
16+
</p>
17+
<p class="patterns__copy">Use the fretboard below to explore the patterns of each mode (shown in black). Tap each mode
18+
above the
19+
fretboard to highlight the root position pattern for each mode. You'll notice that each pattern shifts over one or
20+
two frets, and the patterns overlap.</p>
21+
<p class="patterns__copy">You can also jam using the purple notes - they're all part of the same mode, just using
22+
different positions.</p>
23+
<p class="patterns__copy">This means that once you have learned the 7 patterns and how they fit together, you can
24+
play in any key and any mode across the whole fretboard.
25+
</p>
26+
</div>
27+
928

1029
<div class="patterns__container">
30+
<h5 class="patterns__smallTitle">Learn patterns</h5>
31+
1132
<div class="chips">
1233
<button *ngFor="let mode of modeSelectors"
1334
class="chip"
@@ -17,7 +38,85 @@ <h1 class="patterns__subtitle">The 3 note per string method</h1>
1738
</div>
1839
</div>
1940

20-
<app-fretboard
21-
[fretMap]="selectedFretMap"
22-
[stringNamesAreCaseSensitive]="true"
23-
[(loadExpanded)]="shouldExpand"></app-fretboard>
41+
<div class="fretboard__container">
42+
<app-fretboard
43+
[fretMap]="selectedFretMap"
44+
[stringNamesAreCaseSensitive]="true"
45+
[(loadExpanded)]="shouldExpand"></app-fretboard>
46+
</div>
47+
48+
<div class="patterns__container">
49+
<p class="patterns__copy">For example, you want to jam in C Mixolydian? Move the Mixolydian pattern to the 8th fret
50+
on the low E string (C) and the whole 7-mode pattern
51+
moves with it - you can now use all of those notes!</p>
52+
<p class="patterns__copy">Want to play in F# Locrian? Use the Locrian pattern on the 2nd fret on the low E string
53+
(F#) and the whole 7-mode pattern moves with it.
54+
</p>
55+
<p class="patterns__subtitle">This works for ANY key and ANY of the 7 modes.
56+
</p>
57+
<p class="patterns__copy">Try it out - Use the Fretonator on the home page and see how these patterns fit together.
58+
You'll soon realise that there's a lot less to memorise than you think!
59+
</p>
60+
<p class="patterns__copy">If you want to write some songs using these modes, check out the chords that work with
61+
your chosen mode underneath the Fretonator for some inspiration.
62+
</p>
63+
64+
<a [routerLink]="['/']"
65+
[state]="{scrollToTop: true}"
66+
class="patterns__cta">Return to the Fretonator</a>
67+
</div>
68+
69+
<div class="patterns__container">
70+
<h2 class="patterns__subtitle">The theory behind the the standard modes</h2>
71+
<h3 class="patterns__copy">The 7 standard modes on the guitar are generated by starting on different notes of the
72+
major scale (which is, in fact, called the Ionian mode).</h3>
73+
<div class="card">
74+
<h4 class="card__title">Modes of the major scale</h4>
75+
<p class="patterns__copy">The 7 modes of the major scale, in order are:</p>
76+
<ol class="patterns__list">
77+
<li class="patterns__listItem">Ionian (this is the major scale)</li>
78+
<li class="patterns__listItem">Dorian</li>
79+
<li class="patterns__listItem">Phrygian</li>
80+
<li class="patterns__listItem">Lydian</li>
81+
<li class="patterns__listItem">Mixolydian</li>
82+
<li class="patterns__listItem">Aolian (this is the minor scale)</li>
83+
<li class="patterns__listItem">Locrian</li>
84+
</ol>
85+
</div>
86+
<div class="card">
87+
<h5 class="card__title">An example</h5>
88+
<p class="patterns__copy">The 7 standard modes of C Major (C, D, E, F, G, A, B) are:</p>
89+
<ol class="patterns__list">
90+
<li class="patterns__listItem">C Ionian</li>
91+
<li class="patterns__listItem">D Dorian</li>
92+
<li class="patterns__listItem">E Phrygian</li>
93+
<li class="patterns__listItem">F Lydian</li>
94+
<li class="patterns__listItem">G Mixolydian</li>
95+
<li class="patterns__listItem">A Aolian</li>
96+
<li class="patterns__listItem">B Locrian</li>
97+
</ol>
98+
</div>
99+
100+
<div class="card">
101+
<h5 class="card__title">A fun mnemonic</h5>
102+
<p class="patterns__copy">Want an easy way to remember the order of the modes above? Just say:</p>
103+
<ol class="patterns__list patterns__list--mnemonic">
104+
<li class="patterns__listItem patterns__listItem--mnemonic"><span class="left">I</span><span
105+
class="right">Ionian</span></li>
106+
<li class="patterns__listItem patterns__listItem--mnemonic"><span class="left">Don't</span><span
107+
class="right">Dorian</span></li>
108+
<li class="patterns__listItem patterns__listItem--mnemonic"><span class="left">Particularly</span><span
109+
class="right">Phrygian</span>
110+
</li>
111+
<li class="patterns__listItem patterns__listItem--mnemonic"><span class="left">Like</span><span
112+
class="right">Lydian</span></li>
113+
<li class="patterns__listItem patterns__listItem--mnemonic"><span class="left">Modes</span><span class="right">Mixolydian</span>
114+
</li>
115+
<li class="patterns__listItem patterns__listItem--mnemonic"><span class="left">A</span><span
116+
class="right">Aolian</span></li>
117+
<li class="patterns__listItem patterns__listItem--mnemonic"><span class="left">Lot!</span><span
118+
class="right">Locrian</span></li>
119+
</ol>
120+
<p class="patterns__copy">What other ways have you used to remember the order of the 7 modes of the major scale?</p>
121+
</div>
122+
</div>

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55

66
.patterns__container {
77
@include content_container;
8+
margin-bottom: pxToRem($grid-unit * 6);
89
}
910

1011
.patterns__intro {
@@ -18,11 +19,29 @@
1819

1920
.patterns__subtitle {
2021
@include content_subtitle;
22+
margin-bottom: pxToRem($grid-unit * 4);
23+
margin-top: pxToRem($grid-unit * 4);
24+
}
25+
26+
.patterns__smallTitle {
27+
@include fretonator_section_title;
28+
text-align: center;
29+
}
30+
31+
32+
.patterns__copy {
33+
@include content_copy;
34+
}
35+
36+
.emphasis {
37+
font-weight: var(--font-weight-bold);
38+
font-style: italic;
2139
}
2240

2341
.chips {
2442
@include chips_group;
2543
margin-bottom: pxToRem($grid-unit * 4);
44+
margin-top: pxToRem($grid-unit * 2);
2645
}
2746

2847
.chip {
@@ -36,3 +55,52 @@
3655
color: var(--chip-foreground-color-active);
3756
border-color: var(--chip-border-color-active);
3857
}
58+
59+
.fretboard__container {
60+
margin-bottom: pxToRem($grid-unit * 6);
61+
}
62+
63+
.card {
64+
@include card;
65+
margin-top: pxToRem($grid-unit * 4);
66+
margin-bottom: pxToRem($grid-unit * 4);
67+
}
68+
69+
.card__title {
70+
@include fretonator_section_title;
71+
}
72+
73+
.patterns__list {
74+
@include content_ordered_list;
75+
}
76+
77+
.patterns__listItem {
78+
79+
}
80+
81+
.patterns__list--mnemonic {
82+
max-width: 320px;
83+
padding-left: 0;
84+
}
85+
86+
.patterns__listItem--mnemonic {
87+
display: flex;
88+
flex-direction: row;
89+
justify-content: space-between;
90+
91+
.left {
92+
font-weight: var(--font-weight-bold);
93+
}
94+
95+
.right {
96+
font-style: italic;
97+
}
98+
}
99+
100+
.patterns__cta {
101+
@include hard_button_base(
102+
var(--black),
103+
var(--offwhite),
104+
var(--purple)
105+
);
106+
}

‎apps/fretonator-web/src/app/pages/learn/patterns-index/patterns-index.component.spec.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { PatternsIndexComponent } from './patterns-index.component';
44
import { Component, DebugElement } from '@angular/core';
55
import { LearnModule } from '../learn.module';
66
import { By } from '@angular/platform-browser';
7+
import { RouterTestingModule } from '@angular/router/testing';
78

89
describe('PatternsIndexComponent', () => {
910
const selectors = {
@@ -29,7 +30,8 @@ describe('PatternsIndexComponent', () => {
2930
TestBed.configureTestingModule({
3031
declarations: [PatternsIndexComponentSpec],
3132
imports: [
32-
LearnModule
33+
LearnModule,
34+
RouterTestingModule
3335
]
3436
})
3537
.compileComponents();

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,17 @@
1-
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
1+
import { Component, OnInit } from '@angular/core';
22
import { PatternFretMaps, PatternModeSelectors } from '../../../util/constants';
33
import { Mode } from '../../../util/types';
4+
import { MetaService } from '../../../common/meta/meta.service';
45

56
@Component({
67
selector: 'app-patterns-index',
78
templateUrl: './patterns-index.component.html',
89
styleUrls: ['./patterns-index.component.scss']
910
})
1011
export class PatternsIndexComponent implements OnInit {
12+
pageDescription = 'In order to play and Jam in all 7 of the standard modes, you only need to learn 7 patterns. These patterns always appear in the exact same order across the fretboard, regardless of the key or mode.';
13+
pageTitle = 'Learn the 7 scale patterns on the guitar (the 7 standard modes of the major scale)';
14+
pageUrl = 'https://www.fretonator.com/learn/patterns';
1115
modeSelectors = PatternModeSelectors;
1216
selectedMode = Mode.ionian;
1317
selectedFretMap = PatternFretMaps.ionian;
@@ -18,10 +22,11 @@ export class PatternsIndexComponent implements OnInit {
1822
Mode.locrian
1923
];
2024

21-
constructor() {
25+
constructor(private metaService: MetaService) {
2226
}
2327

2428
ngOnInit(): void {
29+
this.metaService.updateAllGenericMeta(this.pageUrl, this.pageTitle, this.pageDescription);
2530
}
2631

2732
setPattern(mode: Mode) {

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

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,9 @@
3535
}
3636
}
3737

38-
@mixin divider {
38+
@mixin divider($color: var(--peach)) {
3939
border-width: pxToRem(2);
40-
border-color: var(--peach);
40+
border-color: $color;
4141
border-style: solid;
4242
margin-top: pxToRem($grid-unit * 4);
4343
margin-bottom: pxToRem($grid-unit * 4);
@@ -154,3 +154,13 @@
154154

155155
@include focus_accessible();
156156
}
157+
158+
159+
@mixin card {
160+
background-color: var(--white);
161+
padding: pxToRem($grid-unit * 2);
162+
border: pxToRem(2) solid var(--foreground-color-base);
163+
text-decoration: none;
164+
color: var(--foreground-color-base);
165+
@include hard_box_shadow(var(--grey));
166+
}

‎apps/fretonator-web/src/styles/_typography.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,3 +48,4 @@
4848
margin-bottom: pxToRem($grid-unit * 1);
4949
color: var(--foreground-color-base);
5050
}
51+

‎apps/fretonator-web/src/styles/content.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ $top_block_max_width: $screen-med;
77

88
@mixin content_container {
99
@include content_wrapper();
10+
max-width: $screen-med;
1011
}
1112

1213
@mixin content_title {
@@ -18,10 +19,21 @@ $top_block_max_width: $screen-med;
1819

1920
@mixin content_subtitle {
2021
@include font_medium;
22+
font-weight: var(--font-weight-bold);
2123
}
2224

2325
@mixin content_intro_copy {
2426
@include font_bodyCopy();
2527
margin-bottom: pxToRem($grid-unit * 4);
2628
max-width: $top_block_max_width;
2729
}
30+
31+
@mixin content_copy {
32+
@include font_bodyCopy();
33+
margin-bottom: pxToRem($grid-unit * 2);
34+
}
35+
36+
@mixin content_ordered_list {
37+
@include font_bodyCopy();
38+
padding: pxToRem($grid-unit * 3);
39+
}

0 commit comments

Comments
 (0)