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

WIP home

parent 341fb54c
No related branches found
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
front/src/App.vue
+ 1
− 0
View file @ e6a0c691
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
<set-instance-modal @update:show="showSetInstanceModal = $event" :show="showSetInstanceModal"></set-instance-modal> <set-instance-modal @update:show="showSetInstanceModal = $event" :show="showSetInstanceModal"></set-instance-modal>
<service-messages v-if="messages.length > 0"/> <service-messages v-if="messages.length > 0"/>
<router-view :key="$route.fullPath"></router-view> <router-view :key="$route.fullPath"></router-view>
<div class="ui hidden divider"></div>
<div class="ui fitted divider"></div> <div class="ui fitted divider"></div>
<app-footer <app-footer
:version="version" :version="version"
......
front/src/components/Home.vue
+ 67
− 132
View file @ e6a0c691
<template> <template>
<main class="main pusher" v-title="labels.title"> <main class="main pusher" v-title="title">
<section class="ui vertical center aligned stripe segment"> <section class="ui vertical center aligned stripe segment">
<div class="ui text container">
<h1 class="ui huge header"> <h1 class="ui huge header">
<translate translate-context="Content/Home/Title/Verb">Welcome on Funkwhale</translate> <translate translate-context="Content/Home/Title/Verb" :translate-params="{podName: config.podName}">Welcome on %{ podName}</translate>
</h1> </h1>
<p><translate translate-context="Content/Home/Title">We think listening to music should be simple.</translate></p> <p v-if="config.shortDescription">{{ config.shortDescription }}</p>
<router-link class="ui icon button" to="/about"> <!-- <img src="http://placekitten.com/800/300" alt=""> -->
<i class="info icon"></i>
<translate translate-context="Content/Home/Button.Label/Verb">Learn more about this instance</translate>
</router-link>
<router-link class="ui icon teal button" to="/library">
<translate translate-context="Content/Home/Button.Label/Verb">Get me to the library</translate>
<i class="right arrow icon"></i>
</router-link>
</div>
</section> </section>
<section class="ui vertical stripe segment"> <div class="ui container">
<div class="ui middle aligned stackable text container"> <div class="ui stackable two column grid">
<div class="ui grid"> <section class="column">
<div class="row"> <div class="ui container">
<div class="eight wide left floated column"> <h2 class="ui huge header">
<h2 class="ui header"> <translate translate-context="Content/Home/Title/Verb">Login</translate>
<translate translate-context="Content/Home/Title">Why funkwhale?</translate>
</h2>
<p><translate translate-context="Content/Home/Paragraph">That's simple: we loved Grooveshark and we want to build something even better.</translate></p>
</div>
<div class="four wide left floated column">
<img class="ui medium image" src="../assets/logo/logo.png" />
</div>
</div>
</div>
</div>
<div class="ui middle aligned stackable text container">
<div class="ui hidden divider"></div>
<h2 class="ui header">
<translate translate-context="Content/Home/Title">Unlimited music</translate>
</h2>
<p><translate translate-context="Content/Home/Paragraph">Funkwhale is designed to make it easy to listen to music you like, or to discover new artists.</translate></p>
<div class="ui list">
<div class="item">
<i class="sound icon"></i>
<div class="content">
<translate translate-context="Content/Home/List item/Verb">Click once, listen for hours using built-in radios</translate>
</div>
</div>
<div class="item">
<i class="heart icon"></i>
<div class="content">
<translate translate-context="Content/Home/List item/Verb">Keep a track of your favorite songs</translate>
</div>
</div>
<div class="item">
<i class="list icon"></i>
<div class="content">
<translate translate-context="Content/Home/List item">Playlists? We got them</translate>
</div>
</div>
</div>
</div>
<div class="ui middle aligned stackable text container">
<div class="ui hidden divider"></div>
<h2 class="ui header">
<translate translate-context="Content/Home/Title">A clean library</translate>
</h2> </h2>
<p><translate translate-context="Content/Home/Paragraph">Funkwhale takes care of handling your music</translate>.</p> <login-form></login-form>
<div class="ui list">
<div class="item">
<i class="tag icon"></i>
<div class="content" v-html="musicbrainzItem"></div>
</div> </div>
<div class="item">
<i class="plus icon"></i>
<div class="content">
<translate translate-context="Content/Home/List item">Covers, lyrics, our goal is to have them all ;)</translate>
</div>
</div>
</div>
</div>
<div class="ui middle aligned stackable text container">
<div class="ui hidden divider"></div> <div class="ui hidden divider"></div>
<h2 class="ui header"> <div class="ui container">
<translate translate-context="Content/Home/Title">Easy to use</translate> <h2 class="ui huge header">
<translate translate-context="Content/Home/Title">Create an account</translate>
</h2> </h2>
<p><translate translate-context="Content/Home/Paragraph">Funkwhale is dead simple to use.</translate></p> <signup-form></signup-form>
<div class="ui list">
<div class="item">
<i class="book icon"></i>
<div class="content">
<translate translate-context="Content/Home/List item">No add-ons, no plugins : you only need a web library</translate>
</div>
</div>
<div class="item">
<i class="wizard icon"></i>
<div class="content">
<translate translate-context="Content/Home/List item">Access your music from a clean interface that focuses on what really matters</translate>
</div>
</div>
</div>
</div>
<div class="ui middle aligned stackable text container">
<div class="ui hidden divider"></div>
<h2 class="ui header">
<translate translate-context="Content/Home/Title">Your music, your way</translate>
</h2>
<p><translate translate-context="Content/Home/Paragraph">Funkwhale is free and gives you control on your music.</translate></p>
<div class="ui list">
<div class="item">
<i class="smile icon"></i>
<div class="content">
<translate translate-context="Content/Home/List item">The plaform is free and open-source, you can install it and modify it without worries</translate>
</div>
</div>
<div class="item">
<i class="protect icon"></i>
<div class="content">
<translate translate-context="Content/Home/List item">We do not track you or bother you with ads</translate>
</div>
</div>
<div class="item">
<i class="users icon"></i>
<div class="content">
<translate translate-context="Content/Home/List item">You can invite friends and family to your instance so they can enjoy your music</translate>
</div>
</div> </div>
</section>
</div> </div>
</div> </div>
</section>
</main> </main>
</template> </template>
<script> <script>
import axios from 'axios'
import _ from '@/lodash'
import SignupForm from "@/components/auth/SignupForm"
import LoginForm from "@/components/auth/LoginForm"
export default { export default {
data() { data() {
return { return {
musicbrainzUrl: "https://musicbrainz.org/" error: null,
nodeinfo: null,
isLoading: false,
} }
}, },
components: {
LoginForm,
SignupForm,
},
async created () {
await this.fetchNodeInfo()
},
computed: { computed: {
labels() { title () {
return { return 'Funkwhale'
title: this.$pgettext('Head/Home/Title', "Welcome") },
config () {
let base = this.nodeinfo || {}
let config = {}
let instanceUrl = this.$store.state.instance.instanceUrl
var tmp = document.createElement('a')
tmp.href = instanceUrl
config.podName = _.get(base, 'metadata.nodeName', tmp.hostname)
config.shortDescription = _.get(base, 'metadata.shortDescription')
return config
} }
}, },
musicbrainzItem () { methods: {
let msg = this.$pgettext('Content/Home/List item/Verb', 'Get quality metadata about your music thanks to <a href="%{ url }" target="_blank">MusicBrainz</a>') async fetchNodeInfo () {
return this.$gettextInterpolate(msg, {url: this.musicbrainzUrl}) this.isLoading = true
let url = 'instance/nodeinfo/2.0/'
try {
let response = await axios.get(url)
this.nodeinfo = response.data
} catch (e) {
this.error = e
console.log('Cannot fetch nodeinfo!', e)
}
this.isLoading = false
} }
}, },
watch: { watch: {
...@@ -159,7 +92,6 @@ export default { ...@@ -159,7 +92,6 @@ export default {
immediate: true immediate: true
} }
} }
} }
</script> </script>
...@@ -171,4 +103,7 @@ export default { ...@@ -171,4 +103,7 @@ export default {
.ui.list .list.icon { .ui.list .list.icon {
padding: 0; padding: 0;
} }
main > div.ui.container {
width: 900px;
}
</style> </style>
front/src/style/_main.scss
+ 3
− 0
View file @ e6a0c691
...@@ -354,6 +354,9 @@ input + .help { ...@@ -354,6 +354,9 @@ input + .help {
min-width: 150px; min-width: 150px;
} }
.ui.hidden.divider, .ui.fitted.divider {
clear: both;
}
@import "./themes/_light.scss"; @import "./themes/_light.scss";
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment