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

finish up new navbar

This commit is contained in:
ThatOneCalculator 2022-07-23 19:54:13 -07:00
parent eb6c975395
commit 86eede2403
2 changed files with 19 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
CALCKEY.md
View File

@ -2,7 +2,6 @@
### Planned
- Better sidebar/navbar
- MFM button
- Better Messaging UI
- Classic mode make instance icon bring up new context menu
@ -24,7 +23,8 @@
- Yarn 3
- Saner defaults
- Star as default reaction
- Rosé Pine by default
- Rosé Pine by default (+ non-themable elements made Rosé Pine)
- Better sidebar/navbar
- Mark as read from notifications widget
- Better welcome screen (not logged in)
- Ability to turn off "Connection lost" message

45
packages/client/src/ui/_common_/navbar.vue
View File

@ -3,12 +3,9 @@
<div class="body">
<div class="top">
<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 instance" @click="openAccountMenu">
<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>
<!-- <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 class="middle">
<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
@ -47,9 +44,12 @@
<button v-tooltip.noDelay.right="i18n.ts.note" 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 v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" 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>
<!-- <button v-click-anime v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="item _button account" @click="openAccountMenu">
<MkAvatar :user="$i" class="account"/><MkAcct class="text" :user="$i"/>
</button> -->
</div>
</div>
</div>
@ -190,7 +190,7 @@ function more(ev: MouseEvent) {
position: sticky;
top: 0;
z-index: 1;
padding: 2.5rem 0;
padding: 2rem 0;
background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
@ -207,7 +207,7 @@ function more(ev: MouseEvent) {
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;
@ -273,22 +273,14 @@ function more(ev: MouseEvent) {
> .account {
position: relative;
display: flex;
align-items: center;
padding-left: 30px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: block;
text-align: center;
width: 100%;
text-align: left;
box-sizing: border-box;
margin-top: 16px;
> .avatar {
position: relative;
width: 32px;
> .icon {
display: inline-block;
width: 38px;
aspect-ratio: 1;
margin-right: 8px;
}
}
}
@ -377,12 +369,12 @@ function more(ev: MouseEvent) {
position: sticky;
top: 0;
z-index: 1;
padding: 2.5rem 0;
padding: 2rem 0;
background: var(--X14);
-webkit-backdrop-filter: var(--blur, blur(8px));
backdrop-filter: var(--blur, blur(8px));
> .instance {
> .account {
display: block;
text-align: center;
width: 100%;
@ -443,19 +435,16 @@ function more(ev: MouseEvent) {
}
> .account {
position: relative;
display: block;
text-align: center;
width: 100%;
> .avatar {
> .icon {
display: inline-block;
width: 38px;
aspect-ratio: 1;
}
> .text {
display: none;
}
}
}