Skip to content

S
spring-boot-admin
Commit d04d8feb by Johannes Edmeier
Options

Fix instance tabs for smaller screen sizes

parent 63de195c
Showing with 101 additions and 73 deletions
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 0 → 100644
/*
* 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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment