mirror of
https://github.com/urbit/shrub.git
synced 2024-12-11 11:02:25 +03:00
Merge pull request #4540 from urbit/lf/contacts-virt
Participants: remove grid
This commit is contained in:
commit
1ed8613644
@ -211,13 +211,7 @@ export function Participants(props: {
|
||||
onChange={onSearchChange}
|
||||
/>
|
||||
</Row>
|
||||
<Box
|
||||
display="grid"
|
||||
gridAutoRows={['48px 48px 1px', '48px 1px']}
|
||||
gridTemplateColumns={['48px 1fr', '48px 2fr 1fr', '48px 3fr 1fr']}
|
||||
gridRowGap={2}
|
||||
alignItems="center"
|
||||
>
|
||||
<Col alignItems="center" >
|
||||
{filtered.map((cs, idx) => (
|
||||
<VisibilitySensor
|
||||
key={idx}
|
||||
@ -243,7 +237,7 @@ export function Participants(props: {
|
||||
}
|
||||
</VisibilitySensor>
|
||||
))}
|
||||
</Box>
|
||||
</Col>
|
||||
</Col>
|
||||
</Col>
|
||||
);
|
||||
@ -312,10 +306,12 @@ function Participant(props: {
|
||||
|
||||
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>
|
||||
<Col justifyContent="center" gapY="1" height="100%" minWidth='0'>
|
||||
<Col alignItems="self-start" justifyContent="center" gapY="1" height="100%" minWidth='0'>
|
||||
{hasNickname && (
|
||||
<Row minWidth='0' flexShrink='1'>
|
||||
<Row minWidth='0' flexShrink={1}>
|
||||
<TruncText title={contact.nickname} color="black">
|
||||
{contact.nickname}
|
||||
</TruncText>
|
||||
@ -325,10 +321,12 @@ function Participant(props: {
|
||||
{cite(contact.patp)}
|
||||
</Text>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row
|
||||
justifyContent="space-between"
|
||||
gridColumn={['1 / 3', 'auto']}
|
||||
width={["100%", "128px"]}
|
||||
alignItems="center"
|
||||
gapX="4"
|
||||
>
|
||||
<Col>
|
||||
<Text color="lightGray" mb="1">
|
||||
@ -387,21 +385,19 @@ function Participant(props: {
|
||||
<Icon display="block" icon="Ellipsis" />
|
||||
</Dropdown>
|
||||
</Row>
|
||||
</Row>
|
||||
<Box
|
||||
borderBottom={1}
|
||||
borderBottomColor="washedGray"
|
||||
gridColumn={['1 / 3', '1 / 4']}
|
||||
width="100%"
|
||||
/>
|
||||
</>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function BlankParticipant({ length }) {
|
||||
const height = [`${length * 97}px`, `${length * 61}px`];
|
||||
return (
|
||||
<Box
|
||||
gridRow={[`auto / span ${3 * length}`, `auto / span ${2 * length}`]}
|
||||
gridColumn={['1 / 3', '1 / 4']}
|
||||
height="100%"
|
||||
/>
|
||||
<Box width="100%" height={height} />
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user