MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(about): [WIP] use new components

This commit is contained in:
upsiflu 2024-12-19 18:56:00 +01:00
parent 7c29dee096
commit 3955c9ebcd
1 changed files with 487 additions and 530 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

143
front/src/components/About.vue
View File

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