feat(ui): simplify layout of Sidebar

This commit is contained in:
upsiflu 2024-12-17 15:15:12 +01:00
parent efc0fb4f19
commit 17ff21ab4f
2 changed files with 79 additions and 117 deletions

View File

@ -1,5 +1,5 @@
.funkwhale.popover-container {
width: max-content;
display: contents;
}
.funkwhale.popover-outer {

View File

@ -30,8 +30,10 @@ 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']">
<Layout header flex>
<Link to="/"
:class="$style['logo']"
>
<img
src="../../assets/logo/logo.svg"
alt="Logo"
@ -40,15 +42,21 @@ const uploads = useUploadsStore()
>
</Link>
<nav :class="$style['quick-actions']">
<Spacer grow />
<Link to="/manage/settings">
<Button round icon="bi-wrench" ghost secondary>
</Button>
<Layout nav no-gap flex style="align-items: center;">
<Link to="/manage/settings"
round
icon="bi-wrench"
ghost
>
</Link>
<Link to="/upload">
<Button round icon="bi-upload" class="is-icon-only" ghost secondary>
<Link to="/upload"
round icon="bi-upload"
class="is-icon-only"
ghost
>
<Transition>
<div
v-if="uploads.currentIndex < uploads.queue.length"
@ -61,13 +69,11 @@ const uploads = useUploadsStore()
/>
</div>
</Transition>
</Button>
</Link>
<UserMenu :showShortcutsModal="openShortcutsModal"/>
</nav>
</header>
</Layout>
</Layout>
<Layout no-gap stack :class="$style['button-list']">
<div :class="$style.search">
<Input
@ -80,7 +86,6 @@ const uploads = useUploadsStore()
<nav style="display:contents;">
<Link to="/library"
ghost
secondary
icon="bi-compass"
>
{{ t('components.Sidebar.header.explore') }}
@ -88,7 +93,6 @@ const uploads = useUploadsStore()
<Link to="/library/artists"
ghost
secondary
icon="bi-person"
>
{{ t('components.Sidebar.link.artists') }}
@ -96,7 +100,6 @@ const uploads = useUploadsStore()
<Link to="/library/albums"
ghost
secondary
icon="bi-disc"
>
{{ t('components.Sidebar.link.albums') }}
@ -104,28 +107,24 @@ const uploads = useUploadsStore()
<Link to="/library/playlists"
ghost
secondary
icon="bi-music-note-list"
>
{{ t('components.Sidebar.link.playlists') }}
</Link>
<Link to="/library/radios"
ghost
secondary
icon="bi-boombox-fill"
>
{{ t('components.Sidebar.link.radios') }}
</Link>
<Link to="/library/podcasts"
ghost
secondary
icon="bi-mic"
>
{{ t('components.Sidebar.link.podcasts') }}
</Link>
<Link to="/"
ghost
secondary
icon="bi-heart"
>
{{ t('components.Sidebar.link.favorites') }}
@ -163,37 +162,6 @@ const uploads = useUploadsStore()
overflow: auto;
top: 0;
> .header-wrapper {
display: flex;
.logo {
height: 40px;
width: 40px;
margin: 20px;
}
}
.quick-actions {
display: flex;
align-self: end;
margin: 20px;
align-items: center;
font-size: 1.3rem;
.popover-container {
display: flex;
}
button.active {
box-shadow: inset 0 0 0 2px var(--fw-blue-500);
position: relative;
overflow: hidden;
:deep(svg + span) {
margin-left: 0 !important;
}
}
.upload-progress {
background: var(--fw-blue-500);
position: absolute;
@ -231,11 +199,6 @@ const uploads = useUploadsStore()
}
}
}
.avatar,
.logo {
height: 30px;
display: block;
}
.avatar {
aspect-ratio: 1;
@ -257,7 +220,6 @@ const uploads = useUploadsStore()
border-radius: 100vh;
}
}
}
.search {
padding: 0 4px;