client/posts: tweak upload appearance and UX

This commit is contained in:
rr-
2017-01-06 14:05:54 +01:00
parent 4cb613a5c9
commit d1bb33ecf0
5 changed files with 244 additions and 192 deletions

View File

@ -1,5 +1,6 @@
@import colors
$upload-header-background-color = $top-navigation-color
$upload-border-color = #DDD
$cancel-button-color = tomato
#post-upload
@ -35,7 +36,7 @@ $cancel-button-color = tomato
.skip-duplicates
margin-left: 1em
.messages
form>.messages
margin-top: 1em
.uploadables-container
@ -43,48 +44,78 @@ $cancel-button-color = tomato
margin: 0
padding: 0
li
.uploadable-container
clear: both
margin: 0 0 1.2em 0
.uploadable
.file
margin: 0.3em 0
overflow: hidden
white-space: nowrap
text-align: left
text-overflow: ellipsis
.anonymous
margin: 0.3em 0
.safety
margin: 0.3em 0
label
display: inline-block
margin-right: 1em
.options div
display: inline-block
margin: 0 1em 0 0
padding-left: 13em
.thumbnail-wrapper
float: left
width: 12.5em
height: 7em
margin: 0.2em 1em 0 0
width: 12em
height: 8em
margin: 0 0 0 -13em
.thumbnail
width: 100%
height: 100%
.controls
float: right
a
color: $inactive-link-color
margin-left: 0.5em
.uploadable
border: 1px solid $upload-border-color
min-height: 8em
box-sizing: border-box
div:last-child:after
display: block
content: ' '
height: 1px
clear: both
header
line-height: 1.5em
padding: 0.25em 1em
text-align: left
background: $upload-header-background-color
border-bottom: 1px solid $upload-border-color
nav
&:first-of-type
float: left
a
margin: 0 0.5em 0 0
&:last-of-type
float: right
a
margin: 0 0 0 0.5em
ul
list-style-type: none
ul, li
display: inline-block
margin: 0
padding: 0
span.filename
padding: 0 0.5em
display: block
overflow: hidden
white-space: nowrap
text-overflow: ellipsis
.body
margin: 1em
.anonymous
margin: 0.3em 0
.safety
margin: 0.3em 0
label
display: inline-block
margin-right: 1em
.options div
display: inline-block
margin: 0 1em 0 0
.messages
margin-top: 1em
.message:last-child
margin-bottom: 0
&:first-child .move-up
color: $inactive-link-color
&:last-child .move-down
color: $inactive-link-color