mirror of
https://github.com/ilyakooo0/urbit.git
synced 2024-12-14 17:41:33 +03:00
launch: fluid layout
fixes https://github.com/urbit/landscape/issues/107
This commit is contained in:
parent
6e71811053
commit
db457b504a
pkg/interface/src/views/apps/launch
@ -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"
|
||||
|
@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user