Fix #17 - Merge pull request #21 from mblaul/master

Issue #17 - Add some lateral margin to Slider on non-small devices
emibcn · Oct 10, 2020 · 37654f7 · 37654f7
2 parents deb7355 + c531662
commit 37654f7
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/app/src/Slider.jsx b/app/src/Slider.jsx
@@ -146,7 +146,6 @@ class Slider extends React.PureComponent {
           ValueLabelComponent={ ValueLabelComponent }
           step={ 1 }
           min={ 0 }
-          style={{ margin: '0 1em' }}
           classes={{ ...restClasses }}
           { ...restProps }
         />

diff --git a/app/src/Widget/List.jsx b/app/src/Widget/List.jsx
@@ -72,6 +72,17 @@ const useStyles = (theme) => ({
       },
     }
   },
+  // Add some lateral space for the slider on larger displays
+  sliderRoot: {
+    [theme.breakpoints.up('md')]: {
+      marginLeft: theme.spacing(4),
+      marginRight: theme.spacing(4),
+    },
+    [theme.breakpoints.down('md')]: {
+      marginLeft: theme.spacing(3),
+      marginRight: theme.spacing(3),
+    },
+  },
   // Save some space in buttons for small devices
   addButton: {
     padding: 0,
@@ -264,7 +275,7 @@ class WidgetsList extends React.PureComponent {
 
             {/* Days display & Current manager */}
             <Slider
-              classes={{ playPause: classes.playPause }}
+              classes={{ root: classes.sliderRoot, playPause: classes.playPause }}
               max={ days.length - 1 }
               value={ current || 0 }
               onChange={ this.onSetDate }