MINOR More generic CSS styles for .cms-file-info: Apply to form.small parent, fixed related UploadField spacing issues

admin/css/screen.css

@@ -451,9 +451,6 @@ body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_mai
 .htmleditorfield-mediaform .ss-htmleditorfield-file .overview .title { display: inline-block; vertical-align: middle; background: #fff; border: 1px solid #b3b3b3; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px; margin-left: 16px; padding: 4px; }
 .htmleditorfield-mediaform .ss-htmleditorfield-file .overview .action-delete { display: inline-block; }
 .htmleditorfield-mediaform .ss-htmleditorfield-file .details { padding: 16px; }
-.htmleditorfield-mediaform .cms-file-info-data { max-width: 350px; }
-.htmleditorfield-mediaform .cms-file-info-data .field label { width: 104px; }
-.htmleditorfield-mediaform .cms-file-info-data .field .middleColumn { margin-left: 112px; }
 
 /** -------------------------------------------- Step labels -------------------------------------------- */
 .step-label > * { display: inline-block; vertical-align: top; }
@@ -469,6 +466,13 @@ body.cms-dialog { overflow: auto; background: url("../images/textures/bg_cms_mai
 .cms-file-info .cms-file-info-data .field { margin-bottom: 0; padding-bottom: 8px; border: none; box-shadow: none; }
 .cms-file-info .cms-file-info-data .field label, .cms-file-info .cms-file-info-data .field span { padding: 0; }
 
+form.small .cms-file-info-preview { width: 112px; }
+form.small .cms-file-info-preview img { max-width: 112px; }
+form.small .cms-file-info-data { max-width: 350px; }
+form.small .cms-file-info-data .field { padding-bottom: 0; }
+form.small .cms-file-info-data .field label { width: 112px; }
+form.small .cms-file-info-data .field .middleColumn { margin-left: 120px; }
+
 /** This file defines the jstree base styling (see http://jstree.com), as well as any customizations (see bottom of file).  The styles are usually added through jstree.js on DOM load,  but we need it earlier in order to correctly display the uninitialized tree. */
 .cms .jstree ul, .TreeDropdownField .treedropdownfield-panel .jstree ul { display: block; margin: 0; padding: 0; background: none; list-style-type: none; }
 .cms .jstree li, .TreeDropdownField .treedropdownfield-panel .jstree li { display: block; margin: 0; padding: 0; list-style-type: none; display: block; min-height: 18px; line-height: 18px; white-space: nowrap; margin-left: 18px; min-width: 18px; }

admin/scss/_style.scss

@@ -1192,21 +1192,6 @@ body.cms-dialog {
 			padding: $grid-x*2;
 		}
 	}
-
-	.cms-file-info-data {
-		// Ensure it fits beside the image preview
-		max-width: 350px;
-
-		// Reduced label widths to fit everything in smaller space
-		.field {
-			label {
-				width: $grid-x*13;
-			}
-			.middleColumn {
-				margin-left: $grid-x*14;
-			}
-		}
-	}
 	
 }
 
@@ -1283,4 +1268,31 @@ body.cms-dialog {
 			}
 		}
 	}
+}
+
+form.small {
+	.cms-file-info-preview {
+		width: $grid-x*14;
+
+		img {
+			max-width: $grid-x*14;
+		}
+	}
+
+	.cms-file-info-data {
+		// Ensure it fits beside the image preview
+		max-width: 350px;
+
+		// Reduced label widths to fit everything in smaller space
+		.field {
+			padding-bottom: 0;
+
+			label {
+				width: $grid-x*14;
+			}
+			.middleColumn {
+				margin-left: $grid-x*15;
+			}
+		}
+	}
 }

css/AssetUploadField.css

@@ -30,7 +30,7 @@
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel { position: absolute; top: 7px; right: 7px; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
 .ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; }
-.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
+.ss-assetuploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { margin: 16px; width: 100%; }
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-info { float: left; margin: 19px 0 0; }
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-fromcomputer { position: relative; overflow: hidden; display: block; margin: 0 10px 0 0; }
 .ss-assetuploadfield .ss-uploadfield-addfile .ss-uploadfield-item-uploador { float: left; font-weight: bold; font-size: 22px; padding: 0 20px; line-height: 70px; display: none; }

css/UploadField.css

@@ -28,11 +28,9 @@
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { position: absolute; top: 10px; right: 0; }
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-cancel button, .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start button { display: block; overflow: hidden; text-indent: -9999px; padding: 0; margin: 0; border: 0; width: 16px; height: 16px; cursor: pointer; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
 .ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-start { right: 20px; }
-.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; margin-top: 8px; }
+.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform { /* don't use display none, for it will break jQuery('iframe').contents().height() */ height: 0; overflow: hidden; clear: both; }
-.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { width: 100%; }
+.ss-uploadfield .ss-uploadfield-files .ss-uploadfield-item-editform iframe { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(201, 205, 206, 0.8); width: 100%; }
 .ss-uploadfield .ss-uploadfield-addfile.borderTop { border-top: 1px solid #b3b3b3; }
 
-body.ss-uploadfield-edit-iframe { padding: 16px 16px; }
-
 .ss-upload .clear { clear: both; }
 .ss-upload .ss-uploadfield-fromcomputer input { /* since we can't really style the file input, we use this hack to make it as big as the button and hide it */ position: absolute; top: 0; right: 0; margin: 0; border: solid #000; border-width: 0 0 100px 200px; opacity: 0; filter: alpha(opacity=0); -o-transform: translate(250px, -50px) scale(1); -moz-transform: translate(-300px, 0) scale(4); direction: ltr; cursor: pointer; }

forms/UploadField.php

@@ -755,6 +755,7 @@ class UploadField_ItemHandler extends RequestHandler {
 			$validator
 		);
 		$form->loadDataFrom($file);
+		$form->addExtraClass('small');
 		
 		return $form;
 	}

scss/AssetUploadField.scss

@@ -160,11 +160,14 @@
 			height: 0;
 			overflow: hidden;
 			clear: both;
+
 			iframe {
+				margin: $grid-x*2;
 				width: 100%;
 			}
 		}
 	}
+
 	.ss-uploadfield-addfile {
 	
 		.ss-uploadfield-item-info {

scss/UploadField.scss

@@ -156,8 +156,11 @@
 			height: 0;
 			overflow: hidden;
 			clear: both;
-			margin-top: $grid-y;
+			
 			iframe {
+				margin-top: $grid-y;
+				padding-top: $grid-y;
+				border-top: 1px solid $color-light-separator;
 				width: 100%;
 			}
 		}		
@@ -169,10 +172,6 @@
 	}
 }
 
-body.ss-uploadfield-edit-iframe {
-	padding: $grid-y*2 $grid-x*2;
-}
-
 .ss-upload {
 	.clear {
 		clear: both;