From 3473a10159a09ad6db7b151e82552fcdae0ed135 Mon Sep 17 00:00:00 2001
From: Alex <33497058+bexsoft@users.noreply.github.com>
Date: Thu, 12 May 2022 12:23:49 -0500
Subject: [PATCH] Changed styles of Object versions for small screens (#1988)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
---
 .../Objects/ListObjects/ListObjects.tsx       |  2 +-
 .../Objects/ObjectDetails/FileVersionItem.tsx | 58 +++++++++++++++++--
 .../ObjectDetails/VersionsNavigator.tsx       | 14 +++++
 3 files changed, 69 insertions(+), 5 deletions(-)

diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
index 96ea2ee39..0deb06e93 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx
@@ -201,7 +201,7 @@ const styles = (theme: Theme) =>
     },
     hideListOnSmall: {
       "@media (max-width: 799px)": {
-        visibility: "hidden",
+        display: "none",
       },
     },
     ...objectBrowserExtras,
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx
index 3da616536..6732c0b94 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/FileVersionItem.tsx
@@ -59,6 +59,10 @@ const styles = (theme: Theme) =>
       "&.deleted": {
         color: "#868686",
       },
+      "@media (max-width: 799px)": {
+        padding: "5px 0px",
+        margin: 0,
+      },
     },
     intermediateLayer: {
       margin: "0 1.5rem 0 1.5rem",
@@ -68,6 +72,15 @@ const styles = (theme: Theme) =>
           borderBottomColor: "#F8F8F8",
         },
       },
+      "@media (max-width: 799px)": {
+        margin: 0,
+        "&:hover, &.selected": {
+          backgroundColor: "transparent",
+          "& > div": {
+            borderBottomColor: "#E2E2E2",
+          },
+        }
+      },
     },
     versionContainer: {
       fontSize: 16,
@@ -81,21 +94,42 @@ const styles = (theme: Theme) =>
         minHeight: 18,
         marginRight: 10,
       },
+      "@media (max-width: 799px)": {
+        fontSize: 14,
+        "& svg.min-icon": {
+          display: "none",
+        }
+      },
     },
     buttonContainer: {
       textAlign: "right",
       "& button": {
         marginLeft: "1.5rem",
       },
+      "@media (max-width: 600px)": {
+        "& button": {
+          marginLeft: "5px",
+        },
+      },
     },
     versionID: {
       fontSize: "12px",
       margin: "2px 0",
+      whiteSpace: "nowrap",
+      textOverflow: "ellipsis",
+      maxWidth: "95%",
+      overflow: "hidden",
     },
     versionData: {
       marginRight: "10px",
       fontSize: 12,
       color: "#868686",
+      "@media (max-width: 799px)": {
+        textOverflow: "ellipsis",
+        maxWidth: "95%",
+        overflow: "hidden",
+        whiteSpace: "nowrap"
+      },
     },
     ctrItem: {
       position: "relative",
@@ -108,7 +142,23 @@ const styles = (theme: Theme) =>
         backgroundColor: "#F8F8F8",
         left: "24px",
       },
+      "@media (max-width: 799px)": {
+        "&::before": {
+          display: "none",
+        }
+      },
     },
+    collapsableInfo: {
+      "@media (max-width: 799px)": {
+        display: "flex",
+        flexDirection: "column",
+      },
+    },
+    versionItem: {
+      "@media (max-width: 799px)": {
+        display: "none"
+      },
+    }
   });
 
 const FileVersionItem = ({
@@ -186,7 +236,7 @@ const FileVersionItem = ({
         >
           <Grid item xs={12} justifyContent={"space-between"}>
             <Grid container>
-              <Grid item xs={4} className={classes.versionContainer}>
+              <Grid item xs md={4} className={classes.versionContainer}>
                 {checkable && (
                   <CheckboxWrapper
                     checked={isChecked}
@@ -209,9 +259,9 @@ const FileVersionItem = ({
                   />
                 )}
                 {displayFileIconName(fileName, true)} v{index.toString()}
-                {pill && <SpecificVersionPill type={pill} />}
+                <span className={classes.versionItem}>{pill && <SpecificVersionPill type={pill} />}</span>
               </Grid>
-              <Grid item xs={8} className={classes.buttonContainer}>
+              <Grid item xs={10} md={8} className={classes.buttonContainer}>
                 {versionItemButtons.map((button, index) => {
                   return (
                     <Tooltip
@@ -260,7 +310,7 @@ const FileVersionItem = ({
           <Grid item xs={12} className={classes.versionID}>
             {versionInfo.version_id !== "null" ? versionInfo.version_id : "-"}
           </Grid>
-          <Grid item xs={12}>
+          <Grid item xs={12} className={classes.collapsableInfo}>
             <span className={classes.versionData}>
               <strong>Last modified:</strong>{" "}
               <reactMoment.default>
diff --git a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx
index 0a4c8a4a1..76539d1a2 100644
--- a/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx
+++ b/portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ObjectDetails/VersionsNavigator.tsx
@@ -80,6 +80,9 @@ const styles = (theme: Theme) =>
   createStyles({
     versionsContainer: {
       padding: 10,
+      "@media (max-width: 799px)": {
+        minHeight: 800,
+      },
     },
     noBottomBorder: {
       borderBottom: 0,
@@ -88,6 +91,9 @@ const styles = (theme: Theme) =>
       flexGrow: 1,
       height: "calc(100% - 120px)",
       overflow: "auto",
+      "@media (max-width: 799px)": {
+        height: 600,
+      },
     },
     screenTitleContainer: {
       position: "relative",
@@ -101,6 +107,11 @@ const styles = (theme: Theme) =>
         height: "40px",
         bottom: 0,
       },
+      "@media (max-width: 799px)": {
+        "&::before": {
+          display: "none",
+        },
+      },
     },
     sortByLabel: {
       color: "#838383",
@@ -108,6 +119,9 @@ const styles = (theme: Theme) =>
       whiteSpace: "nowrap",
       marginRight: 12,
       fontSize: 14,
+      "@media (max-width: 600px)": {
+        display: "none",
+      },
     },
     ...hrClass,
     ...buttonsStyles,