More compact menu items

This commit is contained in:
Lim Chee Aun 2023-04-10 01:21:02 +08:00
parent 60cfeea89f
commit c7db204d5b
2 changed files with 55 additions and 40 deletions

View file

@ -1273,6 +1273,18 @@ body:has(.status-deck) .media-post-link {
.szh-menu .menu-horizontal .szh-menu__item { .szh-menu .menu-horizontal .szh-menu__item {
flex: 1; flex: 1;
} }
.szh-menu .menu-horizontal .szh-menu__item:not(:only-child):first-child {
padding-right: 4px !important;
}
.szh-menu
.menu-horizontal
.szh-menu__item:not(:only-child):not(:first-child):not(:last-child) {
padding-left: 8px !important;
padding-right: 4px !important;
}
.szh-menu .menu-horizontal .szh-menu__item:not(:only-child):last-child {
padding-left: 8px !important;
}
.szh-menu .szh-menu__item .menu-shortcut { .szh-menu .szh-menu__item .menu-shortcut {
opacity: 0.5; opacity: 0.5;
font-weight: normal; font-weight: normal;

View file

@ -462,12 +462,13 @@ function Status({
)} )}
{!isSizeLarge && sameInstance && ( {!isSizeLarge && sameInstance && (
<> <>
<div class="menu-horizontal">
<MenuItem onClick={replyStatus}> <MenuItem onClick={replyStatus}>
<Icon icon="reply" /> <Icon icon="reply" />
<span>Reply</span> <span>Reply</span>
</MenuItem> </MenuItem>
{canBoost && (
<MenuItem <MenuItem
disabled={!canBoost}
onClick={async () => { onClick={async () => {
try { try {
const done = await boostStatus(); const done = await boostStatus();
@ -485,7 +486,8 @@ function Status({
/> />
<span>{reblogged ? 'Unboost' : 'Boost…'}</span> <span>{reblogged ? 'Unboost' : 'Boost…'}</span>
</MenuItem> </MenuItem>
)} </div>
<div class="menu-horizontal">
<MenuItem <MenuItem
onClick={() => { onClick={() => {
try { try {
@ -520,6 +522,7 @@ function Status({
/> />
<span>{bookmarked ? 'Unbookmark' : 'Bookmark'}</span> <span>{bookmarked ? 'Unbookmark' : 'Bookmark'}</span>
</MenuItem> </MenuItem>
</div>
</> </>
)} )}
{enableTranslate && ( {enableTranslate && (
@ -609,7 +612,7 @@ function Status({
</MenuItem> </MenuItem>
)} )}
{isSelf && ( {isSelf && (
<> <div class="menu-horizontal">
<MenuItem <MenuItem
onClick={() => { onClick={() => {
states.showCompose = { states.showCompose = {
@ -643,7 +646,7 @@ function Status({
<span>Delete</span> <span>Delete</span>
</MenuItem> </MenuItem>
)} )}
</> </div>
)} )}
</> </>
); );