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

Fix the AddLink button to the bottom of the left menu

Browse source
This commit is contained in:
Jackson Harper 2023-03-13 12:54:48 +08:00
parent c19460eb75
commit 9f3a03ec61
1 changed files with 19 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -56,6 +56,7 @@ export function LibraryFilterMenu(props: LibraryFilterMenuProps): JSX.Element {
<AddLinkButton
showAddLinkModal={() => props.setShowAddLinkModal(true)}
/>
<Box css={{ height: '250px ' }} />
</Box>
{/* This spacer pushes library content to the right of
the fixed left side menu. */}
@ -186,6 +187,7 @@ function Labels(props: LibraryFilterMenuProps): JSX.Element {
<MenuPanel
title="Labels"
editTitle="Edit Labels"
hideBottomBorder={true}
editFunc={() => {
window.location.href = '/settings/labels'
}}
@ -203,6 +205,7 @@ type MenuPanelProps = {
children: ReactNode
editFunc?: () => void
editTitle?: string
hideBottomBorder?: boolean
}
function MenuPanel(props: MenuPanelProps): JSX.Element {
@ -211,7 +214,9 @@ function MenuPanel(props: MenuPanelProps): JSX.Element {
css={{
m: '0px',
width: '100%',
borderBottom: '1px solid $thBorderColor',
borderBottom: props.hideBottomBorder
? '1px solid transparent'
: '1px solid $thBorderColor',
px: '15px',
}}
alignment="start"
@ -422,10 +427,19 @@ function AddLinkButton(props: AddLinkButtonProps): JSX.Element {
<>
<VStack
css={{
marginTop: 'auto',
width: LIBRARY_LEFT_MENU_WIDTH,
height: '80px',
position: 'fixed',
bottom: '0px',
pl: '25px',
height: '80px',
bg: '$thBackground',
width: LIBRARY_LEFT_MENU_WIDTH,
borderTop: '1px solid $thBorderColor',
borderRight: '1px solid $thBorderColor',
'@mdDown': {
width: '100%',
},
}}
distribution="center"
>
@ -436,6 +450,7 @@ function AddLinkButton(props: AddLinkButtonProps): JSX.Element {
pr: '20px',
fontSize: '14px',
verticalAlign: 'center',
color: isDark
? theme.colors.thHighContrast.toString()
: theme.colors.thTextContrast2.toString(),
@ -456,7 +471,6 @@ function AddLinkButton(props: AddLinkButtonProps): JSX.Element {
<SpanBox css={{ width: '10px' }}></SpanBox>Add Link
</Button>
</VStack>
<Box css={{ height: '180px ' }} />
</>
)
}