Force unfurled URLs into separate rows

WoltLab · Aug 22, 2023 · 62d94ae · 62d94ae
1 parent 3bb8ef9
commit 62d94ae
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 23 deletions.
diff --git a/com.woltlab.wcf/templates/unfurlUrl.tpl b/com.woltlab.wcf/templates/unfurlUrl.tpl
@@ -2,17 +2,19 @@
 	{if $object->isPlainUrl()}
 		<a {anchorAttributes url=$object->url isUgc=$enableUgc}>{$object->title}</a>
 	{else}
-		<div class="unfurlUrlCard{*
-			*}{if $object->hasCoverImage()} unfurlUrlCardCoverImage{/if}{*
-			*}{if $object->hasSquaredImage()} unfurlUrlCardSquaredImage{/if}{*
-		*}">
-			{if !$object->getImageUrl()|empty}
-				<img src="{$object->getImageUrl()}" height="{$object->height}" width="{$object->width}" class="unfurlUrlImage" alt="" loading="lazy">
-			{/if}
-			<div class="unfurlUrlInformation">
-				<a class="unfurlUrlTitle" {anchorAttributes url=$object->url appendClassname=false isUgc=$enableUgc}>{$object->title}</a>
-				<div class="unfurlUrlDescription">{$object->description}</div>
-				<div class="unfurlUrlHost">{$object->getHost()}</div>
+		<div class="unfurlUrlCardContainer">
+			<div class="unfurlUrlCard{*
+				*}{if $object->hasCoverImage()} unfurlUrlCardCoverImage{/if}{*
+				*}{if $object->hasSquaredImage()} unfurlUrlCardSquaredImage{/if}{*
+			*}">
+				{if !$object->getImageUrl()|empty}
+					<img src="{$object->getImageUrl()}" height="{$object->height}" width="{$object->width}" class="unfurlUrlImage" alt="" loading="lazy">
+				{/if}
+				<div class="unfurlUrlInformation">
+					<a class="unfurlUrlTitle" {anchorAttributes url=$object->url appendClassname=false isUgc=$enableUgc}>{$object->title}</a>
+					<div class="unfurlUrlDescription">{$object->description}</div>
+					<div class="unfurlUrlHost">{$object->getHost()}</div>
+				</div>
 			</div>
 		</div>
 	{/if}

diff --git a/wcfsetup/install/files/acp/templates/unfurlUrl.tpl b/wcfsetup/install/files/acp/templates/unfurlUrl.tpl
@@ -2,17 +2,19 @@
 	{if $object->isPlainUrl()}
 		<a {anchorAttributes url=$object->url isUgc=$enableUgc}>{$object->title}</a>
 	{else}
-		<div class="unfurlUrlCard{*
-			*}{if $object->hasCoverImage()} unfurlUrlCardCoverImage{/if}{*
-			*}{if $object->hasSquaredImage()} unfurlUrlCardSquaredImage{/if}{*
-		*}">
-			{if !$object->getImageUrl()|empty}
-				<img src="{$object->getImageUrl()}" height="{$object->height}" width="{$object->width}" class="unfurlUrlImage" alt="" loading="lazy">
-			{/if}
-			<div class="unfurlUrlInformation">
-				<a class="unfurlUrlTitle" {anchorAttributes url=$object->url appendClassname=false isUgc=$enableUgc}>{$object->title}</a>
-				<div class="unfurlUrlDescription">{$object->description}</div>
-				<div class="unfurlUrlHost">{$object->getHost()}</div>
+		<div class="unfurlUrlCardContainer">
+			<div class="unfurlUrlCard{*
+				*}{if $object->hasCoverImage()} unfurlUrlCardCoverImage{/if}{*
+				*}{if $object->hasSquaredImage()} unfurlUrlCardSquaredImage{/if}{*
+			*}">
+				{if !$object->getImageUrl()|empty}
+					<img src="{$object->getImageUrl()}" height="{$object->height}" width="{$object->width}" class="unfurlUrlImage" alt="" loading="lazy">
+				{/if}
+				<div class="unfurlUrlInformation">
+					<a class="unfurlUrlTitle" {anchorAttributes url=$object->url appendClassname=false isUgc=$enableUgc}>{$object->title}</a>
+					<div class="unfurlUrlDescription">{$object->description}</div>
+					<div class="unfurlUrlHost">{$object->getHost()}</div>
+				</div>
 			</div>
 		</div>
 	{/if}

diff --git a/wcfsetup/install/files/style/ui/unfurlUrl.scss b/wcfsetup/install/files/style/ui/unfurlUrl.scss
@@ -1,3 +1,7 @@
+.unfurlUrlCardContainer {
+	margin: 1em 0 0 0;
+}
+
 .unfurlUrlCard {
 	background-color: var(--wcfContentBackground);
 	border-radius: 3px;
@@ -6,7 +10,6 @@
 		0 1px 2px rgba(0, 0, 0, 0.24);
 	color: var(--wcfContentText);
 	display: inline-block;
-	margin: 1em 0 0 0;
 	max-width: 100%;
 	overflow: hidden;
 	position: relative;