Rewritten responsive layout in main.Vue
This commit is contained in:
Joel Collins
parent
fc2f84743c
commit
c1641f6bf9
3 changed files with 108 additions and 130 deletions
122
src/App.vue
122
src/App.vue
|
|
@ -1,18 +1,56 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="app" v-bind:class="handleTheme">
|
<div id="app" v-bind:class="handleTheme">
|
||||||
<div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
|
|
||||||
<div id="sidebar-container" v-bind:class="{ 'overlay-panel': this.window.width<850 }" class="uk-padding-remove uk-first-column uk-inline uk-height-1-1">
|
<div v-if="this.onMobile" uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
|
||||||
<div id="overlay-toggle">
|
<div id="panelLeft" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-auto uk-height-1-1">
|
||||||
<a href="" class="uk-icon-button uk-box-shadow-small uk-box-shadow-hover-medium action-btn-outline" uk-icon="menu" uk-toggle="target: #left-panel-container; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a>
|
<ul class="uk-flex-none uk-flex-center uk-margin-remove-top uk-margin-remove-bottom" uk-tab="swiping: false">
|
||||||
</div>
|
<li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="pos: bottom; title: Connect"></a></li>
|
||||||
<div id="left-panel-container" class="uk-padding-remove uk-card uk-card-default uk-width-auto uk-height-1-1" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">
|
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: bottom; title: Navigate"></a></li>
|
||||||
<panelLeft/>
|
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: bottom; title: Capture"></a></li>
|
||||||
</div>
|
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: bottom; title: Plugins"></a></li>
|
||||||
|
<li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: bottom; title: Settings"></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
|
||||||
|
<li class="uk-width-expand"><paneConnect/></li>
|
||||||
|
<li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
|
||||||
|
<li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
|
||||||
|
<li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
|
||||||
|
<li class="uk-width-expand"><paneSettings/></li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div id="main-panel-container" class="uk-padding-remove uk-height-1-1 uk-width-expand">
|
<div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1">
|
||||||
<panelDisplay/>
|
<ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
|
||||||
|
<li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="pos: bottom; title: Live"></a></li>
|
||||||
|
<li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="pos: bottom; title: Captures"></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="uk-switcher uk-flex uk-flex-1">
|
||||||
|
<li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
|
||||||
|
<li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="uk-height-1-1 uk-width-1-1 uk-margin-remove uk-padding-remove" margin=0>
|
||||||
|
<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="pos: bottom; title: Connect"></a></li>
|
||||||
|
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: bottom; title: Navigate"></a></li>
|
||||||
|
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: bottom; title: Capture"></a></li>
|
||||||
|
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: bottom; title: Plugins"></a></li>
|
||||||
|
<li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: bottom; title: Settings"></a></li>
|
||||||
|
<li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="pos: bottom; title: Live"></a></li>
|
||||||
|
<li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="pos: bottom; title: Captures"></a></li>
|
||||||
|
</ul>
|
||||||
|
<ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
|
||||||
|
<li class="uk-width-expand"><paneConnect/></li>
|
||||||
|
<li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
|
||||||
|
<li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
|
||||||
|
<li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
|
||||||
|
<li class="uk-width-expand"><paneSettings/></li>
|
||||||
|
<li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
|
||||||
|
<li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -23,16 +61,27 @@ import axios from 'axios'
|
||||||
import UIkit from 'uikit';
|
import UIkit from 'uikit';
|
||||||
|
|
||||||
// Import components
|
// Import components
|
||||||
import panelLeft from './components/panelLeft.vue'
|
import paneConnect from './components/paneConnect.vue'
|
||||||
import panelDisplay from './components/panelDisplay.vue'
|
import paneNavigate from './components/paneNavigate.vue'
|
||||||
|
import paneCapture from './components/paneCapture.vue'
|
||||||
|
import panePlugins from './components/panePlugins.vue'
|
||||||
|
import paneSettings from './components/paneSettings.vue'
|
||||||
|
// Import components
|
||||||
|
import streamDisplay from './components/paneDisplayComponents/streamDisplay.vue'
|
||||||
|
import galleryDisplay from './components/paneDisplayComponents/galleryDisplay.vue'
|
||||||
|
|
||||||
// Export main app
|
// Export main app
|
||||||
export default {
|
export default {
|
||||||
name: 'app',
|
name: 'app',
|
||||||
|
|
||||||
components: {
|
components: {
|
||||||
panelLeft,
|
streamDisplay,
|
||||||
panelDisplay
|
galleryDisplay,
|
||||||
|
paneConnect,
|
||||||
|
paneNavigate,
|
||||||
|
paneCapture,
|
||||||
|
panePlugins,
|
||||||
|
paneSettings
|
||||||
},
|
},
|
||||||
|
|
||||||
data: function () {
|
data: function () {
|
||||||
|
|
@ -67,6 +116,29 @@ export default {
|
||||||
window.addEventListener('beforeunload', this.handleExit)
|
window.addEventListener('beforeunload', this.handleExit)
|
||||||
},
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
// Attach methods to UIkit events for tab switching
|
||||||
|
var context = this;
|
||||||
|
// Gallery tab
|
||||||
|
UIkit.util.on('#galleryDisplayTab', 'shown', function(event, area) {
|
||||||
|
console.log("Gallery tab entered")
|
||||||
|
if (context.$store.state.globalSettings.trackWindow == true) {
|
||||||
|
context.$root.$emit('globalTogglePreview', false)
|
||||||
|
}
|
||||||
|
context.$root.$emit('globalUpdateCaptureList');
|
||||||
|
});
|
||||||
|
|
||||||
|
// Stream tab
|
||||||
|
UIkit.util.on('#streamDisplayTab', 'shown', function(event, area) {
|
||||||
|
console.log("Stream tab entered")
|
||||||
|
UIkit.update()
|
||||||
|
if (context.$store.state.globalSettings.trackWindow == true) {
|
||||||
|
context.$root.$emit('globalTogglePreview', true)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
beforeDestroy: function () {
|
beforeDestroy: function () {
|
||||||
window.removeEventListener('resize', this.handleResize)
|
window.removeEventListener('resize', this.handleResize)
|
||||||
},
|
},
|
||||||
|
|
@ -89,6 +161,14 @@ export default {
|
||||||
'uk-light': this.$store.state.globalSettings.darkMode,
|
'uk-light': this.$store.state.globalSettings.darkMode,
|
||||||
'uk-background-secondary': this.$store.state.globalSettings.darkMode
|
'uk-background-secondary': this.$store.state.globalSettings.darkMode
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
disableIfDisconnected: function () {
|
||||||
|
return {
|
||||||
|
'uk-disabled': !this.$store.getters.ready
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onMobile: function () {
|
||||||
|
return (this.window.width >= 800) ? true : false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -148,4 +228,18 @@ body, html {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.uk-tab {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
.panel-content {
|
||||||
|
width: 300px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#panelLeft {
|
||||||
|
border-width: 0 1px 0 0;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: rgba(180, 180, 180, 0.25)
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-height-1-1">
|
|
||||||
<ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
|
|
||||||
<li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="pos: bottom; title: Live"></a></li>
|
|
||||||
<li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="pos: bottom; title: Captures"></a></li>
|
|
||||||
</ul>
|
|
||||||
<ul class="uk-switcher uk-flex uk-flex-1">
|
|
||||||
<li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
|
|
||||||
<li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import UIkit from 'uikit';
|
|
||||||
|
|
||||||
// Import components
|
|
||||||
import streamDisplay from './paneDisplayComponents/streamDisplay.vue'
|
|
||||||
import galleryDisplay from './paneDisplayComponents/galleryDisplay.vue'
|
|
||||||
|
|
||||||
// Export main app
|
|
||||||
export default {
|
|
||||||
name: 'panelDisplay',
|
|
||||||
|
|
||||||
components: {
|
|
||||||
streamDisplay,
|
|
||||||
galleryDisplay
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted() {
|
|
||||||
// Attach methods to UIkit events for tab switching
|
|
||||||
var context = this;
|
|
||||||
// Gallery tab
|
|
||||||
UIkit.util.on('#galleryDisplayTab', 'shown', function(event, area) {
|
|
||||||
console.log("Gallery tab entered")
|
|
||||||
if (context.$store.state.globalSettings.trackWindow == true) {
|
|
||||||
context.$root.$emit('globalTogglePreview', false)
|
|
||||||
}
|
|
||||||
context.$root.$emit('globalUpdateCaptureList');
|
|
||||||
});
|
|
||||||
|
|
||||||
// Stream tab
|
|
||||||
UIkit.util.on('#streamDisplayTab', 'shown', function(event, area) {
|
|
||||||
console.log("Stream tab entered")
|
|
||||||
UIkit.update()
|
|
||||||
if (context.$store.state.globalSettings.trackWindow == true) {
|
|
||||||
context.$root.$emit('globalTogglePreview', true)
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped lang="less">
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
<template>
|
|
||||||
<div id="panelLeft" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-height-1-1">
|
|
||||||
<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="pos: bottom; title: Connect"></a></li>
|
|
||||||
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: bottom; title: Navigate"></a></li>
|
|
||||||
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: bottom; title: Capture"></a></li>
|
|
||||||
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: bottom; title: Plugins"></a></li>
|
|
||||||
<li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: bottom; title: Settings"></a></li>
|
|
||||||
</ul>
|
|
||||||
<ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
|
|
||||||
<li class="uk-width-expand"><paneConnect/></li>
|
|
||||||
<li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
|
|
||||||
<li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
|
|
||||||
<li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
|
|
||||||
<li class="uk-width-expand"><paneSettings/></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
// Import components
|
|
||||||
import paneConnect from './paneConnect.vue'
|
|
||||||
import paneNavigate from './paneNavigate.vue'
|
|
||||||
import paneCapture from './paneCapture.vue'
|
|
||||||
import panePlugins from './panePlugins.vue'
|
|
||||||
import paneSettings from './paneSettings.vue'
|
|
||||||
|
|
||||||
// Export main app
|
|
||||||
export default {
|
|
||||||
name: 'panelLeft',
|
|
||||||
|
|
||||||
components: {
|
|
||||||
paneConnect,
|
|
||||||
paneNavigate,
|
|
||||||
paneCapture,
|
|
||||||
panePlugins,
|
|
||||||
paneSettings
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
disableIfDisconnected: function () {
|
|
||||||
return {
|
|
||||||
'uk-disabled': !this.$store.getters.ready
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="less">
|
|
||||||
.uk-tab {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
.panel-content {
|
|
||||||
width: 300px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue