Commit 2ffab4f7 authored by Agate's avatar Agate 💬

Fixed #9 added search bar and logo in sidebar

parent f24cbc7b
......@@ -44,4 +44,12 @@ export default {
.button.icon.tiny {
padding: 0.5em !important;
}
.sidebar {
.logo {
path {
fill: white;
}
}
}
</style>
<template>
<svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 141.7 141.7" enable-background="new 0 0 141.7 141.7" xml:space="preserve">
<g>
<g>
<path fill="#4082B4" d="M70.9,86.1c11.7,0,21.2-9.5,21.2-21.2c0-0.6-0.5-1.1-1.1-1.1h-8c-0.6,0-1.1,0.5-1.1,1.1c0,6-4.9,11-11,11
c-6,0-11-4.9-11-11c0-0.6-0.5-1.1-1.1-1.1h-8c-0.6,0-1.1,0.5-1.1,1.1C49.7,76.6,59.2,86.1,70.9,86.1z"/>
<path fill="#4082B4" d="M70.9,106.1c22.7,0,41.2-18.5,41.2-41.2c0-0.6-0.5-1.1-1.1-1.1h-8c-0.6,0-1.1,0.5-1.1,1.1
c0,17.1-13.9,31-31,31c-17.1,0-31-13.9-31-31c0-0.6-0.5-1.1-1.1-1.1h-8c-0.6,0-1.1,0.5-1.1,1.1C29.6,87.6,48.1,106.1,70.9,106.1z"
/>
<path fill="#4082B4" d="M131.1,63.8h-8c-0.6,0-1.1,0.5-1.1,1.1C122,93.1,99,116,70.9,116c-28.2,0-51.1-22.9-51.1-51.1
c0-0.6-0.5-1.1-1.1-1.1h-8c-0.6,0-1.1,0.5-1.1,1.1c0,33.8,27.5,61.3,61.3,61.3c33.8,0,61.3-27.5,61.3-61.3
C132.2,64.3,131.7,63.8,131.1,63.8z"/>
</g>
<path fill="#222222" d="M43.3,37.3c4.1,2.1,8.5,2.5,12.5,4.8c2.6,1.5,4.2,3.2,5.8,5.7c2.5,3.8,2.4,8.5,2.4,8.5l0.3,5.2
c0,0,2,5.2,6.4,5.2c4.7,0,6.4-5.2,6.4-5.2l0.3-5.2c0,0-0.1-4.7,2.4-8.5c1.6-2.5,3.2-4.3,5.8-5.7c4-2.3,8.4-2.7,12.5-4.8
c4.1-2.1,8.1-4.8,10.8-8.6c2.7-3.8,4-8.8,2.5-13.2c-7.8-0.4-16.8,0.5-23.7,4.2c-9.6,5.1-15.4,3.3-17.1,10.9h-0.1
c-1.7-7.7-7.5-5.8-17.1-10.9c-6.9-3.7-15.9-4.6-23.7-4.2c-1.5,4.4-0.2,9.4,2.5,13.2C35.2,32.5,39.2,35.2,43.3,37.3z"/>
</g>
</svg>
</template>
<script>
export default {
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
</style>
<template>
<div class="ui vertical left visible wide sidebar">
<div class="ui inverted segment header-wrapper">
<h1><router-link :to="{name: 'index'}">Funkwhale</router-link></h1>
<search-bar>
<router-link :title="'Funkwhale'" :to="{name: 'index'}">
<i class="logo bordered inverted orange big icon">
<logo class="logo"></logo>
</i>
</router-link>
</search-bar>
</div>
<div class="menu-area">
......@@ -78,6 +85,8 @@
<script>
import Player from '@/components/audio/Player'
import favoriteTracks from '@/favorites/tracks'
import Logo from '@/components/Logo'
import SearchBar from '@/components/audio/SearchBar'
import auth from '@/auth'
import queue from '@/audio/queue'
import backend from '@/audio/backend'
......@@ -86,7 +95,11 @@ import $ from 'jquery'
export default {
name: 'sidebar',
components: { Player },
components: {
Player,
SearchBar,
Logo
},
data () {
return {
auth: auth,
......@@ -140,7 +153,9 @@ $sidebar-color: #1B1C1D;
border-radius: 0;
}
.header-wrapper {
.ui.inverted.segment.header-wrapper {
padding: 0;
padding-bottom: 1rem;
}
.tabs {
flex: 1;
......@@ -149,4 +164,13 @@ $sidebar-color: #1B1C1D;
.player-wrapper {
border-top: 1px solid white;
}
.logo {
cursor: pointer;
display: inline-block;
}
.ui.search {
display: inline-block;
}
</style>
<template>
<div class="ui fluid category search">
<slot></slot>
<div class="ui icon input">
<input class="prompt" placeholder="Search for artists, albums, tracks..." type="text">
<i class="search icon"></i>
</div>
<div class="results"></div>
</div>
</template>
<script>
import jQuery from 'jquery'
import config from '@/config'
import auth from '@/auth'
import router from '@/router'
const SEARCH_URL = config.API_URL + 'search?query={query}'
export default {
mounted () {
jQuery(this.$el).search({
type: 'category',
minCharacters: 3,
onSelect (result, response) {
router.push(result.routerUrl)
},
apiSettings: {
beforeXHR: function (xhrObject) {
xhrObject.setRequestHeader('Authorization', auth.getAuthHeader())
return xhrObject
},
onResponse: function (initialResponse) {
var results = {}
let categories = [
{
code: 'artists',
route: 'browse.artist',
name: 'Artist',
getTitle (r) {
return r.name
},
getDescription (r) {
return ''
}
},
{
code: 'albums',
route: 'browse.album',
name: 'Album',
getTitle (r) {
return r.title
},
getDescription (r) {
return ''
}
},
{
code: 'tracks',
route: 'browse.track',
name: 'Track',
getTitle (r) {
return r.title
},
getDescription (r) {
return ''
}
}
]
categories.forEach(category => {
results[category.code] = {
name: category.name,
results: []
}
initialResponse[category.code].forEach(result => {
results[category.code].results.push({
title: category.getTitle(result),
id: result.id,
routerUrl: {
name: category.route,
params: {
id: result.id
}
},
description: category.getDescription(result)
})
})
})
return {results: results}
},
url: SEARCH_URL
}
})
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
......@@ -90,6 +90,11 @@ export default {
}
return 'background-image: url(' + backend.absoluteUrl(this.album.cover) + ')'
}
},
watch: {
id () {
this.fetchData()
}
}
}
</script>
......
......@@ -119,6 +119,11 @@ export default {
}
return 'background-image: url(' + backend.absoluteUrl(this.cover) + ')'
}
},
watch: {
id () {
this.fetchData()
}
}
}
</script>
......
......@@ -100,6 +100,11 @@ export default {
}
return 'background-image: url(' + backend.absoluteUrl(this.cover) + ')'
}
},
watch: {
id () {
this.fetchData()
}
}
}
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment