Added tabs to display panel, and general layout improvements

This commit is contained in:
Joel Collins 2019-02-08 13:04:56 +00:00
parent 473fff799d
commit 9ccb9cf0c9
4 changed files with 41 additions and 36 deletions

View file

@ -1,14 +1,17 @@
<template>
<div id="panelLeft" class="uk-margin-remove uk-padding-remove">
<ul class="uk-flex-center" uk-tab>
<div id="panelLeft" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-height-1-1">
<div class="uk-flex-none uk-card-header">
<h3 class="uk-card-title uk-align-center"><b>OpenFlexure</b> Microscope</h3>
</div>
<ul class="uk-flex-none uk-flex-center uk-margin-remove-top uk-margin-remove-bottom" uk-tab="swiping: false">
<li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="Connect"></a></li>
<li><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="Navigate"></a></li>
<li><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="Capture"></a></li>
<li><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="Plugins"></a></li>
<li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="Configure"></a></li>
</ul>
<ul class="uk-switcher uk-padding-small panel-content">
<li><paneConnect/></li>
<ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
<li class="uk-width-expand"><paneConnect/></li>
</ul>
</div>
</template>
@ -28,12 +31,13 @@ export default {
<style lang="less">
#panelLeft {
height:100%;
}
.uk-tab {
padding-left: 0;
}
.panel-content {
width: 300px;
overflow: auto;
}
</style>