From 3c9f0117b2b3cdffc98f4ea19e5dbc7ed40e9b4f Mon Sep 17 00:00:00 2001
From: Anton Tananaev <anton.tananaev@gmail.com>
Date: Sun, 1 Nov 2020 22:20:36 -0800
Subject: Add panel with slider

---
 modern/src/reports/ReplayPage.js | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

(limited to 'modern')

diff --git a/modern/src/reports/ReplayPage.js b/modern/src/reports/ReplayPage.js
index 826b361a..09882840 100644
--- a/modern/src/reports/ReplayPage.js
+++ b/modern/src/reports/ReplayPage.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { makeStyles } from '@material-ui/core';
+import { Container, makeStyles, Paper, Slider } from '@material-ui/core';
 import MainToolbar from '../MainToolbar';
 import Map from '../map/Map';
 
@@ -9,17 +9,14 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     flexDirection: 'column',
   },
-  content: {
-    flexGrow: 1,
-    overflow: 'hidden',
-    display: 'flex',
-    flexDirection: 'row',
-    [theme.breakpoints.down('xs')]: {
-      flexDirection: 'column-reverse',
-    }
+  controlPanel: {
+    position: 'absolute',
+    bottom: theme.spacing(5),
+    left: '50%',
+    transform: 'translateX(-50%)',
   },
-  mapContainer: {
-    flexGrow: 1,
+  controlContent: {
+    padding: theme.spacing(2),
   },
 }));
 
@@ -31,6 +28,11 @@ const ReplayPage = () => {
       <MainToolbar />
       <Map>
       </Map>
+      <Container maxWidth="sm" className={classes.controlPanel}>
+        <Paper className={classes.controlContent}>
+          <Slider defaultValue={30} />
+        </Paper>
+      </Container>
     </div>
   );
 }
-- 
cgit v1.2.3