Skip to content

Commit 636df43

Browse files
thetoinethetoine
committed
mobile QA
1 parent 38d6230 commit 636df43

13 files changed

+94
-35
lines changed

‎src/components/base/landing.module.scss

+20
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
/// @group base
88

99
$header-height: 80vh;
10+
$header-height-mobile: $header-height / 1.5;
1011

1112
@keyframes headerAnimation {
1213
from {
@@ -19,6 +20,18 @@ $header-height: 80vh;
1920
}
2021
}
2122

23+
@keyframes headerAnimationMobile {
24+
from {
25+
height: 100vh;
26+
background: $white;
27+
}
28+
to {
29+
height: $header-height / 1.5;
30+
background: $black;
31+
}
32+
}
33+
34+
2235
.landing {
2336
display: block;
2437

@@ -27,6 +40,10 @@ $header-height: 80vh;
2740
color: $white;
2841
height: $header-height;
2942
@include vertical-inner;
43+
@include media-breakpoint-down(xs) {
44+
padding-top: 65px;
45+
height: $header-height-mobile;
46+
}
3047
}
3148

3249
&__withIntro {
@@ -37,6 +54,9 @@ $header-height: 80vh;
3754
animation-duration: 2s;
3855
animation-delay: 2s;
3956
animation-fill-mode: backwards;
57+
@include media-breakpoint-down(xs) {
58+
animation-name: headerAnimationMobile;
59+
}
4060
}
4161

4262
}

‎src/components/footer/footer.module.scss

+12
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@
44
padding-top: $spacer-xl * 2;
55
padding-bottom: $spacer-xl;
66

7+
@include media-breakpoint-down(xs) {
8+
padding-top: $spacer-xl;
9+
}
10+
711
a {
812
color: $black !important;
913
}
@@ -12,4 +16,12 @@
1216
margin-bottom: 4px;
1317
}
1418

19+
// nav {
20+
// border: 1px solid red;
21+
// @include media-breakpoint-down(xs) {
22+
// margin-left: inherit !important;
23+
// margin-right: auto !important;
24+
// }
25+
// }
26+
1527
}

‎src/components/header/header.module.scss

-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,4 @@
66
left: 0;
77
width: 100%;
88
padding: $spacer;
9-
@include media-breakpoint-down(xs) {
10-
padding-left: $spacer-lg;
11-
}
129
}

‎src/components/logo/logo.module.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,11 @@ $logo-font-size: 102px;
3636
font-size: $logo-font-size/1.25;
3737
}
3838
@include media-breakpoint-down(xs) {
39-
font-size: $logo-font-size/4;
39+
font-size: $logo-font-size/2.25;
40+
line-height: 1.05;
4041
padding-left: $grid-gutter-width;
4142
padding-right: $grid-gutter-width;
43+
margin-bottom: 12px;
4244
}
4345
}
4446

@@ -51,7 +53,7 @@ $logo-font-size: 102px;
5153
text-transform: lowercase;
5254
@include media-breakpoint-down(xs) {
5355
padding-left: 5px;
54-
font-size: $h4-font-size;
56+
font-size: $h6-font-size;
5557
}
5658
}
5759

‎src/components/nav/nav.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ class Nav extends React.Component {
6060
exact
6161
// isActive={this.isActive}
6262
className={`${styles.navLink}`}
63-
activeClassName={`${styles.navLink__active}`}
63+
activeClassName={`${styles.navLink__active} d-none d-md-block`}
6464
onClick={(e) => this.scrollToProjects(e)}
6565
>
6666
<LocaleString string={'Selected Work'} />
@@ -122,7 +122,7 @@ class Nav extends React.Component {
122122

123123
return (
124124
<nav className={`${styles.nav} d-flex`}>
125-
<ul className='nav ml-md-auto'>
125+
<ul className='nav ml-auto'>
126126

127127
{/* root url */}
128128
{(!this.props.credits && !this.props.social) &&

‎src/components/nav/nav.module.scss

+3
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,9 @@
2323
padding: 0;
2424
opacity: 0.5;
2525
transition: all 0.25s;
26+
&::first-letter {
27+
text-transform: capitalize;
28+
}
2629
&:hover {
2730
opacity: 1;
2831
}

‎src/components/pages/pages.module.scss

+5
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,11 @@
66

77
&__header {
88
margin-bottom: $spacer-xl;
9+
@include media-breakpoint-down(xs) {
10+
h1 {
11+
font-size: $h2-font-size;
12+
}
13+
}
914
}
1015

1116
}

‎src/components/projects/Projects.js

+9-21
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,19 @@ class Projects extends Component {
1212
constructor(props) {
1313
super(props)
1414
this.state = {
15-
filterByProjectTypeID : null,
16-
hasChanged: false
15+
filterByProjectTypeID : null
1716
}
1817
this.changeFilterSelection = this.changeFilterSelection.bind(this)
1918
}
2019

2120
componentDidUpdate(prevProps, prevState) {
2221
// console.log(prevProps, prevState);
23-
if (prevState.filterByProjectTypeID != this.state.filterByProjectTypeID) {
24-
this.setState({
25-
hasChanged: true
26-
})
27-
}
22+
// if (prevState.filterByProjectTypeID != this.state.filterByProjectTypeID) {
23+
// this.setState({
24+
// hasChanged: true
25+
// })
26+
// }
2827
}
29-
30-
// componentWillUpdate() {
31-
32-
// }
3328

3429
list() {
3530
if (this.props.data && this.props.data.edges) {
@@ -108,16 +103,9 @@ class Projects extends Component {
108103

109104
{/* all work */}
110105
<aside className="col-12 col-md-8">
111-
{this.state.hasChanged &&
112-
<Fade delay={250}>
113-
{this.list()}
114-
</Fade>
115-
}
116-
{!this.state.hasChanged &&
117-
<React.Fragment>
118-
{this.list()}
119-
</React.Fragment>
120-
}
106+
<React.Fragment>
107+
{this.list()}
108+
</React.Fragment>
121109
</aside>
122110

123111
</div>

‎src/components/projects/projects.module.scss

+17-2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,13 @@
1010
.project_preview {
1111
margin-bottom: 10px;
1212

13+
picture {
14+
@include media-breakpoint-down(xs) {
15+
@include snap-to-side;
16+
width: 100vw;
17+
}
18+
}
19+
1320
&__preview_image {
1421
img {
1522
width: 100%;
@@ -27,6 +34,7 @@
2734
padding: $spacer 0;
2835
transition: padding 0.5s;
2936
position: relative;
37+
3038
}
3139

3240
&__arrow {
@@ -88,11 +96,15 @@
8896

8997
.projects_sidebar {
9098
position: relative;
91-
min-height: 120vh;
99+
@include media-breakpoint-up(md) {
100+
min-height: 120vh;
101+
}
92102
h3 {
93103
line-height: 1;
94104
@include media-breakpoint-down(xs) {
95105
font-size: $h2-font-size;
106+
text-align: center;
107+
96108
}
97109
}
98110
}
@@ -104,7 +116,7 @@
104116
/// @group projects
105117

106118
.projects__filters {
107-
// border: 1px solid red;
119+
108120
a {
109121
display: block;
110122
padding: $spacer-xs 0;
@@ -113,6 +125,9 @@
113125
color: $gray-500;
114126
text-decoration: none;
115127
}
128+
@include media-breakpoint-down(xs) {
129+
text-align: center;
130+
}
116131
}
117132

118133
&__link_active {

‎src/components/reel/ReelPlayer.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ class ReelPlayer extends React.Component {
124124
<div className={styles.reel__overlay} onClick={(e) => this.setFullVideo(e)}>
125125
<div className={styles.reel__overlay__inner} >
126126
{/* call to action with proximity detection */}
127-
<h4 ref={this.props.proximityRef} className={`${styles.reel__label} d-none d-md-inline-block`}>
127+
<h4 ref={this.props.proximityRef} className={`${styles.reel__label}`}>
128128
<Fade bottom delay={350} distance={"50%"}>
129129
<div>
130130
<img alt="play icon" src={playSVG} />

‎src/components/reel/reel.module.scss

+8-3
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
transition: height 1.25s;
1111

1212
@include media-breakpoint-down(xs) {
13-
height: 250px;
13+
height: 150px;
1414
}
1515

1616
&__label {
@@ -23,11 +23,18 @@
2323
font-size: $h2-font-size;
2424
font-family: $font-family-sans-serif;
2525
z-index: 100;
26+
@include media-breakpoint-down(xs) {
27+
font-size: $h3-font-size;
28+
}
2629
img {
2730
width: 20px;
2831
margin-right: 15px;
2932
position: relative;
3033
top: -4px;
34+
@include media-breakpoint-down(xs) {
35+
width: 14px;
36+
margin-right: 10px;
37+
}
3138
}
3239
hr {
3340
border-color: $white;
@@ -39,8 +46,6 @@
3946
&:hover {
4047
hr {
4148
width: 100%;
42-
43-
// transform: scaleX(1)
4449
}
4550
}
4651
}

‎src/style/ui/_entry.scss

+12
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,18 @@
1818
}
1919
}
2020

21+
h2 {
22+
@include media-breakpoint-down(xs) {
23+
font-size: $h3-font-size;
24+
}
25+
}
26+
27+
// h3 {
28+
// @include media-breakpoint-down(xs) {
29+
// font-size: $h3-font-size;
30+
// }
31+
// }
32+
2133
p {
2234
font-size: $font-size-lg;
2335
line-height: 1.5;

‎src/utils/LocaleString.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const translations = {
1616
'Cinematographer' : 'Directeur photo',
1717
'Selected Work' : 'Projets sélectionnés',
1818
'Play Reel' : 'Jouer Démo',
19-
'selected_work_block' : 'Projets <span class="is-sans-serif d-block">sélectionnés</span>',
19+
'selected_work_block' : 'Projets <span class="is-sans-serif d-md-block">sélectionnés</span>',
2020
'Credits' : 'Crédits',
2121
}
2222
}

0 commit comments

Comments
 (0)