feature(3331): made board, overview, stack and search result cards width behave more dynamic

Signed-off-by: Luutzen Dijkstra <luutzen.dijkstra@gmail.com>

src/components/search/GlobalSearchResults.vue

@@ -4,20 +4,21 @@
 -->
 
 <template>
-	<div v-if="searchQuery!==''" class="global-search">
-		<h2>
-			<NcRichText :text="t('deck', 'Search for {searchQuery} in all boards')" :arguments="queryStringArgs" />
-			<div v-if="loading" class="icon-loading-small" />
-		</h2>
-		<NcActions>
-			<NcActionButton icon="icon-close" @click="$store.commit('setSearchQuery', '')" />
-		</NcActions>
+	<section v-if="searchQuery!==''" class="global-search">
+		<header class="search-header">
+			<h2>
+				<NcRichText
+					:text="t('deck', 'Search for {searchQuery} in all boards')"
+					:arguments="queryStringArgs" />
+				<span v-if="loading" class="icon-loading-small" />
+			</h2>
+			<NcActions>
+				<NcActionButton icon="icon-close" @click="$store.commit('setSearchQuery', '')" />
+			</NcActions>
+		</header>
 		<div class="search-wrapper">
-			<div v-if="loading || filteredResults.length > 0" class="search-results">
-				<CardItem v-for="card in filteredResults"
-					:id="card.id"
-					:key="card.id"
-					:standalone="true" />
+			<template v-if="loading || filteredResults.length > 0">
+				<CardItem v-for="card in filteredResults" :id="card.id" :key="card.id" :standalone="true" />
 				<Placeholder v-if="loading" />
 				<InfiniteLoading :identifier="searchQuery" @infinite="infiniteHandler">
 					<div slot="spinner" />
@@ -26,12 +27,12 @@
 						{{ t('deck', 'No results found') }}
 					</div>
 				</InfiniteLoading>
-			</div>
-			<div v-else>
+			</template>
+			<template v-else>
 				<p>{{ t('deck', 'No results found') }}</p>
-			</div>
+			</template>
 		</div>
-	</div>
+	</section>
 </template>
 
 <script>
@@ -159,7 +160,7 @@ export default {
 
 .global-search {
 	width: 100%;
-	padding: $board-spacing + $stack-spacing;
+	padding: $board-gap;
 	padding-bottom: 0;
 	overflow: hidden;
 	min-height: 35vh;
@@ -169,17 +170,24 @@ export default {
 	border-top: 1px solid var(--color-border);
 	z-index: 1010;
 	position: relative;
+	display: flex;
+	flex-direction: column;
 
 	.action-item.icon-close {
 		position: absolute;
 		top: 10px;
 		right: 10px;
 	}
-	.search-wrapper {
-		overflow: scroll;
-		height: 100%;
-		position: relative;
-		padding: 10px;
+
+	.search-header {
+		display: flex;
+		align-items: flex-start;
+		justify-content: space-between;
+	}
+
+	h2 {
+		margin: 0;
+		padding: var(--default-grid-baseline) var(--default-grid-baseline) $board-gap;
 	}
 
 	h2 > div {
@@ -189,23 +197,25 @@ export default {
 			margin-right: 20px;
 		}
 	}
+
 	h2:deep(span) {
 		background-color: var(--color-background-dark);
 		padding: 3px;
 		border-radius: var(--border-radius);
 	}
 
-	.search-results {
+	.search-wrapper {
+		overflow: auto;
+		height: 100%;
+		position: relative;
 		display: flex;
-		flex-wrap: wrap;
+		gap: $stack-gap;
 
-		& > div {
+		& > .drop-upload--card {
 			flex-grow: 0;
+			flex: 0 1 $card-max-width;
+			min-width: $card-min-width;
 		}
 	}
-	&:deep(.card) {
-		width: $stack-width;
-		margin-right: $stack-spacing;
-	}
 }
 </style>

src/components/search/Placeholder.vue

@@ -62,14 +62,13 @@ export default {
 $clickable-area: var(--default-clickable-area);
 
 .card--placeholder {
-	width: $stack-width;
-	margin-right: $stack-spacing;
+	min-width: $card-min-width;
+	max-width: $card-min-width;
 	padding: $card-padding;
 	transition: box-shadow 0.1s ease-in-out;
 	box-shadow: 0 0 2px 0 var(--color-box-shadow);
 	border-radius: var(--border-radius-large);
 	font-size: 100%;
-	margin-bottom: $card-spacing;
 	height: 100px;
 }