From d5304cfcdda6e44b2d1fbfce2b233eb6ee68613a Mon Sep 17 00:00:00 2001 From: Cadence Ember Date: Sat, 16 Jan 2021 05:14:45 +1300 Subject: [PATCH] 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 --- src/renderer/main.js | 8 +- src/renderer/views/About/About.js | 74 ++++++++++++++- src/renderer/views/About/About.sass | 50 ++++++++++ src/renderer/views/About/About.vue | 140 ++++++---------------------- static/locales/en-US.yaml | 35 ++++--- 5 files changed, 180 insertions(+), 127 deletions(-) create mode 100644 src/renderer/views/About/About.sass diff --git a/src/renderer/main.js b/src/renderer/main.js index 185cd90f..478f3121 100644 --- a/src/renderer/main.js +++ b/src/renderer/main.js @@ -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) diff --git a/src/renderer/views/About/About.js b/src/renderer/views/About/About.js index a425ff92..70798a33 100644 --- a/src/renderer/views/About/About.js +++ b/src/renderer/views/About/About.js @@ -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: `GitHub: FreeTubeApp/FreeTube
${this.$t('About.Licensed under the AGPLv3')} ${this.$t('About.View License')}` + }, + { + icon: 'file-download', + title: this.$t('About.Downloads / Changelog'), + content: `${this.$t('About.GitHub releases')}` + }, + { + icon: 'question-circle', + title: this.$t('About.Help'), + content: `${this.$t('About.FreeTube Wiki')} / ${this.$t('About.FAQ')}` + }, + { + icon: 'exclamation-circle', + title: this.$t('About.Report a problem'), + content: `${this.$t('About.GitHub issues')}
${this.$t('About.Please check for duplicates before posting')}` + }, + { + icon: 'globe', + title: this.$t('About.Website'), + content: 'https://freetubeapp.io/' + }, + { + icon: 'newspaper', + title: this.$t('About.Blog'), + content: 'https://freetube.writeas.com/' + }, + { + icon: 'envelope', + title: this.$t('About.Email'), + content: 'FreeTubeApp@protonmail.com' + }, + { + icon: ['fab', 'mastodon'], + title: this.$t('About.Mastodon'), + content: '@FreeTube@mastodon.technology' + }, + { + icon: 'comment-dots', + title: this.$t('About.Chat on Matrix'), + content: `#freetube:matrix.org
${this.$t('About.Please read the')} ${this.$t('About.room rules')}` + }, + { + icon: 'language', + title: this.$t('About.Translate'), + content: 'https://hosted.weblate.org/engage/free-tube/' + }, + { + icon: 'users', + title: this.$t('About.Credits'), + content: `${this.$t('About.FreeTube is made possible by')} ${this.$t('About.these people and projects')}` + }, + { + icon: 'heart', + title: `${this.$t('About.Donate')} - Liberapay`, + content: 'https://liberapay.com/FreeTube' + }, + { + icon: ['fab', 'bitcoin'], + title: `${this.$t('About.Donate')} - BTC`, + content: '1Lih7Ho5gnxb1CwPD4o59ss78pwo2T91eS' + }, + { + icon: ['fab', 'monero'], + title: `${this.$t('About.Donate')} - XMR`, + content: '48WyAPdjwc6VokeXACxSZCFeKEXBiYPV6GjfvBsfg4CrUJ95LLCQSfpM9pvNKy5GE5H4hNaw99P8RZyzmaU9kb1pD7kzhCB' + } + ] } }, computed: { diff --git a/src/renderer/views/About/About.sass b/src/renderer/views/About/About.sass new file mode 100644 index 00000000..d7c1c5e0 --- /dev/null +++ b/src/renderer/views/About/About.sass @@ -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 diff --git a/src/renderer/views/About/About.vue b/src/renderer/views/About/About.vue index 14ce38eb..22210be3 100644 --- a/src/renderer/views/About/About.vue +++ b/src/renderer/views/About/About.vue @@ -1,118 +1,40 @@