yume/paricafe
1
0
Fork 0
mirror of https://github.com/paricafe/misskey.git synced 2025-03-20 11:19:22 -05:00
Code Issues Projects Releases Packages Wiki Activity

tweak mobile navbar

Browse source
This commit is contained in:
fly_mc 2024-10-17 22:37:22 +08:00
parent 9301e9ba5c
commit 2f1eb0708a
2 changed files with 22 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
packages/frontend/src/ui/deck.vue
View file

@ -50,11 +50,11 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
<div v-if="isMobile" :class="$style.nav"> <div v-if="isMobile" :class="$style.nav">
<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator" class="_blink"><i class="_indicatorCircle"></i></span></button> <button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button> <button :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"> <button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
<i :class="$style.navButtonIcon" class="ti ti-bell"></i> <i :class="$style.navButtonIcon" class="ti ti-bell"></i>
<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator" class="_blink"> <span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span> <span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
</span> </span>
</button> </button>
@ -316,7 +316,7 @@ body {
} }
.rootIsMobile { .rootIsMobile {
padding-bottom: 100px; padding-bottom: 80px;
} }
.main { .main {
@ -437,20 +437,22 @@ body {
.navButton { .navButton {
position: relative; position: relative;
padding: 0; padding: 0;
aspect-ratio: 1; aspect-ratio: 1.5;
width: 100%; width: 100%;
max-width: 60px; max-width: 60px;
margin: auto; margin: auto;
border-radius: 100%; border-radius: 70% / 100%;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
color: var(--MI_THEME-fg); color: var(--MI_THEME-fg);
&:hover { &:hover {
background: var(--MI_THEME-panelHighlight); background: var(--MI_THEME-panelHighlight);
color: var(--MI_THEME-accent);
} }
&:active { &:active {
background: hsl(from var(--MI_THEME-panel) h s calc(l - 2)); background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
color: var(--MI_THEME-accent);
} }
} }
@ -469,7 +471,7 @@ body {
} }
.navButtonIcon { .navButtonIcon {
font-size: 18px; font-size: 16px;
vertical-align: middle; vertical-align: middle;
} }
@ -479,6 +481,7 @@ body {
left: 0; left: 0;
color: var(--MI_THEME-indicator); color: var(--MI_THEME-indicator);
font-size: 16px; font-size: 16px;
animation: global-blink 1s infinite;
&:has(.itemIndicateValueIcon) { &:has(.itemIndicateValueIcon) {
animation: none; animation: none;

17
packages/frontend/src/ui/universal.vue
View file

@ -25,11 +25,11 @@ SPDX-License-Identifier: AGPL-3.0-only
<button v-if="(!isDesktop || pageMetadata?.needWideArea) && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button> <button v-if="(!isDesktop || pageMetadata?.needWideArea) && !isMobile" :class="$style.widgetButton" class="_button" @click="widgetsShowing = true"><i class="ti ti-apps"></i></button>
<div v-if="isMobile" ref="navFooter" :class="$style.nav"> <div v-if="isMobile" ref="navFooter" :class="$style.nav">
<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator" class="_blink"><i class="_indicatorCircle"></i></span></button> <button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator"><i class="_indicatorCircle"></i></span></button>
<button :class="$style.navButton" class="_button" @click="isRoot ? top() : mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button> <button :class="$style.navButton" class="_button" @click="isRoot ? top() : mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')"> <button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
<i :class="$style.navButtonIcon" class="ti ti-bell"></i> <i :class="$style.navButtonIcon" class="ti ti-bell"></i>
<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator" class="_blink"> <span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator">
<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span> <span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
</span> </span>
</button> </button>
@ -196,6 +196,12 @@ onMounted(() => {
}); });
const onContextmenu = (ev) => { const onContextmenu = (ev) => {
const isLink = (el: HTMLElement) => {
if (el.tagName === 'A') return true;
if (el.parentElement) {
return isLink(el.parentElement);
}
};
if (isLink(ev.target)) return; if (isLink(ev.target)) return;
if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return; if (['INPUT', 'TEXTAREA', 'IMG', 'VIDEO', 'CANVAS'].includes(ev.target.tagName) || ev.target.attributes['contenteditable']) return;
if (window.getSelection()?.toString() !== '') return; if (window.getSelection()?.toString() !== '') return;
@ -409,20 +415,22 @@ $widgets-hide-threshold: 1090px;
.navButton { .navButton {
position: relative; position: relative;
padding: 0; padding: 0;
aspect-ratio: 1; aspect-ratio: 1.5;
width: 100%; width: 100%;
max-width: 60px; max-width: 60px;
margin: auto; margin: auto;
border-radius: 100%; border-radius: 70% / 100%;
background: var(--MI_THEME-panel); background: var(--MI_THEME-panel);
color: var(--MI_THEME-fg); color: var(--MI_THEME-fg);
&:hover { &:hover {
background: var(--MI_THEME-panelHighlight); background: var(--MI_THEME-panelHighlight);
color: var(--MI_THEME-accent);
} }
&:active { &:active {
background: hsl(from var(--MI_THEME-panel) h s calc(l - 2)); background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
color: var(--MI_THEME-accent);
} }
} }
@ -451,6 +459,7 @@ $widgets-hide-threshold: 1090px;
left: 0; left: 0;
color: var(--MI_THEME-indicator); color: var(--MI_THEME-indicator);
font-size: 16px; font-size: 16px;
animation: global-blink 1s infinite;
&:has(.itemIndicateValueIcon) { &:has(.itemIndicateValueIcon) {
animation: none; animation: none;