ilyakooo0/urbit
1
0
Fork 0
mirror of https://github.com/ilyakooo0/urbit.git synced 2024-09-20 06:58:16 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix the long link layout issue

Browse Source
This commit is contained in:
yung calibri 2022-04-11 21:01:25 -04:00
parent 0f3ba4f296
commit b0fe7ff4eb
2 changed files with 11 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
pkg/interface/src/views/apps/links/components/LinkBlockItem.tsx
View File

@ -1,7 +1,6 @@
import React from 'react';
import {
Icon,
Center,
Row,
Text,
Col,
@ -38,7 +37,7 @@ export interface LinkBlockItemProps {
}
export function LinkBlockItem(props: LinkBlockItemProps & CenterProps) {
const { node, summary, size, m, border = 1, ...rest } = props;
const { node, summary, m, border = 1, ...rest } = props;
const { post, children } = node;
const { contents, index, author } = post;
@ -64,16 +63,11 @@ export function LinkBlockItem(props: LinkBlockItemProps & CenterProps) {
history.push(`${pathname}/index${index}${search}`);
};
return (
<Center
<Box
onClick={onClick}
border={border}
borderColor="lightGray"
position="relative"
borderRadius="1"
height={size}
width={size}
m={m}
maxHeight="100%"
border={border}
{...rest}
{...bind}
>
@ -123,6 +117,6 @@ export function LinkBlockItem(props: LinkBlockItemProps & CenterProps) {
</Row>
</Col>
</Box>
</Center>
</Box>
);
}

13
pkg/interface/src/views/apps/links/components/LinkDetail.tsx
View File

@ -1,4 +1,4 @@
import { Col, Row, RowProps } from '@tlon/indigo-react';
import { Center, Col, Row, RowProps } from '@tlon/indigo-react';
import { Association, GraphNode, markEachAsRead, TextContent, UrlContent } from '@urbit/api';
import React, { useEffect } from 'react';
import { useGroup } from '~/logic/state/group';
@ -27,12 +27,13 @@ export function LinkDetail(props: LinkDetailProps) {
return (
/* @ts-ignore indio props?? */
<Row height="100%" width="100%" flexDirection={['column', 'column', 'row']} {...rest}>
<LinkBlockItem minWidth="0" minHeight="0" height={['50%', '50%', '100%']} width={['100%', '100%', 'calc(100% - 350px)']} flexGrow={0} border={0} node={node} />
<Center flexBasis={['100%', '100%', '75%']} flexShrink={1} overflowY="scroll" >
<LinkBlockItem maxHeight="100%" node={node} />
</Center>
<Col
minHeight="0"
flexShrink={1}
width={['100%', '100%', '350px']}
flexGrow={0}
flexBasis={['25%', '25%', '350px']}
flexShrink={0}
flexGrow={1}
gapY={[2,4]}
borderLeft={[0, 0, 1]}
borderTop={[1, 1, 0]}