Fix instance tabs for smaller screen sizes

spring-boot-admin-server-ui/src/main/frontend/components/sba-panel.vue

@@ -16,7 +16,9 @@
 
 <template>
   <div class="card panel">
-    <header v-if="title || $slots['header']" class="card-header">
+    <header v-if="title || $slots['header']" class="card-header"
+            :class="{'panel__header--sticky': headerSticksBelow}"
+            v-sticks-below="headerSticksBelow">
       <p class="card-header-title">
         <span v-text="title"/>
         <slot name="header"/>
@@ -33,9 +35,11 @@
 
 <script>
   import SbaIconButton from './sba-icon-button';
+  import sticksBelow from '@/directives/sticks-below';
 
   export default {
     components: {SbaIconButton},
+    directives: {sticksBelow},
     props: {
       title: {
         type: String,
@@ -44,6 +48,10 @@
       closeable: {
         type: Boolean,
         default: false
+      },
+      headerSticksBelow: {
+        type: Array,
+        default: undefined
       }
     },
     methods: {
@@ -67,5 +75,11 @@
       align-items: center;
       justify-self: flex-end;
     }
+
+    &__header--sticky {
+      position: sticky;
+      background: $white;
+      top: ($navbar-height-px + $tabs-height-px);
+    }
   }
 </style>

spring-boot-admin-server-ui/src/main/frontend/directives/sticks-below.js

+/*
+ * Copyright 2014-2018 the original author or authors.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+const bind = (el, binding) => {
+  if (!binding.value) {
+    return;
+  }
+  const top = binding.value.map(v => document.querySelector(v))
+    .filter(v => Boolean(v))
+    .map(v => v.getBoundingClientRect().height)
+    .reduce((a, b) => a + b, 0);
+  el.style.top = `${top}px`;
+  el.style.position = 'sticky';
+};
+
+export default {
+  bind,
+  update(el, binding) {
+    if (binding.value === binding.oldValue) {
+      return
+    }
+    bind(el, binding)
+  }
+}
+

spring-boot-admin-server-ui/src/main/frontend/views/instances/env/index.vue

@@ -42,7 +42,7 @@
           <input class="input" type="search" placeholder="name / value filter" v-model="filter">
         </p>
       </div>
-      <sba-panel class="property-source"
+      <sba-panel class="property-source" :header-sticks-below="['#navigation', '#instance-tabs']"
                  v-for="propertySource in propertySources" :key="propertySource.name"
                  :title="propertySource.name">
         <table class="table is-fullwidth"
@@ -135,13 +135,3 @@
     }
   }
 </script>
-
-<style lang="scss">
-  @import "~@/assets/css/utilities";
-
-  .property-source .card-header {
-    position: sticky;
-    background: $white;
-    top: ($navbar-height-px + $tabs-height-px);
-  }
-</style>

spring-boot-admin-server-ui/src/main/frontend/views/instances/flyway/index.vue

@@ -29,6 +29,7 @@
       <template v-for="(context, ctxName) in contexts">
         <h3 class="title" v-text="ctxName" :key="ctxName"/>
         <sba-panel v-for="(report, name) in context.flywayBeans" :key="`${ctxName}-${name}`" :title="name"
+                   :header-sticks-below="['#navigation', '#instance-tabs']"
                    class="migration">
           <table class="table">
             <thead>
@@ -123,13 +124,3 @@
     }
   }
 </script>
-
-<style lang="scss">
-  @import "~@/assets/css/utilities";
-
-  .migration .card-header {
-    position: sticky;
-    background: $white;
-    top: ($navbar-height-px + $tabs-height-px);
-  }
-</style>

spring-boot-admin-server-ui/src/main/frontend/views/instances/jolokia/index.vue

@@ -28,7 +28,7 @@
       </div>
       <div class="columns">
         <div class="column is-narrow">
-          <nav class="menu domain-list">
+          <nav class="menu domain-list" v-sticks-below="['#navigation', '#instance-tabs']">
             <p class="menu-label">domains</p>
             <ul class="menu-list">
               <li>
@@ -94,6 +94,7 @@
   import {directive as onClickaway} from 'vue-clickaway';
   import mBeanAttributes from './m-bean-attributes';
   import mBeanOperations from './m-bean-operations';
+  import sticksBelow from '@/directives/sticks-below';
 
   const getOperationName = (name, descriptor) => {
     const params = descriptor.args.map(arg => arg.type).join(',');
@@ -138,7 +139,7 @@
       }
     },
     components: {mBeanOperations, mBeanAttributes},
-    directives: {onClickaway},
+    directives: {onClickaway, sticksBelow},
     data: () => ({
       hasLoaded: false,
       error: null,
@@ -219,11 +220,6 @@
 <style lang="scss">
   @import "~@/assets/css/utilities";
 
-  .domain-list {
-    position: sticky;
-    top: (($gap / 2) + $navbar-height-px + $tabs-height-px);
-  }
-
   .m-bean {
     transition: all $easing $speed;
 

spring-boot-admin-server-ui/src/main/frontend/views/instances/liquibase/index.vue

@@ -29,7 +29,8 @@
       <template v-for="(context, ctxName) in contexts">
         <h3 class="title" v-text="ctxName" :key="ctxName"/>
         <template v-for="(report, name) in context.liquibaseBeans">
-          <sba-panel :key="`${ctxName}-${name}`" :title="`name`" class="change-set">
+          <sba-panel :key="`${ctxName}-${name}`" :title="`name`" class="change-set"
+                     :header-sticks-below="['#navigation', '#instance-tabs']">
             <table class="table is-hoverable is-fullwidth">
               <thead>
                 <tr>
@@ -142,14 +143,4 @@
       }
     }
   }
-</script>
-
-<style lang="scss">
-  @import "~@/assets/css/utilities";
-
-  .change-set .card-header {
-    position: sticky;
-    background: $white;
-    top: ($navbar-height-px + $tabs-height-px);
-  }
-</style>
+</script>å

spring-boot-admin-server-ui/src/main/frontend/views/instances/shell/tabs.vue

@@ -15,36 +15,32 @@
   -->
 
 <template>
-  <section class="hero instance-tabs">
+  <section id="instance-tabs" class="hero instance-tabs">
     <div class="hero-foot">
-      <div class="container">
-        <div class="level">
-          <div class="level-left">
-            <div class="instance-tabs__name"
-                 :class="{ 'is-active' : isStuck }">
-              <h1 class="title is-5" v-if="instance" v-text="instance.registration.name"/>
-              <h1 class="subtitle is-6" v-if="instance"><strong v-text="instance.id"/> (of <span
-                v-text="application.instances.length"/>)</h1>
-            </div>
-          </div>
-          <div class="level-right">
-            <nav class="tabs is-boxed is-right">
-              <ul>
-                <li v-if="instance" v-for="view in activeViews" :key="view.name"
-                    :class="{'is-active' : $route.name === view.name}">
-                  <a v-if="view.href" :href="view.href({ 'instanceId' : instance.id })"
-                     target="_blank">
-                    <component :is="view.handle"/>
-                  </a>
-                  <router-link v-else
-                               :to="{ name: view.name, params: { 'instanceId' : instance.id } }">
-                    <component :is="view.handle"/>
-                  </router-link>
-                </li>
-              </ul>
-            </nav>
-          </div>
+      <div class="container instance-tabs__tabs">
+
+        <div class="instance-tabs__name"
+             :class="{ 'is-active' : isStuck }">
+          <h1 class="title is-5" v-if="instance" v-text="instance.registration.name"/>
+          <h1 class="subtitle is-6" v-if="instance"><strong v-text="instance.id"/> (of <span
+            v-text="application.instances.length"/>)</h1>
         </div>
+
+        <nav class="instance-tabs__tabs tabs is-boxed">
+          <ul>
+            <li v-if="instance" v-for="view in activeViews" :key="view.name"
+                :class="{'is-active' : $route.name === view.name}">
+              <a v-if="view.href" :href="view.href({ 'instanceId' : instance.id })"
+                 target="_blank">
+                <component :is="view.handle"/>
+              </a>
+              <router-link v-else
+                           :to="{ name: view.name, params: { 'instanceId' : instance.id } }">
+                <component :is="view.handle"/>
+              </router-link>
+            </li>
+          </ul>
+        </nav>
       </div>
     </div>
   </section>
@@ -106,6 +102,22 @@
     top: $navbar-height-px;
     overflow: hidden;
 
+    &__tabs {
+      display: flex;
+      align-items: flex-end;
+
+      & ul {
+        flex: 1 1 100%;
+        overflow: hidden;
+      }
+
+      & li {
+        flex-shrink: 1;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+    }
+
     &__name {
       transition: all $easing $speed;
       will-change: transform;
@@ -117,9 +129,5 @@
         visibility: visible;
       }
     }
-
-    & .level {
-      align-items: flex-end;
-    }
   }
 </style>