small adjustment of erow view on smaller screens

bandinopla · Nov 16, 2024 · 74d5d23 · 74d5d23
1 parent 1ebbfe9
commit 74d5d23
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 13 deletions.
diff --git a/src/componentes/journal/erow-render.js b/src/componentes/journal/erow-render.js
@@ -1,4 +1,4 @@
-import { Box, Divider, Hidden, IconButton, Paper, Tooltip, Typography } from '@material-ui/core';
+import { Box, Divider, Grid, Hidden, IconButton, Paper, Tooltip, Typography } from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
 import SubdirectoryArrowRightIcon from '@material-ui/icons/SubdirectoryArrowRight';
 import Alert from '@material-ui/lab/Alert';
@@ -20,6 +20,7 @@ import { SBDRankLeyend, SetSBDRank } from './erow-sbdrank';
 import { renderWxD_Erows } from './erow-render-WxDoT';
 import { ProgressBar, ProgressBarsContainer } from '../progress-bar';
 import { statsOfWxDoT } from './erow-stats-WxDoT';
+import { BrowserView } from 'react-device-detect';
 
 const effintLink = {
     textDecoration:"underline",
@@ -163,8 +164,9 @@ const useStyles = makeStyles((theme) => ({
             color: theme.palette.secondary.main
          },
          [theme.breakpoints.down('sm')]: {
+            display:"flex",
             "& > div": {
-                float:"none",  
+                //float:"none",  
             },
          }
      },
@@ -216,10 +218,10 @@ function EblockUI({ data }){
 
     return <Paper className={classes.root}> 
 
-                <Box padding={1} paddingLeft={2}>
+                <Box padding={1} paddingLeft={2} position={"relative"}>
                     {/*<Typography variant="h6" gutterBottom>#<b>{ data.exerciseRef.exercise.name }</b></Typography> */}
 
-                    <IconButton style={{float:"right"}} variant="outlined" title='Personal Records' onClick={()=>history.push(`/journal/${jowner.uname}/personal-records--${data.exerciseRef.exercise.id}`)}><MenuBookIcon/></IconButton>
+                    <IconButton style={{ position:"absolute", top:0, right:0 }} variant="outlined" title='Personal Records' onClick={()=>history.push(`/journal/${jowner.uname}/personal-records--${data.exerciseRef.exercise.id}`)}><MenuBookIcon/></IconButton>
                     <Ename gutter {...data.exerciseRef.exercise} variant="h6"/>
 
                     <div className={classes.stat}> 
@@ -267,9 +269,11 @@ function EblockUI({ data }){
                                 &nbsp;x <b className="r">{ set.r }</b> x <b>{ set.s }</b>
                         </div> 
 
-                        <div className="bar">
-                            <Barra weight={set.weight} reps={set.r===0? 0 : null}/> 
-                        </div> 
+                        <Hidden smDown>
+                            <div className="bar">
+                                <Barra weight={set.weight} reps={set.r===0? 0 : null}/> 
+                            </div> 
+                        </Hidden>
 
                         <div style={{flexGrow:1, overflow:"hidden"}} className="effint" smDown>
                             <Hidden smDown>
@@ -282,9 +286,16 @@ function EblockUI({ data }){
                     // for small screens, make the bars take an entire row.
                     */}
                     <Hidden smUp>
-                        <Box paddingBottom={0} marginBottom={3}>
-                        <EffIntBars data={data} set={set} theme={theme}/>
-                        </Box>
+                        <Grid container>
+                            <Grid xs={4} style={{ display:"flex", justifyContent:"center"}}>
+                                <Box padding={"0 10px"}>
+                                <Barra weight={set.weight} reps={set.r===0? 0 : null} /> 
+                                </Box>
+                            </Grid>
+                            <Grid xs={8}>
+                                <EffIntBars data={data} set={set} theme={theme}/>
+                            </Grid>
+                        </Grid> 
                         <Divider/>
                         <br/>
                     </Hidden>

diff --git a/src/componentes/journal/erow-sbdrank.js b/src/componentes/journal/erow-sbdrank.js
@@ -1,7 +1,7 @@
 import { createContext, useContext, useEffect, useMemo, useState } from "react";
 import { JOwnerContext } from "../../pages/journal-context";
 import { JDayContext } from "./jday-context";
-import Rating from '@material-ui/lab/Rating';
+import RatingComponent from '@material-ui/lab/Rating';
 import { AsciiSpinner } from "../ascii-spinner";
 import { Alert } from "@material-ui/lab";
 import { Box, Button, Divider } from "@material-ui/core";
@@ -11,7 +11,8 @@ import { useSBDStatsLazyHook } from "../../data/sbd-stats-hooks";
 import { useGetSession, useReactiveSetting } from "../../session/session-handler";
 import WeightValue from "../weight-value";
 import HelpOutlineIcon from '@material-ui/icons/HelpOutline';
-
+import { BrowserView, MobileView } from "react-device-detect";
+import StarRateIcon from '@material-ui/icons/StarRate';
 const TYPES = ["SQ","BP","DL"];
 const SBDRankContext = createContext({
     isBeingUsed:()=>{}
@@ -23,6 +24,18 @@ const RealisticGoodMaxes = [
     [200,140] //DL
 ]
 
+const Rating = ({ ...props }) => {
+    return <>
+        <MobileView>
+                <div style={{ display:"flex", alignItems:"center", marginRight:10}}>
+                <StarRateIcon fontSize="small"/> <span style={{ fontSize:12 }}>{ props.defaultValue.toFixed(1) }</span>
+                </div>
+        </MobileView>
+        <BrowserView>
+            <RatingComponent {...props}/>
+        </BrowserView>
+    </>
+}
 
 export const SetSBDRank = ({ weight, isf, bw, type })=>{
 

diff --git a/src/componentes/quick-range-overview.js b/src/componentes/quick-range-overview.js
@@ -110,7 +110,7 @@ export const QuickRangeOverview = ()=>{
         { loading && <LinearProgress/>}
 
         { overview && <> 
-            Quick week overview...
+            Overview of <strong>your</strong> last X week/s...
             <SoftBoxTabs labels={ranges.map(itm=>itm.range)} selected={range} onSelected={setRange} disabled={loading}/> <br/><br/>
             <Typography variant="h4">{ranges[range].range} Week/s</Typography>
             <div className={classes.from}>