Improve the reader header on smaller screens

This commit is contained in:
Jackson Harper
2024-08-21 13:23:00 +08:00
parent 43a9a414ab
commit 1deed8a509

View File

@ -35,30 +35,15 @@ export function VerticalArticleActionsMenu(
gap: '30px',
}}
>
<Button
title="Edit labels (l)"
style="articleActionIcon"
onClick={() => props.articleActionHandler('setLabels')}
css={{
display: 'flex',
alignItems: 'center',
'@media (max-width: 300px)': {
display: 'none',
},
}}
>
<LabelIcon size={24} color={theme.colors.thHighContrast.toString()} />
</Button>
<Button
title="Open notebook (t)"
style="articleActionIcon"
onClick={() => props.articleActionHandler('showHighlights')}
css={{
display: 'flex',
display: 'none',
alignItems: 'center',
'@media (max-width: 300px)': {
display: 'none',
'@media (min-width: 500px)': {
display: 'flex',
},
}}
>
@ -73,10 +58,10 @@ export function VerticalArticleActionsMenu(
style="articleActionIcon"
onClick={() => props.articleActionHandler('showEditModal')}
css={{
display: 'flex',
display: 'none',
alignItems: 'center',
'@mdDown': {
display: 'none',
'@media (min-width: 420px)': {
display: 'flex',
},
}}
>
@ -86,6 +71,21 @@ export function VerticalArticleActionsMenu(
/>
</Button>
<Button
title="Edit labels (l)"
style="articleActionIcon"
onClick={() => props.articleActionHandler('setLabels')}
css={{
display: 'none',
alignItems: 'center',
'@media (min-width: 400px)': {
display: 'flex',
},
}}
>
<LabelIcon size={24} color={theme.colors.thHighContrast.toString()} />
</Button>
<Button
title="Remove (#)"
style="articleActionIcon"
@ -108,9 +108,6 @@ export function VerticalArticleActionsMenu(
css={{
display: 'flex',
alignItems: 'center',
'@media (max-width: 300px)': {
display: 'none',
},
}}
>
<ArchiveIcon
@ -126,9 +123,6 @@ export function VerticalArticleActionsMenu(
css={{
display: 'flex',
alignItems: 'center',
'@media (max-width: 300px)': {
display: 'none',
},
}}
>
<UnarchiveIcon