From a61af5af3653540c380dff8713f21d405a00f056 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Chif=20Gerg=C5=91?= <chifgeri97@gmail.com>
Date: Sat, 2 Feb 2019 18:37:37 +0100
Subject: [PATCH] Little changes in Schedule page, add a ScrollRestoration
component
---
package.json | 2 +-
src/components/ScrollToTop.js | 20 ++++++++++++++++++++
src/components/pages/Schedule.js | 9 +++------
src/index.js | 5 ++++-
4 files changed, 28 insertions(+), 8 deletions(-)
create mode 100644 src/components/ScrollToTop.js
diff --git a/package.json b/package.json
index 628a865..27d9abe 100644
--- a/package.json
+++ b/package.json
@@ -16,9 +16,9 @@
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.3.0",
+ "semantic-ui-calendar-react": "^0.12.2",
"semantic-ui-css": "^2.4.0",
"semantic-ui-react": "^0.84.0",
- "semantic-ui-calendar-react": "^0.12.2",
"slick-carousel": "^1.8.1"
},
"scripts": {
diff --git a/src/components/ScrollToTop.js b/src/components/ScrollToTop.js
new file mode 100644
index 0000000..1b01052
--- /dev/null
+++ b/src/components/ScrollToTop.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import { withRouter } from 'react-router-dom';
+
+/*
+* Default ScrollResoration:
+* https://reacttraining.com/react-router/web/guides/scroll-restoration
+*/
+class ScrollToTop extends Component {
+ componentDidUpdate(prevProps) {
+ if (this.props.location !== prevProps.location) {
+ window.scrollTo(0, 0)
+ }
+ }
+
+ render() {
+ return this.props.children;
+ }
+}
+
+export default withRouter(ScrollToTop);
diff --git a/src/components/pages/Schedule.js b/src/components/pages/Schedule.js
index 1b7e66e..45fa296 100644
--- a/src/components/pages/Schedule.js
+++ b/src/components/pages/Schedule.js
@@ -32,7 +32,7 @@ class Schedule extends Component {
>
<h3>
<Grid>
- <Grid.Column floated='left' width={5} textAlign='left'>
+ <Grid.Column floated='left' width={8} textAlign='left'>
<Icon name='angle right' color='blue' />{event.name}
</Grid.Column>
<Grid.Column floated='right' width={8} textAlign='right'>
@@ -42,23 +42,21 @@ class Schedule extends Component {
</h3>
</Accordion.Title>
<Accordion.Content active={activeIndex === event.id}>
- <Container text textAlign='left'>
<p>
{event.description}
</p>
- </Container>
</Accordion.Content>
</div>
));
return (
<Container
- textAlign='center'
+ textAlign='left'
style={{
padding: '60px'
}}
>
- <h2>KĂŠpzĂŠs alkalmak:</h2>
+ <h2>KĂŠpzĂŠsalkalmak:</h2>
<Accordion
fluid
styled
@@ -67,7 +65,6 @@ class Schedule extends Component {
>
{panels}
</Accordion>
- <h2>TĂĄbor:</h2>
</Container>
);
}
diff --git a/src/index.js b/src/index.js
index af527b4..93ca155 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,6 +5,7 @@ import { BrowserRouter as Router } from 'react-router-dom';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';
import 'semantic-ui-css/semantic.min.css';
+import ScrollToTop from './components/ScrollToTop';
import configureStore from './configureStore';
import App from './components/App';
@@ -19,7 +20,9 @@ const store = configureStore();
render(
<Provider store={store}>
<Router>
- <App />
+ <ScrollToTop>
+ <App />
+ </ScrollToTop>
</Router>
</Provider>,
document.getElementById('root'),
--
GitLab