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

Resolve "long instance name overlapping next column in footer"

This commit is contained in:
Ciarán Ainsworth 2020-01-14 11:11:19 +01:00 committed by Eliot Berriot
parent 2e2094d243
commit 3b307e8383
2 changed files with 12 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changes/changelog.d/1012.enhancement Normal file
View File

@ -0,0 +1 @@
Changed footer to use instance name if available, and append ellipses if instance URL/Name is too long (#1012)

14
front/src/components/Footer.vue
View File

@ -3,8 +3,11 @@
<div class="ui container"> <div class="ui container">
<div class="ui stackable equal height stackable grid"> <div class="ui stackable equal height stackable grid">
<section class="four wide column"> <section class="four wide column">
<h4 class="ui header"> <h4 v-if="podName" class="ui header ellipsis">
<translate translate-context="Footer/About/Title" :translate-params="{instanceName: instanceHostname}" >About %{instanceName}</translate> <translate translate-context="Footer/About/Title" :translate-params="{instanceName: podName}" >About %{instanceName}</translate>
</h4>
<h4 v-else class="ui header ellipsis">
<translate translate-context="Footer/About/Title" :translate-params="{instanceUrl: instanceHostname}" >About %{instanceUrl}</translate>
</h4> </h4>
<div class="ui link list"> <div class="ui link list">
<router-link class="item" to="/about"> <router-link class="item" to="/about">
@ -71,13 +74,18 @@
import Vue from "vue" import Vue from "vue"
import { mapState } from "vuex" import { mapState } from "vuex"
import axios from 'axios' import axios from 'axios'
import _ from '@/lodash'
export default { export default {
props: ["version"], props: ["version"],
computed: { computed: {
...mapState({ ...mapState({
messages: state => state.ui.messages messages: state => state.ui.messages,
nodeinfo: state => state.instance.nodeinfo,
}), }),
podName() {
return _.get(this.nodeinfo, 'metadata.nodeName')
},
instanceHostname() { instanceHostname() {
let url = this.$store.state.instance.instanceUrl let url = this.$store.state.instance.instanceUrl
let parser = document.createElement("a") let parser = document.createElement("a")