Quotes: reset slideshow delay after user's click, set slideshow delay…

… to 30s; redesigned authors layout.

secrets.env

@@ -0,0 +1,6 @@
+AWS_ACCESS_KEY_ID=AKIAJ2ZGFCHE4AZS7POA
+AWS_SECRET_ACCESS_KEY=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
+AWS_REGION=eu-central-1
+MAPBOX_ACCESS_TOKEN=
+MANDRILL_KEY=
+PICKPOINT_API_KEY=

src/components/Reviews.js

@@ -35,14 +35,14 @@ export default class Reviews extends Component {
 
   state = {
     mobile: true,
-    sliding: false
+    sliding: false,
+    active: 0
   };
 
-  active = 0;
   slideshow = null;
   imageHovered = false;
   length = 0;
-  delay = 5000;
+  delay = 30000;
   clientWidth = 0;
 
   componentDidMount() {
@@ -60,31 +60,42 @@ export default class Reviews extends Component {
     switch (!this.state.mobile && isVisible) {
       case true: {
         if (!this.slideshow) {
-          this.slideshow = setInterval(this.changeSlide, this.delay);
+          this.startSlideshow();
         }
         break;
       }
       case false: {
         if (this.slideshow) {
-          clearInterval(this.slideshow);
-          this.slideshow = null;
+          this.stopSlideshow();
         }
         break;
       }
     }
   };
 
+  startSlideshow = () => {
+    this.slideshow = setInterval(this.changeSlide, this.delay);
+  };
+
+  stopSlideshow = () => {
+    clearInterval(this.slideshow);
+    this.slideshow = null;
+  };
+
   clickHandler = (activeId) => {
-    this.active = activeId;
     this.panel.to(activeId);
+    this.setState({ active: activeId });
+
+    this.stopSlideshow();
+    this.startSlideshow();
   };
 
   changeSlide = () => {
     if (this.imageHovered) {
       return;
     }
 
-    let newActive = this.active;
+    let newActive = this.state.active;
     if (newActive === this.length - 1) {
       newActive = 0;
     } else {
@@ -94,8 +105,7 @@ export default class Reviews extends Component {
     this.setState({ sliding: true });
     setTimeout(() => {
       this.panel.to(newActive);
-      this.active = newActive;
-      this.setState({ sliding: false });
+      this.setState({ active: newActive, sliding: false });
     }, 500);
   };
 
@@ -142,7 +152,7 @@ export default class Reviews extends Component {
               <img className="user_box__avatar" src={q.avatar_url} width="64px" height="64px" alt=""/>
               <div className="user_box__body user_box__body-flexless">
                 <p className="user_box__name"><b>{q.first_name} {q.last_name}</b></p>
-                { q.description &&
+                {q.description &&
                   <p className="user_box__text">
                     <a href={q.link}>
                       {q.description}
@@ -163,13 +173,15 @@ export default class Reviews extends Component {
       const tabs = quotes.map((q, i) => (
         <Tab key={i}>
           <TabTitle className="review_group__navigation_item" classNameActive="review_group__navigation_item-active">
-            <img onMouseOver={() => this.imageHovered = true}
-                 onMouseOut={() => this.imageHovered = false}
-                 className="user_box__avatar"
-                 src={q.avatar_url}
-                 width="64"
-                 height="64"
-                 alt=""/>
+            <img
+              onMouseOver={() => this.imageHovered = true}
+              onMouseOut={() => this.imageHovered = false}
+              className="user_box__avatar review_group__navigation_pic"
+              src={q.avatar_url}
+              width={this.state.active === i ? "80" : "64"}
+              height={this.state.active === i ? "80" : "64"}
+              alt=""
+            />
           </TabTitle>
           <TabContent>
             <blockquote className="review">
@@ -180,7 +192,7 @@ export default class Reviews extends Component {
                 <section className="user_box">
                   <div className="user_box__body">
                     <p className="user_box__name"><b>{q.first_name} {q.last_name}</b></p>
-                    { q.description &&
+                    {q.description &&
                       <p className="user_box__text">
                         <a href={q.link}>
                           {q.description}

src/less/blocks/review_group.less

@@ -29,12 +29,25 @@
 
     &_item {
       margin: 2px;
+      width: 80px;
+      height: 80px;
+
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
       opacity: 0.7;
       cursor: pointer;
+      transition: opacity 0.5s ease;
 
       &-active {
         opacity: 1;
       }
     }
+
+    &_pic {
+      transition: width 0.5s ease,
+        height 0.5s ease;
+    }
   }
 }