Tweaks to style of file attachments

pillar/web/utils/forms.py

@@ -60,6 +60,13 @@ class CustomFileSelectWidget(HiddenInput):
                 if file_item.content_type.split('/')[0] == 'image':
                     button.append(u'<li class="dimensions">{0}x{1}</li>'.format(
                         file_item.width, file_item.height))
+                button.append(u'</ul>')
+                button.append(u'<ul class="form-upload-file-actions">')
+                # Download button for original file
+                button.append(u'<li class="original">'
+                              u'<a href="{}" class="file_original"> '
+                              u'<i class="pi-download"></i>Original</a></li>'
+                              .format(file_item.link))
                 # Delete button
                 button.append(u'<li class="delete">'
                               u'<a href="#" class="file_delete" '
@@ -67,11 +74,6 @@ class CustomFileSelectWidget(HiddenInput):
                               u'data-file_id="{file_id}"> '
                               u'<i class="pi-trash"></i> Delete</a></li>'.format(
                     field_name=field.name, file_id=field.data))
-                # Download button for original file
-                button.append(u'<li class="original">'
-                              u'<a href="{}" class="file_original"> '
-                              u'<i class="pi-download"></i>Original</a></li>'
-                              .format(file_item.link))
                 button.append(u'</ul>')
                 button.append(u'</div>')
 

src/styles/_project.sass

@@ -191,8 +191,6 @@
 	z-index: $z-index-base + 3
 	position: fixed
 	top: $project_header-height
-	left: 0
-	right: 0
 	height: $project_header-height
 	min-height: $project_header-height
 	width: auto
@@ -2174,7 +2172,6 @@ section.node-children
 		.form-group
 			position: relative
 			margin: 0 auto 30px auto
-			font-family: $font-body
 
 			input, textarea, select
 				+input-generic
@@ -2357,6 +2354,12 @@ section.node-children
 						pointer-events: none
 						cursor: progress
 
+			.fieldlist
+				li.fieldlist-item
+					div[class$="file"]
+						width: 75%
+						margin: 0
+
 		.files-header
 			width: 100%
 
@@ -2378,6 +2381,7 @@ section.node-children
 			div[class*="is_tileable"]
 				padding: 10px 15px
 				width: 25%
+				float: right
 				border-left: thin solid $color-background
 
 			div[class*="map_type"]
@@ -2392,7 +2396,9 @@ section.node-children
 					padding-left: 0
 
 			div[class$="file"]
-				flex: 1
+				float: left
+				width: auto
+
 				label
 					display: none
 

src/styles/base.sass

@@ -825,8 +825,10 @@ label, label.control-label
 	.preview-thumbnail
 		width: 50px
 		height: 50px
+		min-width: 50px
+		min-height: 50px
 		margin-right: 10px
-		margin-bottom: 10px
+		margin-top: 5px
 		border-radius: 3px
 		background-color: $color-background
 
@@ -836,10 +838,11 @@ label, label.control-label
 	.form-upload-file-meta
 		list-style: none
 		padding: 0
-		margin: 0 0 10px 0
+		margin: 0
 		width: 100%
 		display: flex
 		flex-wrap: wrap
+		flex: 1
 
 		li
 			display: inline-block
@@ -860,6 +863,20 @@ label, label.control-label
 		.file_delete
 			color: $color-danger
 
+	.form-upload-file-actions
+		list-style: none
+		padding: 0
+		margin: 0
+		display: flex
+		flex-wrap: wrap
+
+		li
+			display: inline-block
+			padding: 5px 10px
+
+		.file_delete
+			color: $color-danger
+
 .form-group
 	&.error
 		.form-control, input

src/templates/_macros/_node_edit_form.jade

@@ -6,7 +6,7 @@
 	.checkbox
 		label
 			| {{ field(class='checkbox') }}
-			| {{ field.name | undertitle }}
+			label {{ field.name | undertitle }}
 
 	| {% elif field.type == 'FieldList' %}