From: Alexander Ebert <ebert@woltlab.com>
Date: Thu, 9 Jun 2022 16:25:11 +0000 (+0200)
Subject: New grid list element to replace `.containerList`
X-Git-Tag: 5.5.0_RC_2~25
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=a5cf048a31c4282984ac7d087ceaafb505d94e4d;p=GitHub%2FWoltLab%2FWCF.git

New grid list element to replace `.containerList`

See https://www.woltlab.com/community/thread/295789-%C3%BCberlappung-in-suchergebnissen-bei-langem-themen-titel/
---

diff --git a/com.woltlab.wcf/templates/searchResultList.tpl b/com.woltlab.wcf/templates/searchResultList.tpl
index 27d940eb74..8265a7bcac 100644
--- a/com.woltlab.wcf/templates/searchResultList.tpl
+++ b/com.woltlab.wcf/templates/searchResultList.tpl
@@ -1,44 +1,47 @@
 <div class="section sectionContainerList">
-	<ul class="containerList messageSearchResultList">
+	<ul class="gridList messageSearchResultList">
 		{foreach from=$objects item=message}
-			<li>
-				<div class="box48">
+			<li class="gridListItem gridListItemMessage">
+				<div class="gridListItemImage">
 					{assign var=_messageCustomIcon value=$customIcons[$message]}
 					{if $_messageCustomIcon === ''}
 						{if $message->getUserProfile()}
 							{user object=$message->getUserProfile() type='avatar48' ariaHidden='true' tabindex='-1'}
 						{else}
-							<p><span class="icon icon48 fa-file-o"></span></p>
+							<span class="icon icon48 fa-file-o"></span>
 						{/if}
 					{elseif $_messageCustomIcon|strpos:'fa-' === 0}
-						<p><span class="icon icon48 {$_messageCustomIcon}"></span></p>
+						<span class="icon icon48 {$_messageCustomIcon}"></span>
 					{else}
-						<p><img src="{$_messageCustomIcon}" style="width: 48px; height: 48px" alt=""></p>
+						<img src="{$_messageCustomIcon}" height="48" width="48" alt="">
 					{/if}
-					
-					<div>
-						<div class="containerHeadline">
-							<h3><a href="{$message->getLink($query)}">{$message->getSubject()}</a></h3>
-							
-							{if $message->getUserProfile() || $message->getTime() || $message->getContainerTitle()}
-								<ul class="inlineList dotSeparated">
-									{if $message->getUserProfile()}
-										<li>{user object=$message->getUserProfile()}</li>
-									{/if}
-									{if $message->getTime()}
-										<li><small>{@$message->getTime()|time}</small></li>
-									{/if}
-									{if $message->getContainerTitle()}
-										<li><small><a href="{$message->getContainerLink()}">{$message->getContainerTitle()}</a></small></li>
-									{/if}
-								</ul>
+				</div>
+				
+				<h3 class="gridListItemTitle">
+					<a href="{$message->getLink($query)}">{$message->getSubject()}</a>
+				</h3>
+
+				{hascontent}
+				<div class="gridListItemMeta">
+					<ul class="inlineList dotSeparated">
+						{content}
+							{if $message->getUserProfile()}
+								<li>{user object=$message->getUserProfile()}</li>
+							{/if}
+							{if $message->getTime()}
+								<li><small>{@$message->getTime()|time}</small></li>
+							{/if}
+							{if $message->getContainerTitle()}
+								<li><small><a href="{$message->getContainerLink()}">{$message->getContainerTitle()}</a></small></li>
 							{/if}
-							<small class="containerContentType">{lang}wcf.search.object.{@$message->getObjectTypeName()}{/lang}</small>
-						</div>
-						
-						<div class="containerContent">{@$message->getFormattedMessage()}</div>
-					</div>
+						{/content}
+					</ul>
 				</div>
+				{/hascontent}
+
+				<small class="gridListItemType">{lang}wcf.search.object.{@$message->getObjectTypeName()}{/lang}</small>
+				
+				<div class="gridListItemContent">{@$message->getFormattedMessage()}</div>
 			</li>
 		{/foreach}
 	</ul>
diff --git a/wcfsetup/install/files/style/layout/gridList.scss b/wcfsetup/install/files/style/layout/gridList.scss
new file mode 100644
index 0000000000..a3c0d1842d
--- /dev/null
+++ b/wcfsetup/install/files/style/layout/gridList.scss
@@ -0,0 +1,125 @@
+.gridList {
+    display: grid;
+    grid-auto-flow: row;
+    row-gap: 20px;
+}
+
+.gridListItem {
+    --padding: 10px;
+
+    border-radius: 5px;
+    display: grid;
+    padding: var(--padding);
+    position: relative;
+
+    &:not(:first-child)::before {
+        border-top: 1px solid $wcfContentBorderInner;
+        content: "";
+        left: 0;
+        pointer-events: none;
+        position: absolute;
+        right: 0;
+        top: -11px;
+    }
+}
+
+html:not(.touch) .gridListItem:hover {
+    background-color: $wcfTabularBoxBackgroundActive;
+}
+
+.gridListItemMessage {
+    column-gap: 10px;
+    grid-template-areas:
+        "image title   type"
+        "image meta    meta"
+        "image content content";
+    grid-template-columns: 48px auto minmax(0, min-content);
+}
+
+.gridListItemImage {
+    grid-area: image;
+}
+
+.gridListItemTitle {
+    grid-area: title;
+}
+
+.gridListItemMeta {
+    color: $wcfContentDimmedText;
+    grid-area: meta;
+}
+
+.gridListItemType {
+    color: $wcfContentDimmedText;
+    grid-area: type;
+    justify-self: end;
+}
+
+.gridListItemContent {
+    grid-area: content;
+    margin-top: 10px;
+}
+
+@include screen-xs {
+    .gridListItem {
+        padding: var(--padding) 0;
+    }
+
+    .gridListItemMessage {
+        grid-template-areas:
+            "image   title"
+            "image   meta"
+            "content content";
+        grid-template-columns: 32px auto;
+    }
+
+    .gridListItemImage {
+        position: relative;
+        top: 4px;
+
+        .userAvatarImage {
+            height: 32px;
+            width: 32px;
+        }
+
+        .icon {
+            font-size: 28px;
+            height: 32px;
+            line-height: 32px;
+            width: 32px;
+            vertical-align: -5px;
+        }
+    }
+
+    .gridListItemMeta a {
+        color: inherit;
+        pointer-events: none;
+    }
+
+    .gridListItemType {
+        display: none;
+    }
+}
+
+@include screen-sm-down {
+    .gridListItemTitle {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+}
+
+@include screen-sm-up {
+    .gridListItemTitle {
+        @include wcfFontHeadline;
+    }
+}
+
+@include screen-md-up {
+    .gridListItemTitle {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+}