MRC
/
geodata-frontend
Archived
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ref: extract navbar, sidebar

Browse Source
dev
rrr-marble 4 years ago
parent a024ab3987
commit a046cbac5e
4 changed files with 141 additions and 68 deletions
Show Stats Download Patch File Download Diff File

73
src/App.vue
Unescape View File

@ -1,52 +1,16 @@
<template>
<div class="app">
<va-navbar shape>
<template #left>
<va-navbar-item class="top-icon">
<va-icon size="3rem">🌍</va-icon>
</va-navbar-item>
</template>
<template #right>
<va-navbar-item class="top-icon">
<va-icon size="3rem">👤</va-icon>
</va-navbar-item>
</template>
</va-navbar>
<div class="central-view">
<va-sidebar color="primary" text-color="white" gradient class="sidebar-proper">
<va-sidebar-item active>
<va-sidebar-item-content class="sidebar-item">
<va-icon class="sidebar-icon" size="2rem" name="fact_check" />
<va-sidebar-item-title class="sidebar-title">Active Schema</va-sidebar-item-title>
</va-sidebar-item-content>
</va-sidebar-item>
<va-sidebar-item>
<va-sidebar-item-content class="sidebar-item">
<va-icon class="sidebar-icon" size="2rem" name="dashboard" />
<va-sidebar-item-title class="sidebar-title">Review Data</va-sidebar-item-title>
</va-sidebar-item-content>
</va-sidebar-item>
<va-sidebar-item>
<va-sidebar-item-content class="sidebar-item">
<va-icon class="sidebar-icon" size="2rem" name="file_upload" />
<va-sidebar-item-title class="sidebar-title">Upload</va-sidebar-item-title>
</va-sidebar-item-content>
</va-sidebar-item>
</va-sidebar>
<div class="main-view">
<!-- <upload-screen /> -->
<active-schema-screen />
</div>
</div>
<admin-view />
</div>
</template>
<script>
import UploadScreen from '@/components/UploadScreen.vue'
import ActiveSchemaScreen from './components/ActiveSchemaScreen.vue'
import AdminView from '@/views/AdminView.vue'
export default {
components: { UploadScreen, ActiveSchemaScreen }
components: { AdminView }
}
</script>
@ -59,32 +23,5 @@ export default {
height: 100%;
}
.central-view {
height: 100vh;
margin: 0;
display: flex;
flex-direction: row;
}
.sidebar-proper {
position: fixed;
}
.sidebar-item {
height: 4rem;
display: flex;
padding: 1rem 0.5rem;
position: relative;
align-items: center;
justify-content: flex-start;
font-size: 1.2rem;
}
.sidebar-icon {
margin: 1rem;
}
.main-view {
width: 100%;
}
</style>

30
src/components/Navbar.vue
Unescape View File

@ -0,0 +1,30 @@
<template>
<div>
<va-navbar shape class="navbar">
<template #left>
<va-navbar-item class="top-icon">
<va-icon size="3rem" color="gray" name="public" />
</va-navbar-item>
</template>
<template #right>
<va-navbar-item class="top-icon">
<va-icon size="3rem" color="gray" name="account_box" />
</va-navbar-item>
</template>
</va-navbar>
</div>
</template>
<script>
export default {
}
</script>
<style lang="css" scoped>
.navbar {
position: relative;
}
</style>

47
src/components/Sidebar.vue
Unescape View File

@ -0,0 +1,47 @@
<template>
<div>
<va-sidebar color="primary" text-color="white" gradient class="sidebar-proper">
<template v-for="item in sidebarItems" :key="item.title">
<va-sidebar-item :active="item.active">
<va-sidebar-item-content class="sidebar-item">
<va-icon class="sidebar-icon" size="2rem" :name="item.icon" />
<va-sidebar-item-title class="sidebar-title">{{ item.title }}</va-sidebar-item-title>
</va-sidebar-item-content>
</va-sidebar-item>
</template>
</va-sidebar>
</div>
</template>
<script>
export default {
props: {
sidebarItems: {
type: Array,
required: true,
}
},
}
</script>
<style lang="css" scoped>
.sidebar-proper {
height: max(100vh, 100%);
}
.sidebar-item {
height: 4rem;
display: flex;
padding: 1rem 0.5rem;
position: relative;
align-items: center;
justify-content: flex-start;
font-size: 1.2rem;
}
.sidebar-icon {
margin: 1rem;
}
</style>

59
src/views/AdminView.vue
Unescape View File

@ -0,0 +1,59 @@
<template>
<div>
<navbar />
<div class="central-view">
<sidebar :sidebarItems="sidebarItems" />
<div class="main-view">
<!-- <upload-screen /> -->
<active-schema-screen />
</div>
</div>
</div>
</template>
<script>
import UploadScreen from '@/components/UploadScreen.vue'
import ActiveSchemaScreen from '@/components/ActiveSchemaScreen.vue'
import Navbar from '@/components/Navbar.vue'
import Sidebar from '@/components/Sidebar.vue'
export default {
components: { UploadScreen, ActiveSchemaScreen, Navbar, Sidebar },
data() {
return {
sidebarItems: [
{
title: "Active Schema",
icon: "fact_check",
active: true
},
{
title: "Review Data",
icon: "dashboard",
},
{
title: "Upload",
icon: "file_upload",
},
]
}
},
}
</script>
<style lang="css" scoped>
.central-view {
height: max(100vh, 100%);
margin: 0;
display: flex;
flex-direction: row;
}
.main-view {
width: 100%;
}
</style>