From: Marcel Werk <burntime@woltlab.com>
Date: Tue, 23 Aug 2016 18:56:43 +0000 (+0200)
Subject: Multiple style improvements for attachment lists
X-Git-Tag: 3.0.0_Beta_1~550
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=1b37320185fc4214efae105be76f866ee396c3ec;p=GitHub%2FWoltLab%2FWCF.git

Multiple style improvements for attachment lists
---

diff --git a/wcfsetup/install/files/style/ui/attachment.scss b/wcfsetup/install/files/style/ui/attachment.scss
index a01f7d37da..5a99cd28e1 100644
--- a/wcfsetup/install/files/style/ui/attachment.scss
+++ b/wcfsetup/install/files/style/ui/attachment.scss
@@ -8,22 +8,29 @@
 /* attachment in messages */
 .attachmentThumbnailList > ul {
 	margin-bottom: -15px;
-	margin-right: -15px;
+	
+	@include screen-sm-up {
+		margin-right: -10px;
+	}
 }
 
 .attachmentThumbnail {
 	box-shadow: 0 0 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
 	margin-bottom: 15px !important;
-	margin-right: 15px !important;
 	position: relative;
 	
+	@include screen-sm-up {
+		margin-right: 10px !important;
+	}
+	
 	@include screen-xs {
+		margin-right: 0 !important;
 		width: 100%;
 	}
 	
 	.attachmentThumbnailContainer {
 		position: relative;
-		padding: 5px 5px 0;
+		padding: 2px 2px 0;
 	}
 	
 	.attachmentThumbnailImage {
@@ -111,13 +118,12 @@
 	> .formAttachmentList {
 		display: flex;
 		flex-wrap: wrap;
-		margin-right: -20px;
+		margin-left: 0 !important;
 		
-		> .box64 {
+		> li {
 			display: flex !important; /* jquery-ui sortable sometimes sets display:block */
-			flex: 0 0 calc(50% - 20px);
-			max-width: calc(50% - 20px); /* IE fix */
-			margin-right: 20px;
+			flex: 0 0 100%;
+			margin-bottom: 20px;
 			
 			> .attachmentTinyThumbnail {
 				max-height: 64px;
@@ -126,20 +132,36 @@
 		}
 	}
 	
-	> dl > dd > div {
-		align-items: center;
-		display: flex;
-		
-		> .button {
-			flex: 0 0 auto;
+	@include screen-md-up {
+		> .formAttachmentList {
+			margin-right: -20px;
 			
-			&:not(:first-child) {
-				margin-left: 10px;
+			> li {
+				flex: 0 0 calc(50% - 20px);
+				max-width: calc(50% - 20px); /* IE fix */
+				margin-right: 20px;
 			}
 		}
+	}
+	
+	> dl {
+		margin-top: 0 !important;
 		
-		& + small {
-			margin-top: 10px !important;
+		> dd > div {
+			align-items: center;
+			display: flex;
+			
+			> .button {
+				flex: 0 0 auto;
+				
+				&:not(:first-child) {
+					margin-left: 10px;
+				}
+			}
+			
+			& + small {
+				margin-top: 10px !important;
+			}
 		}
 	}
 }