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

Participants: remove grid

Browse Source 
running into https://bugs.chromium.org/p/chromium/issues/detail?id=688640
on large groups

Fixes urbit/landscape#513
This commit is contained in:
Liam Fitzgerald 2021-03-04 15:46:08 +10:00
parent bbf6b760d2
commit add4adb5b9
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
1 changed files with 14 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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} />
);
}