Commit 279cc031 authored by Joel Collins's avatar Joel Collins
Browse files

Fixed tab bar scrolling

parent ce57d37d

openflexure_microscope/api/static/src/components/appContent.vue

+121 −94
Original line number Diff line number Diff line
@@ -11,6 +11,7 @@ 
      @onClose="enterApp()"

    ></calibrationModal>

    <!-- Vertical tab bar -->

    <div id="switcher-left-container">

      <div

        id="switcher-left"

        class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1 uk-text-center"
@@ -96,6 +97,16 @@ 
          <i class="material-icons">settings</i>

        </tabIcon>



        <tabIcon

          id="logging-tab-icon"

          tab-i-d="logging"

          :require-connection="false"

          :current-tab="currentTab"

          @set-tab="setTab"

        >

          <i class="material-icons">assignment_late</i>

        </tabIcon>



        <tabIcon

          id="about-tab-icon"

          tab-i-d="about"
@@ -106,6 +117,7 @@ 
          <i class="material-icons">info</i>

        </tabIcon>

      </div>

    </div>



    <!-- Corresponding vertical tab content -->

    <div
@@ -159,6 +171,22 @@ 
        <settingsContent class="section-content" />

      </tabContent>



      <tabContent

        tab-i-d="logging"

        :require-connection="false"

        :current-tab="currentTab"

      >

        <loggingContent />

      </tabContent>



      <tabContent

        tab-i-d="about"

        :require-connection="false"

        :current-tab="currentTab"

      >

        <aboutContent class="section-content" />

      </tabContent>



      <tabContent

        v-for="plugin in pluginsGuiList"

        :key="plugin.id"
@@ -174,14 +202,6 @@ 
          @reloadForms="updatePlugins()"

        />

      </tabContent>



      <tabContent

        tab-i-d="about"

        :require-connection="false"

        :current-tab="currentTab"

      >

        <aboutContent class="section-content" />

      </tabContent>

    </div>

  </div>

</template>
@@ -202,6 +222,7 @@ import settingsContent from "./tabContentComponents/settingsContent.vue"; 
import galleryContent from "./tabContentComponents/galleryContent.vue";

import extensionContent from "./tabContentComponents/extensionContent.vue";

import aboutContent from "./tabContentComponents/aboutContent.vue";

import loggingContent from "./tabContentComponents/loggingContent.vue";



// Import modal components for device initialisation

import calibrationModal from "./modalComponents/calibrationModal.vue";
@@ -221,7 +242,8 @@ export default { 
    galleryContent,

    extensionContent,

    calibrationModal,

    aboutContent

    aboutContent,

    loggingContent

  },



  data: function() {
@@ -359,15 +381,20 @@ export default { 
  border-width: 0 1px 0 0;

  border-style: solid;

  border-color: rgba(180, 180, 180, 0.25);

  width: 75px;

  background-color: rgba(180, 180, 180, 0.1);

  padding-top: 2px !important;

}



#switcher-left a {

  padding: 10px 8px;

#switcher-left-container {

  margin: 0;

  padding: 0;

  overflow-x: hidden;

  overflow-y: auto;

  height: 100%;

}



#switcher-left {

  width: 75px;

  background-color: rgba(180, 180, 180, 0.1);

  padding-top: 2px !important;

#switcher-left a {

  padding: 10px 8px;

}

</style>