77 lines
1.6 KiB
Vue
77 lines
1.6 KiB
Vue
<template>
|
|
<div class="page-container md-layout-column" id="dashboard-container">
|
|
<md-toolbar class="md-primary">
|
|
|
|
<md-button class="md-icon-button" @click="showNavigation = true">
|
|
<md-icon>menu</md-icon>
|
|
</md-button>
|
|
<span class="md-title">VideON</span>
|
|
|
|
<div class="md-toolbar-section-end">
|
|
<md-button class="md-raised" :disabled="true">Apply</md-button>
|
|
</div>
|
|
|
|
</md-toolbar>
|
|
|
|
<md-drawer :md-active.sync="showNavigation" md-swipeable>
|
|
<md-toolbar class="md-transparent" md-elevation="0">
|
|
<span class="md-title">VideON</span>
|
|
|
|
|
|
</md-toolbar>
|
|
|
|
<md-list>
|
|
<md-list-item>
|
|
<md-avatar class="md-avatar-icon">J</md-avatar>
|
|
<span class="md-list-item-text">Joska</span>
|
|
</md-list-item>
|
|
|
|
<md-list-item>
|
|
<md-button class="md-raised md-accent">Logout</md-button>
|
|
</md-list-item>
|
|
|
|
</md-list>
|
|
|
|
</md-drawer>
|
|
|
|
<md-content id="diagram-container">
|
|
<md-progress-bar v-if="true" class="md-accent" md-mode="indeterminate"></md-progress-bar>
|
|
|
|
<div id="fab-holder">
|
|
<md-button class="md-fab">
|
|
<md-icon>add</md-icon>
|
|
</md-button>
|
|
</div>
|
|
|
|
</md-content>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Dashboard',
|
|
components: {},
|
|
data: () => ({
|
|
showNavigation: false
|
|
})
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
#dashboard-container {
|
|
height: 100%;
|
|
}
|
|
|
|
#diagram-container {
|
|
height: calc(100% - 64px);
|
|
}
|
|
|
|
#fab-holder {
|
|
position: absolute;
|
|
z-index: 5;
|
|
right: 2rem;
|
|
bottom: 2rem;
|
|
}
|
|
</style> |