natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

New navbar for mobile

This commit is contained in:
ThatOneCalculator 2022-07-23 23:05:20 -07:00
parent e4a72f8de3
commit c1be1c01b5
2 changed files with 11 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "misskey",
"version": "12.118.0.b3.3-calc",
"version": "12.118.0.b3.4-calc",
"codename": "indigo",
"repository": {
"type": "git",

20
packages/client/src/ui/_common_/navbar-for-mobile.vue
View File

@ -2,9 +2,9 @@
<div class="kmwsukvl">
<div class="body">
<div class="top">
<div class="banner" :style="{ backgroundImage: `url(${ $instance.bannerUrl })` }"></div>
<button v-click-anime class="item _button instance" @click="openInstanceMenu">
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
<div class="banner" :user="$i" :style="{ backgroundImage: `url(${ $i.bannerUrl })` }"></div>
<button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="icon"/><!-- <MkAcct class="text" :user="$i"/> -->
</button>
</div>
<div class="middle">
@ -34,8 +34,8 @@
<button class="item _button post" data-cy-open-post-form @click="os.post">
<i class="icon fas fa-pencil-alt fa-fw"></i><span class="text">{{ i18n.ts.note }}</span>
</button>
<button v-click-anime class="item _button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="avatar"/><MkAcct class="text" :user="$i"/>
<button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
</button>
</div>
</div>
@ -138,7 +138,7 @@ function more() {
position: sticky;
top: 0;
z-index: 1;
padding: 20px 0;
padding: 2rem 0;
background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
@ -155,7 +155,7 @@ function more() {
mask-image: linear-gradient(0deg, rgba(0,0,0,0) 15%, rgba(0,0,0,0.75) 100%);
}
> .instance {
> .account {
position: relative;
display: block;
text-align: center;
@ -163,7 +163,7 @@ function more() {
> .icon {
display: inline-block;
width: 38px;
width: 55px;
aspect-ratio: 1;
}
}
@ -219,7 +219,7 @@ function more() {
}
}
> .account {
> .instance {
position: relative;
display: flex;
align-items: center;
@ -232,7 +232,7 @@ function more() {
box-sizing: border-box;
margin-top: 16px;
> .avatar {
> .icon {
position: relative;
width: 32px;
aspect-ratio: 1;