Replicating InfinityCarousel and fixing outdated bugfixes, css changes

2018-07-10 01:14:49 +02:00
parent 5b959fba75
commit 8ec8311204
11 changed files with 1283 additions and 87 deletions
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
    "gatsby-source-wordpress": "^2.0.93",
    "gatsby-transformer-sharp": "^1.6.27",
    "react-helmet": "^5.2.0",
-    "react-leaf-carousel": "^1.1.1",
+    "react-responsive-mixin": "^0.4.0",
    "slideout": "^1.0.1"
  },
  "keywords": [
--- a/src/components/Carousel/InfiniteCarousel.css
+++ b/src/components/Carousel/InfiniteCarousel.css
@@ -0,0 +1,91 @@
+.InfiniteCarousel {
+  position: relative;
+}
+
+.InfiniteCarouselFrame {
+  width: 100%;
+  overflow: hidden;
+}
+
+.InfiniteCarouselScrollTrack {
+  overflow-x: scroll;
+  overflow-y: hidden;
+  white-space: nowrap;
+  -webkit-overflow-scrolling: touch;
+  overflow: -moz-scrollbars-none;
+  -webkit-box-sizing: border-box;
+}
+
+.InfiniteCarouselScrollTrack::-webkit-scrollbar {
+  display: none;
+}
+
+.InfiniteCarouselSlide img {
+  width: 100%;
+}
+
+.InfiniteCarouselDots {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  padding: 0;
+  transform: translateX(-50%);
+}
+
+.InfiniteCarouselDot {
+  display: inline-block;
+  list-style: none;
+  margin: 0 5px;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+
+.InfiniteCarouselDotIcon {
+  display: block;
+  background-color: #e5e5e5;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.InfiniteCarouselDotActiveIcon {
+  background-color: #48799a;
+}
+
+.InfiniteCarouselArrow {
+  display: block;
+  background: none;
+  border: none;
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  outline: none;
+  transform: translateY(-50%);
+  cursor: pointer;
+}
+
+.InfiniteCarouselArrowPrev {
+  left: 15px;
+  right: auto;
+}
+
+.InfiniteCarouselArrowNext {
+  left: auto;
+  right: 15px;
+}
+
+.InfiniteCarouselArrowIcon {
+  display: inline-block;
+  padding: 10px;
+  border: solid #e5e5e5;
+  border-width: 0 5px 5px 0;
+}
+
+.InfiniteCarouselArrowNextIcon {
+  transform: rotate(-45deg);
+}
+
+.InfiniteCarouselArrowPrevIcon {
+  transform: rotate(135deg);
+}
--- a/src/components/Carousel/InfiniteCarouselArrow.js
+++ b/src/components/Carousel/InfiniteCarouselArrow.js
@@ -0,0 +1,41 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+function InfiniteCarouselArrow({ next, onClick, styles }) {
+  const arrowClassName = styles.InfiniteCarouselArrow
+  let typeClassName
+  if (next) {
+    typeClassName = styles.InfiniteCarouselArrowNext
+  } else {
+    typeClassName = styles.InfiniteCarouselArrowPrev
+  }
+
+  const iconClassName = styles.InfiniteCarouselArrowIcon
+  let iconTypeClassName
+  if (next) {
+    iconTypeClassName = styles.InfiniteCarouselArrowNextIcon
+  } else {
+    iconTypeClassName = styles.InfiniteCarouselArrowPrevIcon
+  }
+
+  const className = `${arrowClassName} ${typeClassName}`
+  const classNameIcon = `${iconClassName} ${iconTypeClassName}`
+
+  return (
+    <button className={className} onClick={onClick}>
+      <i className={classNameIcon} />
+    </button>
+  )
+}
+
+InfiniteCarouselArrow.propTypes = {
+  next: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  styles: PropTypes.object.isRequired,
+}
+
+InfiniteCarouselArrow.defaultProps = {
+  next: true,
+}
+
+export default InfiniteCarouselArrow
--- a/src/components/Carousel/InfiniteCarouselDots.js
+++ b/src/components/Carousel/InfiniteCarouselDots.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+function InfiniteCarouselDots({ numberOfDots, activePage, onClick, styles }) {
+  const dots = []
+  const className = styles.InfiniteCarouselDots
+  const dotClassName = styles.InfiniteCarouselDot
+  const dotIconClassName = styles.InfiniteCarouselDotIcon
+  const activeClass = styles.InfiniteCarouselDotActiveIcon
+  let classNameIcon
+
+  for (let i = 0; i < numberOfDots; i += 1) {
+    classNameIcon = `${dotIconClassName} ${i === activePage ? activeClass : ''}`
+    dots.push(
+      <button
+        className={dotClassName}
+        data-index={i}
+        key={i + 1}
+        onClick={onClick}
+      >
+        <i className={classNameIcon} />
+      </button>
+    ) // eslint-disable-line react/jsx-closing-tag-location
+  }
+
+  return <ul className={className}>{dots}</ul>
+}
+
+InfiniteCarouselDots.propTypes = {
+  numberOfDots: PropTypes.number.isRequired,
+  activePage: PropTypes.number.isRequired,
+  onClick: PropTypes.func.isRequired,
+  styles: PropTypes.object.isRequired,
+}
+
+export default InfiniteCarouselDots
--- a/src/components/Carousel/helpers.js
+++ b/src/components/Carousel/helpers.js
@@ -0,0 +1,44 @@
+export function getElementWidth(elem) {
+  return elem.getBoundingClientRect().width || elem.offsetWidth || 0
+}
+
+export function getElementHeight(elem) {
+  return elem.getBoundingClientRect().height || elem.offsetHeight || 0
+}
+
+export function getSwipeDirection(x1, x2, y1, y2) {
+  const xDist = x1 - x2
+  const yDist = y1 - y2
+
+  let swipeAngle = Math.round((Math.atan2(yDist, xDist) * 180) / Math.PI)
+
+  if (swipeAngle < 0) {
+    swipeAngle = 360 - Math.abs(swipeAngle)
+  }
+  if (swipeAngle <= 45 && swipeAngle >= 0) {
+    return 1
+  }
+  if (swipeAngle <= 360 && swipeAngle >= 315) {
+    return 1
+  }
+  if (swipeAngle >= 135 && swipeAngle <= 225) {
+    return -1
+  }
+  return 0
+}
+
+export function isTouchDevice() {
+  return 'ontouchstart' in document.documentElement
+}
+
+export function sortNumber(a, b) {
+  return a - b
+}
+
+export function getScreenWidth() {
+  return (
+    window.innerWidth ||
+    document.documentElement.clientWidth ||
+    document.body.clientWidth
+  )
+}
--- a/src/components/Carousel/index.js
+++ b/src/components/Carousel/index.js
--- a/src/components/Technologies.js
+++ b/src/components/Technologies.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Component } from 'react'
 import Link from 'gatsby-link'

 import iconReact from '../images/react.svg'
@@ -17,10 +17,9 @@ import iconPython from '../images/python.svg'
 import iconRuby from '../images/ruby.svg'
 import iconRails from '../images/rails.svg'
 import iconRedis from '../images/redis.svg'
+import Carousel from './Carousel'

-import Carousel from 'react-leaf-carousel'
-
-const Technologies = ({ ...props }) => (
+const Technologies = () => (
  <Carousel
    breakpoints={[
      {
@@ -45,13 +44,13 @@ const Technologies = ({ ...props }) => (
        },
      },
    ]}
-    dots={false}
+    dots={true}
    autoCycle={true}
-    arrows={false}
+    arrows={true}
    showSides={true}
    pauseOnHover={false}
    cycleInterval={2000}
-    showSides={false}
+    showSides={true}
    sidesOpacity={0.5}
    sideSize={0.1}
    slidesToScroll={2}
--- a/src/pages/services.js
+++ b/src/pages/services.js
@@ -22,9 +22,9 @@ const ServicesPage = () => (
        text="We have experiences with a wide variety of industries and are always keeping track of emerging technologies so that we can deliver forward-thinking solutions. Our developers are handpicked with care to ensure that we always deliver top-notch software quality. With our agile development process we can ensure high productivity and know how to balance between cost, time and quality."
      />
      <div className="md:flex mt-4">
-        <div className="my-1 md:mx-1 border p-6 hover:shadow-md rounded">
-          <h3 className="text-l my-2">Modern Web Development</h3>
-          <p className="leading-normal">
+        <div className="bg-indigo shadow p-6 bg:indigo-light md:rounded-tl">
+          <h3 className="text-l my-2 text-white">Modern Web Development</h3>
+          <p className="leading-normal text-white opacity-80">
            We offer full-cycle web development services for the connected
            world. Our talented developers work with popular languages and are
            always up to speed with cutting edge trends in web development. We
@@ -33,9 +33,9 @@ const ServicesPage = () => (
          </p>
        </div>

-        <div className="my-1 md:mx-1 border hover:shadow-md p-6 rounded">
-          <h3 className="text-l my-2">Mobile App Development</h3>
-          <p className="leading-normal">
+        <div className="bg-indigo shadow p-6">
+          <h3 className="text-l text-white my-2">Mobile App Development</h3>
+          <p className="leading-normal text-white opacity-80">
            We have what it takes to develop competitive iOS and Android
            applications using both native languages and hybrid solutions.
            Solutions for iOS are built with Swift & Objective-C and Android
@@ -44,9 +44,9 @@ const ServicesPage = () => (
          </p>
        </div>

-        <div className="my-1 md:mx-1 border hover:shadow-md p-6 rounded">
-          <h3 className="text-l my-2">UX & UI Design</h3>
-          <p className="leading-normal">
+        <div className="bg-indigo shadow p-6 rounded-tr">
+          <h3 className="text-l my-2 text-white">UX & UI Design</h3>
+          <p className="leading-normal text-white opacity-80">
            Our approach is simple: focus on how users might use the product in
            the best way possible. We offer UX and interface design for all
            screens and devices. The solutions are usually shaped through
@@ -54,7 +54,7 @@ const ServicesPage = () => (
          </p>
        </div>
      </div>
-      <div className="border md:mx-1 my-1 mb-8 hover:shadow-md rounded p-6">
+      <div className="border border-indigo mb-8 rounded-b p-4 shadow">
        <SectionIntro
          headline="Technologies"
          classes="text-center text-l max-w-lg mx-auto"
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -875,7 +875,7 @@ table {
 }

 .bg-indigo {
-  background-color: #6574cd;
+  background-color: #636ef2;
 }

 .bg-indigo-light {
@@ -1167,7 +1167,7 @@ table {
 }

 .group:hover .group-hover\:bg-indigo {
-  background-color: #6574cd;
+  background-color: #636ef2;
 }

 .group:hover .group-hover\:bg-indigo-light {
@@ -1459,7 +1459,7 @@ table {
 }

 .hover\:bg-indigo:hover {
-  background-color: #6574cd;
+  background-color: #636ef2;
 }

 .hover\:bg-indigo-light:hover {
@@ -1823,7 +1823,7 @@ table {
 }

 .border-indigo {
-  border-color: #6574cd;
+  border-color: #636ef2;
 }

 .border-indigo-light {
@@ -2115,7 +2115,7 @@ table {
 }

 .hover\:border-indigo:hover {
-  border-color: #6574cd;
+  border-color: #636ef2;
 }

 .hover\:border-indigo-light:hover {
@@ -4519,7 +4519,7 @@ table {
 }

 .text-indigo {
-  color: #6574cd;
+  color: #636ef2;
 }

 .text-indigo-light {
@@ -4811,7 +4811,7 @@ table {
 }

 .group:hover .group-hover\:text-indigo {
-  color: #6574cd;
+  color: #636ef2;
 }

 .group:hover .group-hover\:text-indigo-light {
@@ -5103,7 +5103,7 @@ table {
 }

 .hover\:text-indigo:hover {
-  color: #6574cd;
+  color: #636ef2;
 }

 .hover\:text-indigo-light:hover {
@@ -5771,7 +5771,7 @@ table {
  }

  .sm\:bg-indigo {
-    background-color: #6574cd;
+    background-color: #636ef2;
  }

  .sm\:bg-indigo-light {
@@ -6063,7 +6063,7 @@ table {
  }

  .group:hover .sm\:group-hover\:bg-indigo {
-    background-color: #6574cd;
+    background-color: #636ef2;
  }

  .group:hover .sm\:group-hover\:bg-indigo-light {
@@ -6355,7 +6355,7 @@ table {
  }

  .sm\:hover\:bg-indigo:hover {
-    background-color: #6574cd;
+    background-color: #636ef2;
  }

  .sm\:hover\:bg-indigo-light:hover {
@@ -6711,7 +6711,7 @@ table {
  }

  .sm\:border-indigo {
-    border-color: #6574cd;
+    border-color: #636ef2;
  }

  .sm\:border-indigo-light {
@@ -7003,7 +7003,7 @@ table {
  }

  .sm\:hover\:border-indigo:hover {
-    border-color: #6574cd;
+    border-color: #636ef2;
  }

  .sm\:hover\:border-indigo-light:hover {
@@ -9391,7 +9391,7 @@ table {
  }

  .sm\:text-indigo {
-    color: #6574cd;
+    color: #636ef2;
  }

  .sm\:text-indigo-light {
@@ -9683,7 +9683,7 @@ table {
  }

  .group:hover .sm\:group-hover\:text-indigo {
-    color: #6574cd;
+    color: #636ef2;
  }

  .group:hover .sm\:group-hover\:text-indigo-light {
@@ -9975,7 +9975,7 @@ table {
  }

  .sm\:hover\:text-indigo:hover {
-    color: #6574cd;
+    color: #636ef2;
  }

  .sm\:hover\:text-indigo-light:hover {
@@ -10644,7 +10644,7 @@ table {
  }

  .md\:bg-indigo {
-    background-color: #6574cd;
+    background-color: #636ef2;
  }

  .md\:bg-indigo-light {
@@ -10936,7 +10936,7 @@ table {
  }

  .group:hover .md\:group-hover\:bg-indigo {
-    background-color: #6574cd;
+    background-color: #636ef2;
  }

  .group:hover .md\:group-hover\:bg-indigo-light {
@@ -11228,7 +11228,7 @@ table {
  }

  .md\:hover\:bg-indigo:hover {
-    background-color: #6574cd;
+    background-color: #636ef2;
  }

  .md\:hover\:bg-indigo-light:hover {
@@ -11584,7 +11584,7 @@ table {
  }

  .md\:border-indigo {
-    border-color: #6574cd;
+    border-color: #636ef2;
  }

  .md\:border-indigo-light {
@@ -11876,7 +11876,7 @@ table {
  }

  .md\:hover\:border-indigo:hover {
-    border-color: #6574cd;
+    border-color: #636ef2;
  }

  .md\:hover\:border-indigo-light:hover {
@@ -14264,7 +14264,7 @@ table {
  }

  .md\:text-indigo {
-    color: #6574cd;
+    color: #636ef2;
  }

  .md\:text-indigo-light {
@@ -14556,7 +14556,7 @@ table {
  }

  .group:hover .md\:group-hover\:text-indigo {
-    color: #6574cd;
+    color: #636ef2;
  }

  .group:hover .md\:group-hover\:text-indigo-light {
@@ -14848,7 +14848,7 @@ table {
  }

  .md\:hover\:text-indigo:hover {
-    color: #6574cd;
+    color: #636ef2;
  }

  .md\:hover\:text-indigo-light:hover {
@@ -15517,7 +15517,7 @@ table {
  }

  .lg\:bg-indigo {
-    background-color: #6574cd;
+    background-color: #636ef2;
  }

  .lg\:bg-indigo-light {
@@ -15809,7 +15809,7 @@ table {
  }

  .group:hover .lg\:group-hover\:bg-indigo {
-    background-color: #6574cd;
+    background-color: #636ef2;
  }

  .group:hover .lg\:group-hover\:bg-indigo-light {
@@ -16101,7 +16101,7 @@ table {
  }

  .lg\:hover\:bg-indigo:hover {
-    background-color: #6574cd;
+    background-color: #636ef2;
  }

  .lg\:hover\:bg-indigo-light:hover {
@@ -16457,7 +16457,7 @@ table {
  }

  .lg\:border-indigo {
-    border-color: #6574cd;
+    border-color: #636ef2;
  }

  .lg\:border-indigo-light {
@@ -16749,7 +16749,7 @@ table {
  }

  .lg\:hover\:border-indigo:hover {
-    border-color: #6574cd;
+    border-color: #636ef2;
  }

  .lg\:hover\:border-indigo-light:hover {
@@ -19137,7 +19137,7 @@ table {
  }

  .lg\:text-indigo {
-    color: #6574cd;
+    color: #636ef2;
  }

  .lg\:text-indigo-light {
@@ -19429,7 +19429,7 @@ table {
  }

  .group:hover .lg\:group-hover\:text-indigo {
-    color: #6574cd;
+    color: #636ef2;
  }

  .group:hover .lg\:group-hover\:text-indigo-light {
@@ -19721,7 +19721,7 @@ table {
  }

  .lg\:hover\:text-indigo:hover {
-    color: #6574cd;
+    color: #636ef2;
  }

  .lg\:hover\:text-indigo-light:hover {
@@ -20390,7 +20390,7 @@ table {
  }

  .xl\:bg-indigo {
-    background-color: #6574cd;
+    background-color: #636ef2;
  }

  .xl\:bg-indigo-light {
@@ -20682,7 +20682,7 @@ table {
  }

  .group:hover .xl\:group-hover\:bg-indigo {
-    background-color: #6574cd;
+    background-color: #636ef2;
  }

  .group:hover .xl\:group-hover\:bg-indigo-light {
@@ -20974,7 +20974,7 @@ table {
  }

  .xl\:hover\:bg-indigo:hover {
-    background-color: #6574cd;
+    background-color: #636ef2;
  }

  .xl\:hover\:bg-indigo-light:hover {
@@ -21330,7 +21330,7 @@ table {
  }

  .xl\:border-indigo {
-    border-color: #6574cd;
+    border-color: #636ef2;
  }

  .xl\:border-indigo-light {
@@ -21622,7 +21622,7 @@ table {
  }

  .xl\:hover\:border-indigo:hover {
-    border-color: #6574cd;
+    border-color: #636ef2;
  }

  .xl\:hover\:border-indigo-light:hover {
@@ -24010,7 +24010,7 @@ table {
  }

  .xl\:text-indigo {
-    color: #6574cd;
+    color: #636ef2;
  }

  .xl\:text-indigo-light {
@@ -24302,7 +24302,7 @@ table {
  }

  .group:hover .xl\:group-hover\:text-indigo {
-    color: #6574cd;
+    color: #636ef2;
  }

  .group:hover .xl\:group-hover\:text-indigo-light {
@@ -24594,7 +24594,7 @@ table {
  }

  .xl\:hover\:text-indigo:hover {
-    color: #6574cd;
+    color: #636ef2;
  }

  .xl\:hover\:text-indigo-light:hover {
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -106,7 +106,7 @@ let colors = {
  'indigo-darkest': '#191e38',
  'indigo-darker': '#2f365f',
  'indigo-dark': '#5661b3',
-  indigo: '#6574cd',
+  indigo: '#636EF2',
  'indigo-light': '#7886d7',
  'indigo-lighter': '#b2b7ff',
  'indigo-lightest': '#e6e8ff',
--- a/yarn.lock
+++ b/yarn.lock
@@ -3393,7 +3393,7 @@ fb-watchman@^2.0.0:
  dependencies:
    bser "^2.0.0"

-fbjs@^0.8.14, fbjs@^0.8.16, fbjs@^0.8.9:
+fbjs@^0.8.14, fbjs@^0.8.9:
  version "0.8.17"
  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
  dependencies:
@@ -7612,15 +7612,6 @@ react-dom@^15.6.0:
    object-assign "^4.1.0"
    prop-types "^15.5.10"

-react-dom@^16.1.0:
-  version "16.4.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.1.tgz#7f8b0223b3a5fbe205116c56deb85de32685dad6"
-  dependencies:
-    fbjs "^0.8.16"
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.0"
-
 react-error-overlay@^3.0.0:
  version "3.0.0"
  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-3.0.0.tgz#c2bc8f4d91f1375b3dad6d75265d51cd5eeaf655"
@@ -7644,15 +7635,6 @@ react-hot-loader@^3.0.0-beta.6:
    redbox-react "^1.3.6"
    source-map "^0.6.1"

-react-leaf-carousel@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/react-leaf-carousel/-/react-leaf-carousel-1.1.1.tgz#38501a2239f2361514e16ce5bae12630863b1aec"
-  dependencies:
-    prop-types "^15.6.0"
-    react "^16.1.0"
-    react-dom "^16.1.0"
-    react-responsive-mixin "^0.4.0"
-
 react-proxy@^3.0.0-alpha.0:
  version "3.0.0-alpha.1"
  resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-3.0.0-alpha.1.tgz#4400426bcfa80caa6724c7755695315209fa4b07"
@@ -7707,15 +7689,6 @@ react@^15.6.0:
    object-assign "^4.1.0"
    prop-types "^15.5.10"

-react@^16.1.0:
-  version "16.4.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32"
-  dependencies:
-    fbjs "^0.8.16"
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.0"
-
 read-all-stream@^3.0.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/read-all-stream/-/read-all-stream-3.1.0.tgz#35c3e177f2078ef789ee4bfafa4373074eaef4fa"