MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

chore(style): contain all Sidebar classes inside the module

This commit is contained in:
upsiflu 2024-12-15 15:07:04 +01:00
parent 3865cbac93
commit 925d2db0a6
1 changed files with 17 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
front/src/ui/components/Sidebar.vue
View File

@ -23,9 +23,8 @@ const uploads = useUploadsStore()
</script> </script>
<template> <template>
<aside> <aside :class="[$style.sidebar, $style['sticky-content']]">
<div class="sticky-content"> <nav :class="$style['quick-actions']">
<nav class="quick-actions">
<Link to="/"> <Link to="/">
<img <img
src="../../assets/logo/logo.svg" src="../../assets/logo/logo.svg"
@ -47,11 +46,11 @@ const uploads = useUploadsStore()
<Transition> <Transition>
<div <div
v-if="uploads.currentIndex < uploads.queue.length" v-if="uploads.currentIndex < uploads.queue.length"
class="upload-progress" :class="$style['upload-progress']"
> >
<div class="progress fake" /> <div :class="[$style.progress, $style.fake]" />
<div <div
class="progress" :class="$style.progress"
:style="{ maxWidth: `${uploads.progress}%` }" :style="{ maxWidth: `${uploads.progress}%` }"
/> />
</div> </div>
@ -62,7 +61,7 @@ const uploads = useUploadsStore()
</nav> </nav>
<div class="search"> <div :class="$style.search">
<Input <Input
v-model="searchQuery" v-model="searchQuery"
type="search" type="search"
@ -71,10 +70,9 @@ const uploads = useUploadsStore()
/> />
</div> </div>
<nav class="button-list"> <nav :class="$style['button-list']">
<Link to="/library" <Link to="/library"
color="secondary" color="secondary"
variant="ghost"
icon="bi-compass" icon="bi-compass"
> >
Explore Explore
@ -82,76 +80,66 @@ const uploads = useUploadsStore()
</nav> </nav>
<nav class="button-list"> <nav :class="$style['button-list']">
<Link to="/library/artists" <Link to="/library/artists"
color="secondary" color="secondary"
variant="ghost"
icon="bi-person" icon="bi-person"
> >
Artists Artists
</Link> </Link>
<Link to="/library/albums" <Link to="/library/albums"
color="secondary" color="secondary"
variant="ghost"
icon="bi-disc" icon="bi-disc"
> >
Albums Albums
</Link> </Link>
<Link to="/library/playlists" <Link to="/library/playlists"
color="secondary" color="secondary"
variant="ghost"
icon="bi-music-note-list" icon="bi-music-note-list"
> >
Playlists Playlists
</Link> </Link>
<Link to="/library/radios" <Link to="/library/radios"
color="secondary" color="secondary"
variant="ghost"
icon="bi-question-diamond" icon="bi-question-diamond"
> >
Radios Radios
</Link> </Link>
<Link to="/library/podcasts" <Link to="/library/podcasts"
color="secondary" color="secondary"
variant="ghost"
icon="bi-mic" icon="bi-mic"
> >
Podcasts Podcasts
</Link> </Link>
<Link to="/" <Link to="/"
color="secondary" color="secondary"
variant="ghost"
icon="bi-heart" icon="bi-heart"
> >
Favorites Favorites
</Link> </Link>
</nav> </nav>
<h3>Channels</h3> <h3>Channels</h3>
<nav class="footer inline menu"> <nav :class="$style['button-list']">
<Link to="/about"> <Link inline to="/about">
{{ t('components.Sidebar.link.about') }} {{ t('components.Sidebar.link.about') }}
</Link> </Link>
<Link to="/privacy"> <Link inline to="/privacy">
Privacy Privacy
</Link> </Link>
<Link to="/legal"> <Link inline to="/legal">
Legal Legal
</Link> </Link>
</nav> </nav>
</div>
</aside> </aside>
</template> </template>
<style scoped lang="scss"> <style module lang="scss">
aside { .sidebar {
@include light-theme { background-color: var(--fw-bg-raised)
background: var(--fw-beige-300);
}
@include dark-theme {
background: var(--fw-blue-700);
}
height: 100%; height: 100%;
display:flex;
flex-direction:column;
> .sticky-content { > .sticky-content {
position: sticky; position: sticky;