From 013ec8ccb46d5438aca45dc5173f838ec863ca7b Mon Sep 17 00:00:00 2001
From: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
Date: Tue, 4 Sep 2018 13:43:19 +0200
Subject: [PATCH] css changes

Feature #13860

Arvados-DCO-1.1-Signed-off-by: Pawel Kowalczyk <pawel.kowalczyk@contractors.roche.com>
---
 .../subprocess-filter/subprocess-filter.tsx   | 14 +++-----
 .../process-information-card.tsx              |  3 +-
 .../process-panel/process-panel-root.tsx      |  9 ++---
 src/views/process-panel/process-panel.tsx     |  3 +-
 .../process-panel/process-subprocesses.tsx    |  2 +-
 src/views/process-panel/subprocesses-card.tsx | 33 ++++++++++++-------
 6 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/src/components/subprocess-filter/subprocess-filter.tsx b/src/components/subprocess-filter/subprocess-filter.tsx
index f13668582b..23c1e65819 100644
--- a/src/components/subprocess-filter/subprocess-filter.tsx
+++ b/src/components/subprocess-filter/subprocess-filter.tsx
@@ -5,17 +5,13 @@
 import * as React from 'react';
 import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles';
 import { ArvadosTheme } from '~/common/custom-theme';
-import { Grid, Typography, Switch } from '@material-ui/core';
+import { Typography, Switch } from '@material-ui/core';
 
-type CssRules = 'grid' | 'label' | 'value' | 'switch';
+type CssRules = 'container' | 'label' | 'value' | 'switch';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
-    grid: {
+    container: {
         display: 'flex',
-        height: '20px',
-        paddingTop: '0px!important',
-        paddingBottom: '0px!important',
-        marginBottom: theme.spacing.unit
     },
     label: {
         width: '86px',
@@ -46,7 +42,7 @@ type SubprocessFilterProps = SubprocessFilterDataProps & WithStyles<CssRules>;
 
 export const SubprocessFilter = withStyles(styles)(
     ({ classes, label, value, key, checked, onToggle }: SubprocessFilterProps) =>
-        <Grid item className={classes.grid} md={12} lg={6} >
+        <div className={classes.container} >
             <Typography component="span" className={classes.label}>{label}:</Typography>
             <Typography component="span" className={classes.value}>{value}</Typography>
             {onToggle && <Switch classes={{ root: classes.switch }}
@@ -55,5 +51,5 @@ export const SubprocessFilter = withStyles(styles)(
                 value={key}
                 color="primary" />
             }
-        </Grid>
+        </div>
 );
\ No newline at end of file
diff --git a/src/views/process-panel/process-information-card.tsx b/src/views/process-panel/process-information-card.tsx
index 01bb3ae79e..788f253994 100644
--- a/src/views/process-panel/process-information-card.tsx
+++ b/src/views/process-panel/process-information-card.tsx
@@ -19,7 +19,7 @@ type CssRules = 'card' | 'iconHeader' | 'label' | 'value' | 'chip' | 'link' | 'c
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     card: {
-        marginBottom: theme.spacing.unit * 2
+        height: '100%'
     },
     iconHeader: {
         fontSize: '1.875rem',
@@ -57,7 +57,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     content: {
         '&:last-child': {
             paddingBottom: theme.spacing.unit * 2,
-            paddingTop: '0px'
         }
     },
     title: {
diff --git a/src/views/process-panel/process-panel-root.tsx b/src/views/process-panel/process-panel-root.tsx
index 9db16bc1f6..f76efe0d99 100644
--- a/src/views/process-panel/process-panel-root.tsx
+++ b/src/views/process-panel/process-panel-root.tsx
@@ -16,6 +16,7 @@ export interface ProcessPanelRootDataProps {
     process?: Process;
     subprocesses: Array<Process>;
     filters: Array<SubprocessFilterDataProps>;
+    totalSubprocessesLength: number;
 }
 
 export interface ProcessPanelRootActionProps {
@@ -27,15 +28,15 @@ export type ProcessPanelRootProps = ProcessPanelRootDataProps & ProcessPanelRoot
 
 export const ProcessPanelRoot = (props: ProcessPanelRootProps) =>
     props.process
-        ? <Grid container spacing={16}>
-            <Grid item xs={7}>
+        ? <Grid container spacing={16} alignItems="stretch">
+            <Grid item sm={12} md={7} alignItems="stretch">
                 <ProcessInformationCard
                     process={props.process}
                     onContextMenu={props.onContextMenu} />
             </Grid>
-            <Grid item xs={5}>
+            <Grid item sm={12} md={5}>
                 <SubprocessesCard
-                    subprocesses={props.subprocesses}
+                    subprocessesAmount={props.totalSubprocessesLength}
                     filters={props.filters}
                     onToggle={props.onToggle}
                 />
diff --git a/src/views/process-panel/process-panel.tsx b/src/views/process-panel/process-panel.tsx
index e9bba3ad52..b3e36ab77c 100644
--- a/src/views/process-panel/process-panel.tsx
+++ b/src/views/process-panel/process-panel.tsx
@@ -21,7 +21,8 @@ const mapStateToProps = ({ router, resources, processPanel }: RootState): Proces
     return {
         process: getProcess(uuid)(resources),
         subprocesses: subprocesses.filter(subprocess => processPanel.filters[getProcessStatus(subprocess)]),
-        filters: getFilters(processPanel, subprocesses)
+        filters: getFilters(processPanel, subprocesses),
+        totalSubprocessesLength: subprocesses.length,
     };
 };
 
diff --git a/src/views/process-panel/process-subprocesses.tsx b/src/views/process-panel/process-subprocesses.tsx
index 5ee5938ec9..6e00deb0f1 100644
--- a/src/views/process-panel/process-subprocesses.tsx
+++ b/src/views/process-panel/process-subprocesses.tsx
@@ -15,7 +15,7 @@ export interface ProcessSubprocessesDataProps {
 export const ProcessSubprocesses = ({ onContextMenu, subprocesses }: ProcessSubprocessesDataProps) => {
     return <Grid container spacing={16}>
         {subprocesses.map(subprocess =>
-            <Grid item xs={2} key={subprocess.containerRequest.uuid}>
+            <Grid item xs={12} sm={6} md={4} lg={2} key={subprocess.containerRequest.uuid}>
                 <ProcessSubprocessesCard onContextMenu={onContextMenu} subprocess={subprocess} />
             </Grid>
         )}
diff --git a/src/views/process-panel/subprocesses-card.tsx b/src/views/process-panel/subprocesses-card.tsx
index 8033222c9b..6c5562db7c 100644
--- a/src/views/process-panel/subprocesses-card.tsx
+++ b/src/views/process-panel/subprocesses-card.tsx
@@ -4,27 +4,33 @@
 
 import * as React from 'react';
 import { ArvadosTheme } from '~/common/custom-theme';
-import { StyleRulesCallback, withStyles, WithStyles, Card, CardHeader, CardContent, Grid, Switch, Typography } from '@material-ui/core';
+import { StyleRulesCallback, withStyles, WithStyles, Card, CardHeader, CardContent, Grid, Typography } from '@material-ui/core';
 import { SubprocessFilter } from '~/components/subprocess-filter/subprocess-filter';
 import { SubprocessFilterDataProps } from '~/components/subprocess-filter/subprocess-filter';
-import { Process } from '~/store/processes/process';
 
-type CssRules = 'root' | 'subtitle' | 'title';
+type CssRules = 'root' | 'subtitle' | 'title' | 'gridFilter';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     root: {
-        fontSize: '0.875rem'
+        fontSize: '0.875rem',
+        height: '100%'
     },
     subtitle: {
-        paddingBottom: '28px!important'
+        paddingBottom: '32px!important'
     },
     title: {
         color: theme.customs.colors.grey700
+    },
+    gridFilter: {
+        height: '20px',
+        marginBottom: theme.spacing.unit,
+        paddingTop: '0px!important',
+        paddingBottom: '0px!important',
     }
 });
 
 interface SubprocessesDataProps {
-    subprocesses: Array<Process>;
+    subprocessesAmount: number;
     filters: SubprocessFilterDataProps[];
     onToggle: (status: string) => void;
 }
@@ -32,9 +38,9 @@ interface SubprocessesDataProps {
 type SubprocessesProps = SubprocessesDataProps & WithStyles<CssRules>;
 
 export const SubprocessesCard = withStyles(styles)(
-    ({ classes, filters, subprocesses, onToggle }: SubprocessesProps) =>
+    ({ classes, filters, subprocessesAmount, onToggle }: SubprocessesProps) =>
         <Card className={classes.root}>
-            <CardHeader 
+            <CardHeader
                 className={classes.title}
                 title={
                     <Typography noWrap variant="title" color='inherit'>
@@ -42,13 +48,16 @@ export const SubprocessesCard = withStyles(styles)(
                 </Typography>} />
             <CardContent>
                 <Grid container direction="column" spacing={16}>
-                    <Grid item xs={12} container spacing={16} className={classes.subtitle}>
-                        <SubprocessFilter label='Subprocesses' value={subprocesses.length} />
-                    </Grid>
                     <Grid item xs={12} container spacing={16}>
+                        <Grid item md={12} lg={6} className={classes.subtitle}>
+                            <SubprocessFilter label='Subprocesses' value={subprocessesAmount} />
+                        </Grid>
+                        <Grid item md={12} lg={6}/>
                         {
                             filters.map(filter =>
-                                <SubprocessFilter {...filter} key={filter.key} onToggle={() => onToggle(filter.label)} />
+                                <Grid item md={12} lg={6} key={filter.key} spacing={0} className={classes.gridFilter}>
+                                    <SubprocessFilter {...filter} onToggle={() => onToggle(filter.label)} />
+                                </Grid>
                             )
                         }
                     </Grid>
-- 
2.39.5