refactor(about): [WIP] use new components
This commit is contained in:
upsiflu
parent
7c29dee096
commit
3955c9ebcd
|
|
@ -10,6 +10,9 @@ import LogoText from '~/components/LogoText.vue'
|
|||
import type { NodeInfo } from '~/store/instance'
|
||||
import useMarkdown from '~/composables/useMarkdown'
|
||||
|
||||
import Link from './ui/Link.vue'
|
||||
import Card from './ui/Card.vue'
|
||||
|
||||
const store = useStore()
|
||||
const nodeinfo = computed(() => store.state.instance.nodeinfo)
|
||||
|
||||
|
|
@ -74,8 +77,6 @@ const federationEnabled = computed(() => {
|
|||
const hasAnonymousCanListen = features.includes('federation')
|
||||
return hasAnonymousCanListen
|
||||
})
|
||||
|
||||
const onDesktop = computed(() => window.innerWidth > 800)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -83,42 +84,24 @@ const onDesktop = computed(() => window.innerWidth > 800)
|
|||
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 class="ten wide column">
|
||||
<div class="ui vertically fitted basic segment">
|
||||
<router-link to="/">
|
||||
<!-- About funkwhale -->
|
||||
|
||||
<Link to="/">
|
||||
<logo-text />
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column" />
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<h2 class="header">
|
||||
{{ t('components.About.header.funkwhale') }}
|
||||
</h2>
|
||||
|
||||
<p>
|
||||
{{ t('components.About.description.funkwhale') }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</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
|
||||
v-if="!store.state.auth.authenticated"
|
||||
class="signup-form content"
|
||||
>
|
||||
<h3 class="header">
|
||||
{{ t('components.About.header.signup') }}
|
||||
</h3>
|
||||
|
||||
<Layout flex>
|
||||
|
||||
<Card :title="t('components.About.header.signup')" v-if="!store.state.auth.authenticated">
|
||||
|
||||
<template v-if="openRegistrations">
|
||||
<p>
|
||||
{{ t('components.About.description.signup') }}
|
||||
|
|
@ -131,6 +114,7 @@ const onDesktop = computed(() => window.innerWidth > 800)
|
|||
:show-login="false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<div v-else>
|
||||
<p>
|
||||
{{ t('components.About.help.closedRegistrations') }}
|
||||
|
|
@ -145,7 +129,7 @@ const onDesktop = computed(() => window.innerWidth > 800)
|
|||
<i class="external alternate icon" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="signup-form content"
|
||||
|
|
@ -162,15 +146,15 @@ const onDesktop = computed(() => window.innerWidth > 800)
|
|||
</div>
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ui card">
|
||||
</Card>
|
||||
|
||||
<Card title="{{ podName }}">
|
||||
<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 pod-description">
|
||||
|
|
@ -218,72 +202,51 @@ const onDesktop = computed(() => window.innerWidth > 800)
|
|||
{{ t('components.About.link.learnMore') }}
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- TODO (wvffle): Remove style when migrate away from fomantic -->
|
||||
<div
|
||||
class="ui three stackable cards"
|
||||
style="z-index: 1; position: relative;"
|
||||
>
|
||||
<router-link
|
||||
</Card>
|
||||
|
||||
</Layout>
|
||||
|
||||
|
||||
<Layout flex>
|
||||
|
||||
<Card
|
||||
to="/"
|
||||
class="ui card"
|
||||
:title="t('components.About.header.publicContent')"
|
||||
>
|
||||
<div class="content">
|
||||
<h3
|
||||
id="description"
|
||||
class="ui header"
|
||||
>
|
||||
{{ t('components.About.header.publicContent') }}
|
||||
</h3>
|
||||
<p>
|
||||
<!-- TODO: Link to Explore page? -->
|
||||
{{ t('components.About.description.publicContent') }}
|
||||
</p>
|
||||
</div>
|
||||
</router-link>
|
||||
<a
|
||||
href="https://funkwhale.audio/#get-started"
|
||||
class="ui card"
|
||||
target="_blank"
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
:title="t('components.About.link.findOtherPod')"
|
||||
to="https://funkwhale.audio/#get-started"
|
||||
>
|
||||
<div class="content">
|
||||
<h3
|
||||
id="description"
|
||||
class="ui header"
|
||||
>
|
||||
{{ t('components.About.link.findOtherPod') }}
|
||||
<i class="external alternate icon" />
|
||||
<i class="external alternate icon" />
|
||||
</h3>
|
||||
<p>
|
||||
{{ t('components.About.description.publicContent') }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
href="https://funkwhale.audio/apps"
|
||||
class="ui card"
|
||||
target="_blank"
|
||||
</Card>
|
||||
|
||||
<Card
|
||||
:title="t('components.About.header.findApp')"
|
||||
to="https://funkwhale.audio/apps"
|
||||
>
|
||||
<div class="content">
|
||||
<h3
|
||||
id="description"
|
||||
class="ui header"
|
||||
>
|
||||
{{ t('components.About.header.findApp') }}
|
||||
<i class="external alternate icon" />
|
||||
<i class="external alternate icon" />
|
||||
</h3>
|
||||
<p>
|
||||
{{ t('components.About.description.findApp') }}
|
||||
</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div
|
||||
class="ui"
|
||||
:class="{ container: onDesktop}"
|
||||
>
|
||||
<div class="ui horizontally fitted stripe basic segment">
|
||||
<div class="ui basic vertically fitted stripe segment content">
|
||||
</Card>
|
||||
|
||||
|
||||
</Layout>
|
||||
|
||||
|
||||
<section
|
||||
:class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
|
||||
:style="headerStyle"
|
||||
|
|
@ -293,9 +256,9 @@ const onDesktop = computed(() => window.innerWidth > 800)
|
|||
{{ podName }}
|
||||
</h1>
|
||||
</section>
|
||||
</div>
|
||||
<div class="ui basic vertically fitted stripe segment content">
|
||||
<!-- See layout in _about.scss -->
|
||||
|
||||
|
||||
<!-- About Pod -->
|
||||
<div class="about-pod-info-container">
|
||||
<div class="about-pod-info-toc">
|
||||
<div class="ui vertical pointing secondary menu">
|
||||
|
|
@ -620,11 +583,5 @@ const onDesktop = computed(() => window.innerWidth > 800)
|
|||
<div class="ui hidden divider" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
|
|
|
|||
Loading…
Reference in New Issue