feat(ui): simplify layout of Sidebar
This commit is contained in:
parent
efc0fb4f19
commit
17ff21ab4f
|
@ -1,5 +1,5 @@
|
|||
.funkwhale.popover-container {
|
||||
width: max-content;
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.funkwhale.popover-outer {
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue