Minor style tweaks to attachments form

pillar/web/utils/forms.py

@@ -42,13 +42,13 @@ class CustomFileSelectWidget(HiddenInput):
             except ResourceNotFound:
                 pass
             else:
+                button.append(u'<div class="form-upload-file-meta-container">')
+
                 filename = Markup.escape(file_item.filename)
                 if file_item.content_type.split('/')[0] == 'image':
                     # If a file of type image is available, display the preview
                     button.append(u'<img class="preview-thumbnail" src="{0}" />'.format(
                         file_item.thumbnail('s', api=api)))
-                else:
-                    button.append(u'<p>{}</p>'.format(filename))
 
                 button.append(u'<ul class="form-upload-file-meta">')
                 # File name
@@ -73,6 +73,7 @@ class CustomFileSelectWidget(HiddenInput):
                               u'<i class="pi-download"></i>Original</a></li>'
                               .format(file_item.link))
                 button.append(u'</ul>')
+                button.append(u'</div>')
 
         upload_url = u'%sstorage/stream/{project_id}' % current_app.config[
             'PILLAR_SERVER_ENDPOINT']

src/styles/_project.sass

@@ -2371,27 +2371,7 @@ section.node-children
 				cursor: progress
 
 	.fieldlist
-		list-style: none
-		padding: 0
-		margin: 0
-
 		li.fieldlist-item
-			background-color: $color-background-light
-			border: thin solid $color-background
-			border-bottom: 2px solid $color-background
-			border-radius: 3px
-			margin-bottom: 10px
-			padding: 0 15px
-			display: flex
-			flex-direction: row-reverse
-			align-items: center
-
-			.form-group
-				margin-bottom: 0 !important
-
-			.form-upload-file
-				margin-bottom: 0 !important
-
 			div[class*="map_type"],
 			div[class*="is_tileable"]
 				padding: 10px 15px

src/styles/_utils.sass

@@ -156,9 +156,8 @@
 		box-shadow: none
 
 =label-generic
-	color: $color-text-dark
-	font-family: $font-body
-	font-weight: 300
+	color: $color-text-dark-primary
+	font-weight: normal
 
 @mixin badge($mixin-color, $roundness)
 	padding:

src/styles/base.sass

@@ -760,10 +760,43 @@ label, label.control-label
 	+label-generic
 
 
+/* File Upload forms */
+.fieldlist
+	list-style: none
+	padding: 0
+	margin: 10px 0 0 0
+
+	li.fieldlist-item
+		background-color: $color-background-light
+		border: thin solid $color-background
+		border-left: 3px solid $color-primary
+		border-top-right-radius: 3px
+		border-bottom-right-radius: 3px
+
+		margin-bottom: 10px
+		padding: 10px
+		display: flex
+		flex-direction: column
+		align-items: center
+
+		.form-group
+			margin-bottom: 0 !important // override bs
+			width: 100%
+
+			&:not(:first-child)
+				border-top: thin solid $color-background-dark
+				padding-top: 10px
+
+			input.form-control
+				background-color: white !important
+				padding: 0 10px !important
+				border: thin solid $color-background-dark !important
+
 .form-upload-file
 	width: 100%
-	margin: 10px 0
-	+clearfix
+	margin-bottom: 10px
+	display: flex
+	flex-direction: column
 
 	.form-upload-progress
 		margin-top: 10px
@@ -783,32 +816,35 @@ label, label.control-label
 	.preview-thumbnail
 		width: 50px
 		height: 50px
+		margin-right: 10px
+		margin-bottom: 10px
 		border-radius: 3px
 		background-color: $color-background
-		margin-right: 10px
-		float: left
+
+	.form-upload-file-meta-container
+		display: flex
 
 	.form-upload-file-meta
-		float: left
-		width: 80%
 		list-style: none
-		font-size: .9em
 		padding: 0
-		margin: 0
+		margin: 0 0 10px 0
+		width: 100%
+		display: flex
 
 		li
-			float: left
-			padding: 5px
+			display: inline-block
+			padding: 5px 10px
+
+			&:first-child
+				padding-left: 0
 
 			&.dimensions, &.size
 				color: $color-text-dark-secondary
 
-			&.delete, &.original
-				float: right
+			&.delete
+				margin-left: auto
 
 			&.name
-				width: 75px
-				max-width: 75px
 				+text-overflow-ellipsis
 
 		.file_delete