Chapril/mobilizon.chapril.org-mobilizon
Chapril/mobilizon.chapril.org-mobilizon
25
0
Fork 0
Code Issues Pull Requests Releases Activity

Improve Navbar on mobile

Browse Source 
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-06-11 18:31:13 +02:00
parent a7a38c7f69
commit 49df536b38
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
1 changed files with 38 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
js/src/components/NavBar.vue
View File

@ -69,20 +69,34 @@
<search-field @navbar-search="mobileNavbarActive = false" /> <search-field @navbar-search="mobileNavbarActive = false" />
</b-navbar-item> </b-navbar-item>
<b-navbar-dropdown v-if="currentActor.id && currentUser.isLoggedIn" right> <b-navbar-dropdown
v-if="currentActor.id && currentUser.isLoggedIn"
right
collapsible
>
<template <template
slot="label" slot="label"
v-if="currentActor" v-if="currentActor"
class="navbar-dropdown-profile" class="navbar-dropdown-profile"
> >
<figure class="image is-32x32" v-if="currentActor.avatar"> <div class="identity-wrapper">
<img <div>
class="is-rounded" <figure class="image is-32x32" v-if="currentActor.avatar">
alt="avatarUrl" <img
:src="currentActor.avatar.url" class="is-rounded"
/> alt="avatarUrl"
</figure> :src="currentActor.avatar.url"
<b-icon v-else icon="account-circle" /> />
</figure>
<b-icon v-else icon="account-circle" />
</div>
<div class="media-content is-hidden-desktop">
<span>{{ displayName(currentActor) }}</span>
<span class="has-text-grey-dark" v-if="currentActor.name"
>@{{ currentActor.preferredUsername }}</span
>
</div>
</div>
</template> </template>
<!-- No identities dropdown if no identities --> <!-- No identities dropdown if no identities -->
@ -103,8 +117,8 @@
</div> </div>
<div class="media-content"> <div class="media-content">
<span>{{ identity.displayName() }}</span> <span>{{ displayName(identity) }}</span>
<span class="has-text-grey" v-if="identity.name" <span class="has-text-grey-dark" v-if="identity.name"
>@{{ identity.preferredUsername }}</span >@{{ identity.preferredUsername }}</span
> >
</div> </div>
@ -169,7 +183,7 @@ import {
IDENTITIES, IDENTITIES,
UPDATE_DEFAULT_ACTOR, UPDATE_DEFAULT_ACTOR,
} from "../graphql/actor"; } from "../graphql/actor";
import { IPerson, Person } from "../types/actor"; import { displayName, IPerson, Person } from "../types/actor";
import { CONFIG } from "../graphql/config"; import { CONFIG } from "../graphql/config";
import { IConfig } from "../types/config.model"; import { IConfig } from "../types/config.model";
import { ICurrentUser, IUser } from "../types/current-user.model"; import { ICurrentUser, IUser } from "../types/current-user.model";
@ -227,6 +241,8 @@ export default class NavBar extends Vue {
mobileNavbarActive = false; mobileNavbarActive = false;
displayName = displayName;
@Watch("currentActor") @Watch("currentActor")
async initializeListOfIdentities(): Promise<void> { async initializeListOfIdentities(): Promise<void> {
if (!this.currentUser.isLoggedIn) return; if (!this.currentUser.isLoggedIn) return;
@ -309,7 +325,7 @@ nav {
cursor: pointer; cursor: pointer;
span { span {
display: inherit; display: flex;
} }
&.is-active { &.is-active {
@ -343,5 +359,14 @@ nav {
padding-top: 0.2rem; padding-top: 0.2rem;
} }
} }
.identity-wrapper {
display: flex;
.media-content span {
display: flex;
color: $violet-2;
}
}
} }
</style> </style>