MRC
/
geodata-catalog
2
0
Fork 0
Code Issues Pull Requests Projects 1 Releases Wiki Activity

msc: style adjustments

Browse Source
v0.4
rrr-marble 3 years ago
parent aecf8e22ba
commit 7ebba14724
8 changed files with 88 additions and 33 deletions
Show Stats Download Patch File Download Diff File

1
frontend/src/App.vue
Unescape View File

@ -20,5 +20,6 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
--va-card-overflow: hidden;
} }
</style> </style>

50
frontend/src/components/FilterPanel.vue
Unescape View File

@ -1,17 +1,35 @@
<template> <template>
<div> <div class="filter_panel">
<h3>Category</h3> <div class="sidebar-item">
<category-filter @filter="$emit('filter', $event)" /> <h3>Category</h3>
<h3>GIS Category</h3> <category-filter @filter="$emit('filter', $event)" />
<gis-category-filter @filter="$emit('filter', $event)" /> </div>
<h3>Scanner</h3>
<scanner-filter @filter="$emit('filter', $event)" /> <div class="sidebar-item">
<h3>Organization</h3> <h3>GIS Category</h3>
<org-filter @filter="$emit('filter', $event)" /> <gis-category-filter @filter="$emit('filter', $event)" />
<h3>Stratum</h3> </div>
<stratum-filter @filter="$emit('filter', $event)" />
<h3>Depth</h3> <div class="sidebar-item">
<depth-filter @filter="$emit('filter', $event)" /> <h3>Scanner</h3>
<scanner-filter @filter="$emit('filter', $event)" />
</div>
<div class="sidebar-item">
<h3>Organization</h3>
<org-filter @filter="$emit('filter', $event)" />
</div>
<div class="sidebar-item">
<h3>Stratum</h3>
<stratum-filter @filter="$emit('filter', $event)" />
</div>
<div class="sidebar-item">
<h3>Depth</h3>
<depth-filter @filter="$emit('filter', $event)" />
</div>
</div> </div>
</template> </template>
@ -35,14 +53,18 @@ export default {
<style lang="css" scoped> <style lang="css" scoped>
.filter_panel {
overflow-y: hidden;
}
.sidebar-item { .sidebar-item {
height: 4rem;
display: flex; display: flex;
padding: 1rem 0.5rem; padding: 1rem 0.5rem;
position: relative; position: relative;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
font-size: 1.2rem; font-size: 1.2rem;
flex-direction: column;
} }
.sidebar-icon { .sidebar-icon {

28
frontend/src/components/ItemDetails.vue
Unescape View File

@ -1,5 +1,5 @@
<template> <template>
<div class="flex md6 lg4"> <div class="flex details-deck">
<va-card id="preview" class="content-container"> <va-card id="preview" class="content-container">
<va-image contain :src="slotPreviewPath" :alt="`${this.itemDetails.description}`"> <va-image contain :src="slotPreviewPath" :alt="`${this.itemDetails.description}`">
<template #loader> <template #loader>
@ -12,7 +12,10 @@
</va-card> </va-card>
<va-card id="description" class="content-container"> <va-card id="description" class="content-container">
<va-card-title>Description</va-card-title> <va-card-title>Description</va-card-title>
<va-card-content>{{ itemDetails.description }}</va-card-content> <va-card-content>
<p class="item-description">{{ itemDetails.description }}</p>
<p class="item-description">{{ itemDetails.additional_info }}</p>
</va-card-content>
</va-card> </va-card>
<div class="flex md6 lg4"> <div class="flex md6 lg4">
<va-card id="details" class="content-container"> <va-card id="details" class="content-container">
@ -34,7 +37,7 @@
</va-card> </va-card>
</div> </div>
<va-card id="map" class="content-container"> <va-card id="map" class="content-container map-container">
<item-map-component v-if="detailsLoaded" :internal_id="this.itemDetails.internal_id" /> <item-map-component v-if="detailsLoaded" :internal_id="this.itemDetails.internal_id" />
<h3 v-else>map is loading</h3> <h3 v-else>map is loading</h3>
</va-card> </va-card>
@ -111,6 +114,25 @@ export default {
<style lang="css" scoped> <style lang="css" scoped>
.details-deck {
flex-wrap: wrap;
}
.content-container {
width: 45rem;
flex: 45rem;
margin: 1rem;
}
.item-description {
margin-top: 2rem;
margin-bottom: 2rem;
}
.map-container {
height: 28rem;
}
.va-table-responsive { .va-table-responsive {
overflow: auto; overflow: auto;
--va-card-display: flex; --va-card-display: flex;

8
frontend/src/components/Navbar.vue
Unescape View File

@ -5,15 +5,11 @@
<va-navbar-item class="top-icon"> <va-navbar-item class="top-icon">
<va-icon size="3rem" color="gray" name="public" @click="$router.push('/')" /> <va-icon size="3rem" color="gray" name="public" @click="$router.push('/')" />
</va-navbar-item> </va-navbar-item>
<slot></slot>
</template> </template>
<template #right> <template #right>
<va-navbar-item class="top-icon"> <va-navbar-item class="top-icon">
<va-icon <va-icon size="3rem" color="gray" name="account_box" @click="$router.push('/admin')" />
size="3rem"
color="gray"
name="account_box"
@click="$router.push('/admin')"
/>
</va-navbar-item> </va-navbar-item>
</template> </template>
</va-navbar> </va-navbar>

18
frontend/src/components/OverviewScreen.vue
Unescape View File

@ -5,9 +5,11 @@
@mapClick="$emit('mapClick', $event)" /> @mapClick="$emit('mapClick', $event)" />
</va-card> </va-card>
<va-card class="content-container"> <va-card class="content-container">
<va-data-table :items="items" :columns="columns" :hoverable="true" :clickable="true" :per-page="perPage" <va-data-table v-if="items.length" :items="items" :columns="columns" :hoverable="true" :clickable="true"
:current-page="currentPage" @row:click="(e) => $router.push(`/items/${e.item.id}`)" /> :per-page="perPage" :current-page="currentPage"
<va-pagination v-model="currentPage" :pages="pages" input /> @row:click="(e) => $router.push(`/items/${e.item.id}`)" />
<va-pagination v-if="items.length" v-model="currentPage" :pages="pages" input style="margin: 0.5rem auto" />
<h1 v-else class="no-items">No items found</h1>
</va-card> </va-card>
</div> </div>
</template> </template>
@ -60,7 +62,7 @@ export default {
</script> </script>
<style lang="css"> <style lang="css" scoped>
.overview { .overview {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@ -68,8 +70,12 @@ export default {
} }
.content-container { .content-container {
width: 40rem; width: 45rem;
height: 25rem; height: 28rem;
margin: 1rem; margin: 1rem;
} }
.no-items {
margin: 3rem;
}
</style> </style>

5
frontend/src/components/Sidebar.vue
Unescape View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<va-sidebar color="primary" text-color="white" gradient class="sidebar-proper" width="18rem"> <va-sidebar color="white" text-color="black" class="sidebar-proper" width="18rem">
<slot></slot> <slot></slot>
</va-sidebar> </va-sidebar>
</div> </div>
@ -17,5 +17,8 @@ export default {
<style lang="css"> <style lang="css">
.sidebar-proper { .sidebar-proper {
height: max(100vh, 100%); height: max(100vh, 100%);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.75);
clip-path: inset(0px -15px 0px 0px);
overflow-y: hidden;
} }
</style> </style>

5
frontend/src/views/FrontView.vue
Unescape View File

@ -1,11 +1,12 @@
<template> <template>
<navbar /> <navbar>
<va-input v-model="searchQuery"></va-input>
</navbar>
<div class="central-view"> <div class="central-view">
<sidebar> <sidebar>
<filter-panel @filter="applyFilters" /> <filter-panel @filter="applyFilters" />
</sidebar> </sidebar>
<div class="main-view"> <div class="main-view">
<va-input v-model="searchQuery"></va-input>
<overview-screen :items="filteredAndSearchedItems" :columns="filteredColumns" @mapClick="applyFilters" /> <overview-screen :items="filteredAndSearchedItems" :columns="filteredColumns" @mapClick="applyFilters" />
</div> </div>
</div> </div>

6
frontend/src/views/ItemView.vue
Unescape View File

@ -61,5 +61,9 @@ export default {
</script> </script>
<style lang="css"> <style lang="css" scoped>
.central-view {
display: flex;
flex-direction: row;
}
</style> </style>
Write Preview
Loading…
Cancel
Save