instance specific panel: style differently if docked into the about page

config/index.js

@@ -38,6 +38,11 @@ module.exports = {
         changeOrigin: true,
         cookieDomainRewrite: 'localhost'
       },
+      '/instance': {
+        target,
+        changeOrigin: true,
+        cookieDomainRewrite: 'localhost'
+      },
       '/nodeinfo': {
         target,
         changeOrigin: true,

src/App.js

@@ -96,6 +96,10 @@ export default {
         !this.$store.state.config.hideISP &&
         this.$store.state.instance.instanceSpecificPanelContent
     },
+    showInstanceSpecificPanelInSidebar () {
+      return this.showInstanceSpecificPanel &&
+        this.$store.state.instance.showInstanceSpecificPanelInSidebar
+    },
     showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
     isMobileLayout () { return this.$store.state.interface.mobileLayout }
   },

src/App.vue

@@ -76,7 +76,7 @@
               <user-panel />
               <div v-if="!isMobileLayout">
                 <nav-panel />
-                <instance-specific-panel v-if="showInstanceSpecificPanel" />
+                <instance-specific-panel v-if="showInstanceSpecificPanelInSidebar" />
                 <features-panel v-if="!currentUser && showFeaturesPanel" />
                 <who-to-follow-panel v-if="currentUser && suggestionsEnabled" />
                 <notifications v-if="currentUser" />

src/boot/after_store.js

@@ -99,6 +99,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
   copyInstanceOption('redirectRootNoLogin')
   copyInstanceOption('redirectRootLogin')
   copyInstanceOption('showInstanceSpecificPanel')
+  copyInstanceOption('showInstanceSpecificPanelInSidebar')
   copyInstanceOption('minimalScopesMode')
   copyInstanceOption('hideMutedPosts')
   copyInstanceOption('collapseMessageWithSubject')

src/components/about/about.js

@@ -9,7 +9,12 @@ const About = {
     TermsOfServicePanel
   },
   computed: {
-    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }
+    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
+    showInstanceSpecificPanel() {
+      return this.$store.state.instance.showInstanceSpecificPanel &&
+        !this.$store.state.instance.showInstanceSpecificPanelInSidebar
+    },
+    isMobileLayout () { return this.$store.state.interface.mobileLayout }
   }
 }
 

src/components/about/about.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="sidebar">
-    <instance-specific-panel />
+    <instance-specific-panel v-if="isMobileLayout || showInstanceSpecificPanel" header="true" />
     <features-panel v-if="showFeaturesPanel" />
     <terms-of-service-panel />
   </div>

src/components/instance_specific_panel/instance_specific_panel.js

@@ -1,7 +1,13 @@
 const InstanceSpecificPanel = {
+  props: [
+    'header'
+  ],
   computed: {
     instanceSpecificPanelContent () {
       return this.$store.state.instance.instanceSpecificPanelContent
+    },
+    sitename () {
+      return this.$store.state.instance.name
     }
   }
 }

src/components/instance_specific_panel/instance_specific_panel.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="instance-specific-panel">
-    <div class="panel panel-default">
-      <div class="panel-body">
+    <div class="panel panel-default base01-background">
+      <div class="panel-heading timeline-heading base02-background base04" v-if="header">
+        <div class="title">{{ $t('nav.about') }} {{ sitename }}</div>
+      </div>
+      <div class="panel-body isp-content">
         <!-- eslint-disable vue/no-v-html -->
         <div v-html="instanceSpecificPanelContent" />
         <!-- eslint-enable vue/no-v-html -->
@@ -11,3 +14,9 @@
 </template>
 
 <script src="./instance_specific_panel.js" ></script>
+
+<style lang="scss">
+.isp-content {
+  margin: 1em
+}
+</style>

src/components/nav_panel/nav_panel.vue

@@ -38,6 +38,11 @@
             {{ $t("nav.twkn") }}
           </router-link>
         </li>
+        <li>
+          <router-link :to="{ name: 'about'}">
+            {{ $t("nav.about") }}
+          </router-link>
+        </li>
       </ul>
     </div>
   </div>

src/modules/instance.js

@@ -16,6 +16,7 @@ const defaultState = {
   redirectRootNoLogin: '/main/all',
   redirectRootLogin: '/main/friends',
   showInstanceSpecificPanel: false,
+  showInstanceSpecificPanelInSidebar: false,
   alwaysShowSubjectInput: true,
   hideMutedPosts: false,
   collapseMessageWithSubject: false,

static/config.json

@@ -6,7 +6,8 @@
   "logoMargin": ".1em",
   "redirectRootNoLogin": "/main/all",
   "redirectRootLogin": "/main/friends",
-  "showInstanceSpecificPanel": false,
+  "showInstanceSpecificPanel": true,
+  "showInstanceSpecificPanelInSidebar": false,
   "collapseMessageWithSubject": false,
   "scopeCopy": true,
   "subjectLineBehavior": "email",