Skip to content
Snippets Groups Projects
Verified Commit 87c5283e authored by Georg Krause's avatar Georg Krause
Browse files

Lint all changes files

parent 625a9b3d
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
front/src/components/About.vue
+ 155
− 65
View file @ 87c5283e
<template>
<main class="main pusher page-about" v-title="labels.title">
<main
v-title="labels.title"
class="main pusher page-about"
>
<div class="ui container">
<div class="ui horizontally fitted basic stripe segment">
<div class="ui horizontally fitted basic very padded segment">
<div class="ui center aligned text container">
<div class="ui text container">
<div class="ui equal width compact stackable grid">
<div class="column"></div>
<div class="column" />
<div class="ten wide column">
<div class="ui vertically fitted basic segment">
<router-link to="/">
......@@ -14,68 +17,115 @@
</router-link>
</div>
</div>
<div class="column"></div>
<div class="column" />
</div>
<h2 class="header">
<translate translate-context="Content/About/Heading">A social platform to enjoy and share music</translate>
<translate translate-context="Content/About/Heading">
A social platform to enjoy and share music
</translate>
</h2>
<p>
<translate translate-context="Content/About/Paragraph">Funkwhale is a community-driven project that lets you listen and share music and audio within a decentralized, open network.</translate>
<translate translate-context="Content/About/Paragraph">
Funkwhale is a community-driven project that lets you listen and share music and audio within a decentralized, open network.
</translate>
</p>
</div>
</div>
</div>
<div class="ui hidden divider"></div>
<div class="ui hidden divider" />
<div class="ui vertically fitted basic stripe segment">
<div class="ui two stackable cards">
<div class="ui card">
<div class="signup-form content" v-if="!$store.state.auth.authenticated">
<div
v-if="!$store.state.auth.authenticated"
class="signup-form content"
>
<h3 class="header">
<translate translate-context="*/Signup/Title">Sign up</translate>
<translate translate-context="*/Signup/Title">
Sign up
</translate>
</h3>
<template v-if="openRegistrations">
<p>
<translate translate-context="Content/About/Paragraph">Sign up now to keep a track of your favorites, create playlists, discover new content and much more!</translate>
<translate translate-context="Content/About/Paragraph">
Sign up now to keep a track of your favorites, create playlists, discover new content and much more!
</translate>
</p>
<p v-if="defaultUploadQuota">
<translate translate-context="Content/About/Paragraph" :translate-params="{quota: defaultUploadQuota}">Users on this pod also get %{ quota } of free storage to upload their own content!</translate>
<translate
translate-context="Content/About/Paragraph"
:translate-params="{quota: defaultUploadQuota}"
>
Users on this pod also get %{ quota } of free storage to upload their own content!
</translate>
</p>
<signup-form button-classes="success" :show-login="false"></signup-form>
<signup-form
button-classes="success"
:show-login="false"
/>
</template>
<div v-else>
<p translate-context="Content/About/Paragraph">Registrations are closed on this pod. You can signup on another pod using the link below.</p>
<p translate-context="Content/About/Paragraph">
Registrations are closed on this pod. You can signup on another pod using the link below.
</p>
<a target="_blank" rel="noopener" href="https://funkwhale.audio/#get-started">
<a
target="_blank"
rel="noopener"
href="https://funkwhale.audio/#get-started"
>
<translate translate-context="Content/About/Link">Find another pod</translate>
<i class="external alternate icon margin-left"></i>
<i class="external alternate icon margin-left" />
</a>
</div>
</div>
<div class="signup-form content" v-else>
<div
v-else
class="signup-form content"
>
<div class="ui positive message">
<div class="header">
<translate translate-context="Content/About/Message">You're already signed in!</translate>
<translate translate-context="Content/About/Message">
You're already signed in!
</translate>
</div>
<p><translate translate-contect="Content/About/Hello">Hello</translate> {{ $store.state.auth.username }}</p>
<p>
<translate translate-contect="Content/About/Hello">
Hello
</translate> {{ $store.state.auth.username }}
</p>
</div>
</div>
</div>
<div class="ui card">
<section :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
<h1>
<i class="music icon"></i>
{{ podName }}
</h1>
<section
:class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
:style="headerStyle"
>
<h1>
<i class="music icon" />
{{ podName }}
</h1>
</section>
<div class="content padding-top padding-bottom">
<h3 class="ui header" id="description">
<translate translate-context="Content/About/Header">About this pod</translate>
<h3
id="description"
class="ui header"
>
<translate translate-context="Content/About/Header">
About this pod
</translate>
</h3>
<div v-if="shortDescription" class="sub header">
<div
v-if="shortDescription"
class="sub header"
>
{{ shortDescription }}
</div>
<p v-else>
<translate translate-context="Content/About/Paragraph">No description available.</translate>
<translate translate-context="Content/About/Paragraph">
No description available.
</translate>
</p>
<template v-if="stats">
......@@ -84,54 +134,89 @@
<div class="column">
<span class="statistics-figure ui text">
<span class="ui big text"><strong>{{ stats.users.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
<br />
<translate translate-context="Content/About/*" :translate-n="stats.users" translate-plural="active users">active user</translate>
<br>
<translate
translate-context="Content/About/*"
:translate-n="stats.users"
translate-plural="active users"
>active user</translate>
</span>
</div>
<div class="column">
<span class="statistics-figure ui text">
<span class="ui big text"><strong>{{ parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale) }}</strong></span>
<br />
<translate translate-context="Content/About/*" :translate-n="parseInt(stats.hours)" translate-plural="hours of music">hour of music</translate>
<br>
<translate
translate-context="Content/About/*"
:translate-n="parseInt(stats.hours)"
translate-plural="hours of music"
>hour of music</translate>
</span>
</div>
</div>
</div>
</template>
<router-link to="/about/pod" class="ui fluid basic secondary button">
<translate translate-context="Content/About/Paragraph">Learn More</translate>
<router-link
to="/about/pod"
class="ui fluid basic secondary button"
>
<translate translate-context="Content/About/Paragraph">
Learn More
</translate>
</router-link>
</div>
</div>
</div>
<div class="ui three stackable cards">
<router-link to="/" class="ui card">
<router-link
to="/"
class="ui card"
>
<div class="content">
<h3 class="ui header" id="description">
<translate translate-context="Content/About/Header">Browse public content</translate>
<h3
id="description"
class="ui header"
>
<translate translate-context="Content/About/Header">
Browse public content
</translate>
</h3>
<p>
<translate translate-context="Content/About/Paragraph">Listen to public albums and playlists shared on this pod.</translate>
<translate translate-context="Content/About/Paragraph">
Listen to public albums and playlists shared on this pod.
</translate>
</p>
</div>
</router-link>
<a href="https://funkwhale.audio/#get-started" class="ui card">
<a
href="https://funkwhale.audio/#get-started"
class="ui card"
>
<div class="content">
<h3 class="ui header" id="description">
<h3
id="description"
class="ui header"
>
<translate translate-context="Content/About/Header">Find another pod</translate>
<i class="external alternate icon margin-left"></i>
<i class="external alternate icon margin-left" />
</h3>
<p>
<translate translate-context="Content/About/Paragraph">Listen to public albums and playlists shared on this pod.</translate>
</p>
</div>
</a>
<a href="https://funkwhale.audio/apps" class="ui card">
<a
href="https://funkwhale.audio/apps"
class="ui card"
>
<div class="content">
<h3 class="ui header" id="description">
<h3
id="description"
class="ui header"
>
<translate translate-context="Content/About/Header">Find an app</translate>
<i class="external alternate icon margin-left"></i>
<i class="external alternate icon margin-left" />
</h3>
<p>
<translate translate-context="Content/About/Paragraph">Use Funkwhale on other devices with our apps.</translate>
......@@ -140,9 +225,14 @@
</a>
</div>
<div class="ui fluid horizontally fitted basic clearing segment container">
<router-link to="/about/pod" class="ui right floated basic secondary button">
<translate translate-context="Content/About/Paragraph">About this pod</translate>
<i class="icon arrow right"></i>
<router-link
to="/about/pod"
class="ui right floated basic secondary button"
>
<translate translate-context="Content/About/Paragraph">
About this pod
</translate>
<i class="icon arrow right" />
</router-link>
</div>
</div>
......@@ -152,37 +242,37 @@
</template>
<script>
import { mapState } from "vuex"
import { mapState } from 'vuex'
import _ from '@/lodash'
import showdown from 'showdown'
import {humanSize} from '@/filters'
import { humanSize } from '@/filters'
import SignupForm from "@/components/auth/SignupForm"
import LogoText from "@/components/LogoText"
import SignupForm from '@/components/auth/SignupForm'
import LogoText from '@/components/LogoText'
export default {
components: {
SignupForm,
LogoText,
LogoText
},
data () {
return {
markdown: new showdown.Converter(),
showAllowedDomains: false,
showAllowedDomains: false
}
},
computed: {
...mapState({
nodeinfo: state => state.instance.nodeinfo,
...mapState({
nodeinfo: state => state.instance.nodeinfo
}),
labels() {
labels () {
return {
title: this.$pgettext('Head/About/Title', "About")
title: this.$pgettext('Head/About/Title', 'About')
}
},
podName() {
return _.get(this.nodeinfo, 'metadata.nodeName') || "Funkwhale"
podName () {
return _.get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
},
banner () {
return _.get(this.nodeinfo, 'metadata.banner')
......@@ -200,13 +290,13 @@ export default {
return _.get(this.nodeinfo, 'metadata.terms')
},
stats () {
let data = {
const data = {
users: _.get(this.nodeinfo, 'usage.users.activeMonth', null),
hours: _.get(this.nodeinfo, 'metadata.library.music.hours', null),
artists: _.get(this.nodeinfo, 'metadata.library.artists.total', null),
albums: _.get(this.nodeinfo, 'metadata.library.albums.total', null),
tracks: _.get(this.nodeinfo, 'metadata.library.tracks.total', null),
listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null),
listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null)
}
if (data.users === null || data.artists === null) {
return
......@@ -237,16 +327,16 @@ export default {
federationEnabled () {
return _.get(this.nodeinfo, 'metadata.library.federationEnabled')
},
headerStyle() {
headerStyle () {
if (!this.banner) {
return ""
return ''
}
return (
"background-image: url(" +
this.$store.getters["instance/absoluteUrl"](this.banner) +
")"
'background-image: url(' +
this.$store.getters['instance/absoluteUrl'](this.banner) +
')'
)
},
}
}
}
</script>
......
front/src/components/AboutPod.vue
+ 279
− 103
View file @ 87c5283e
This diff is collapsed.
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