fix(ui): sidebar layout
This commit is contained in:
ArneBo
upsiflu
parent
b04e5254c4
commit
e563560cb1
|
|
@ -39,7 +39,7 @@ const isExternalLink = computed(() => {
|
|||
.active { outline: 3px solid red; }
|
||||
.external { outline: 3px dotted blue; }
|
||||
.inline { display:inline-flex; }
|
||||
.link {
|
||||
.button {
|
||||
background-color: var(--fw-bg-color);
|
||||
color: var(--fw-text-color);
|
||||
border: 1px solid var(--fw-bg-color);
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ import Input from '~/components/ui/Input.vue'
|
|||
import Link from '~/components/ui/Link.vue'
|
||||
import ActorAvatar from '~/components/common/ActorAvatar.vue'
|
||||
import UserMenu from './UserMenu.vue'
|
||||
import Button from '~/components/ui/Button.vue'
|
||||
|
||||
const searchQuery = ref('')
|
||||
|
||||
|
|
@ -25,25 +26,25 @@ const uploads = useUploadsStore()
|
|||
|
||||
<template>
|
||||
<aside :class="[$style.sidebar, $style['sticky-content']]" v-bind="color('default solid raised')">
|
||||
<header :class="$style['header-wrapper']">
|
||||
<Link to="/" :class="$style['logo']">
|
||||
<img
|
||||
src="../../assets/logo/logo.svg"
|
||||
alt="Logo"
|
||||
width="40px"
|
||||
height="40px"
|
||||
>
|
||||
</Link>
|
||||
|
||||
<nav :class="$style['quick-actions']">
|
||||
<Link to="/">
|
||||
<img
|
||||
src="../../assets/logo/logo.svg"
|
||||
alt="Logo"
|
||||
class="logo"
|
||||
>
|
||||
|
||||
<Link to="/manage/settings">
|
||||
<Button round icon="bi-wrench" secondary>
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Link to="/manage/settings"
|
||||
icon="bi-wrench"
|
||||
color="secondary"
|
||||
variant="ghost">
|
||||
</Link>
|
||||
|
||||
<Link to="/upload"
|
||||
icon="bi-upload"
|
||||
color="secondary"
|
||||
variant="ghost">
|
||||
<Link to="/upload">
|
||||
<Button round icon="bi-upload" class="is-icon-only" secondary>
|
||||
<Transition>
|
||||
<div
|
||||
v-if="uploads.currentIndex < uploads.queue.length"
|
||||
|
|
@ -56,70 +57,85 @@ const uploads = useUploadsStore()
|
|||
/>
|
||||
</div>
|
||||
</Transition>
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<UserMenu />
|
||||
|
||||
</nav>
|
||||
</header>
|
||||
<div :class="$style.search">
|
||||
<Input
|
||||
v-model="searchQuery"
|
||||
type="search"
|
||||
icon="bi-search"
|
||||
:placeholder="t('components.audio.SearchBar.placeholder.search')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div :class="$style.search">
|
||||
<Input
|
||||
v-model="searchQuery"
|
||||
type="search"
|
||||
icon="bi-search"
|
||||
:placeholder="t('components.audio.SearchBar.placeholder.search')"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<nav :class="$style['button-list']">
|
||||
<Link to="/library"
|
||||
<nav :class="$style['button-list']">
|
||||
<Link to="/library"
|
||||
>
|
||||
<Button
|
||||
color="secondary"
|
||||
icon="bi-compass"
|
||||
>
|
||||
Explore
|
||||
</Link>
|
||||
{{ t('components.Sidebar.header.explore') }}
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
</nav>
|
||||
|
||||
<nav :class="$style['button-list']">
|
||||
<Link to="/library/artists"
|
||||
<Link to="/library/artists">
|
||||
<Button
|
||||
color="secondary"
|
||||
icon="bi-person"
|
||||
>
|
||||
Artists
|
||||
</Link>
|
||||
<Link to="/library/albums"
|
||||
{{ t('components.Sidebar.link.artists') }}
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Link to="/library/albums">
|
||||
<Button
|
||||
color="secondary"
|
||||
icon="bi-disc"
|
||||
>
|
||||
Albums
|
||||
</Link>
|
||||
<Link to="/library/playlists"
|
||||
{{ t('components.Sidebar.link.albums') }}
|
||||
</Button>
|
||||
</Link>
|
||||
|
||||
<Link to="/library/playlists">
|
||||
<Button
|
||||
color="secondary"
|
||||
icon="bi-music-note-list"
|
||||
>
|
||||
Playlists
|
||||
</Link>
|
||||
<Link to="/library/radios"
|
||||
{{ t('components.Sidebar.link.playlists') }}
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to="/library/radios">
|
||||
<Button
|
||||
color="secondary"
|
||||
icon="bi-question-diamond"
|
||||
>
|
||||
Radios
|
||||
</Link>
|
||||
<Link to="/library/podcasts"
|
||||
{{ t('components.Sidebar.link.radios') }}
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to="/library/podcasts">
|
||||
<Button
|
||||
color="secondary"
|
||||
icon="bi-mic"
|
||||
>
|
||||
Podcasts
|
||||
</Link>
|
||||
<Link to="/"
|
||||
{{ t('components.Sidebar.link.podcasts') }}
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to="/">
|
||||
<Button
|
||||
color="secondary"
|
||||
icon="bi-heart"
|
||||
>
|
||||
Favorites
|
||||
</Link>
|
||||
</nav>
|
||||
<h3>Channels</h3>
|
||||
{{ t('components.Sidebar.link.favorites') }}
|
||||
</Button>
|
||||
</Link>
|
||||
</nav>
|
||||
<h3>{{ t('components.Sidebar.link.channels') }}</h3>
|
||||
<nav :class="$style['button-list']">
|
||||
<Link inline to="/about">
|
||||
{{ t('components.Sidebar.link.about') }}
|
||||
|
|
@ -135,24 +151,39 @@ const uploads = useUploadsStore()
|
|||
</template>
|
||||
|
||||
<style module lang="scss">
|
||||
.logo {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
height: 100%;
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
|
||||
> .sticky-content {
|
||||
&.sticky-content {
|
||||
position: sticky;
|
||||
height: 100%;
|
||||
max-height: 100vh;
|
||||
overflow: auto;
|
||||
top: 0;
|
||||
|
||||
> .quick-actions {
|
||||
> .header-wrapper {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.quick-actions {
|
||||
display: flex;
|
||||
align-self: end;
|
||||
margin: 20px;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
font-size: 1.3rem;
|
||||
|
||||
.popover-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
button.active {
|
||||
box-shadow: inset 0 0 0 2px var(--fw-blue-500);
|
||||
position: relative;
|
||||
|
|
@ -201,11 +232,6 @@ const uploads = useUploadsStore()
|
|||
}
|
||||
}
|
||||
|
||||
> :first-child {
|
||||
margin-right: auto;
|
||||
|
||||
}
|
||||
|
||||
.avatar,
|
||||
.logo {
|
||||
height: 30px;
|
||||
|
|
@ -251,33 +277,15 @@ const uploads = useUploadsStore()
|
|||
font-size: 14px;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
> .pill-list {
|
||||
padding: 0 16px 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
> nav.button-list {
|
||||
nav.button-list {
|
||||
padding: 0 16px 32px;
|
||||
|
||||
> button {
|
||||
button {
|
||||
margin: 2px 0;
|
||||
|
||||
/* TODO: Fix in UI: When icon is applied, the text should be aligned left */
|
||||
justify-content: start;
|
||||
|
||||
/* TODO: Fix in UI: Add `block` prop that spans 100% width */
|
||||
width: 100%;
|
||||
|
||||
:deep(i) {
|
||||
font-size: 1.4em;
|
||||
|
||||
/* TODO: Fix in UI: Add margin right to the icon, when content available */
|
||||
margin-right: 1ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -56,7 +56,10 @@ const labels = computed(() => ({
|
|||
<Popover v-model:open="openUserMenu">
|
||||
<Button
|
||||
@click="openUserMenu = !openUserMenu"
|
||||
class="icon-only">
|
||||
round
|
||||
icon
|
||||
class="is-icon-only"
|
||||
>
|
||||
<img
|
||||
v-if="store.state.auth.authenticated && store.state.auth.profile?.avatar?.urls.medium_square_crop"
|
||||
alt=""
|
||||
|
|
@ -68,10 +71,8 @@ const labels = computed(() => ({
|
|||
<PopoverItem v-if="store.state.ui.notifications.inbox + additionalNotifications > 0">
|
||||
<Link :to="{name: 'notifications'}">
|
||||
<i class="bi bi-inbox-fill" />
|
||||
<div :class="['ui', 'accent', 'mini', 'bottom floating', 'circular', 'label']"
|
||||
>
|
||||
{{ store.state.ui.notifications.inbox + additionalNotifications }}
|
||||
</div>
|
||||
{{ labels.notifications }}
|
||||
</Link>
|
||||
</PopoverItem>
|
||||
|
|
@ -147,14 +148,16 @@ const labels = computed(() => ({
|
|||
</template>
|
||||
</PopoverSubmenu>
|
||||
<PopoverItem>
|
||||
<Link
|
||||
to="https://docs.funkwhale.audio"
|
||||
class="item"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="bi bi-book" />
|
||||
{{ labels.docs }}
|
||||
</Link>
|
||||
<nav class="button-list">
|
||||
<Link
|
||||
to="https://docs.funkwhale.audio"
|
||||
class="item"
|
||||
target="_blank"
|
||||
>
|
||||
<i class="bi bi-book" />
|
||||
{{ labels.docs }}
|
||||
</Link>
|
||||
</nav>
|
||||
</PopoverItem>
|
||||
<PopoverItem
|
||||
@click.prevent="emit('show:shortcuts-modal')"
|
||||
|
|
@ -165,27 +168,43 @@ const labels = computed(() => ({
|
|||
<hr v-if="store.state.auth.authenticated"/>
|
||||
<PopoverItem v-if="store.state.auth.authenticated && route.path != '/logout'"
|
||||
>
|
||||
<Link :to="{ name: 'logout' }">
|
||||
<i class="bi bi-box-arrow-right" />
|
||||
{{ labels.logout }}
|
||||
</Link>
|
||||
<nav class="button-list">
|
||||
<Link :to="{ name: 'logout' }">
|
||||
<i class="bi bi-box-arrow-right" />
|
||||
{{ labels.logout }}
|
||||
</Link>
|
||||
</nav>
|
||||
</PopoverItem>
|
||||
<PopoverItem v-if="!store.state.auth.authenticated">
|
||||
<Link
|
||||
:to="{ name: 'login' }"
|
||||
>
|
||||
<i class="bi-box-arrow-in-right" />
|
||||
{{ labels.login }}
|
||||
</Link>
|
||||
<nav class="button-list">
|
||||
<Link
|
||||
:to="{ name: 'login' }"
|
||||
>
|
||||
<i class="bi-box-arrow-in-right" />
|
||||
{{ labels.login }}
|
||||
</Link>
|
||||
</nav>
|
||||
</PopoverItem>
|
||||
<PopoverItem v-if="!store.state.auth.authenticated && store.state.instance.settings.users.registration_enabled.value">
|
||||
<Link
|
||||
:to="{ name: 'signup' }"
|
||||
>
|
||||
<i class="bi bi-person-square" />
|
||||
{{ labels.signup }}
|
||||
</Link>
|
||||
<nav class="button-list">
|
||||
<Link
|
||||
:to="{ name: 'signup' }"
|
||||
>
|
||||
<i class="bi bi-person-square" />
|
||||
{{ labels.signup }}
|
||||
</Link>
|
||||
</nav>
|
||||
</PopoverItem>
|
||||
</template>
|
||||
</Popover>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
nav.button-list {
|
||||
width: 100%;
|
||||
a:hover {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue