Commit 3b4fd8e0 authored by Agate's avatar Agate 💬

Browse home is now way better, with a pretty search

parent cfcd2bf7
<template>
<div id="app">
<sidebar></sidebar>
<div class="ui container main-content">
<router-view></router-view>
</div>
<router-view></router-view>
</div>
</template>
......@@ -23,12 +21,16 @@ export default {
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
}
.pusher {
padding: 1rem;
.main.pusher {
margin-left: 350px !important;
transform: none !important;
}
.container.main-content {
margin-left: 350px !important;
padding: 1rem;
.stripe.segment {
padding: 4em;
}
.ui.small.text.container {
max-width: 500px !important;
}
</style>
......@@ -20,10 +20,11 @@ export default {
localStorage.setItem('username', creds.username)
this.user.authenticated = true
this.user.username = creds.username
// Redirect to a specified route
if (redirect) {
context.$router.push({name: 'index'})
context.$router.push(redirect)
}
}, response => {
logger.default.error('Error while logging in', response.data)
......
<template>
<div>
<div class="ui inverted vertical masthead center aligned segment">
<div class="ui text container">
<h1 class="ui title">Welcome on Funkwhale!</h1>
<search></search>
</div>
</div>
</template>
<script>
import Search from '@/components/audio/Search'
export default {
name: 'home',
components: { Search },
data () {
return {
msg: 'Welcome to Your Vue.js App'
......
<template>
<div>
<div class="ui form">
<input v-model.trim="query" @change="search" type="text" />
<h2 class="ui title">Artists</h2>
<h2>Search for some music</h2>
<div :class="['ui', {'loading': isLoading }, 'search']">
<div class="ui icon input">
<i class="search icon"></i>
<input class="prompt" placeholder="Artist, album, track..." v-model.trim="query" type="text" />
</div>
</div>
<template v-if="query.length > 0">
<h3 class="ui title">Artists</h3>
<div v-if="results.artists.length > 0" class="ui cards">
<div v-for="artist in results.artists" class="card">
<div class="content">
......@@ -40,7 +46,10 @@
</div>
</div>
</div>
<h2 class="ui title">Albums</h2>
<p v-else>Sorry, we did not found any artist matching your query</p>
</template>
<template v-if="query.length > 0">
<h3 class="ui title">Albums</h3>
<div v-if="results.albums.length > 0" class="ui cards">
<div v-for="album in results.albums" class="card">
<div class="content">
......@@ -67,7 +76,8 @@
</div>
</div>
</div>
</div>
<p v-else>Sorry, we did not found any album matching your query</p>
</template>
</div>
</template>
......@@ -81,29 +91,33 @@ const SEARCH_URL = process.env.API_URL + 'search'
export default {
data () {
return {
query: 'shinedown',
query: '',
results: {
albums: [],
artists: []
},
backend: backend,
isLoading: false,
queue: queue
}
},
mounted () {
if (this.query.length > 0) {
this.search()
}
this.search()
},
methods: {
search () {
if (this.query.length < 1) {
return
}
var self = this
self.isLoading = true
logger.default.debug('Searching track matching "' + this.query + '"')
let params = {
query: this.query
}
this.$http.get(SEARCH_URL, {params: params}).then((response) => {
self.results = self.castResults(response.data)
self.isLoading = false
})
},
rebindTrackData (album) {
......@@ -129,6 +143,11 @@ export default {
})
}
}
},
watch: {
query () {
this.search()
}
}
}
</script>
......
<template>
<div class="ui grid">
<div class="six wide column">
<h2>Log In</h2>
<p>Log in to your Funkwhale account</p>
<div class="main pusher">
<div class="ui vertical stripe segment">
<div class="ui small text container">
<h2>Log in to your Funkwhale account</h2>
<form class="ui form" @submit.prevent="submit()">
<div v-if="error" class="ui negative message">
<div class="header">We cannot log you in</div>
<ul class="list">
<li v-if="error == 'invalid_credentials'">Please double-check your username/password couple is correct</li>
<li v-else>An unknown error happend, this can mean the server is down or cannot be reached</li>
</ul>
</div>
<div class="field">
<label>Username</label>
<input
required
type="text"
placeholder="Enter your username"
v-model="credentials.username"
>
</div>
<div class="field">
<label>Password</label>
<input
required
type="password"
placeholder="Enter your password"
v-model="credentials.password"
>
</div>
<button :class="['ui', {'loading': isLoading}, 'button']" type="submit">Login</button>
</form>
<div v-if="error" class="ui negative message">
<div class="header">We cannot log you in</div>
<ul class="list">
<li v-if="error == 'invalid_credentials'">Please double-check your username/password couple is correct</li>
<li v-else>An unknown error happend, this can mean the server is down or cannot be reached</li>
</ul>
</div>
<div class="field">
<label>Username</label>
<input
ref="username"
required
type="text"
autofocus
placeholder="Enter your username"
v-model="credentials.username"
>
</div>
<div class="field">
<label>Password</label>
<input
required
type="password"
placeholder="Enter your password"
v-model="credentials.password"
>
</div>
<button :class="['ui', {'loading': isLoading}, 'button']" type="submit">Login</button>
</form>
</div>
</div>
</div>
</template>
......@@ -52,6 +55,9 @@ export default {
isLoading: false
}
},
mounted () {
this.$refs.username.focus()
},
methods: {
submit () {
var self = this
......@@ -63,7 +69,7 @@ export default {
}
// We need to pass the component's this context
// to properly make use of http in the auth service
auth.login(this, credentials, '/', function (response) {
auth.login(this, credentials, {path: '/browse'}, function (response) {
// error callback
if (response.status === 400) {
self.error = 'invalid_credentials'
......
<template>
<div class="ui grid">
<div class="six wide column">
<h2>Are you sure you want to log out?</h2>
<p>You are currently logged in as {{ auth.user.username }}</p>
<button class="ui button" @click="logout">Yes, log me out!</button>
</form>
<div class="main pusher">
<div class="ui vertical stripe segment">
<div class="ui small text container">
<h2>Are you sure you want to log out?</h2>
<p>You are currently logged in as {{ auth.user.username }}</p>
<button class="ui button" @click="logout">Yes, log me out!</button>
</form>
</div>
</div>
</div>
</template>
......
<template>
<div class="ui grid">
browsing :)
<div class="main pusher">
<div class="ui container">
<div class="ui secondary pointing menu">
<router-link class="ui item" to="/browse">Browse</router-link>
</div>
<router-view>
Y'a quelqu'un ?
</router-view>
</div>
</div>
</template>
......
<template>
<div class="ui row">
<search class="eight wide column"></search>
</div>
</template>
<script>
import Search from '@/components/audio/Search'
export default {
name: 'browse',
components: { Search }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
......@@ -4,6 +4,7 @@ import Home from '@/components/Home'
import Login from '@/components/auth/Login'
import Logout from '@/components/auth/Logout'
import Browse from '@/components/browse/Browse'
import BrowseHome from '@/components/browse/Home'
Vue.use(Router)
......@@ -27,7 +28,10 @@ export default new Router({
},
{
path: '/browse',
component: Browse
component: Browse,
children: [
{ path: '', component: BrowseHome }
]
}
]
......
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