Merge branch 'master' into feat/code-hightlight-performance

ustwo · Aug 2, 2017 · 54ea8df · 54ea8df
2 parents e07d924 + 9ba94e9
commit 54ea8df
Show file tree

Hide file tree

Showing 16 changed files with 127 additions and 108 deletions.
diff --git a/src/app/components/app/index.js b/src/app/components/app/index.js
@@ -39,6 +39,7 @@ const pageMap = {
   'work/design-build': require('app/components/work-design-build'),
   'work/launch-scale': require('app/components/work-launch-scale'),
   'work/ways-of-working': require('app/components/work-ways-of-working'),
+  'work/ustwo-auto': require('app/components/ustwo-auto'),
   'blog': require('app/components/blog'),
   'blog/post': require('app/components/post'),
   'legal': require('app/components/legal'),

diff --git a/src/app/components/featured-case-study/_index.scss b/src/app/components/featured-case-study/_index.scss
@@ -21,14 +21,25 @@
     padding-top: 100px;
     padding-bottom: 150px;
   }
+}
+
+.featured-case-study-image {
+  text-align: center;
+  margin-bottom: 40px;
 
-  @media screen and (min-width: $bp-large) {
-    padding-top: 170px;
-    padding-bottom: 170px;
+  img {
+    width: 90%;
+    max-width: 435px;
+    margin: 0 auto;
   }
 }
 
 @media screen and (min-width: $bp-large) {
+  .featured-case-study {
+    height: $section-height;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
   .featured-case-study-inner {
     display: flex;
   }
@@ -47,21 +58,15 @@
     flex: 1;
     order: 2;
   }
-}
-
-.featured-case-study-image {
-  text-align: center;
-  margin-bottom: 40px;
-
-  img {
-    width: 90%;
-    max-width: 435px;
-    margin: 0 auto;
-  }
+  .featured-case-study-image {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0;
 
-  @media screen and (min-width: $bp-large) {
     img {
-      max-width: 590px;
+      height: 90%;
+      max-width: 500px;
     }
   }
 }
diff --git a/src/app/components/testimonial-carousel/index.js b/src/app/components/testimonial-carousel/index.js
@@ -30,40 +30,45 @@ class TestimonialCarousel extends Component {
   }
 
   getTestimonialsPosition() {
-    const { documentScrollPosition, viewportDimensions } = this.props;
-
-    const testimonialsHeight = this.testimonialsWrapper.getBoundingClientRect().height;
-
-    // Has been some problems relying on the following value.
-    // So I've taken lead from the following to get a more robust solution:
-    // http://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
-    const box = this.testimonialsWrapper.getBoundingClientRect();
-    const body = document.body;
-    const scrollTop = window.pageYOffset || body.scrollTop;
-    const clientTop = body.clientTop || 0;
-    const top = box.top + scrollTop - clientTop;
-    const testimonialsPositionFromTop = Math.round(top);
-
-    const testimonialsPosition = {
-      from: testimonialsPositionFromTop,
-      to: testimonialsPositionFromTop + testimonialsHeight
-    }
+    const { documentScrollPosition, viewportDimensions, type } = this.props;
+
+    // Here type denotes the ustwo-auto colour on the twitter block, meaning it is
+    // a lighter colour and therefore we don't want the navigation to know about it
+    // as we don't want the nav colour to change when over it - getit?
+    if (!type) {
+      const testimonialsHeight = this.testimonialsWrapper.getBoundingClientRect().height;
+
+      // Has been some problems relying on the following value.
+      // So I've taken lead from the following to get a more robust solution:
+      // http://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
+      const box = this.testimonialsWrapper.getBoundingClientRect();
+      const body = document.body;
+      const scrollTop = window.pageYOffset || body.scrollTop;
+      const clientTop = body.clientTop || 0;
+      const top = box.top + scrollTop - clientTop;
+      const testimonialsPositionFromTop = Math.round(top);
+
+      const testimonialsPosition = {
+        from: testimonialsPositionFromTop,
+        to: testimonialsPositionFromTop + testimonialsHeight
+      }
 
-    const fixedHeightTestimonials = testimonialsHeight;
+      const fixedHeightTestimonials = testimonialsHeight;
 
-    Flux.testimonialsPosition(testimonialsPosition);
+      Flux.testimonialsPosition(testimonialsPosition);
+    }
   }
 
   renderTestimonials() {
-    const { style } = this.props;
+    const { type } = this.props;
 
     return this.props.testimonials.map((testimonial, i) => {
       const classes = classnames('testimonial-item', {
         active: i === this.state.currentItem
       });
 
       let icon;
-      if (style === 'twitter-auto') {
+      if (type === 'twitter-auto') {
         icon = (
           <div className="testimonial-icon">
             <SVG
@@ -89,25 +94,6 @@ class TestimonialCarousel extends Component {
     });
   }
 
-  renderTestimonials() {
-    return this.props.testimonials.map((testimonial, i) => {
-      const classes = classnames('testimonial-item', {
-        active: i === this.state.currentItem
-      });
-
-      return (
-        <div key={`testimonial-${i}`} className={classes}>
-          <p>&ldquo;{testimonial.testimonial}&rdquo;</p>
-          <div className="testimonial-name">{testimonial.source.name}</div>
-          <div className="testimonial-smallprint">
-            <span className="testimonial-title">{testimonial.source.title}&nbsp;</span>
-            <span className="testimonial-company">{testimonial.source.company}</span>
-          </div>
-        </div>
-      );
-    });
-  }
-
   componentDidMount() {
     this.getTestimonialsPosition();
     window.addEventListener('resize', this.getTestimonialsPositionBound);
@@ -119,18 +105,18 @@ class TestimonialCarousel extends Component {
   }
 
   render() {
-    const { fixedHeight, style } = this.props;
+    const { fixedHeight, type } = this.props;
     const classes = classnames('testimonial-carousel', {
-      twitterAuto: style === 'twitter-auto'
+      twitterAuto: type === 'twitter-auto'
     });
 
     let styles;
     if (fixedHeight) {
-      styles = { height: `${fixedHeight}px` }
+      styles = { height: `${fixedHeight * .9}px` }
     }
 
     return (
-      <section className="testimonial-carousel" style={styles} ref={(ref) => this.testimonialsWrapper = ref }>
+      <section className={classes} style={styles} ref={(ref) => this.testimonialsWrapper = ref }>
         <div className="testimonial-content">
           {this.renderTestimonials()}
         </div>

diff --git a/src/app/components/ustwo-auto/_index.scss b/src/app/components/ustwo-auto/_index.scss
@@ -75,7 +75,8 @@
   }
 
   .card-list {
-    padding: 100px 0;
+    padding-top: 100px;
+    padding-bottom: 100px;
   }
 
   .testimonial-smallprint {
@@ -111,7 +112,8 @@
 
 .ustwo-auto-team {
   @include core-layout;
-  padding: 100px 0;
+  padding-top: 100px;
+  padding-bottom: 100px;
   text-align: center;
 
   h2 {

diff --git a/src/app/components/ustwo-auto/index.js b/src/app/components/ustwo-auto/index.js
@@ -26,7 +26,7 @@ function UstwoAuto({ page, documentScrollPosition, viewportDimensions, footer, s
     : null;
 
   const renderTwitter = ustwoAutoData.twitter.length > 0
-    ? <TestimonialCarousel testimonials={ustwoAutoData.twitter} fixedHeight={fixedHeight} style="twitter-auto" />
+    ? <TestimonialCarousel testimonials={ustwoAutoData.twitter} fixedHeight={fixedHeight} type="twitter-auto" />
     : null;
 
   const caseStudies = get(page, '_embedded.ustwo:case_studies', []);

diff --git a/src/app/components/work-case-studies/_index.scss b/src/app/components/work-case-studies/_index.scss
@@ -0,0 +1,11 @@
+@media screen and (min-width: $bp-larger) {
+  .work-case-studies {
+    .card-list-inner.lessThanThree {
+      justify-content: flex-start;
+
+      .card-item {
+        margin-right: 30px;
+      }
+    }
+  }
+}
diff --git a/src/app/components/work-case-studies/index.js b/src/app/components/work-case-studies/index.js
@@ -2,15 +2,20 @@ import React from 'react';
 import WorkItem from 'app/components/work-item';
 import LoadMoreButton from 'app/components/load-more-button';
 import kebabCase from 'lodash/string/kebabCase';
+import classnames from 'classnames';
 
 function WorkCaseStudies({ page, caseStudies, caseStudyFilter, numberOfCaseStudiesShowing, addMoreCaseStudies }) {
 
+  if (caseStudyFilter === 'venture') {
+    caseStudyFilter = 'ustwo-venture';
+  }
+
   let filteredCaseStudies;
   if (caseStudyFilter === 'all') {
     filteredCaseStudies = caseStudies;
   } else {
     filteredCaseStudies = caseStudies.filter(caseStudy => {
-      return caseStudy.categories[0].name === caseStudyFilter
+      return caseStudy.categories[0].slug === caseStudyFilter
     });
   }
 
@@ -24,9 +29,13 @@ function WorkCaseStudies({ page, caseStudies, caseStudyFilter, numberOfCaseStudi
     }
   });
 
+  const classes = classnames('card-list-inner', {
+    lessThanThree: filteredCaseStudies.length < 3
+  });
+
   return (
     <div className="card-list work-items-list work-case-studies">
-      <div className="card-list-inner">
+      <div className={classes}>
         {renderCaseStudies}
       </div>
       <LoadMoreButton

diff --git a/src/app/components/work-clients-board/_index.scss b/src/app/components/work-clients-board/_index.scss
@@ -5,8 +5,8 @@
  */
 
 .work-clients-board {
-  padding-top: 130px;
-  padding-bottom: 130px;
+  padding-top: 80px;
+  padding-bottom: 80px;
 
   .work-clients-board-inner {
     max-width: $grid-max-width;
@@ -39,8 +39,8 @@
   }
 
   @media screen and (min-width: $bp-medium) {
-    padding-top: 150px;
-    padding-bottom: 150px;
+    padding-top: 100px;
+    padding-bottom: 100px;
 
     .title {
       margin-bottom: 110px;
@@ -58,8 +58,6 @@
   }
 
   @media screen and (min-width: $bp-large) {
-    padding-top: 170px;
-    padding-bottom: 170px;
 
     .title {
       margin-bottom: 50px;

diff --git a/src/app/components/work-verticals/_index.scss b/src/app/components/work-verticals/_index.scss
@@ -5,6 +5,8 @@
 
 
 .work-verticals {
+  display: flex;
+  flex-wrap: wrap;
 
   .section-title {
     margin-bottom: 5px;
@@ -16,6 +18,9 @@
   background-color: $lightGrey;
   background-repeat: no-repeat;
   background-size: cover;
+  height: $section-height;
+  align-items: center;
+  width: 100%;
 
   h3 {
     margin-bottom: 15px;
@@ -24,21 +29,11 @@
 }
 
 .work-verticals-item-small {
-  display: inline-block;
   width: 50%;
 }
 
 .work-verticals-item-inner {
   position: relative;
-  padding: 100px 0;
-
-  @media screen and (min-width: $bp-medium) {
-    padding: 150px 0;
-  }
-
-  @media screen and (min-width: $bp-larger) {
-    padding: 200px 0;
-  }
 }
 
 .work-vertical-intro {

diff --git a/src/app/components/work-verticals/index.js b/src/app/components/work-verticals/index.js
@@ -15,7 +15,7 @@ function WorkVerticals({ data }) {
       >
         <div className="work-verticals-item-inner">
           <div className="work-verticals-content">
-            <div className="section-title">Expertise</div>
+            <div className="section-title">Research Project</div>
             <h3>{item.title}</h3>
             <p>{item.text}</p>
             <button className="work-verticals-button" onClick={Flux.override(item.slug)}>

diff --git a/src/app/components/work/_index.scss b/src/app/components/work/_index.scss
@@ -166,7 +166,7 @@
   padding: 24px 0;
 }
 
-.page-work-filter {
+.work-item-filter {
   text-align: center;
 
   button {