diff --git a/vue/src/components/Uploader/Image.vue b/vue/src/components/Uploader/Image.vue index 12dd6ec0..e0b8a448 100644 --- a/vue/src/components/Uploader/Image.vue +++ b/vue/src/components/Uploader/Image.vue @@ -92,11 +92,12 @@ export default { i.fa-file-pdf-o, i.fa-frown-o { display: block; - font-size: 105px; - margin-left: 32px; - margin-top: 15px; - position: absolute; - top: 0; + font-size: 48px; + margin-left: 60px; + } + + i.fa-file-pdf-o { + color: #D5D5D5; } i.fa-frown-o { @@ -112,7 +113,7 @@ export default { } &.valid:hover { - background-color: #6484d3; + background-color: #365EBE; cursor: pointer; button.btn-remove { @@ -129,7 +130,7 @@ export default { } &:hover img { - opacity: 0.3; + opacity: 0.12; } } diff --git a/vue/src/components/Uploader/ItemTile.vue b/vue/src/components/Uploader/ItemTile.vue index b9c44196..7459e78e 100644 --- a/vue/src/components/Uploader/ItemTile.vue +++ b/vue/src/components/Uploader/ItemTile.vue @@ -3,7 +3,12 @@
- {{file.name}} ({{ Math.round(file.size/1024/1024 * 100) / 100 }} MB) +
+ {{file.name}} +
+
+ ({{ Math.round(file.size/1024/1024 * 100) / 100 }} MB) +
@@ -71,19 +76,31 @@ export default { .item-text { text-align: center; - min-height: 75px; - max-height: 75px; - overflow: hidden; - padding: 5px; - line-height: 1.05; - font-size: 0.95em; + padding: 10px; + padding-bottom: 4px; + font-size: 16px; + line-height: 24px; + min-height: 87px; + + + .filename-text { + min-height: 25px; + max-height: 50px; + overflow: hidden; + overflow-wrap: anywhere;; + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + } - .no-wrap { - white-space: nowrap; + .size-text { + min-height: 25px; + max-height: 25px; } } .button-wrapper { + margin-top: -4px; text-align: center; } diff --git a/vue/src/components/Uploader/Uploader.vue b/vue/src/components/Uploader/Uploader.vue index 066f7a8e..99a81b79 100644 --- a/vue/src/components/Uploader/Uploader.vue +++ b/vue/src/components/Uploader/Uploader.vue @@ -409,9 +409,10 @@ export default { border: 2px #365EBE dashed; border-radius: 6px; padding: 18px; + margin-bottom: 5px; &.dragging { - background-color: #F2E3F2; + background-color: #D7DFF2; } .cards {