Merge pull request #39 from kaleido-io/timeline-cleanup

improve timeline appearance on smaller resolutions
hyperledger · Jun 23, 2021 · 838b5e8 · 838b5e8
2 parents 3d0e531 + 7d465a8
commit 838b5e8
Show file tree

Hide file tree

Showing 7 changed files with 108 additions and 66 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "firefly-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "dependencies": {
     "@material-ui/core": "^4.11.4",

diff --git a/src/components/DataTimeline/TimelineItems/TimelineContentPanel.tsx b/src/components/DataTimeline/TimelineItems/TimelineContentPanel.tsx
@@ -45,8 +45,10 @@ export const TimelineContentPanel: React.FC<Props> = ({
         onClick={onClick}
       >
         <Grid container className={classes.container} direction="column">
-          <Grid item>
-            <Typography className={classes.title}>{title}</Typography>
+          <Grid className={classes.titleContainer} item>
+            <Typography noWrap className={classes.title}>
+              {title}
+            </Typography>
           </Grid>
           <Grid item>
             <Typography className={classes.description}>
@@ -64,6 +66,9 @@ const useStyles = makeStyles((theme) => ({
     padding: theme.spacing(2),
     backgroundColor: theme.palette.timelineBackground.main,
   },
+  titleContainer: {
+    maxWidth: 220,
+  },
   title: {
     fontWeight: 'bold',
     fontSize: 14,

diff --git a/src/views/Dashboard.tsx b/src/views/Dashboard.tsx
@@ -156,8 +156,14 @@ export const Dashboard: React.FC = () => {
     }));
 
   return (
-    <>
-      <Grid container wrap="nowrap" className={classes.root} direction="column">
+    <Grid container justify="center">
+      <Grid
+        container
+        item
+        wrap="nowrap"
+        className={classes.root}
+        direction="column"
+      >
         <Grid container item direction="row">
           <Grid className={classes.headerContainer} item>
             <Typography variant="h4" className={classes.header}>
@@ -208,7 +214,7 @@ export const Dashboard: React.FC = () => {
           </Grid>
         </Grid>
       </Grid>
-    </>
+    </Grid>
   );
 };
 
@@ -217,6 +223,7 @@ const useStyles = makeStyles((theme) => ({
     paddingTop: 20,
     paddingLeft: 120,
     paddingRight: 120,
+    maxWidth: 1920,
     [theme.breakpoints.down('sm')]: {
       flexWrap: 'wrap',
     },

diff --git a/src/views/Data/Data.tsx b/src/views/Data/Data.tsx
@@ -150,31 +150,38 @@ export const Data: React.FC = () => {
 
   return (
     <>
-      <Grid container wrap="nowrap" direction="column" className={classes.root}>
-        <Grid container spacing={2} item direction="row">
-          <Grid item>
-            <Typography className={classes.header} variant="h4">
-              {t('data')}
-            </Typography>
+      <Grid container justify="center">
+        <Grid
+          container
+          wrap="nowrap"
+          direction="column"
+          className={classes.root}
+        >
+          <Grid container spacing={2} item direction="row">
+            <Grid item>
+              <Typography className={classes.header} variant="h4">
+                {t('data')}
+              </Typography>
+            </Grid>
+            <Box className={classes.separator} />
+            <Grid item>
+              <FilterSelect
+                filter={createdFilter}
+                setFilter={setCreatedFilter}
+                filterItems={createdQueryOptions}
+              />
+            </Grid>
           </Grid>
-          <Box className={classes.separator} />
-          <Grid item>
-            <FilterSelect
-              filter={createdFilter}
-              setFilter={setCreatedFilter}
-              filterItems={createdQueryOptions}
+          <Grid container item>
+            <DataTable
+              minHeight="300px"
+              maxHeight="calc(100vh - 340px)"
+              {...{ columnHeaders }}
+              {...{ records }}
+              {...{ pagination }}
             />
           </Grid>
         </Grid>
-        <Grid container item>
-          <DataTable
-            minHeight="300px"
-            maxHeight="calc(100vh - 340px)"
-            {...{ columnHeaders }}
-            {...{ records }}
-            {...{ pagination }}
-          />
-        </Grid>
       </Grid>
       {viewData && (
         <DataDetails
@@ -194,6 +201,7 @@ const useStyles = makeStyles((theme) => ({
     paddingTop: 20,
     paddingLeft: 120,
     paddingRight: 120,
+    maxWidth: 1920,
     [theme.breakpoints.down('sm')]: {
       flexWrap: 'wrap',
     },

diff --git a/src/views/Messages/Messages.tsx b/src/views/Messages/Messages.tsx
@@ -197,41 +197,48 @@ export const Messages: React.FC = () => {
 
   return (
     <>
-      <Grid container wrap="nowrap" direction="column" className={classes.root}>
-        <Grid container spacing={2} item direction="row" alignItems="center">
-          <Grid item>
-            <Typography className={classes.header} variant="h4">
-              {t('messages')}
-            </Typography>
-          </Grid>
-          <Box className={classes.separator} />
-          <Grid item>
-            <FilterSelect
-              filter={createdFilter}
-              setFilter={setCreatedFilter}
-              filterItems={createdQueryOptions}
-            />
-          </Grid>
-          <Grid item>
-            <DataViewSwitch />
+      <Grid container justify="center">
+        <Grid
+          container
+          wrap="nowrap"
+          direction="column"
+          className={classes.root}
+        >
+          <Grid container spacing={2} item direction="row" alignItems="center">
+            <Grid item>
+              <Typography className={classes.header} variant="h4">
+                {t('messages')}
+              </Typography>
+            </Grid>
+            <Box className={classes.separator} />
+            <Grid item>
+              <FilterSelect
+                filter={createdFilter}
+                setFilter={setCreatedFilter}
+                filterItems={createdQueryOptions}
+              />
+            </Grid>
+            <Grid item>
+              <DataViewSwitch />
+            </Grid>
           </Grid>
+          {dataView === 'timeline' && (
+            <Grid className={classes.timelineContainer} xs={12} container item>
+              <DataTimeline items={buildTimelineElements(messages)} />
+            </Grid>
+          )}
+          {dataView === 'list' && (
+            <Grid container item>
+              <DataTable
+                minHeight="300px"
+                maxHeight="calc(100vh - 340px)"
+                records={buildTableRecords(messages)}
+                {...{ columnHeaders }}
+                {...{ pagination }}
+              />
+            </Grid>
+          )}
         </Grid>
-        {dataView === 'timeline' && (
-          <Grid className={classes.timelineContainer} xs={12} container item>
-            <DataTimeline items={buildTimelineElements(messages)} />
-          </Grid>
-        )}
-        {dataView === 'list' && (
-          <Grid container item>
-            <DataTable
-              minHeight="300px"
-              maxHeight="calc(100vh - 340px)"
-              records={buildTableRecords(messages)}
-              {...{ columnHeaders }}
-              {...{ pagination }}
-            />
-          </Grid>
-        )}
       </Grid>
       {viewMessage && (
         <MessageDetails
@@ -252,6 +259,7 @@ const useStyles = makeStyles((theme) => ({
     paddingTop: 20,
     paddingLeft: 120,
     paddingRight: 120,
+    maxWidth: 1920,
     [theme.breakpoints.down('sm')]: {
       flexWrap: 'wrap',
     },

diff --git a/src/views/Transactions/TransactionDetails.tsx b/src/views/Transactions/TransactionDetails.tsx
@@ -81,8 +81,14 @@ export const TransactionDetails: React.FC = () => {
   }
 
   return (
-    <>
-      <Grid container wrap="nowrap" direction="column" className={classes.root}>
+    <Grid container justify="center">
+      <Grid
+        container
+        item
+        wrap="nowrap"
+        direction="column"
+        className={classes.root}
+      >
         <Grid item>
           <Button
             className={classes.backButton}
@@ -209,7 +215,7 @@ export const TransactionDetails: React.FC = () => {
           </Grid>
         </Grid>
       </Grid>
-    </>
+    </Grid>
   );
 };
 
@@ -218,6 +224,7 @@ const useStyles = makeStyles((theme) => ({
     paddingTop: 20,
     paddingLeft: 120,
     paddingRight: 120,
+    maxWidth: 1920,
     [theme.breakpoints.down('sm')]: {
       flexWrap: 'wrap',
     },

diff --git a/src/views/Transactions/Transactions.tsx b/src/views/Transactions/Transactions.tsx
@@ -180,8 +180,14 @@ export const Transactions: React.FC = () => {
   }
 
   return (
-    <>
-      <Grid container wrap="nowrap" direction="column" className={classes.root}>
+    <Grid container justify="center">
+      <Grid
+        container
+        item
+        wrap="nowrap"
+        direction="column"
+        className={classes.root}
+      >
         <Grid container spacing={2} item direction="row">
           <Grid item>
             <Typography className={classes.header} variant="h4">
@@ -217,7 +223,7 @@ export const Transactions: React.FC = () => {
           </Grid>
         )}
       </Grid>
-    </>
+    </Grid>
   );
 };
 
@@ -226,6 +232,7 @@ const useStyles = makeStyles((theme) => ({
     paddingTop: 20,
     paddingLeft: 120,
     paddingRight: 120,
+    maxWidth: 1920,
     [theme.breakpoints.down('sm')]: {
       flexWrap: 'wrap',
     },