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 27d940eb7463cec28397029ae3fcfd454c9047c7..8265a7bcac0707934d0b062506067947bf6f1101 100644 (file)
--- 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 (file)
index 0000000..a3c0d18
--- /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;
+    }
+}