From 87907ffba3c70a8b7a0a844b9f1f6387d51a059d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nils=20Scho=CC=88nwald?= Date: Thu, 29 Nov 2018 16:20:41 -0200 Subject: [PATCH] add swipe to siedbar, move sidebar --- app/components/Sidebar/Sidebar.css | 13 +++++++- app/components/Sidebar/Sidebar.js | 27 ++++++++------- app/components/Time/Time.css | 1 - app/components/Timeline/Timeline.css | 2 +- app/components/Timeline/Timeline.js | 1 + app/css/shame.css | 15 ++++++--- app/js/calcTimes.js | 4 +-- package-lock.json | 13 ++++++++ package.json | 2 ++ pages/index.js | 48 +++++++++++++++++++------- scripts/cfGraphql-es6.js | 50 ++++++++++++++++++++++++++++ scripts/gqlSchema.js | 16 --------- 12 files changed, 142 insertions(+), 50 deletions(-) create mode 100644 scripts/cfGraphql-es6.js diff --git a/app/components/Sidebar/Sidebar.css b/app/components/Sidebar/Sidebar.css index 2afb0474..41909b46 100644 --- a/app/components/Sidebar/Sidebar.css +++ b/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 { diff --git a/app/components/Sidebar/Sidebar.js b/app/components/Sidebar/Sidebar.js index 4e7b741a..a6beed5d 100644 --- a/app/components/Sidebar/Sidebar.js +++ b/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 ( -
- changeSidebarContent(undefined)} /> - {contentType === 'event' && } - {contentType === 'person' && } - {contentType === 'time' && } -
+ ); } } Sidebar.defaultProps = { - contentElement: undefined, + contentElement: {}, }; Sidebar.propTypes = { diff --git a/app/components/Time/Time.css b/app/components/Time/Time.css index bdd7d171..d815ef13 100644 --- a/app/components/Time/Time.css +++ b/app/components/Time/Time.css @@ -37,5 +37,4 @@ .Time-name { position: sticky; left: .5em; - padding-bottom: .25em; } diff --git a/app/components/Timeline/Timeline.css b/app/components/Timeline/Timeline.css index 92832dfd..be2a45b3 100644 --- a/app/components/Timeline/Timeline.css +++ b/app/components/Timeline/Timeline.css @@ -2,7 +2,7 @@ :root { --Time-yearsBeforeZero: 4100px; - --Time-yearsAfterZero: 2200px; + --Time-yearsAfterZero: 2500px; } .Timeline { diff --git a/app/components/Timeline/Timeline.js b/app/components/Timeline/Timeline.js index dba3de7a..8c01a4fe 100644 --- a/app/components/Timeline/Timeline.js +++ b/app/components/Timeline/Timeline.js @@ -102,6 +102,7 @@ class Timeline extends Component { events, changeSidebarContent, } = this.props; + const { activePersons, activeTimes, diff --git a/app/css/shame.css b/app/css/shame.css index 2a78bd13..43b1107d 100644 --- a/app/css/shame.css +++ b/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; +} + diff --git a/app/js/calcTimes.js b/app/js/calcTimes.js index cdf10171..111d9f50 100644 --- a/app/js/calcTimes.js +++ b/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; } diff --git a/package-lock.json b/package-lock.json index 86d8f202..b1e770be 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9979,11 +9979,24 @@ } } }, + "react-easy-swipe": { + "version": "0.0.17", + "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.17.tgz", + "integrity": "sha512-+4486duR/1Gq16o4+eRkDLG/uKWur+aZ6TOLq4p8GvdHmQblZLbgEaN+Cr6U8P7Dcnou5gA3shMr9B3gq+AD7w==", + "requires": { + "prop-types": "^15.5.8" + } + }, "react-error-overlay": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-4.0.0.tgz", "integrity": "sha512-FlsPxavEyMuR6TjVbSSywovXSEyOg6ZDj5+Z8nbsRl9EkOzAhEIcS+GLoQDC5fz/t9suhUXWmUrOBrgeUvrMxw==" }, + "react-icons": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-3.2.1.tgz", + "integrity": "sha512-NQhnh7G5hWCAK7pXPeeI944RkeZ85mtvFATx3wfcVQRTW4ejaQgriemYF72gQIFIyoApMXLTdb01BKp8PaXlrg==" + }, "react-is": { "version": "16.5.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.5.2.tgz", diff --git a/package.json b/package.json index 837cf3f9..0148b540 100644 --- a/package.json +++ b/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", diff --git a/pages/index.js b/pages/index.js index 0b3804c2..d1d756f2 100644 --- a/pages/index.js +++ b/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 ( -
- {/*
*/} -
- -
-
- ); -}; +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 ( +
+ {/*
*/} +
+ +
+ this.changeSidebarContent(undefined)}> + + +
+ ); + } +} Page.getInitialProps = async ({ query: { data } }) => { const { diff --git a/scripts/cfGraphql-es6.js b/scripts/cfGraphql-es6.js new file mode 100644 index 00000000..d8865109 --- /dev/null +++ b/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; diff --git a/scripts/gqlSchema.js b/scripts/gqlSchema.js index 498a39fe..0f613115 100644 --- a/scripts/gqlSchema.js +++ b/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(