From 3b307e8383f404cc91776ceb9c5d3d5bbcc866de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ciar=C3=A1n=20Ainsworth?= <ciaranainsworth@posteo.net>
Date: Tue, 14 Jan 2020 11:11:19 +0100
Subject: [PATCH] Resolve "long instance name overlapping next column in
footer"
---
changes/changelog.d/1012.enhancement | 1 +
front/src/components/Footer.vue | 14 +++++++++++---
2 files changed, 12 insertions(+), 3 deletions(-)
create mode 100644 changes/changelog.d/1012.enhancement
diff --git a/changes/changelog.d/1012.enhancement b/changes/changelog.d/1012.enhancement
new file mode 100644
index 00000000..ae47d6dc
--- /dev/null
+++ b/changes/changelog.d/1012.enhancement
@@ -0,0 +1 @@
+Changed footer to use instance name if available, and append ellipses if instance URL/Name is too long (#1012)
\ No newline at end of file
diff --git a/front/src/components/Footer.vue b/front/src/components/Footer.vue
index d758b456..3b244283 100644
--- a/front/src/components/Footer.vue
+++ b/front/src/components/Footer.vue
@@ -3,8 +3,11 @@
<div class="ui container">
<div class="ui stackable equal height stackable grid">
<section class="four wide column">
- <h4 class="ui header">
- <translate translate-context="Footer/About/Title" :translate-params="{instanceName: instanceHostname}" >About %{instanceName}</translate>
+ <h4 v-if="podName" class="ui header ellipsis">
+ <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>
<div class="ui link list">
<router-link class="item" to="/about">
@@ -71,13 +74,18 @@
import Vue from "vue"
import { mapState } from "vuex"
import axios from 'axios'
+import _ from '@/lodash'
export default {
props: ["version"],
computed: {
...mapState({
- messages: state => state.ui.messages
+ messages: state => state.ui.messages,
+ nodeinfo: state => state.instance.nodeinfo,
}),
+ podName() {
+ return _.get(this.nodeinfo, 'metadata.nodeName')
+ },
instanceHostname() {
let url = this.$store.state.instance.instanceUrl
let parser = document.createElement("a")
--
GitLab