Improve the reader header on smaller screens
This commit is contained in:
@ -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
|
||||
|
||||
Reference in New Issue
Block a user