diff options
| author | rr- | 2017-01-06 14:05:54 +0100 |
|---|---|---|
| committer | rr- | 2017-01-08 02:26:13 +0100 |
| commit | d1bb33ecf0e82689ecbca747a8ac7b038d6cf173 (patch) | |
| tree | 1327c1e0fa777b734a9607e1ad7a37e8ffc99612 /client/css | |
| parent | 4cb613a5c912e16aedc8114df6bd519cae72e06b (diff) | |
client/posts: tweak upload appearance and UX
Diffstat (limited to 'client/css')
| -rw-r--r-- | client/css/post-upload.styl | 107 |
1 files changed, 69 insertions, 38 deletions
diff --git a/client/css/post-upload.styl b/client/css/post-upload.styl index 28a9770..9465a87 100644 --- a/client/css/post-upload.styl +++ b/client/css/post-upload.styl @@ -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 + + 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 - div:last-child:after - display: block - content: ' ' - height: 1px - clear: both + &:first-child .move-up + color: $inactive-link-color + &:last-child .move-down + color: $inactive-link-color |