Commit 79f09406 authored by Joel Collins's avatar Joel Collins
Browse files

Added sidebar toggle

parent 5ca9e3d0

src/App.vue

+70 −1
Original line number Diff line number Diff line 
<template>

  <div id="app">

    <div v-bind:class="responsiveToggleButton" id="overlay-toggle">

      <a href="" class="uk-icon-button" uk-icon="menu" uk-toggle="target: .toggle-hidden; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a>

    </div>

    <div uk-grid class="uk-height-1-1" margin=0>

      <div v-bind:class="responsivePanelLeft" class="toggle-hidden uk-card uk-card-default uk-card-body uk-padding-remove-top uk-padding-remove-right uk-width-auto uk-height-1-1">

        <div class="uk-card-header">

            <h3 class="uk-card-title"><b>OpenFlexure</b> Microscope</h3>

        </div>

        <panelLeft/>

      </div>

      <div class="uk-width-expand">

        <div class="uk-card uk-card-default uk-card-body uk-height-1-1">Width: {{ window.width }}</div>

      </div>

    </div>

  </div>

</template>



<script>
@@ -19,9 +32,51 @@ import panelLeft from './components/panelLeft.vue' 
// Export main app

export default {

  name: 'app',



  components: {

    panelLeft

  },



  data: function () {

    return {

      window: {

        width: 0,

        height: 0

      }

    }  

  },



  created: function () {

    window.addEventListener('resize', this.handleResize)

    this.handleResize();

  },



  beforeDestroy: function () {

    window.removeEventListener('resize', this.handleResize)

  },



  methods: {

    handleResize: function(event) {

      this.window.width = window.innerWidth;

      this.window.height = window.innerHeight;

    }

  },



  computed: {

    // Stylises the hostname input box based on connection status

    responsivePanelLeft: function () {

      return {

        //'uk-hidden': this.window.width<850,

        'overlay-panel': this.window.width<850

      }

    },

    responsiveToggleButton: function () {

      return {

        //'uk-hidden': this.window.width>=850,

      }

    }

  }



}

</script>
@@ -42,4 +97,18 @@ body, html { 
  height: 100%

}



.overlay-panel {

  position: fixed;

  z-index: 99;

}



#overlay-toggle {

  width: 30px;

  height: 30px;

  position: fixed;

  right: 0;

  margin: 20px;

  z-index: 999

}



</style>

src/components/paneConnectComponents/hostInput.vue

+0 −1
Original line number Diff line number Diff line
@@ -65,6 +65,5 @@ export default { 
<style scoped lang="less">

.host-input {

  text-align: left;

  width: 300px

}

</style>

src/components/panelLeft.vue

+5 −5
Original line number Diff line number Diff line 
<template>

  <div id="panelLeft">

  <div id="panelLeft" class="uk-margin-remove uk-padding-remove">

    <ul class="uk-flex-center" uk-tab>

      <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>
@@ -7,7 +7,7 @@ 
      <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-margin">

    <ul class="uk-switcher uk-padding-small panel-content">

      <li><paneConnect/></li>

    </ul>

  </div>
@@ -28,12 +28,12 @@ export default { 


<style lang="less">

#panelLeft {

  width: 300px;

  height:100%;

  padding: 0 20px 0 20px;

  background-color: #fafafa

}

.uk-tab {

    padding-left: 0;

}

.panel-content {

  width: 300px;

}

</style>