[arvados] updated: 2.7.0-5834-g9ab5ebde9c
git repository hosting
git at public.arvados.org
Fri Jan 19 15:47:02 UTC 2024
Summary of changes:
.../project-details-card/project-details-card.tsx | 144 ++++++++++++---------
1 file changed, 83 insertions(+), 61 deletions(-)
via 9ab5ebde9c712235950a1be05a37ed6bf7b7dc2f (commit)
from 656210fc24099fc79365511844fd30c11300c117 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 9ab5ebde9c712235950a1be05a37ed6bf7b7dc2f
Author: Lisa Knox <lisaknox83 at gmail.com>
Date: Fri Jan 19 10:46:55 2024 -0500
21224: css tweaks Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>
diff --git a/services/workbench2/src/views-components/project-details-card/project-details-card.tsx b/services/workbench2/src/views-components/project-details-card/project-details-card.tsx
index 6a140a0345..d9db66d634 100644
--- a/services/workbench2/src/views-components/project-details-card/project-details-card.tsx
+++ b/services/workbench2/src/views-components/project-details-card/project-details-card.tsx
@@ -20,7 +20,7 @@ import { formatDate } from 'common/formatters';
import { resourceLabel } from 'common/labels';
import { ResourceKind } from 'models/resource';
-type CssRules = 'root' | 'fadeout' | 'cardcontent' | 'attribute' | 'tag';
+type CssRules = 'root' | 'cardheader' | 'fadeout' | 'cardcontent' | 'attributesection' | 'attribute' | 'chipsection' | 'tag';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
@@ -28,21 +28,39 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
marginBottom: '1rem',
},
fadeout: {
- maxWidth: '45%',
+ maxWidth: '30rem',
minWdidth: '18rem',
height: '2.7rem',
overflow: 'hidden',
WebkitMaskImage: '-webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))',
},
+ cardheader: {
+ paddingTop: '0.4rem',
+ },
cardcontent: {
+ display: 'flex',
+ flexDirection: 'column',
+ marginTop: '-1rem'
+ },
+ attributesection: {
display: 'flex',
flexWrap: 'wrap',
},
attribute: {
marginBottom: '0.5rem',
marginRight: '1rem',
+ border: '1px solid lightgrey',
+ padding: '0.5rem',
+ borderRadius: '5px'
+ },
+ chipsection: {
+ display: 'flex',
+ flexWrap: 'wrap',
+ },
+ tag: {
+ marginRight: '1rem',
+ marginTop: '0.5rem'
},
- tag: {},
});
const mapStateToProps = (state: RootState) => {
@@ -64,8 +82,8 @@ export const ProjectDetailsCard = connect(mapStateToProps)(
const { name, description, uuid } = currentResource;
return (
<Card className={classes.root}>
- {console.log(currentResource)}
<CardHeader
+ className={classes.cardheader}
title={
<Typography
noWrap
@@ -91,63 +109,67 @@ export const ProjectDetailsCard = connect(mapStateToProps)(
action={<MultiselectToolbar inputSelectedUuid={uuid} />}
/>
<CardContent className={classes.cardcontent}>
- <Typography
- component='div'
- className={classes.attribute}
- >
- <DetailsAttribute
- label='Type'
- value={currentResource.groupClass === GroupClass.FILTER ? 'Filter group' : resourceLabel(ResourceKind.PROJECT)}
- />
- </Typography>
- <Typography
- component='div'
- className={classes.attribute}
- >
- <DetailsAttribute
- label='Owner'
- linkToUuid={currentResource.ownerUuid}
- uuidEnhancer={(uuid: string) => <ResourceWithName uuid={uuid} />}
- />
- </Typography>
- <Typography
- component='div'
- className={classes.attribute}
- >
- <DetailsAttribute
- label='Last modified'
- value={formatDate(currentResource.modifiedAt)}
- />
- </Typography>
- <Typography
- component='div'
- className={classes.attribute}
- >
- <DetailsAttribute
- label='Created at'
- value={formatDate(currentResource.createdAt)}
- />
- </Typography>
- <Typography
- component='div'
- className={classes.attribute}
- >
- <DetailsAttribute
- label='UUID'
- linkToUuid={currentResource.uuid}
- value={currentResource.uuid}
- />
- </Typography>
- <Typography
- component='div'
- className={classes.attribute}
- >
- {Object.keys(currentResource.properties).map((k) =>
- Array.isArray(currentResource.properties[k])
- ? currentResource.properties[k].map((v: string) => getPropertyChip(k, v, undefined, classes.tag))
- : getPropertyChip(k, currentResource.properties[k], undefined, classes.tag)
- )}
- </Typography>
+ <section className={classes.attributesection}>
+ <Typography
+ component='div'
+ className={classes.attribute}
+ >
+ <DetailsAttribute
+ label='Type'
+ value={currentResource.groupClass === GroupClass.FILTER ? 'Filter group' : resourceLabel(ResourceKind.PROJECT)}
+ />
+ </Typography>
+ <Typography
+ component='div'
+ className={classes.attribute}
+ >
+ <DetailsAttribute
+ label='Owner'
+ linkToUuid={currentResource.ownerUuid}
+ uuidEnhancer={(uuid: string) => <ResourceWithName uuid={uuid} />}
+ />
+ </Typography>
+ <Typography
+ component='div'
+ className={classes.attribute}
+ >
+ <DetailsAttribute
+ label='Last modified'
+ value={formatDate(currentResource.modifiedAt)}
+ />
+ </Typography>
+ <Typography
+ component='div'
+ className={classes.attribute}
+ >
+ <DetailsAttribute
+ label='Created at'
+ value={formatDate(currentResource.createdAt)}
+ />
+ </Typography>
+ <Typography
+ component='div'
+ className={classes.attribute}
+ >
+ <DetailsAttribute
+ label='UUID'
+ linkToUuid={currentResource.uuid}
+ value={currentResource.uuid}
+ />
+ </Typography>
+ </section>
+ <section className={classes.chipsection}>
+ <Typography
+ component='div'
+ // className={classes.attribute}
+ >
+ {Object.keys(currentResource.properties).map((k) =>
+ Array.isArray(currentResource.properties[k])
+ ? currentResource.properties[k].map((v: string) => getPropertyChip(k, v, undefined, classes.tag))
+ : getPropertyChip(k, currentResource.properties[k], undefined, classes.tag)
+ )}
+ </Typography>
+ </section>
</CardContent>
</Card>
);
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list