[CastIt.Server.ClientApp] Improved the file item slider on small reso…

…lutions
Wolfteam · Apr 28, 2024 · 5eabd90 · 5eabd90
1 parent 1550567
commit 5eabd90
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 18 deletions.
diff --git a/CastIt.Server/ClientApp/src/components/file/file_item_duration.tsx b/CastIt.Server/ClientApp/src/components/file/file_item_duration.tsx
@@ -17,13 +17,13 @@ interface Props {
 
 function FileItemDuration(props: Props) {
     const classes = useStyles();
-    const isXsScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
+    const hideDuration = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg'));
 
     return (
         <ListItemSecondaryAction className={classes.duration}>
             <Grid container justifyContent="center" alignItems="center" className={'text-overflow-elipsis'}>
                 {props.loop ? <Loop fontSize="small" /> : null}
-                {!isXsScreen ? <Typography>{props.fullTotalDuration}</Typography> : null}
+                {!hideDuration ? <Typography>{props.fullTotalDuration}</Typography> : null}
             </Grid>
         </ListItemSecondaryAction>
     );

diff --git a/CastIt.Server/ClientApp/src/components/file/file_item_slider.tsx b/CastIt.Server/ClientApp/src/components/file/file_item_slider.tsx
@@ -18,29 +18,30 @@ interface Props {
 
 function FileItemSlider(props: Props) {
     const classes = useStyles();
-    const isXsScreen = useMediaQuery((theme: Theme) => theme.breakpoints.down('sm'));
+    const showInlineDurations = useMediaQuery((theme: Theme) => theme.breakpoints.down('lg'));
 
     const slider = <Slider size="small" value={props.playedPercentage} disabled className={classes.slider} />;
-    if (!isXsScreen) {
+    if (!showInlineDurations) {
         return slider;
     }
 
     return (
-        <Grid container justifyContent="space-between" alignItems="center">
-            <Grid item xs={2}>
-                <Typography variant="subtitle1" className={'text-overflow-elipsis'} align="left">
-                    {props.playedTime}
-                </Typography>
-            </Grid>
-            <Grid item xs={8} style={{ marginBottom: 7 }}>
-                {slider}
-            </Grid>
-            <Grid item xs={2}>
-                <Typography variant="subtitle1" className={'text-overflow-elipsis'} align="right">
-                    {props.duration}
-                </Typography>
+        <>
+            <Grid container justifyContent="space-between" alignItems="center">
+                <Grid item xs={6}>
+                    <Typography variant="subtitle1" className={'text-overflow-elipsis'} align="left">
+                        {props.playedTime}
+                    </Typography>
+                </Grid>
+
+                <Grid item xs={6}>
+                    <Typography variant="subtitle1" className={'text-overflow-elipsis'} align="right">
+                        {props.duration}
+                    </Typography>
+                </Grid>
             </Grid>
-        </Grid>
+            <Grid container>{slider}</Grid>
+        </>
     );
 }