From 1b37320185fc4214efae105be76f866ee396c3ec Mon Sep 17 00:00:00 2001
From: Marcel Werk <burntime@woltlab.com>
Date: Tue, 23 Aug 2016 20:56:43 +0200
Subject: [PATCH] Multiple style improvements for attachment lists

---
 .../install/files/style/ui/attachment.scss    | 58 +++++++++++++------
 1 file changed, 40 insertions(+), 18 deletions(-)

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;
+			}
 		}
 	}
 }
-- 
2.20.1