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

WIP home

parent 341fb54c
Branches landing-page
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 @@
<set-instance-modal @update:show="showSetInstanceModal = $event" :show="showSetInstanceModal"></set-instance-modal>
<service-messages v-if="messages.length > 0"/>
<router-view :key="$route.fullPath"></router-view>
<div class="ui hidden divider"></div>
<div class="ui fitted divider"></div>
<app-footer
:version="version"
......
front/src/components/Home.vue
+ 67
− 132
View file @ e6a0c691
<template>
<main class="main pusher" v-title="labels.title">
<main class="main pusher" v-title="title">
<section class="ui vertical center aligned stripe segment">
<div class="ui text container">
<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>
<p><translate translate-context="Content/Home/Title">We think listening to music should be simple.</translate></p>
<router-link class="ui icon button" to="/about">
<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>
<p v-if="config.shortDescription">{{ config.shortDescription }}</p>
<!-- <img src="http://placekitten.com/800/300" alt=""> -->
</section>
<section class="ui vertical stripe segment">
<div class="ui middle aligned stackable text container">
<div class="ui grid">
<div class="row">
<div class="eight wide left floated column">
<h2 class="ui header">
<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>
<div class="ui container">
<div class="ui stackable two column grid">
<section class="column">
<div class="ui container">
<h2 class="ui huge header">
<translate translate-context="Content/Home/Title/Verb">Login</translate>
</h2>
<p><translate translate-context="Content/Home/Paragraph">Funkwhale takes care of handling your music</translate>.</p>
<div class="ui list">
<div class="item">
<i class="tag icon"></i>
<div class="content" v-html="musicbrainzItem"></div>
<login-form></login-form>
</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>
<h2 class="ui header">
<translate translate-context="Content/Home/Title">Easy to use</translate>
<div class="ui container">
<h2 class="ui huge header">
<translate translate-context="Content/Home/Title">Create an account</translate>
</h2>
<p><translate translate-context="Content/Home/Paragraph">Funkwhale is dead simple to use.</translate></p>
<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>
<signup-form></signup-form>
</div>
</section>
</div>
</div>
</section>
</main>
</template>
<script>
import axios from 'axios'
import _ from '@/lodash'
import SignupForm from "@/components/auth/SignupForm"
import LoginForm from "@/components/auth/LoginForm"
export default {
data() {
return {
musicbrainzUrl: "https://musicbrainz.org/"
error: null,
nodeinfo: null,
isLoading: false,
}
},
components: {
LoginForm,
SignupForm,
},
async created () {
await this.fetchNodeInfo()
},
computed: {
labels() {
return {
title: this.$pgettext('Head/Home/Title', "Welcome")
title () {
return 'Funkwhale'
},
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 () {
let msg = this.$pgettext('Content/Home/List item/Verb', 'Get quality metadata about your music thanks to <a href="%{ url }" target="_blank">MusicBrainz</a>')
return this.$gettextInterpolate(msg, {url: this.musicbrainzUrl})
methods: {
async fetchNodeInfo () {
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: {
......@@ -159,7 +92,6 @@ export default {
immediate: true
}
}
}
</script>
......@@ -171,4 +103,7 @@ export default {
.ui.list .list.icon {
padding: 0;
}
main > div.ui.container {
width: 900px;
}
</style>
front/src/style/_main.scss
+ 3
− 0
View file @ e6a0c691
......@@ -354,6 +354,9 @@ input + .help {
min-width: 150px;
}
.ui.hidden.divider, .ui.fitted.divider {
clear: both;
}
@import "./themes/_light.scss";
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment