launch: fluid layout

fixes https://github.com/urbit/landscape/issues/107
This commit is contained in:
Tyler Brown Cifu Shuster 2020-10-22 13:39:08 -07:00
parent 6e71811053
commit db457b504a
3 changed files with 24 additions and 22 deletions

View File

@ -37,8 +37,7 @@ export default class LaunchApp extends React.Component {
<Box
ml='2'
display='grid'
gridAutoRows='124px'
gridTemplateColumns='repeat(auto-fit, 124px)'
gridTemplateColumns='repeat(auto-fill, minmax(128px, 1fr))'
gridGap={3}
p={2}
>
@ -75,12 +74,9 @@ export default class LaunchApp extends React.Component {
location={props.userLocation}
weather={props.weather}
/>
<Box display={["none", "block"]} width="100%" gridColumn="1 / -1"></Box>
<Groups groups={props.groups} associations={props.associations} invites={props.invites} api={props.api}/>
</Box>
<Groups
associations={props.associations}
groups={props.groups}
invites={props.invites}
api={props.api} />
</Box>
<Box
position="absolute"

View File

@ -35,17 +35,7 @@ export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
};
return (
<Box
{...boxProps}
ml='2'
display="grid"
gridAutoRows="124px"
gridTemplateColumns="repeat(auto-fit, 124px)"
gridGap={3}
px={2}
pt={2}
pb="7"
>
<>
{incomingGroups.map((invite) => (
<Box
height='100%'
@ -92,6 +82,6 @@ export default function Groups(props: GroupsProps & Parameters<typeof Box>[0]) {
<Text>{group.metadata.title}</Text>
</Tile>
))}
</Box>
</>
);
}

View File

@ -1,8 +1,24 @@
import React from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import defaultApps from '~/logic/lib/default-apps';
import { Box, DisclosureBox } from "@tlon/indigo-react";
import { Box } from "@tlon/indigo-react";
const SquareBox = styled(Box)`
&::before {
content: "";
display: inline-block;
width: 1px;
height: 0;
padding-bottom: 100%;
}
& > * {
position: absolute;
top: 0;
}
`;
const routeList = defaultApps.map(a => `/~${a}`);
export default class Tile extends React.Component {
@ -26,7 +42,7 @@ export default class Tile extends React.Component {
return (
<Box
<SquareBox
borderRadius={2}
overflow="hidden"
bg={bg || "white"}
@ -40,7 +56,7 @@ export default class Tile extends React.Component {
>
{childElement}
</Box>
</Box>
</SquareBox>
);
}
}