Skip to content
Snippets Groups Projects
Verified Commit a703b26a authored by Eliot Berriot's avatar Eliot Berriot
Browse files

Responsive sidebar with a collapse/reveal button on smaller screens

parent e0820dfa
No related branches found
No related tags found
No related merge requests found
...@@ -48,7 +48,9 @@ export default { ...@@ -48,7 +48,9 @@ export default {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
.main.pusher, .footer { .main.pusher, .footer {
margin-left: 350px !important; @include media(">desktop") {
margin-left: 350px !important;
}
transform: none !important; transform: none !important;
} }
.main-pusher { .main-pusher {
......
<template> <template>
<div class="ui vertical left visible wide sidebar"> <div :class="['ui', 'vertical', 'left', 'visible', 'wide', {'collapsed': isCollapsed}, 'sidebar',]">
<div class="ui inverted segment header-wrapper"> <div class="ui inverted segment header-wrapper">
<search-bar> <search-bar @search="isCollapsed = false">
<router-link :title="'Funkwhale'" :to="{name: 'index'}"> <router-link :title="'Funkwhale'" :to="{name: 'index'}">
<i class="logo bordered inverted orange big icon"> <i class="logo bordered inverted orange big icon">
<logo class="logo"></logo> <logo class="logo"></logo>
</i> </i>
</router-link> </router-link>
<span
slot="after"
@click="isCollapsed = !isCollapsed"
:class="['ui', 'basic', 'big', {'inverted': isCollapsed}, 'orange', 'icon', 'collapse', 'button']">
<i class="sidebar icon"></i></span>
</search-bar> </search-bar>
</div> </div>
...@@ -111,7 +115,8 @@ export default { ...@@ -111,7 +115,8 @@ export default {
}, },
data () { data () {
return { return {
backend: backend backend: backend,
isCollapsed: true
} }
}, },
mounted () { mounted () {
...@@ -119,7 +124,8 @@ export default { ...@@ -119,7 +124,8 @@ export default {
}, },
computed: { computed: {
...mapState({ ...mapState({
queue: state => state.queue queue: state => state.queue,
url: state => state.route.path
}) })
}, },
methods: { methods: {
...@@ -129,19 +135,41 @@ export default { ...@@ -129,19 +135,41 @@ export default {
reorder: function (oldValue, newValue) { reorder: function (oldValue, newValue) {
this.$store.commit('queue/reorder', {oldValue, newValue}) this.$store.commit('queue/reorder', {oldValue, newValue})
} }
},
watch: {
url: function () {
this.isCollapsed = true
}
} }
} }
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"> <style scoped lang="scss">
@import '../style/vendor/media';
$sidebar-color: #1B1C1D; $sidebar-color: #1B1C1D;
.sidebar { .sidebar {
display:flex; @include media(">tablet") {
flex-direction:column; display:flex;
justify-content: space-between; flex-direction:column;
justify-content: space-between;
}
@include media(">desktop") {
.collapse.button {
display: none;
}
}
@include media("<desktop") {
position: static !important;
width: 100% !important;
&.collapsed {
.menu-area, .player-wrapper, .tabs {
display: none;
}
}
}
> div { > div {
margin: 0; margin: 0;
...@@ -160,7 +188,12 @@ $sidebar-color: #1B1C1D; ...@@ -160,7 +188,12 @@ $sidebar-color: #1B1C1D;
} }
.tabs { .tabs {
overflow-y: auto; overflow-y: auto;
height: 0px; @include media(">tablet") {
height: 0px;
}
@include media("<desktop") {
max-height: 400px;
}
} }
.tab[data-tab="queue"] { .tab[data-tab="queue"] {
tr { tr {
...@@ -174,7 +207,6 @@ $sidebar-color: #1B1C1D; ...@@ -174,7 +207,6 @@ $sidebar-color: #1B1C1D;
.ui.inverted.segment.header-wrapper { .ui.inverted.segment.header-wrapper {
padding: 0; padding: 0;
padding-bottom: 1rem;
} }
.tabs { .tabs {
flex: 1; flex: 1;
...@@ -191,9 +223,14 @@ $sidebar-color: #1B1C1D; ...@@ -191,9 +223,14 @@ $sidebar-color: #1B1C1D;
} }
.ui.search { .ui.search {
display: inline-block; display: block;
> a { > a {
margin-right: 1.5rem; margin-right: 1.5rem;
} }
.collapse.button {
margin-right: 0.5rem;
margin-top: 0.5rem;
float: right;
}
} }
</style> </style>
...@@ -6,6 +6,7 @@ ...@@ -6,6 +6,7 @@
<i class="search icon"></i> <i class="search icon"></i>
</div> </div>
<div class="results"></div> <div class="results"></div>
<slot name="after"></slot>
</div> </div>
</template> </template>
...@@ -25,6 +26,9 @@ export default { ...@@ -25,6 +26,9 @@ export default {
onSelect (result, response) { onSelect (result, response) {
router.push(result.routerUrl) router.push(result.routerUrl)
}, },
onSearchQuery (query) {
self.$emit('search')
},
apiSettings: { apiSettings: {
beforeXHR: function (xhrObject) { beforeXHR: function (xhrObject) {
xhrObject.setRequestHeader('Authorization', self.$store.getters['auth/header']) xhrObject.setRequestHeader('Authorization', self.$store.getters['auth/header'])
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment