diff --git a/changes/changelog.d/footer.enhancement b/changes/changelog.d/footer.enhancement new file mode 100644 index 0000000000000000000000000000000000000000..e1a83191859192cc897d05212d74ab636b48d2b4 --- /dev/null +++ b/changes/changelog.d/footer.enhancement @@ -0,0 +1 @@ +Restructured the footer, added useful links and removed unused content diff --git a/front/src/components/Footer.vue b/front/src/components/Footer.vue new file mode 100644 index 0000000000000000000000000000000000000000..127f8be74a9ef27f361a0d393b0c5049126443ad --- /dev/null +++ b/front/src/components/Footer.vue @@ -0,0 +1,97 @@ +<template> + <footer id="footer" class="ui vertical footer segment"> + <div class="ui container"> + <div class="ui stackable equal height stackable grid"> + <div class="four wide column"> + <h4 v-translate class="ui header"> + <translate :translate-params="{instanceName: instanceHostname}" >About %{instanceName}</translate> + </h4> + <div class="ui link list"> + <router-link class="item" to="/about"> + <translate>About page</translate> + </router-link> + <div class="item" v-if="version"> + <translate :translate-params="{version: version}" >Version %{version}</translate> + </div> + <a @click="switchInstance" class="item" > + <translate>Use another instance</translate> + </a> + </div> + <div class="ui form"> + <div class="ui field"> + <label><translate>Change language</translate></label> + <select class="ui dropdown" v-model="$language.current"> + <option v-for="(language, key) in $language.available" :key="key" :value="key">{{ language }}</option> + </select> + </div> + </div> + </div> + <div class="four wide column"> + <h4 v-translate class="ui header">Using Funkwhale</h4> + <div class="ui link list"> + <a href="https://docs.funkwhale.audio" class="item" target="_blank"><translate>Documentation</translate></a> + <a href="https://docs.funkwhale.audio/users/apps.html" class="item" target="_blank"><translate>Mobile and desktop apps</translate></a> + <div role="button" class="item" @click="$emit('show:shortcuts-modal')"><translate>Keyboard shortcuts</translate></div> + </div> + </div> + <div class="four wide column"> + <h4 v-translate class="ui header">Getting help</h4> + <div class="ui link list"> + <a href="https://socialhub.network/c/projects/funkwhale" class="item" target="_blank"><translate>Support forum</translate></a> + <a href="https://riot.im/app/#/room/#funkwhale-troubleshooting:matrix.org" class="item" target="_blank"><translate>Chat room</translate></a> + <a href="https://code.eliotberriot.com/funkwhale/funkwhale/issues" class="item" target="_blank"><translate>Issue tracker</translate></a> + </div> + </div> + <div class="four wide column"> + <h4 v-translate class="ui header">About Funkwhale</h4> + <div class="ui link list"> + <a href="https://funkwhale.audio" class="item" target="_blank"><translate>Official website</translate></a> + <a href="https://contribute.funkwhale.audio" class="item" target="_blank"><translate>Contribute</translate></a> + <a href="https://code.eliotberriot.com/funkwhale/funkwhale" class="item" target="_blank"><translate>Source code</translate></a> + </div> + <div class="ui hidden divider"></div> + <p> + <translate>The funkwhale logo was kindly designed and provided by Francis Gading.</translate> + </p> + </div> + </div> + </div> + </footer> +</template> + +<script> +import {mapState} from 'vuex' + + +export default { + props: ['version'], + methods: { + switchInstance () { + let confirm = window.confirm(this.$gettext('This will erase your local data and disconnect you, do you want to continue?')) + if (confirm) { + this.$store.commit('instance/instanceUrl', null) + } + }, + }, + computed: { + ...mapState({ + messages: state => state.ui.messages + }), + instanceHostname () { + let url = this.$store.state.instance.instanceUrl + let parser = document.createElement('a'); + parser.href = url + return parser.hostname + }, + suggestedInstances () { + let instances = [this.$store.getters['instance/defaultUrl'](), 'https://demo.funkwhale.audio'] + return instances + }, + } +} +</script> +<style scoped> + footer p { + color: grey; + } +</style>