From 324d500edb151b98729661fef964900289535050 Mon Sep 17 00:00:00 2001
From: Pablo Vazquez <venomgfx@gmail.com>
Date: Wed, 2 Nov 2016 19:42:44 +0100
Subject: [PATCH] Tweaks to style of file attachments

---
 pillar/web/utils/forms.py                  | 12 +++++++-----
 src/styles/_project.sass                   | 14 ++++++++++----
 src/styles/base.sass                       | 21 +++++++++++++++++++--
 src/templates/_macros/_node_edit_form.jade |  2 +-
 4 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/pillar/web/utils/forms.py b/pillar/web/utils/forms.py
index e0bfe7b0..2b27ee0a 100644
--- a/pillar/web/utils/forms.py
+++ b/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>')
 
diff --git a/src/styles/_project.sass b/src/styles/_project.sass
index f63550c0..dac71e77 100644
--- a/src/styles/_project.sass
+++ b/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
 
diff --git a/src/styles/base.sass b/src/styles/base.sass
index 86d41818..67ac4388 100644
--- a/src/styles/base.sass
+++ b/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
diff --git a/src/templates/_macros/_node_edit_form.jade b/src/templates/_macros/_node_edit_form.jade
index 0acadd9c..6fe590b7 100644
--- a/src/templates/_macros/_node_edit_form.jade
+++ b/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' %}