Merge remote-tracking branch 'origin/main' into develop

CHANGELOG.md

@@ -5,6 +5,11 @@
 - New admin screen in (additional settings) to configure (mostly hide) providers globally or per user group
 - Integrated application with Nextcloud's Transifex
 
+## [v1.2.2](https://github.com/callmemagnus/nextcloud-searchpage/compare/v1.2.1...v1.2.2)
+
+- Fix preview rendering of result
+- Updated translation from Transifex - existing translations may disappear :-(
+
 ## [v1.2.1](https://github.com/callmemagnus/nextcloud-searchpage/compare/v1.2.0...v1.2.1)
 
 - Preparing for Transifex integration

README.md

@@ -27,6 +27,9 @@ Known issues with other applications:
 - fulltextsearch -- does not seem to AND the query terms, OR is usually less relevant
 - news -- does not provide a direct link to a feed item.
 
+- [Changelog](https://raw.githubusercontent.com/callmemagnus/nextcloud-searchpage/main/CHANGELOG.md)
+- [Help translate this application](https://app.transifex.com/nextcloud/nextcloud/thesearchpage/)
+
 ## Philosophy of this application
 
 This application only uses official APIs provided by Nextcloud.

src/components/Result.svelte

@@ -10,37 +10,59 @@
 
 	let imageUrl: string | null;
 	let showIcon = false;
-	let imageLoadError = false;
 
-	$: iconIsClass = !/^\//.test(result.icon);
+	let iconIsClass = !/^\//.test(result.icon);
+	let hasThumbnail = result.thumbnailUrl?.length > 0;
+
+	let imageSteps: 'thumbnail' | 'icon' | 'class-icon' = (function () {
+		if (hasThumbnail) {
+			return 'thumbnail';
+		}
+		if (iconIsClass) {
+			return 'class-icon';
+		}
+		return 'icon';
+	})();
+
 	$: {
-		if (!imageLoadError) {
-			if (!iconIsClass) {
-				imageUrl = result.icon;
-			} else if (result.thumbnailUrl) {
+		switch (imageSteps) {
+			case 'thumbnail':
 				imageUrl = result.thumbnailUrl;
-			} else {
+				break;
+			case 'icon':
+				imageUrl = result.icon;
+				break;
+			default:
+			case 'class-icon':
 				showIcon = true;
-			}
-		} else {
-			showIcon = true;
+				break;
 		}
 	}
 
 	function onError() {
-		imageLoadError = true;
+		switch (imageSteps) {
+			case 'thumbnail':
+				imageSteps = iconIsClass ? 'class-icon' : 'icon';
+				break;
+			case 'icon':
+				imageSteps = 'class-icon';
+				break;
+			case 'class-icon':
+			default:
+				imageSteps = 'class-icon';
+		}
 	}
 </script>
 
-<div class="mwb-result">
+<a href={result.resourceUrl} class="mwb-result">
 	<div class="mwb-result__image">
 		{#if showIcon}
 			<div class="{result.icon} mwb-result__icon" />
 		{:else}
 			<img src={imageUrl} alt="" on:error={onError} />
 		{/if}
 	</div>
-	<a href={result.resourceUrl}>
+	<div class="mwb-text">
 		<h3 class="mwb-ellipsis">
 			<BoldTerms original={result.title} terms={$terms} />
 		</h3>
@@ -49,26 +71,30 @@
 				<BoldTerms original={result.subline} terms={$terms} />
 			</p>
 		{/if}
-	</a>
-</div>
+	</div>
+</a>
 
-<style>
+<style lang="less">
 	.mwb-result {
-		@apply flex w-full items-start;
+		@apply flex w-full items-start cursor-pointer;
+
+		&:hover {
+			@apply bg-slate-100;
+		}
 	}
 
 	.mwb-result__image {
-		@apply w-8 h-8 mr-3 flex-grow-0 flex-shrink-0;
+		@apply w-8 h-8 ml-1 mr-3 flex-grow-0 flex-shrink-0;
+
+		img {
+			@apply mt-2 w-full;
+		}
 	}
 
 	.mwb-result__icon {
 		@apply h-full;
 	}
 
-	img {
-		@apply w-full;
-	}
-
 	h3 {
 		@apply mt-1 mb-0;
 	}
@@ -77,7 +103,7 @@
 		@apply mt-1 text-sm;
 	}
 
-	a {
+	.mwb-text {
 		@apply block overflow-hidden;
 		min-height: 2rem;
 	}