From 631d152c795f12bce4b784be7ed028342ca12b20 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Fri, 8 May 2020 18:27:59 -0400
Subject: [PATCH] Various (#543)

* Fix default size of cards

* Fix layout picker not auto closing

* Fix cards getting huge when theres less than 1 row
---
 src/layouts/cards/cards.vue                | 27 +++++++++++++++++-----
 src/modules/files/routes/browse/browse.vue |  2 +-
 src/modules/users/routes/browse/browse.vue |  2 +-
 3 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/src/layouts/cards/cards.vue b/src/layouts/cards/cards.vue
index de86116b57..b6db4a2840 100644
--- a/src/layouts/cards/cards.vue
+++ b/src/layouts/cards/cards.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="layout-cards" :style="{ '--size': size * 40 + 'px' }">
+	<div class="layout-cards" :style="{ '--size': size * 40 + 'px' }" ref="layoutElement">
 		<portal to="drawer">
 			<filter-drawer-detail v-model="_filters" :collection="collection" :loading="loading" />
 
@@ -64,7 +64,7 @@
 				:sort.sync="sort"
 			/>
 
-			<div class="grid">
+			<div class="grid" :class="{ 'single-row': isSingleRow }">
 				<template v-if="loading">
 					<card v-for="n in limit" :key="`loader-${n}`" loading />
 				</template>
@@ -150,6 +150,7 @@ import useProjectsStore from '@/stores/projects';
 import CardsHeader from './components/header.vue';
 import i18n from '@/lang';
 import adjustFieldsForDisplays from '@/utils/adjust-fields-for-displays';
+import useElementSize from '@/composables/use-element-size';
 
 type Item = Record<string, any>;
 
@@ -213,6 +214,7 @@ export default defineComponent({
 		},
 	},
 	setup(props, { emit }) {
+		const layoutElement = ref<HTMLElement>(null);
 		const mainElement = inject('main-element', ref<Element>(null));
 		const projectsStore = useProjectsStore();
 
@@ -262,6 +264,14 @@ export default defineComponent({
 			});
 		});
 
+		const { width } = useElementSize(layoutElement);
+
+		const isSingleRow = computed(() => {
+			const cardsWidth =
+				items.value.length * (size.value * 40) + (items.value.length - 1) * 24;
+			return cardsWidth <= width.value;
+		});
+
 		return {
 			_selection,
 			items,
@@ -289,6 +299,9 @@ export default defineComponent({
 			info,
 			clearFilters,
 			showingCount,
+			isSingleRow,
+			width,
+			layoutElement,
 		};
 
 		function toPage(newPage: number) {
@@ -305,7 +318,7 @@ export default defineComponent({
 		}
 
 		function useViewOptions() {
-			const size = createViewOption('size', 120);
+			const size = createViewOption<number>('size', 2);
 			const icon = createViewOption('icon', 'box');
 			const title = createViewOption<string>('title', null);
 			const subtitle = createViewOption<string>('subtitle', null);
@@ -413,10 +426,12 @@ export default defineComponent({
 
 .grid {
 	display: grid;
-	grid-gap: 32px 24px;
 	grid-template-columns: repeat(auto-fit, minmax(var(--size), 1fr));
-	justify-content: stretch;
-	justify-items: stretch;
+	gap: 32px 24px;
+
+	&.single-row {
+		grid-template-columns: repeat(auto-fit, var(--size));
+	}
 }
 
 .v-info {
diff --git a/src/modules/files/routes/browse/browse.vue b/src/modules/files/routes/browse/browse.vue
index c92133a6b7..b17a932f36 100644
--- a/src/modules/files/routes/browse/browse.vue
+++ b/src/modules/files/routes/browse/browse.vue
@@ -7,7 +7,7 @@
 		</template>
 
 		<template #drawer>
-			<layout-drawer-detail v-model="viewType" />
+			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
 			<portal-target name="drawer" />
 		</template>
 
diff --git a/src/modules/users/routes/browse/browse.vue b/src/modules/users/routes/browse/browse.vue
index 149e1a5be6..40fc7d0eea 100644
--- a/src/modules/users/routes/browse/browse.vue
+++ b/src/modules/users/routes/browse/browse.vue
@@ -7,7 +7,7 @@
 		</template>
 
 		<template #drawer>
-			<layout-drawer-detail v-model="viewType" />
+			<layout-drawer-detail @input="viewType = $event" :value="viewType" />
 			<portal-target name="drawer" />
 		</template>