From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 5 Mar 2021 18:49:36 +0000 (+0100)
Subject: Improved the visuals for mobile devices
X-Git-Tag: 5.4.0_Alpha_1~146^2~17
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=b964be43026e10b274ab721291483d9a93e18224;p=GitHub%2FWoltLab%2FWCF.git

Improved the visuals for mobile devices
---

diff --git a/com.woltlab.wcf/templates/unfurlUrl.tpl b/com.woltlab.wcf/templates/unfurlUrl.tpl
index 80576d2a73..2d61160797 100644
--- 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 5ffcb94cdd..51b61a7a24 100644
--- 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;