From: Marcel Werk <burntime@woltlab.com>
Date: Tue, 7 Jan 2025 13:03:01 +0000 (+0100)
Subject: Slightly improve mobile version of the search results
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=a982d6f76bd50b1aeddf24c63b48ecaf3235ff29;p=GitHub%2FWoltLab%2FWCF.git

Slightly improve mobile version of the search results
---

diff --git a/com.woltlab.wcf/templates/searchResultList.tpl b/com.woltlab.wcf/templates/searchResultList.tpl
index 09c3b8350a..2fc95e16ff 100644
--- a/com.woltlab.wcf/templates/searchResultList.tpl
+++ b/com.woltlab.wcf/templates/searchResultList.tpl
@@ -4,26 +4,16 @@
 			<li class="gridListItem gridListItemMessage">
 				<div class="gridListItemImage">
 					{if $customIcons[$message->getObjectTypeName()]|isset}
-						<div class="gridListItemLargeIcon">
-							{icon size=48 name=$customIcons[$message->getObjectTypeName()]}
-						</div>
-						<div class="gridListItemSmallIcon">
-							{icon size=32 name=$customIcons[$message->getObjectTypeName()]}
-						</div>
+						{icon size=48 name=$customIcons[$message->getObjectTypeName()]}
 					{elseif $message->getUserProfile()}
 						{user object=$message->getUserProfile() type='avatar48' ariaHidden='true' tabindex='-1'}
 					{else}
-						<div class="gridListItemLargeIcon">
-							{icon size=48 name='file'}
-						</div>
-						<div class="gridListItemSmallIcon">
-							{icon size=32 name='file'}
-						</div>
+						{icon size=48 name='file'}
 					{/if}
 				</div>
 				
 				<h3 class="gridListItemTitle">
-					<a href="{$message->getLink($query)}">{$message->getSubject()}</a>
+					<a href="{$message->getLink($query)}" class="gridListItemLink">{$message->getSubject()}</a>
 				</h3>
 
 				{hascontent}
diff --git a/wcfsetup/install/files/style/layout/gridList.scss b/wcfsetup/install/files/style/layout/gridList.scss
index 30aa0a1101..1ff1bad82b 100644
--- a/wcfsetup/install/files/style/layout/gridList.scss
+++ b/wcfsetup/install/files/style/layout/gridList.scss
@@ -42,17 +42,26 @@ html:not(.touch) .gridListItem:hover {
 
 .gridListItemTitle {
 	grid-area: title;
+	@include wcfFontHeadline;
 }
 
 .gridListItemMeta {
 	color: var(--wcfContentDimmedText);
 	grid-area: meta;
+
+	a,
+	a:hover,
+	a:focus {
+		color: inherit;
+		pointer-events: none;
+	}
 }
 
 .gridListItemType {
 	color: var(--wcfContentDimmedText);
 	grid-area: type;
 	justify-self: end;
+	white-space: nowrap;
 }
 
 .gridListItemContent {
@@ -60,6 +69,21 @@ html:not(.touch) .gridListItem:hover {
 	margin-top: 10px;
 }
 
+.gridListItemLink {
+	color: inherit;
+
+	&::before {
+		content: "";
+		inset: 0;
+		position: absolute;
+	}
+
+	&:hover,
+	&:focus {
+		color: inherit;
+	}
+}
+
 @include screen-xs {
 	.gridListItem {
 		padding: var(--padding) 0;
@@ -70,26 +94,7 @@ html:not(.touch) .gridListItem:hover {
 			"image   title"
 			"image   meta"
 			"content content";
-		grid-template-columns: 32px auto;
-	}
-
-	.gridListItemImage {
-		position: relative;
-		top: 4px;
-
-		.userAvatarImage {
-			height: 32px;
-			width: 32px;
-		}
-	}
-
-	.gridListItemLargeIcon {
-		display: none;
-	}
-
-	.gridListItemMeta a {
-		color: inherit;
-		pointer-events: none;
+		grid-template-columns: 48px auto;
 	}
 
 	.gridListItemType {
@@ -97,12 +102,6 @@ html:not(.touch) .gridListItem:hover {
 	}
 }
 
-@include screen-sm-up {
-	.gridListItemSmallIcon {
-		display: none;
-	}
-}
-
 @include screen-sm-down {
 	.gridListItemTitle {
 		display: -webkit-box;
@@ -112,12 +111,6 @@ html:not(.touch) .gridListItem:hover {
 	}
 }
 
-@include screen-sm-up {
-	.gridListItemTitle {
-		@include wcfFontHeadline;
-	}
-}
-
 @include screen-md-up {
 	.gridListItemTitle {
 		overflow: hidden;