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 09c3b8350aee5127aec5ef8e09fc265a428c4c6d..2fc95e16ff4bc1d7bfb5ca12574500333974b180 100644 (file)
--- 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 30aa0a1101e1e31760787e3110817eff6ab9402a..1ff1bad82b6a09358c11f9c8813bd5982ca15473 100644 (file)
--- 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;