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

Display multi select tools on small screens

Browse source
This commit is contained in:
Jackson Harper 2023-06-09 18:46:37 +08:00
parent 326fd06f9b
commit 14c94eb52c
1 changed files with 21 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

44
packages/web/components/templates/homeFeed/LibraryHeader.tsx
View file

@ -153,7 +153,7 @@ function SmallHeaderLayout(props: LibraryHeaderProps): JSX.Element {
</HStack>
) : (
<>
<MenuHeaderButton {...props} />
{props.multiSelectMode === 'off' && <MenuHeaderButton {...props} />}
<ControlButtonBox
layout={props.layout}
updateLayout={props.updateLayout}
@ -228,6 +228,10 @@ export function SearchBox(props: SearchBoxProps): JSX.Element {
const [focused, setFocused] = useState(false)
const [searchTerm, setSearchTerm] = useState(props.searchTerm ?? '')
useEffect(() => {
setSearchTerm(props.searchTerm ?? '')
}, [props.searchTerm])
const border = props.compact
? focused
? '1px solid $omnivoreCtaYellow'
@ -514,18 +518,6 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
}
}, [props.multiSelectMode])
const breakpoints = {
width: '95%',
'@media (min-width: 930px)': {
width: '640px',
},
'@media (min-width: 1280px)': {
width: '1000px',
},
'@media (min-width: 1600px)': {
width: '1340px',
},
}
return (
<>
<HStack
@ -534,9 +526,18 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
css={{
gap: '10px',
'@mdDown': {
display: 'none',
display: props.multiSelectMode !== 'off' ? 'flex' : 'none',
},
width: '95%',
'@media (min-width: 930px)': {
width: '640px',
},
'@media (min-width: 1280px)': {
width: '1000px',
},
'@media (min-width: 1600px)': {
width: '1340px',
},
...breakpoints,
}}
>
{props.multiSelectMode !== 'off' && (
@ -546,6 +547,9 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
display: 'flex',
gap: '2px',
alignItems: 'center',
'@mdDown': {
mx: '20px',
},
}}
>
<CardCheckbox
@ -604,13 +608,7 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
)}
{props.multiSelectMode !== 'off' ? (
<>
<MultiSelectControlButtonBox
{...props}
// setInMultiSelect={(set: boolean) => {
// setIsChecked(false)
// props.setInMultiSelect(set)
// }}
/>
<MultiSelectControlButtonBox {...props} />
<SpanBox css={{ flex: 1 }}></SpanBox>
</>
) : (
@ -618,7 +616,7 @@ function ControlButtonBox(props: ControlButtonBoxProps): JSX.Element {
)}
</HStack>
{props.setShowInlineSearch && (
{props.setShowInlineSearch && props.multiSelectMode === 'off' && (
<HStack
alignment="center"
distribution="end"