urbit/shrub
1
1
Fork 0
mirror of https://github.com/urbit/shrub.git synced 2024-11-28 05:22:27 +03:00
Code Issues Packages Projects Releases Wiki Activity

collections: apply styling fixes

Browse Source 
Fixes urbit/landscape#1004
Fixes urbit/landscape#1003
This commit is contained in:
Liam Fitzgerald 2021-06-28 12:02:19 +10:00
parent 5e1919d054
commit 2dd31e8cf6
No known key found for this signature in database
GPG Key ID: D390E12C61D1CFFB
2 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
pkg/interface/src/views/apps/links/components/LinkBlockInput.tsx
View File

@ -82,6 +82,7 @@ export function LinkBlockInput(props: LinkBlockInputProps) {
flexDirection="column"
p="2"
position="relative"
backgroundColor="washedGray"
>
{uploading ? (
<Box
@ -118,7 +119,7 @@ export function LinkBlockInput(props: LinkBlockInputProps) {
p="2"
justifyContent="row-end"
>
<Action onClick={doPost} disabled={!valid} backgroundColor="white">
<Action onClick={doPost} disabled={!valid} backgroundColor="transparent">
Post
</Action>
</Row>

16
pkg/interface/src/views/apps/links/components/LinkBlocks.tsx
View File

@ -24,6 +24,8 @@ const style = {
flexDirection: 'column',
alignItems: 'center'
};
const PADDING = 24;
const MOBILE_PADDING = 16;
export function LinkBlocks(props: LinkBlocksProps) {
const { association } = props;
@ -31,14 +33,15 @@ export function LinkBlocks(props: LinkBlocksProps) {
const linkSizePx = `${linkSize}px`;
const isMobile = useLocalState(s => s.mobile);
const colCount = useMemo(() => (isMobile ? 2 : 5), [isMobile]);
const colCount = useMemo(() => (isMobile ? 2 : 4), [isMobile]);
const bind = useResize<HTMLDivElement>(
useCallback(
(entry) => {
const { width } = entry.target.getBoundingClientRect();
setLinkSize((width - 8) / colCount - 8);
const pad = isMobile ? MOBILE_PADDING : PADDING;
setLinkSize((width - pad) / colCount - pad);
},
[colCount]
[colCount, isMobile]
)
);
@ -64,14 +67,15 @@ export function LinkBlocks(props: LinkBlocksProps) {
const renderItem = useCallback(
React.forwardRef<any, any>(({ index }, ref) => {
const chunk = orm.get(index);
const space = [3,4];
return (
<Row
ref={ref}
flexShrink={0}
my="2"
px="2"
gapX="2"
my={space}
px={space}
gapX={space}
width="100%"
height={linkSizePx}
>