prehistoric-systems/omnivore
1
0
Fork 0
mirror of https://github.com/omnivore-app/omnivore.git synced 2026-03-11 08:54:26 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Use 4 columns on larger screens, increase menu width

Browse source
This commit is contained in:
Jackson Harper 2023-03-01 10:03:23 +08:00
parent 1e38837f52
commit c3b5666f79
4 changed files with 14 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx
View file

@ -112,6 +112,8 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
props.item.siteName ||
siteName(props.item.originalArticleUrl, props.item.url)
console.log('word count:', props.item.wordsCount)
return (
<VStack
css={{
@ -164,7 +166,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
{props.item.wordsCount ?? 0 > 0
? `${Math.max(
1,
Math.round(props.item.wordsCount ?? 0 / 235)
Math.round((props.item.wordsCount ?? 0) / 235)
)} min read`
: null}
</Box>

3
packages/web/components/patterns/LibraryCards/LinkedItemCard.tsx
View file

@ -42,6 +42,7 @@ export function LinkedItemCard(props: LinkedItemCardProps): JSX.Element {
if (props.layout == 'LIST_LAYOUT') {
return <ListLinkedItemCard {...props} originText={originText} />
} else {
return <GridLinkedItemCard {...props} originText={originText} />
return <LibraryGridCard {...props} originText={originText} />
// return <GridLinkedItemCard {...props} originText={originText} />
}
}

4
packages/web/components/templates/homeFeed/HomeFeedContainer.tsx
View file

@ -903,6 +903,10 @@ function HomeFeedGrid(props: HomeFeedContentProps): JSX.Element {
gridTemplateColumns:
layout == 'LIST_LAYOUT' ? 'none' : 'repeat(3, 1fr)',
},
'@xl': {
gridTemplateColumns:
layout == 'LIST_LAYOUT' ? 'none' : 'repeat(4, 1fr)',
},
}}
>
{props.items.map((linkedItem) => (

9
packages/web/components/templates/homeFeed/LibraryFilterMenu.tsx
View file

@ -8,6 +8,8 @@ import { useGetSubscriptionsQuery } from '../../../lib/networking/queries/useGet
import { useGetLabelsQuery } from '../../../lib/networking/queries/useGetLabelsQuery'
import { Label } from '../../../lib/networking/fragments/labelFragment'
const MENU_WIDTH = '300px'
type LibraryFilterMenuProps = {
setShowAddLinkModal: (show: boolean) => void
@ -24,8 +26,8 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
top: '105px',
position: 'fixed',
bg: 'white',
width: '233px',
height: '100%',
width: MENU_WIDTH,
borderRight: '1px solid #E1E1E1',
pr: '15px',
overflow: 'auto',
@ -43,8 +45,7 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
the fixed left side menu. */}
<Box
css={{
width: '233px',
minWidth: '233px',
minWidth: MENU_WIDTH,
height: '100%',
bg: '$grayBase',
}}
@ -310,7 +311,7 @@ function AddLinkButton(props: AddLinkButtonProps): JSX.Element {
<VStack
css={{
marginTop: 'auto',
width: '233px',
width: MENU_WIDTH,
height: '80px',
pl: '25px',
}}