urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-12-21 01:41:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5122 from urbit/hm/group-feed-spacing

Browse Source 
PostContent: ensure group feed spacing correct
This commit is contained in:
Hunter Miller 2021-07-28 09:46:12 -05:00 committed by GitHub
commit db8bc2d3ba
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
pkg/interface/src/views/landscape/components/Home/Post/PostItem/PostContent.tsx
View File

@ -2,6 +2,7 @@ import { Col, ColProps } from '@tlon/indigo-react';
import { Post } from '@urbit/api'; import { Post } from '@urbit/api';
import React, { ReactElement, useCallback, useState } from 'react'; import React, { ReactElement, useCallback, useState } from 'react';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import { useResize } from '~/logic/lib/useResize';
import { GraphContent } from '~/views/landscape/components/Graph/GraphContent'; import { GraphContent } from '~/views/landscape/components/Graph/GraphContent';
type TruncateProps = ColProps & { type TruncateProps = ColProps & {
@ -12,6 +13,7 @@ const TruncatedBox = styled(Col)<TruncateProps>`
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
${p => p.truncate && css` ${p => p.truncate && css`
margin-bottom: ${p.theme.space[2]}px;
max-height: 300px; max-height: 300px;
mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, transparent 100%); mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 60%, transparent 100%);
`} `}
@ -27,15 +29,13 @@ const PostContent = ({ post, isParent }: PostContentProps): ReactElement => {
const [height, setHeight] = useState(0); const [height, setHeight] = useState(0);
const showFade = !isParent && height >= 300; const showFade = !isParent && height >= 300;
const measuredRef = useCallback((node) => { const resizer = useResize<HTMLDivElement>(useCallback((entry) => {
if (node !== null) { setHeight(entry.target.getBoundingClientRect().height);
setHeight(node.getBoundingClientRect().height); }, []));
}
}, []);
return ( return (
<TruncatedBox <TruncatedBox
ref={measuredRef} ref={resizer.ref}
truncate={showFade} truncate={showFade}
display="-webkit-box" display="-webkit-box"
width="90%" width="90%"