Another set of UI glitches fixed.

S3Prototype · May 17, 2021 · 3afb3ee · 3afb3ee · vercel · May 17, 2021
1 parent 594653c
commit 3afb3ee
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 9 deletions.
diff --git a/src/components/Admin/AddRobotCard.jsx b/src/components/Admin/AddRobotCard.jsx
@@ -143,8 +143,8 @@ function AddRobotCard(props) {
 
     return (
         shouldShowProgress ?
-        <Grid lg={4} md={5} item ref={gridRef}>
-            <Card elevation={2} style={{width:349, minHeight:'100%', display:'flex', alignItems:'center', justifyContent:'center'}}> 
+        <Grid  style={{width:349, maxWidth:349, height:520, maxHeight:520}} lg={4} md={5} item ref={gridRef}>
+            <Card elevation={2} style={{width:'100%', minHeight:'100%', display:'flex', alignItems:'center', justifyContent:'center'}}> 
                 <CircularProgress color="primary" />
             </Card>
         </Grid>

diff --git a/src/components/Admin/Cards/CardContainer.jsx b/src/components/Admin/Cards/CardContainer.jsx
@@ -20,12 +20,12 @@ const useStyles = makeStyles(them=>({
 function CardContainer(props) {
     const classes = useStyles()
     return (
-        <Grid lg={4} md={5} item>
+        <Grid lg={4} md={5} style={{maxWidth:349}} item>
             <Card elevation={3} className={classes.robotCard} >                                
                 <Grid direction="column" style={{
                         height: 445, maxHeight:500,
-                        width:324, minWidth: 324,
-                        maxWidth: '90%', rowGap:10
+                        width:349, minWidth: 324,
+                        maxWidth: 349, rowGap:10
                     }}
                     alignItems="center" container 
                 >

diff --git a/src/components/Admin/Edit/EditRobotCard.jsx b/src/components/Admin/Edit/EditRobotCard.jsx
@@ -11,6 +11,7 @@ import ChooseImageToolTip from './ChooseImageToolTip'
 import CardContainer from '../Cards/CardContainer'
 import PreviewImage from '../Cards/PreviewImage'
 import EditButtonSet from './EditButtonSet'
+import RobotCardContainer from '../../Robots/RobotCardContainer'
 
 const useStyles = makeStyles(them=>({
     robotCard: {

diff --git a/src/components/Admin/ProgressSpinner.jsx b/src/components/Admin/ProgressSpinner.jsx
@@ -5,8 +5,8 @@ import CircularProgress from '@material-ui/core/CircularProgress'
 
 function ProgressSpinner(props) {
     return (        
-        <Grid lg={4} md={5} item ref={props.gridRef}>
-            <Card elevation={2} style={{maxWidth:400, minHeight:'100%', display:'flex', alignItems:'center', justifyContent:'center'}}> 
+        <Grid lg={4} md={5} style={{width:349, maxWidth:349, height:520, maxHeight:520}} item ref={props.gridRef}>
+            <Card elevation={2} style={{width:349, maxWidth:349, minHeight:'100%', display:'flex', alignItems:'center', justifyContent:'center'}}> 
                 <CircularProgress color="primary" />
             </Card>
         </Grid>

diff --git a/src/components/Robots/RobotCard.jsx b/src/components/Robots/RobotCard.jsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles(them=>({
 function RobotCard(props) {
     const classes = useStyles()
     return (
-        <Grid style={props.pseudo ? {opacity:0} : {maxWidth:349}} md={5} item>
+        <Grid style={props.pseudo ? {opacity:0,maxWidth:349} : {backgroundColor:'pink',maxWidth:349}} md={5} item>
             <Card elevation={3} style={{display:'flex', width:'100%', justifyContent:'center'}} className={classes.robotCard}>                                
                 <Grid style={{minHeight: 445, maxHeight:500, width: 340}}
                     direction="column" alignItems="center" justify="space-between" container

diff --git a/src/components/Robots/Robots.jsx b/src/components/Robots/Robots.jsx
@@ -18,7 +18,7 @@ function Robots() {
     if(isLargeTablet) imgWidth = 290
     if(isMobileOrSmallTablet) imgWidth = '95vw'
 
-    let pseudoElementCount = 0
+    let pseudoElementCount = 1
 
     if(isLargeTablet || isMobileOrSmallTablet)
         pseudoElementCount = robotSet.robots.length % 2
@@ -31,6 +31,7 @@ function Robots() {
             return []
 
         const elementArray = []
+        console.log("Pseudo count", pseudoElementCount)
         for(let i = 0; i < pseudoElementCount+1; i++){
             elementArray.push(i)
         }