Add badge title support (#819)

contao · Jul 22, 2024 · 7ef9d8d · 7ef9d8d
1 parent 3155434
commit 7ef9d8d
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 3 deletions.
diff --git a/src/components/layouts/MainLayout.vue b/src/components/layouts/MainLayout.vue
@@ -1,7 +1,12 @@
 <template>
     <div class="layout-main">
-        <header class="layout-main__header" :class="{ 'layout-main__header--margin': !$slots.search }">
-            <div class="layout-main__logo"><img src="../../assets/images/logo.svg" width="40" height="40" alt="Contao Logo" />Contao Manager</div>
+        <header class="layout-main__header" :class="{ 'layout-main__header--margin': !$slots.search, 'layout-main__has-badge-title': badgeTitle }">
+            <div class="layout-main__logo"><img src="../../assets/images/logo.svg" width="40" height="40" alt="Contao Logo" />
+                <span class="layout-main__title">
+                    <span class="layout-main__manager-title">Contao Manager</span>
+                    <span v-if="badgeTitle" class="layout-main__badge-title">{{ badgeTitle }}</span>
+                </span>
+            </div>
             <navigation-fragment/>
         </header>
 
@@ -25,7 +30,7 @@
 </template>
 
 <script>
-    import { mapState } from 'vuex';
+    import { mapState, mapGetters } from 'vuex';
 
     import NavigationFragment from '../fragments/NavigationFragment';
     import FooterFragment from '../fragments/FooterFragment';
@@ -35,9 +40,16 @@
 
         computed: {
             ...mapState('algolia', ['news']),
+            ...mapGetters('server/contao', ['badgeTitle']),
 
             currentNews: vm => vm.news.length ? vm.news[0] : null,
         },
+
+        mounted () {
+            // Fetch the Contao config for the badge title.
+            // This is most likely already done by the boot process.
+            this.$store.dispatch('server/contao/get');
+        }
     };
 </script>
 
@@ -59,6 +71,24 @@
             }
         }
 
+        &__badge-title {
+            background: var(--border);
+            color: var(--text);
+            padding: 2px 5px;
+            position: relative;
+            top: -5px;
+            border-radius: 8px;
+            font-size: .75rem;
+            font-weight: 600;
+            line-height: 1;
+            display: -webkit-box;
+            -webkit-line-clamp: 1;
+            -webkit-box-orient: vertical;
+            word-break: break-word;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
         &__subheader {
             margin: 0 0 45px;
             padding: 20px 0;
@@ -109,6 +139,31 @@
             margin: 0 20px;
         }
 
+        &__has-badge-title {
+            display: flex;
+            justify-content: space-between;
+
+            .layout-main__logo {
+                display: flex;
+            }
+
+            .layout-main__title {
+                display: flex;
+                flex-wrap: wrap;
+                align-items: center;
+                line-height: 1;
+                column-gap: 10px;
+                // Counter top positioning for row-wrap
+                row-gap: 5px;
+            }
+        }
+
+        @media (max-width: 600px) {
+            &__badge-title {
+                max-width: 220px;
+            }
+        }
+
         @include screen(700) {
             &__subheader-inside {
                 flex-direction: row;
@@ -120,6 +175,13 @@
         }
 
         @include screen(1024) {
+            &__has-badge-title {
+                // Do not allow wrapping navigation items
+                .navigation__group--main {
+                    display: flex;
+                }
+            }
+
             &__subheader-inside,
             &__content,
             footer {

diff --git a/src/store/server/contao.js b/src/store/server/contao.js
@@ -12,6 +12,10 @@ export default {
         contaoConfig: null,
     },
 
+    getters: {
+        badgeTitle: state => state.contaoConfig?.backend?.badge_title,
+    },
+
     mutations: {
         setCache(state, response) {
             state.cache = response;