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>

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(fas, faGithub, faBitcoin, faMonero, faMastodon)
-library.add(fab)
 
 Vue.component('FontAwesomeIcon', FontAwesomeIcon)
 Vue.use(VueI18n)

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: `<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: {

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

src/renderer/views/About/About.vue

@@ -1,118 +1,40 @@
 <template>
   <div>
-    <ft-card class="card center">
+    <ft-card class="card">
-      <h3 class="leftAlign">
-        {{ $t("About.About") }}
-      </h3>
-      <img
-        src="_icons/logoColor.png"
-        class="logo"
-      >
       <h1>
-        {{ versionNumber }} {{ $t("About.Beta") }}
+        {{ $t("About.About") }}
       </h1>
-      <h3>
+      <section class="brand">
-        {{ $t("About.License") }}:
+        <img
-        <a href="https://www.gnu.org/licenses/agpl-3.0.en.html">AGPLv3</a>
+          src="_icons/logoColor.png"
-      </h3>
+          class="logo"
-    </ft-card>
+        >
-    <ft-card class="card center">
+        <div class="version">
-      <h3 class="leftAlign">
+          {{ versionNumber }} {{ $t("About.Beta") }}
-        {{ $t("About.Contact") }}
+        </div>
-      </h3>
+      </section>
-      <h3>
+      <section class="about-chunks">
-        <font-awesome-icon
+        <figure
-          icon="envelope"
+          v-for="chunk in chunks"
-          :title="$t('About.Email')"
+          :key="chunk.title"
-        />
+          class="chunk"
-        &nbsp;&nbsp;FreeTubeApp@protonmail.com
+        >
-      </h3>
+          <font-awesome-icon
-      <h3>
+            class="icon"
-        <font-awesome-icon
+            :icon="chunk.icon"
-          :icon="['fab', 'mastodon']"
+          />
-          title="Mastodon"
+          <h3 class="title">
-        />
+            {{ chunk.title }}
-        &nbsp;&nbsp;<a href="https://mastodon.technology/@FreeTube">@FreeTube@mastodon.technology</a>
+          </h3>
-      </h3>
+          <div
-      <h3>
+            class="content"
-        <font-awesome-icon
+            v-html="chunk.content"
-          icon="comments"
+          />
-          title="Matrix"
+        </figure>
-        />
+      </section>
-        &nbsp;&nbsp;<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"
-        />
-        &nbsp;&nbsp;<a href="https://liberapay.com/FreeTube">Liberapay</a>
-      </h4>
-      <h4>
-        <font-awesome-icon
-          :icon="['fab', 'bitcoin']"
-        />
-        &nbsp;&nbsp;BTC: 1Lih7Ho5gnxb1CwPD4o59ss78pwo2T91eS
-      </h4>
-      <h4>
-        <font-awesome-icon
-          :icon="['fab', 'monero']"
-        />
-        &nbsp;&nbsp;XMR: 48WyAPdjwc6VokeXACxSZCFeKEXBiYPV6GjfvBsfg4CrUJ95LLCQSfpM9pvNKy5GE5H4hNaw99P8RZyzmaU9kb1pD7kzhCB
-      </h4>
     </ft-card>
   </div>
 </template>
 
 <script src="./About.js" />
-<style scoped src="./About.css" />
+<style scoped src="./About.sass" lang="sass" />

static/locales/en-US.yaml

@@ -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
+  Source code: Source code
-  Email: Email
+  Licensed under the AGPLv3: Licensed under the AGPLv3
-  Channel Rules: Channel Rules
+  View License: View License
-  Report an Issue: Report an Issue
+  Downloads / Changelog: Downloads / Changelog
-  Wiki: Wiki
+  GitHub releases: GitHub releases
+  Help: Help
+  FreeTube Wiki: FreeTube Wiki
   FAQ: FAQ
-  Credits: Credits
+  Report a problem: Report a problem
-  Blog: Blog
+  GitHub issues: GitHub issues
-  Release Notes: Release Notes
+  Please check for duplicates before posting: Please check for duplicates before posting
-  Source Code: Source Code
   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