Skip to content

Commit f914358

Browse files
whitep4nth3rwhitep4nth3r
authored
Merge pull request #46 from ishythefishy/wednesday-spike
Prettified footer and condensed mobile header
2 parents d754db7 + 127f089 commit f914358

22 files changed

+449
-109
lines changed

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

Lines changed: 66 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,73 @@
11
<footer class="footer">
2-
<h6 class="footer__creditsTitle">Fretonator is open source</h6>
3-
<p class="footer__thanksCopy">
4-
Thank you to the following generous contributors:
5-
</p>
6-
<ul class="footer__creditsList">
7-
<li class="footer__creditsListItem">
2+
<div class="footer__inner">
3+
4+
<div class="footer__leftColumn">
5+
6+
<h6 class="footer__sectionTitle">
7+
Fretonator is open source
8+
</h6>
9+
<p class="footer__copy">
10+
Thank you to the following generous contributors:
11+
</p>
12+
<ul class="footer__list">
13+
<li class="footer__listItem">
14+
<a
15+
href="http://drozar.io"
16+
rel="nofollow noopener noreferrer"
17+
target="_blank"
18+
class="footer__listItemLink"
19+
>
20+
Jacob D'Rozario
21+
</a>
22+
- design & UX
23+
</li>
24+
<li class="footer__listItem">
25+
<a
26+
href="https://github.com/geometricpanda"
27+
rel="nofollow noopener noreferrer"
28+
target="_blank"
29+
class="footer__listItemLink"
30+
>Jim Drury</a
31+
>
32+
- all things Angular
33+
</li>
34+
<li class="footer__listItem">
35+
<a
36+
href="https://ell.io.tt/"
37+
rel="nofollow noopener noreferrer"
38+
target="_blank"
39+
class="footer__listItemLink"
40+
>Elliot Brooks</a
41+
>
42+
- audio playback
43+
</li>
44+
</ul>
845
<a
9-
href="http://drozar.io"
46+
class="footer__bigButton"
47+
href="https://github.com/ishythefishy/fretonator"
1048
rel="nofollow noopener noreferrer"
1149
target="_blank"
12-
class="footer__creditsListItemLink"
13-
>
14-
Jacob D'Rozario
50+
>View on GitHub</a>
51+
</div>
52+
53+
<div class="footer__rightColumn">
54+
<h6 class="footer__sectionTitle">Who made this?</h6>
55+
<p class="footer__copy footer__copy--right">
56+
Hey there, I'm Salma.
57+
</p>
58+
<p class="footer__copy footer__copy--right">I'm a musician and software engineer in Manchester, UK. My goal with
59+
the Fretonator is to crowdsource feedback and ideas to create the ultimate guitar learning hub that's simple,
60+
easy and enjoyable to use.</p>
61+
<p class="footer__copy footer__copy--right">Feedback/request form coming soon.</p>
62+
<p class="footer__copy footer__copy--right">The Fretonator is free and always will be!</p>
63+
<a href="https://www.buymeacoffee.com/fretonator"
64+
rel="nofollow noopener noreferrer"
65+
target="_blank"
66+
class="footer__smallButton">
67+
Buy me a coffee
1568
</a>
16-
- design & UX
17-
</li>
18-
<li class="footer__creditsListItem">
19-
<a
20-
href="https://github.com/geometricpanda"
21-
rel="nofollow noopener noreferrer"
22-
target="_blank"
23-
class="footer__creditsListItemLink"
24-
>Jim Drury</a
25-
>
26-
- all things Angular
27-
</li>
28-
<li class="footer__creditsListItem">
29-
<a
30-
href="https://ell.io.tt/"
31-
rel="nofollow noopener noreferrer"
32-
target="_blank"
33-
class="footer__creditsListItemLink"
34-
>Elliot Brooks</a
35-
>
36-
- audio playback
37-
</li>
38-
</ul>
39-
<a
40-
class="footer__viewGithub"
41-
href="https://github.com/ishythefishy/fretonator"
42-
rel="nofollow noopener noreferrer"
43-
target="_blank"
44-
>View on GitHub</a
45-
>
69+
</div>
70+
</div>
71+
4672
<p class="footer__copyright">&copy; {{ date | date: 'yyyy' }} Fretonator</p>
4773
</footer>

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

Lines changed: 105 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,105 @@
66
.footer {
77
background-color: var(--black);
88
box-sizing: border-box;
9+
padding: pxToRem($grid-unit * 6);
10+
border-top: pxToRem($grid-unit) solid var(--peach);
11+
}
12+
13+
.footer__inner {
14+
display: flex;
15+
flex-direction: column;
16+
justify-content: center;
17+
align-items: center;
18+
max-width: 1280px;
19+
margin-left: auto;
20+
margin-right: auto;
21+
22+
@media screen and (min-width: $screen-med) {
23+
flex-direction: row;
24+
align-items: flex-start;
25+
justify-content: space-between;
26+
}
27+
}
28+
29+
.footer__leftColumn {
30+
justify-content: center;
931
display: flex;
1032
flex-direction: column;
33+
align-items: center;
34+
35+
@media screen and (min-width: $screen-med) {
36+
justify-content: flex-start;
37+
align-items: flex-start;
38+
flex-basis: 40%;
39+
}
40+
}
41+
42+
.footer__rightColumn {
1143
justify-content: center;
44+
display: flex;
45+
flex-direction: column;
1246
align-items: center;
13-
padding: pxToRem($grid-unit * 2);
47+
48+
@media screen and (min-width: $screen-med) {
49+
justify-content: flex-end;
50+
align-items: flex-end;
51+
flex-basis: 35%;
52+
}
1453
}
1554

16-
.footer__thanksCopy {
55+
.footer__copy {
1756
@include font_bodyCopy();
57+
font-size: pxToRem(15);
58+
line-height: pxToRem(22);
1859
color: var(--offwhite);
60+
display: flex;
61+
flex-direction: column;
62+
justify-content: center;
1963
text-align: center;
64+
65+
@media screen and (min-width: $screen-med) {
66+
justify-content: flex-start;
67+
text-align: left;
68+
}
69+
}
70+
71+
.footer__copy--right {
72+
@media screen and (min-width: $screen-med) {
73+
justify-content: flex-end;
74+
align-self: flex-end;
75+
text-align: right;
76+
}
2077
}
2178

22-
.footer__creditsTitle {
79+
.footer__sectionTitle {
2380
@include font_medium();
81+
font-size: pxToRem(18);
2482
margin-top: pxToRem($grid-unit);
2583
margin-bottom: pxToRem($grid-unit);
2684
color: var(--peach);
2785
font-weight: var(--font-weight-bold);
28-
text-align: center;
86+
display: flex;
2987
}
3088

31-
.footer__creditsList {
89+
.footer__list {
3290
list-style: none;
3391
text-align: center;
3492
padding: 0;
3593
margin-bottom: pxToRem($grid-unit * 4);
94+
95+
@media screen and (min-width: $screen-med) {
96+
text-align: left;
97+
}
3698
}
3799

38-
.footer__creditsListItem {
100+
.footer__listItem {
39101
@include font_bodyCopy();
102+
font-size: pxToRem(15);
103+
line-height: pxToRem(26);
40104
color: var(--offwhite);
41105
}
42106

43-
.footer__creditsListItemLink {
107+
.footer__listItemLink {
44108
@include text_link();
45109
color: var(--yellow);
46110
border-color: var(--yellow);
@@ -49,16 +113,46 @@
49113
}
50114

51115
.footer__copyright {
52-
color: var(--offwhite);
116+
color: var(--grey);
53117
font-size: pxToRem(12);
54118
letter-spacing: var(--letter-spacing-display);
55119
font-weight: var(--font-weight-bold);
56120
text-transform: uppercase;
57121
display: block;
58-
margin-bottom: pxToRem($grid-unit * 2);
122+
margin-top: pxToRem($grid-unit * 6);
123+
text-align: center;
59124
}
60125

61-
.footer__viewGithub {
126+
.footer__bigButton {
62127
@include hard_button_base();
63-
margin-bottom: pxToRem($grid-unit * 2);
128+
display: inline-flex;
129+
align-self: center;
130+
margin-bottom: pxToRem($grid-unit * 6);
131+
132+
@media screen and (min-width: $screen-med) {
133+
align-self: flex-start;
134+
}
135+
}
136+
137+
.footer__smallButton {
138+
@include chip_button_base();
139+
display: flex;
140+
flex-direction: row;
141+
justify-content: center;
142+
align-items: center;
143+
background-color: var(--black);
144+
margin-top: pxToRem($grid-unit * 4);
145+
padding: pxToRem($grid-unit / 2) pxToRem($grid-unit * 2);
146+
color: var(--yellow);
147+
border-color: var(--yellow);
148+
149+
&:focus {
150+
border-color: transparent;
151+
}
152+
}
153+
154+
.footer__support__svg {
155+
height: pxToRem(20);
156+
width: pxToRem(20);
157+
margin-right: pxToRem($grid-unit / 2);
64158
}

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,20 @@ import { NgModule } from '@angular/core';
22
import { CommonModule } from '@angular/common';
33
import { FooterComponent } from './footer.component';
44
import { RouterModule } from '@angular/router';
5+
import { CoffeeModule } from '../svgs/coffee/coffee.module';
6+
import { CoffeeComponent } from '../svgs/coffee/coffee.component';
57

68
@NgModule({
79
declarations: [FooterComponent],
8-
imports: [CommonModule, RouterModule],
9-
exports: [FooterComponent],
10+
imports: [
11+
CommonModule,
12+
RouterModule,
13+
CoffeeModule,
14+
],
15+
exports: [
16+
FooterComponent,
17+
CoffeeComponent
18+
]
1019
})
11-
export class FooterModule {}
20+
export class FooterModule {
21+
}

‎apps/fretonator-web/src/app/common/fret-map/fret-map.service.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import {
99
NoteExtenderString,
1010
NoteObject,
1111
NoteSymbol,
12-
SimilarMode,
1312
SimilarModes
1413
} from '../../util/types';
1514
import {

‎apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,4 +230,6 @@
230230

231231
.actionButton {
232232
@include hard_button_base();
233+
margin-left: auto;
234+
margin-right: auto;
233235
}

‎apps/fretonator-web/src/app/common/fretonator/scale-map/scale-map.component.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, Input } from '@angular/core';
2-
import { Mode, ModeMap, Scale } from '../../../util/types';
2+
import { Mode, ModeMap } from '../../../util/types';
33
import { NotePlaybackService } from '../../playback/note-playback.service';
44

55
enum ScaleDegreesToggleText {

0 commit comments

Comments
 (0)