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

Smaller display settings dropdown on small screens. Better shadows

Browse source
This commit is contained in:
Jackson Harper 2022-04-11 20:38:54 -07:00
parent 68933689f6
commit 54ff7b6d60
3 changed files with 19 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/web/components/templates/article/ArticleActionsMenu.tsx
View file

@ -41,7 +41,7 @@ type ActionDropdownProps = {
const ActionDropdown = (props: ActionDropdownProps): JSX.Element => {
return <Dropdown
showArrow={true}
css={{ m: '0px', p: '0px', overflow: 'hidden', width: '265px', maxWidth: '265px' }}
css={{ m: '0px', p: '0px', overflow: 'hidden', width: '265px', maxWidth: '265px', '@smDown': { width: '230px' } }}
side={props.layout == 'vertical' ? 'right' : 'bottom'}
sideOffset={props.layout == 'vertical' ? 8 : 0}
align={props.layout == 'vertical' ? 'start' : 'center'}
@ -68,6 +68,7 @@ export function ArticleActionsMenu(props: ArticleActionsMenuProps): JSX.Element
m: '0px',
}}
>
<ActionDropdown
layout={props.layout}
triggerElement={

4
packages/web/components/templates/article/ReaderSettingsModal.tsx
View file

@ -29,7 +29,7 @@ export function ReaderSettings(props: ReaderSettingsProps): JSX.Element {
<HStack
alignment='center'
css={{
width: '265px',
width: '100%',
height: '70px',
borderBottom: `1px solid ${theme.colors.grayLine.toString()}`,
}}
@ -56,7 +56,7 @@ export function ReaderSettings(props: ReaderSettingsProps): JSX.Element {
},
}}
>
<StyledText color={theme.colors.readerFontTransparent.toString()} css={{ pl: '12px', m: '0px', pt: '14px' }}>Margin:</StyledText>
<StyledText color={theme.colors.readerFontTransparent.toString()} css={{ pl: '8px', m: '0px', pt: '14px' }}>Margin:</StyledText>
<HStack distribution='between' css={{ gap: '16px', alignItems: 'center', alignSelf: 'center' }}>
<Button style='plainIcon' css={{ pt: '10px', px: '4px' }} onClick={() => {
const newMarginWith = Math.max(marginWidth - 45, 200)

16
packages/web/pages/[username]/[slug]/index.tsx
View file

@ -29,6 +29,7 @@ import { useSWRConfig } from 'swr'
import { showErrorToast, showSuccessToast } from '../../../lib/toastHelpers'
import { EditLabelsControl } from '../../../components/templates/article/EditLabelsControl'
import { EditLabelsModal } from '../../../components/templates/article/EditLabelsModal'
import { DisplaySettingsModal } from '../../../components/templates/article/DisplaySettingsModal'
const PdfArticleContainerNoSSR = dynamic<PdfArticleContainerProps>(
@ -49,7 +50,8 @@ export default function Home(): JSX.Element {
const [marginWidth, setMarginWidth] = useState(preferencesData?.margin ?? 360)
const [lineHeight, setLineHeight] = useState(preferencesData?.lineHeight ?? 150)
const [showEditLabelsModal, setShowEditLabelsModal] = useState(false)
const [showEditDisplaySettingsModal, setShowEditDisplaySettingsModal] = useState(false)
const { articleData } = useGetArticleQuery({
username: router.query.username as string,
slug: router.query.slug as string,
@ -134,6 +136,10 @@ export default function Home(): JSX.Element {
}
break
}
case 'editDisplaySettings': {
setShowEditDisplaySettingsModal(true)
break
}
case 'editLabels': {
setShowEditLabelsModal(true)
break
@ -245,6 +251,14 @@ export default function Home(): JSX.Element {
onOpenChange={() => setShowEditLabelsModal(false)}
/>
)}
{showEditDisplaySettingsModal && (
<DisplaySettingsModal
userPreferences={preferencesData}
articleActionHandler={actionHandler}
onOpenChange={() => setShowEditDisplaySettingsModal(false)}
/>
)}
</PrimaryLayout>
)
}