Revamp about page (#929)
* Revamp about page * Add more cards to about page * Fix linter issues * Add missing info and update locales * Add license URL Co-authored-by: Preston <freetubeapp@protonmail.com>
This commit is contained in:
Cadence Ember
GitHub
parent
3fa5fb12d2
commit
d5304cfcdd
|
|
@ -6,7 +6,10 @@ import store from './store/index'
|
|||
// import 'material-design-icons/iconfont/material-icons.css'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import { fas } from '@fortawesome/free-solid-svg-icons'
|
||||
import { fab } from '@fortawesome/free-brands-svg-icons'
|
||||
import { faGithub } from '@fortawesome/free-brands-svg-icons/faGithub'
|
||||
import { faBitcoin } from '@fortawesome/free-brands-svg-icons/faBitcoin'
|
||||
import { faMonero } from '@fortawesome/free-brands-svg-icons/faMonero'
|
||||
import { faMastodon } from '@fortawesome/free-brands-svg-icons/faMastodon'
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
import VueI18n from 'vue-i18n'
|
||||
import yaml from 'js-yaml'
|
||||
|
|
@ -18,8 +21,7 @@ Vue.config.devtools = isDev
|
|||
Vue.config.performance = isDev
|
||||
Vue.config.productionTip = isDev
|
||||
|
||||
library.add(fas)
|
||||
library.add(fab)
|
||||
library.add(fas, faGithub, faBitcoin, faMonero, faMastodon)
|
||||
|
||||
Vue.component('FontAwesomeIcon', FontAwesomeIcon)
|
||||
Vue.use(VueI18n)
|
||||
|
|
|
|||
|
|
@ -14,7 +14,79 @@ export default Vue.extend({
|
|||
},
|
||||
data: function () {
|
||||
return {
|
||||
versionNumber: `v${version}`
|
||||
versionNumber: `v${version}`,
|
||||
chunks: [
|
||||
{
|
||||
icon: ['fab', 'github'],
|
||||
title: this.$t('About.Source code'),
|
||||
content: `<a href="https://github.com/FreeTubeApp/FreeTube">GitHub: FreeTubeApp/FreeTube</a><br>${this.$t('About.Licensed under the AGPLv3')} <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">${this.$t('About.View License')}</a>`
|
||||
},
|
||||
{
|
||||
icon: 'file-download',
|
||||
title: this.$t('About.Downloads / Changelog'),
|
||||
content: `<a href="https://github.com/FreeTubeApp/FreeTube/releases">${this.$t('About.GitHub releases')}</a>`
|
||||
},
|
||||
{
|
||||
icon: 'question-circle',
|
||||
title: this.$t('About.Help'),
|
||||
content: `<a href="https://github.com/FreeTubeApp/FreeTube/wiki">${this.$t('About.FreeTube Wiki')}</a> / <a href="https://github.com/FreeTubeApp/FreeTube/wiki/F.A.Q.">${this.$t('About.FAQ')}</a>`
|
||||
},
|
||||
{
|
||||
icon: 'exclamation-circle',
|
||||
title: this.$t('About.Report a problem'),
|
||||
content: `<a href="https://github.com/FreeTubeApp/FreeTube/issues">${this.$t('About.GitHub issues')}</a><br>${this.$t('About.Please check for duplicates before posting')}`
|
||||
},
|
||||
{
|
||||
icon: 'globe',
|
||||
title: this.$t('About.Website'),
|
||||
content: '<a href="https://freetubeapp.io/">https://freetubeapp.io/</a>'
|
||||
},
|
||||
{
|
||||
icon: 'newspaper',
|
||||
title: this.$t('About.Blog'),
|
||||
content: '<a href="https://freetube.writeas.com/">https://freetube.writeas.com/</a>'
|
||||
},
|
||||
{
|
||||
icon: 'envelope',
|
||||
title: this.$t('About.Email'),
|
||||
content: '<a href="mailto:FreeTubeApp@protonmail.com">FreeTubeApp@protonmail.com</a>'
|
||||
},
|
||||
{
|
||||
icon: ['fab', 'mastodon'],
|
||||
title: this.$t('About.Mastodon'),
|
||||
content: '<a href="https://mastodon.technology/@FreeTube">@FreeTube@mastodon.technology</a>'
|
||||
},
|
||||
{
|
||||
icon: 'comment-dots',
|
||||
title: this.$t('About.Chat on Matrix'),
|
||||
content: `<a href="https://matrix.to/#/#freetube:matrix.org?via=matrix.org&via=privacytools.io&via=tchncs.de">#freetube:matrix.org</a><br>${this.$t('About.Please read the')} <a href="https://github.com/FreeTubeApp/FreeTube/wiki/Matrix-Channel-Info-&-Rules">${this.$t('About.room rules')}</a>`
|
||||
},
|
||||
{
|
||||
icon: 'language',
|
||||
title: this.$t('About.Translate'),
|
||||
content: '<a href="https://hosted.weblate.org/engage/free-tube/">https://hosted.weblate.org/engage/free-tube/</a>'
|
||||
},
|
||||
{
|
||||
icon: 'users',
|
||||
title: this.$t('About.Credits'),
|
||||
content: `${this.$t('About.FreeTube is made possible by')} <a href="https://github.com/FreeTubeApp/FreeTube/wiki/Credits">${this.$t('About.these people and projects')}</a>`
|
||||
},
|
||||
{
|
||||
icon: 'heart',
|
||||
title: `${this.$t('About.Donate')} - Liberapay`,
|
||||
content: '<a href="https://liberapay.com/FreeTube">https://liberapay.com/FreeTube</a>'
|
||||
},
|
||||
{
|
||||
icon: ['fab', 'bitcoin'],
|
||||
title: `${this.$t('About.Donate')} - BTC`,
|
||||
content: '<a href="bitcoin:1Lih7Ho5gnxb1CwPD4o59ss78pwo2T91eS">1Lih7Ho5gnxb1CwPD4o59ss78pwo2T91eS</a>'
|
||||
},
|
||||
{
|
||||
icon: ['fab', 'monero'],
|
||||
title: `${this.$t('About.Donate')} - XMR`,
|
||||
content: '<a href="monero:48WyAPdjwc6VokeXACxSZCFeKEXBiYPV6GjfvBsfg4CrUJ95LLCQSfpM9pvNKy5GE5H4hNaw99P8RZyzmaU9kb1pD7kzhCB">48WyAPdjwc6VokeXACxSZCFeKEXBiYPV6GjfvBsfg4CrUJ95LLCQSfpM9pvNKy5GE5H4hNaw99P8RZyzmaU9kb1pD7kzhCB</a>'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,50 @@
|
|||
.card
|
||||
width: 85%
|
||||
margin: 0 auto
|
||||
margin-bottom: 60px
|
||||
|
||||
@media only screen and (max-width: 680px)
|
||||
width: 90%
|
||||
|
||||
.brand
|
||||
text-align: center
|
||||
|
||||
.logo
|
||||
width: 500px
|
||||
max-width: 100%
|
||||
|
||||
.version
|
||||
font-size: 2em
|
||||
|
||||
.about-chunks
|
||||
max-width: 860px
|
||||
margin: 80px auto
|
||||
display: grid
|
||||
grid-template-columns: 1fr 1fr
|
||||
grid-gap: 16px
|
||||
|
||||
@media only screen and (max-width: 650px)
|
||||
grid-template-columns: 1fr
|
||||
|
||||
.chunk
|
||||
background-color: var(--bg-color)
|
||||
margin: 0
|
||||
padding: 18px
|
||||
border-radius: 8px
|
||||
display: grid
|
||||
grid-template: "icon title" auto "icon content" 1fr / auto 1fr
|
||||
justify-content: start
|
||||
align-items: start
|
||||
grid-gap: 6px 14px
|
||||
word-break: break-word
|
||||
box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.5)
|
||||
|
||||
@each $area in icon title content
|
||||
.#{$area}
|
||||
grid-area: $area
|
||||
|
||||
.icon
|
||||
font-size: 24px
|
||||
|
||||
.title
|
||||
margin: 0
|
||||
|
|
@ -1,118 +1,40 @@
|
|||
<template>
|
||||
<div>
|
||||
<ft-card class="card center">
|
||||
<h3 class="leftAlign">
|
||||
{{ $t("About.About") }}
|
||||
</h3>
|
||||
<img
|
||||
src="_icons/logoColor.png"
|
||||
class="logo"
|
||||
>
|
||||
<ft-card class="card">
|
||||
<h1>
|
||||
{{ versionNumber }} {{ $t("About.Beta") }}
|
||||
{{ $t("About.About") }}
|
||||
</h1>
|
||||
<h3>
|
||||
{{ $t("About.License") }}:
|
||||
<a href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPLv3</a>
|
||||
</h3>
|
||||
</ft-card>
|
||||
<ft-card class="card center">
|
||||
<h3 class="leftAlign">
|
||||
{{ $t("About.Contact") }}
|
||||
</h3>
|
||||
<h3>
|
||||
<font-awesome-icon
|
||||
icon="envelope"
|
||||
:title="$t('About.Email')"
|
||||
/>
|
||||
FreeTubeApp@protonmail.com
|
||||
</h3>
|
||||
<h3>
|
||||
<font-awesome-icon
|
||||
:icon="['fab', 'mastodon']"
|
||||
title="Mastodon"
|
||||
/>
|
||||
<a href="https://mastodon.technology/@FreeTube">@FreeTube@mastodon.technology</a>
|
||||
</h3>
|
||||
<h3>
|
||||
<font-awesome-icon
|
||||
icon="comments"
|
||||
title="Matrix"
|
||||
/>
|
||||
<a href="https://matrix.to/#/+freetube:matrix.org">#freetube:matrix.org</a> <a href="https://github.com/FreeTubeApp/FreeTube/wiki/Matrix-Channel-Info-&-Rules">({{ $t("About.Channel Rules") }})</a>
|
||||
</h3>
|
||||
</ft-card>
|
||||
<ft-card class="card center">
|
||||
<h3 class="leftAlign">
|
||||
{{ $t("About.Help") }}
|
||||
</h3>
|
||||
<ft-button
|
||||
:label="$t('About.Report an Issue')"
|
||||
@click="openUrl('https://github.com/FreeTubeApp/FreeTube/issues')"
|
||||
/>
|
||||
<ft-button
|
||||
:label="$t('About.Wiki')"
|
||||
@click="openUrl('https://github.com/FreeTubeApp/FreeTube/wiki')"
|
||||
/>
|
||||
<ft-button
|
||||
:label="$t('About.FAQ')"
|
||||
@click="openUrl('https://github.com/FreeTubeApp/FreeTube/wiki/F.A.Q.')"
|
||||
/>
|
||||
</ft-card>
|
||||
<ft-card class="card center">
|
||||
<h3 class="leftAlign">
|
||||
{{ $t("About.Useful Links") }}
|
||||
</h3>
|
||||
<ft-button
|
||||
:label="$t('About.Credits')"
|
||||
@click="openUrl('https://github.com/FreeTubeApp/FreeTube/wiki/Credits')"
|
||||
/>
|
||||
<ft-button
|
||||
:label="$t('About.Blog')"
|
||||
@click="openUrl('https://freetube.writeas.com/')"
|
||||
/>
|
||||
<ft-button
|
||||
:label="$t('About.Release Notes')"
|
||||
@click="openUrl('https://github.com/FreeTubeApp/FreeTube/releases')"
|
||||
/>
|
||||
<ft-button
|
||||
:label="$t('About.Source Code')"
|
||||
@click="openUrl('https://github.com/FreeTubeApp/FreeTube')"
|
||||
/>
|
||||
<ft-button
|
||||
:label="$t('About.Website')"
|
||||
@click="openUrl('https://freetubeapp.io/')"
|
||||
/>
|
||||
<ft-button
|
||||
:label="$t('About.Translate via Weblate')"
|
||||
@click="openUrl('https://hosted.weblate.org/engage/free-tube/')"
|
||||
/>
|
||||
</ft-card>
|
||||
<ft-card class="card center">
|
||||
<h3 class="leftAlign">
|
||||
{{ $t("About.Donate") }}
|
||||
</h3>
|
||||
<h4>
|
||||
<font-awesome-icon
|
||||
icon="donate"
|
||||
/>
|
||||
<a href="https://liberapay.com/FreeTube">Liberapay</a>
|
||||
</h4>
|
||||
<h4>
|
||||
<font-awesome-icon
|
||||
:icon="['fab', 'bitcoin']"
|
||||
/>
|
||||
BTC: 1Lih7Ho5gnxb1CwPD4o59ss78pwo2T91eS
|
||||
</h4>
|
||||
<h4>
|
||||
<font-awesome-icon
|
||||
:icon="['fab', 'monero']"
|
||||
/>
|
||||
XMR: 48WyAPdjwc6VokeXACxSZCFeKEXBiYPV6GjfvBsfg4CrUJ95LLCQSfpM9pvNKy5GE5H4hNaw99P8RZyzmaU9kb1pD7kzhCB
|
||||
</h4>
|
||||
<section class="brand">
|
||||
<img
|
||||
src="_icons/logoColor.png"
|
||||
class="logo"
|
||||
>
|
||||
<div class="version">
|
||||
{{ versionNumber }} {{ $t("About.Beta") }}
|
||||
</div>
|
||||
</section>
|
||||
<section class="about-chunks">
|
||||
<figure
|
||||
v-for="chunk in chunks"
|
||||
:key="chunk.title"
|
||||
class="chunk"
|
||||
>
|
||||
<font-awesome-icon
|
||||
class="icon"
|
||||
:icon="chunk.icon"
|
||||
/>
|
||||
<h3 class="title">
|
||||
{{ chunk.title }}
|
||||
</h3>
|
||||
<div
|
||||
class="content"
|
||||
v-html="chunk.content"
|
||||
/>
|
||||
</figure>
|
||||
</section>
|
||||
</ft-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./About.js" />
|
||||
<style scoped src="./About.css" />
|
||||
<style scoped src="./About.sass" lang="sass" />
|
||||
|
|
|
|||
|
|
@ -272,23 +272,30 @@ Settings:
|
|||
About:
|
||||
#On About page
|
||||
About: About
|
||||
Contact: Contact
|
||||
Help: Help
|
||||
Useful Links: Useful Links
|
||||
Donate: Donate
|
||||
Beta: Beta
|
||||
License: License
|
||||
Email: Email
|
||||
Channel Rules: Channel Rules
|
||||
Report an Issue: Report an Issue
|
||||
Wiki: Wiki
|
||||
Source code: Source code
|
||||
Licensed under the AGPLv3: Licensed under the AGPLv3
|
||||
View License: View License
|
||||
Downloads / Changelog: Downloads / Changelog
|
||||
GitHub releases: GitHub releases
|
||||
Help: Help
|
||||
FreeTube Wiki: FreeTube Wiki
|
||||
FAQ: FAQ
|
||||
Credits: Credits
|
||||
Blog: Blog
|
||||
Release Notes: Release Notes
|
||||
Source Code: Source Code
|
||||
Report a problem: Report a problem
|
||||
GitHub issues: GitHub issues
|
||||
Please check for duplicates before posting: Please check for duplicates before posting
|
||||
Website: Website
|
||||
Translate via Weblate: Translate via Weblate
|
||||
Blog: Blog
|
||||
Email: Email
|
||||
Mastodon: Mastodon
|
||||
Chat on Matrix: Chat on Matrix
|
||||
Please read the: Please read the
|
||||
room rules: room rules
|
||||
Translate: Translate
|
||||
Credits: Credits
|
||||
FreeTube is made possible by: FreeTube is made possible by
|
||||
these people and projects: these people and projects
|
||||
Donate: Donate
|
||||
|
||||
Profile:
|
||||
Profile Select: Profile Select
|
||||
|
|
|
|||
Loading…
Reference in New Issue