Merge branch 'title-binding' into 'develop'

Page title binding

Closes #1

See merge request !118

changes/changelog.d/1.feature

+Implemented page title binding (#1)

front/src/components/About.vue

 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'About This Instance'">
     <div class="ui vertical center aligned stripe segment">
       <div class="ui text container">
         <h1 class="ui huge header">

front/src/components/Home.vue

 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'Welcome'">
     <div class="ui vertical center aligned stripe segment">
       <div class="ui text container">
         <h1 class="ui huge header">
-            Welcome on funkwhale
+            Welcome on Funkwhale
         </h1>
         <p>We think listening music should be simple.</p>
         <router-link class="ui icon button" to="/about">
@@ -143,9 +143,7 @@
 export default {
   name: 'home',
   data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
+    return {}
   }
 }
 </script>

front/src/components/PageNotFound.vue

 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'Page Not Found'">
     <div class="ui vertical stripe segment">
       <div class="ui text container">
         <h1 class="ui huge header">

front/src/components/auth/Login.vue

 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'Log In'">
     <div class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2>Log in to your Funkwhale account</h2>

front/src/components/auth/Logout.vue

 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'Log Out'">
     <div class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2>Are you sure you want to log out?</h2>

front/src/components/auth/Profile.vue

 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="username + '\'s Profile'">
     <div v-if="isLoading" class="ui vertical segment">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>

front/src/components/auth/Settings.vue

 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'Account Settings'">
     <div class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2 class="ui header">Account settings</h2>

front/src/components/auth/Signup.vue

 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'Sign Up'">
     <div class="ui vertical stripe segment">
       <div class="ui small text container">
         <h2>Create a funkwhale account</h2>

front/src/components/favorites/List.vue

 <template>
-  <div class="main pusher">
+  <div class="main pusher" v-title="'Your Favorites'">
     <div class="ui vertical center aligned stripe segment">
       <div :class="['ui', {'active': isLoading}, 'inverted', 'dimmer']">
         <div class="ui text loader">Loading your favorites...</div>

front/src/components/library/Album.vue

 <template>
   <div>
-    <div v-if="isLoading" class="ui vertical segment">
+    <div v-if="isLoading" class="ui vertical segment" v-title="'Album'">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>
     <template v-if="album">
-      <div :class="['ui', 'head', {'with-background': album.cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
+      <div :class="['ui', 'head', {'with-background': album.cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="album.title">
         <div class="segment-content">
           <h2 class="ui center aligned icon header">
             <i class="circular inverted sound yellow icon"></i>

front/src/components/library/Artist.vue

 <template>
   <div>
-    <div v-if="isLoading" class="ui vertical segment">
+    <div v-if="isLoading" class="ui vertical segment" v-title="'Artist'">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>
     <template v-if="artist">
-      <div :class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
+      <div :class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="artist.name">
         <div class="segment-content">
           <h2 class="ui center aligned icon header">
             <i class="circular inverted users violet icon"></i>

front/src/components/library/Artists.vue

 <template>
-  <div>
+  <div v-title="'Artists'">
     <div class="ui vertical stripe segment">
       <h2 class="ui header">Browsing artists</h2>
       <div :class="['ui', {'loading': isLoading}, 'form']">

front/src/components/library/Home.vue

 <template>
-  <div>
+  <div v-title="'Home'">
     <div class="ui vertical stripe segment">
       <search :autofocus="true"></search>
     </div>

front/src/components/library/Radios.vue

 <template>
-  <div>
+  <div v-title="'Radios'">
     <div class="ui vertical stripe segment">
       <h2 class="ui header">Browsing radios</h2>
       <router-link class="ui green basic button" to="/library/radios/build" exact>Create your own radio</router-link>

front/src/components/library/Track.vue

 <template>
   <div>
-    <div v-if="isLoadingTrack" class="ui vertical segment">
+    <div v-if="isLoadingTrack" class="ui vertical segment" v-title="'Track'">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>
     <template v-if="track">
-      <div :class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
+      <div :class="['ui', 'head', {'with-background': cover}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle" v-title="track.title">
         <div class="segment-content">
           <h2 class="ui center aligned icon header">
             <i class="circular inverted music orange icon"></i>

front/src/components/library/import/BatchDetail.vue

 <template>
-  <div>
+  <div v-title="'Import Batch #' + id">
     <div v-if="isLoading && !batch" class="ui vertical segment">
       <div :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
     </div>

front/src/components/library/import/BatchList.vue

 <template>
-  <div>
+  <div v-title="'Import Batches'">
     <div class="ui vertical stripe segment">
       <div v-if="isLoading" :class="['ui', 'centered', 'active', 'inline', 'loader']"></div>
       <button

front/src/components/library/import/Main.vue

 <template>
-  <div>
+  <div v-title="'Import Music'">
     <div class="ui vertical stripe segment">
       <div class="ui top three attached ordered steps">
         <a @click="currentStep = 0" :class="['step', {'active': currentStep === 0}, {'completed': currentStep > 0}]">

front/src/components/library/radios/Builder.vue

 <template>
-  <div class="ui vertical stripe segment">
+  <div class="ui vertical stripe segment" v-title="'Radio Builder'">
     <div>
       <div>
         <h2 class="ui header">Builder</h2>