msc: style adjustments

frontend/src/App.vue

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

frontend/src/components/FilterPanel.vue

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

frontend/src/components/ItemDetails.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex md6 lg4">
+    <div class="flex details-deck">
         <va-card id="preview" class="content-container">
             <va-image contain :src="slotPreviewPath" :alt="`${this.itemDetails.description}`">
                 <template #loader>
@@ -12,7 +12,10 @@
         </va-card>
         <va-card id="description" class="content-container">
             <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>
         <div class="flex md6 lg4">
             <va-card id="details" class="content-container">
@@ -34,7 +37,7 @@
             </va-card>
         </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" />
             <h3 v-else>map is loading</h3>
         </va-card>
@@ -111,6 +114,25 @@ export default {
 
 
 <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 {
     overflow: auto;
     --va-card-display: flex;

frontend/src/components/Navbar.vue

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

frontend/src/components/OverviewScreen.vue

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

frontend/src/components/Sidebar.vue

@@ -1,6 +1,6 @@
 <template>
     <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>
         </va-sidebar>
     </div>
@@ -17,5 +17,8 @@ export default {
 <style lang="css">
 .sidebar-proper {
     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>

frontend/src/views/FrontView.vue

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

frontend/src/views/ItemView.vue

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