Improved the visuals for mobile devices

diff --git a/com.woltlab.wcf/templates/unfurlUrl.tpl b/com.woltlab.wcf/templates/unfurlUrl.tpl
index 80576d2a737df460d4079467f2a52fda3b5911c7..2d61160797c167b6ffab6236b1dcc931422d2334 100644 (file)
--- a/com.woltlab.wcf/templates/unfurlUrl.tpl
+++ b/com.woltlab.wcf/templates/unfurlUrl.tpl
@@ -5,13 +5,13 @@
                {if $object->hasSquaredImage()}unfurlUrlCardSquaredImage{/if}
        ">
                
-               <div{if !$object->getImageUrl()|empty} style="background-image: url('{$object->getImageUrl()}')"{/if}></div>
+               <div class="unfurlUrlImage"{if !$object->getImageUrl()|empty} style="background-image: url('{$object->getImageUrl()}')"{/if}></div>
                <div class="unfurlUrlInformation">
                        <div class="unfurlUrlTitle">{$object->title}</div>
                        <div class="unfurlUrlDescription">{$object->description}</div>
                        <div class="unfurlUrlHost">{$object->getHost()}</div>
                </div>
-               <a class="unfurlUrlLink" {anchorAttributes url=$object->url appendClassname=false isUgc=true}></a>
+               <a class="unfurlUrlLinkShadow" {anchorAttributes url=$object->url appendClassname=false isUgc=true}></a>
        </div>
 {else}
        <a {anchorAttributes url=$object->url isUgc=true}>{$object->url}</a>

diff --git a/wcfsetup/install/files/style/ui/unfurlUrl.scss b/wcfsetup/install/files/style/ui/unfurlUrl.scss
index 5ffcb94cdd4b91df42529dffc5106359b596f06d..51b61a7a2402c5555d296de4cb01af653e0393c5 100644 (file)
--- a/wcfsetup/install/files/style/ui/unfurlUrl.scss
+++ b/wcfsetup/install/files/style/ui/unfurlUrl.scss
@@ -11,11 +11,8 @@
        width: 600px;
 
        &.unfurlUrlCardCoverImage {
-               > :first-child:not(:last-child) {
+               .unfurlUrlImage {
                        min-height: 150px;
-                       background-position: center;
-                       background-repeat: no-repeat;
-                       background-size: cover;
                        position: relative;
                }
        }
@@ -23,31 +20,45 @@
        &.unfurlUrlCardSquaredImage {
                display: flex;
 
-               > :first-child:not(:last-child) {
+               .unfurlUrlImage {
+                       border-radius: 3px;
                        flex: 0 0 auto;
-                       height: 128px !important;
-                       width: 128px !important;
+                       height: 128px;
                        margin: 10px;
-                       background-position: center;
-                       background-repeat: no-repeat;
-                       background-size: cover;
-                       position: relative;
+                       width: 128px;
+
+                       @include screen-sm {
+                               height: 64px;
+                               width: 64px;
+                       }
+
+                       @include screen-xs {
+                               height: 24px;
+                               position: absolute;
+                               width: 24px;
+                       }
                }
 
-               > :last-child {
-                       flex: 1 1 auto;
+               .unfurlUrlInformation {
+                       flex: 1 auto;
                        overflow: hidden;
                        padding-left: 10px;
                }
 
-               @include screen-sm-down {
-                       > :first-child:not(:last-child) {
-                               display: none;
+               @include screen-xs {
+                       .unfurlUrlTitle {
+                               padding-left: 30px;
                        }
                }
        }
 }
 
+.unfurlUrlImage {
+       background-position: center;
+       background-repeat: no-repeat;
+       background-size: cover;
+}
+
 .unfurlUrlInformation {
        position: relative;
        padding: 10px 10px 25px 10px;
@@ -65,7 +76,7 @@
 
 .unfurlUrlDescription {
        color: $wcfContentDimmedText;
-       margin-top: 10px;
+       margin-top: 5px;
 }
 
 .unfurlUrlHost {
@@ -82,7 +93,7 @@
        }
 }
 
-.unfurlUrlLink {
+.unfurlUrlLinkShadow {
        bottom: 0;
        left: 0;
        position: absolute;