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", "name": "misskey",
"version": "12.118.0.b3.3-calc", "version": "12.118.0.b3.4-calc",
"codename": "indigo", "codename": "indigo",
"repository": { "repository": {
"type": "git", "type": "git",

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

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