add swipe to siedbar, move sidebar

app/components/Sidebar/Sidebar.css

@@ -1,12 +1,23 @@
 /** @define Sidebar */
 
 .Sidebar {
+  position: fixed;
+  top: 0;
+  left: 100%;
   display: flex;
   flex-direction: column;
-  height: 100%;
+  width: 16rem;
+  max-width: 100vw;
+  height: 100vh;
   padding: 1rem;
   font-size: 12px;
+  background-color: #fff;
   box-shadow: inset 1rem 0 .75rem -1rem rgba(0, 0, 0, .5);
+  transition: transform var(--time-animation);
+}
+
+.Sidebar.is-active {
+  transform: translateX(-100%);
 }
 
 .Sidebar-title {

app/components/Sidebar/Sidebar.js

@@ -1,7 +1,8 @@
-import React, { PureComponent } from 'react';
+import React, { PureComponent, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import cs from 'classnames';
 import gql from 'graphql-tag';
-import { MdArrowBack } from 'react-icons/md';
+import { MdArrowForward } from 'react-icons/md';
 import getAllData from '../../../scripts/cfGraphql-es6';
 
 import SidebarContentEvent from './SidebarContentEvent';
@@ -115,24 +116,26 @@ class Sidebar extends PureComponent {
   }
 
   render() {
-    const { changeSidebarContent, contentElement: { type: contentType } } = this.props;
+    const { isActive, changeSidebarContent, contentElement: { type: contentType } } = this.props;
     const { content } = this.state;
 
-    if (!content) return null;
-
     return (
-      <div className="Sidebar">
-        <MdArrowBack className="Sidebar-icon Sidebar-icon--back" onClick={() => changeSidebarContent(undefined)} />
-        {contentType === 'event' && <SidebarContentEvent {...content} />}
-        {contentType === 'person' && <SidebarContentPerson {...content} />}
-        {contentType === 'time' && <SidebarContentTime {...content} />}
-      </div>
+      <aside className={cs('Sidebar', { 'is-active': isActive })}>
+        <MdArrowForward className="Sidebar-icon Sidebar-icon--back" onClick={() => changeSidebarContent(undefined)} />
+        { content &&
+          <Fragment>
+            {contentType === 'event' && <SidebarContentEvent {...content} />}
+            {contentType === 'person' && <SidebarContentPerson {...content} />}
+            {contentType === 'time' && <SidebarContentTime {...content} />}
+          </Fragment>
+        }
+      </aside>
     );
   }
 }
 
 Sidebar.defaultProps = {
-  contentElement: undefined,
+  contentElement: {},
 };
 
 Sidebar.propTypes = {

app/components/Time/Time.css

@@ -37,5 +37,4 @@
 .Time-name {
   position: sticky;
   left: .5em;
-  padding-bottom: .25em;
 }

app/components/Timeline/Timeline.css

@@ -2,7 +2,7 @@
 
 :root {
   --Time-yearsBeforeZero: 4100px;
-  --Time-yearsAfterZero: 2200px;
+  --Time-yearsAfterZero: 2500px;
 }
 
 .Timeline {

app/components/Timeline/Timeline.js

@@ -102,6 +102,7 @@ class Timeline extends Component {
       events,
       changeSidebarContent,
     } = this.props;
+
     const {
       activePersons,
       activeTimes,

app/css/shame.css

@@ -7,12 +7,17 @@
   height: 100vh;
 }
 
-.Page-wrapSidebar {
-  flex-shrink: 0;
-  flex-basis: 16rem;
-}
-
 .Page-wrapTimeline {
   flex-grow: 1;
   overflow: auto;
 }
+
+.Page-wrapSidebar {
+  position: absolute;
+  top: 0;
+  left: 100%;
+  width: 16rem;
+  max-width: 95vw;
+  height: 100vh;
+}
+

app/js/calcTimes.js

@@ -51,8 +51,8 @@ export function calcPoints(type, year, vagueness) {
 }
 
 function maxEnd(value) {
-  if (value > 2200) {
-    return 2200;
+  if (value > 2500) {
+    return 2500;
   }
   return value;
 }

package.json

@@ -78,6 +78,8 @@
     "react": "16.5.2",
     "react-addons-test-utils": "15.6.2",
     "react-dom": "16.5.2",
+    "react-easy-swipe": "0.0.17",
+    "react-icons": "3.2.1",
     "react-reveal": "1.2.2",
     "react-test-renderer": "16.5.2",
     "style-loader": "0.23.0",

pages/index.js

@@ -1,23 +1,47 @@
-import React from 'react';
+import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-
+import Swipe from 'react-easy-swipe';
 
 import '../app/css/index.css';
 
 // import Header from '../app/components/Header/Header';
 import Timeline from '../app/components/Timeline/Timeline';
+import Sidebar from '../app/components/Sidebar/Sidebar';
 import { formatPerson, formatTime, formatEvent } from '../scripts/formatData';
 
-const Page = ({ persons, times, events }) => {
-  return (
-    <div className="Page">
-      {/* <Header /> */}
-      <section className="Page-wrapTimeline" role="main">
-        <Timeline persons={persons} times={times} events={events} />
-      </section>
-    </div>
-  );
-};
+class Page extends PureComponent {
+  state = {
+    activeElement: undefined,
+  }
+
+  changeSidebarContent = (id, type) => {
+    this.setState({
+      activeElement: {
+        id,
+        type,
+      },
+    });
+  }
+
+  render() {
+    const { persons, times, events } = this.props;
+    const { activeElement } = this.state;
+    return (
+      <div className="Page">
+        {/* <Header /> */}
+        <section className="Page-wrapTimeline" role="main">
+          <Timeline persons={persons} times={times} events={events} changeSidebarContent={this.changeSidebarContent} />
+        </section>
+        <Swipe onSwipeRight={() => this.changeSidebarContent(undefined)}>
+          <Sidebar
+            isActive={activeElement && activeElement.id}
+            contentElement={activeElement}
+            changeSidebarContent={this.changeSidebarContent} />
+        </Swipe>
+      </div>
+    );
+  }
+}
 
 Page.getInitialProps = async ({ query: { data } }) => {
   const {

scripts/cfGraphql-es6.js

@@ -0,0 +1,50 @@
+import { ApolloClient } from 'apollo-client';
+import { InMemoryCache } from 'apollo-cache-inmemory';
+import { HttpLink } from 'apollo-link-http';
+import fetch from 'node-fetch';
+
+
+function newContenfulGQLClient({
+  baseURL = 'https://graphql.contentful.com/content/v1',
+  spaceId,
+  cdaToken,
+}) {
+  try {
+    const link = new HttpLink({
+      fetch,
+      uri: `${baseURL}/spaces/${spaceId}`,
+      headers: {
+        Authorization: `Bearer ${cdaToken}`,
+      },
+    });
+
+    return new ApolloClient({
+      link,
+      cache: new InMemoryCache(),
+    });
+  } catch (error) {
+    if (error.networkError) {
+      console.error(error.networkError.results.errors);
+    }
+  }
+}
+
+const client = newContenfulGQLClient({
+  spaceId: process.env.CONTENTFUL_SPACE_ID,
+  cdaToken: process.env.CONTENTFUL_CONTENT_DELIVERY_TOKEN,
+});
+
+
+async function getAllData(query) {
+  try {
+    const { data } = await client.query({ query });
+
+    return data;
+  } catch (error) {
+    if (error.networkError) {
+      console.error(error.networkError.result.errors);
+    }
+  }
+}
+
+export default getAllData;

scripts/gqlSchema.js

@@ -20,27 +20,11 @@ module.exports = gql`{
         id
       }
       name,
-      image {
-        fileName,
-        url
-      },
-      gender,
       startYear,
       startVagueness,
       endYear,
       endVagueness,
       stillActive,
-      father {
-        name
-      },
-      mother {
-        name
-      },
-      childsCollection {
-        items {
-          name
-        }
-      }
     }
   },
   timeCollection(