urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2025-01-06 04:07:23 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #4540 from urbit/lf/contacts-virt

Browse Source 
Participants: remove grid
This commit is contained in:
matildepark 2021-03-04 12:15:46 -05:00 committed by GitHub
commit 1ed8613644
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 14 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
pkg/interface/src/views/landscape/components/Participants.tsx
View File

@ -211,13 +211,7 @@ export function Participants(props: {
onChange={onSearchChange} onChange={onSearchChange}
/> />
</Row> </Row>
<Box <Col alignItems="center" >
display="grid"
gridAutoRows={['48px 48px 1px', '48px 1px']}
gridTemplateColumns={['48px 1fr', '48px 2fr 1fr', '48px 3fr 1fr']}
gridRowGap={2}
alignItems="center"
>
{filtered.map((cs, idx) => ( {filtered.map((cs, idx) => (
<VisibilitySensor <VisibilitySensor
key={idx} key={idx}
@ -243,7 +237,7 @@ export function Participants(props: {
} }
</VisibilitySensor> </VisibilitySensor>
))} ))}
</Box> </Col>
</Col> </Col>
</Col> </Col>
); );
@ -312,10 +306,12 @@ function Participant(props: {
return ( return (
<> <>
<Row flexDirection={["column", "row"]} gapX="2" alignItems={["flex-start", "center"]} width="100%" justifyContent="space-between" height={["96px", "60px"]}>
<Row gapX="4" alignItems="center" height="100%">
<Box>{avatar}</Box> <Box>{avatar}</Box>
<Col justifyContent="center" gapY="1" height="100%" minWidth='0'> <Col alignItems="self-start" justifyContent="center" gapY="1" height="100%" minWidth='0'>
{hasNickname && ( {hasNickname && (
<Row minWidth='0' flexShrink='1'> <Row minWidth='0' flexShrink={1}>
<TruncText title={contact.nickname} color="black"> <TruncText title={contact.nickname} color="black">
{contact.nickname} {contact.nickname}
</TruncText> </TruncText>
@ -325,10 +321,12 @@ function Participant(props: {
{cite(contact.patp)} {cite(contact.patp)}
</Text> </Text>
</Col> </Col>
</Row>
<Row <Row
justifyContent="space-between" justifyContent="space-between"
gridColumn={['1 / 3', 'auto']} width={["100%", "128px"]}
alignItems="center" alignItems="center"
gapX="4"
> >
<Col> <Col>
<Text color="lightGray" mb="1"> <Text color="lightGray" mb="1">
@ -387,21 +385,19 @@ function Participant(props: {
<Icon display="block" icon="Ellipsis" /> <Icon display="block" icon="Ellipsis" />
</Dropdown> </Dropdown>
</Row> </Row>
</Row>
<Box <Box
borderBottom={1} borderBottom={1}
borderBottomColor="washedGray" borderBottomColor="washedGray"
gridColumn={['1 / 3', '1 / 4']} width="100%"
/> />
</> </>
); );
} }
function BlankParticipant({ length }) { function BlankParticipant({ length }) {
const height = [`${length * 97}px`, `${length * 61}px`];
return ( return (
<Box <Box width="100%" height={height} />
gridRow={[`auto / span ${3 * length}`, `auto / span ${2 * length}`]}
gridColumn={['1 / 3', '1 / 4']}
height="100%"
/>
); );
} }