diff --git a/src/client/app/common/views/components/drive-file-thumbnail.vue b/src/client/app/common/views/components/drive-file-thumbnail.vue index b5a8249bfaed2b9409d6b025021a004227381e29..faa727f3b6f8573492ee8ed9eefc83380cc8a9b7 100644 --- a/src/client/app/common/views/components/drive-file-thumbnail.vue +++ b/src/client/app/common/views/components/drive-file-thumbnail.vue @@ -4,6 +4,7 @@ :src="file.url" :alt="file.name" :title="file.name" + @load="onThumbnailLoaded" v-if="detail && is === 'image'"/> <video :src="file.url" @@ -146,21 +147,6 @@ export default Vue.extend({ > .icon pointer-events none - > img - height 100% - width 100% - margin auto - object-fit cover - - > .icon - height 65% - width 65% - margin auto - - > video, - > audio - width 100% - > .icon-sub position absolute width 30% @@ -169,9 +155,33 @@ export default Vue.extend({ right 4% bottom 4% + > * + margin auto + + &:not(.detail) + > img + height 100% + width 100% + object-fit cover + + > .icon + height 65% + width 65% + + > video, + > audio + width 100% + &.detail > .icon height 100px - margin 16px auto + width 100px + margin 16px + + > *:not(.icon) + max-height 300px + max-width 100% + height 100% + object-fit contain </style> diff --git a/src/client/app/mobile/views/components/drive.file-detail.vue b/src/client/app/mobile/views/components/drive.file-detail.vue index 266a3efc6055e3f41e70b35cfa26bdab6d00aea8..92f5c1fd195b064fc3fa3f095e9c12748044bdb6 100644 --- a/src/client/app/mobile/views/components/drive.file-detail.vue +++ b/src/client/app/mobile/views/components/drive.file-detail.vue @@ -1,7 +1,7 @@ <template> <div class="pyvicwrksnfyhpfgkjwqknuururpaztw"> <div class="preview"> - <x-file-thumbnail class="preview" :file="file" fit="cover" :detail="true"/> + <x-file-thumbnail class="preview" :file="file" :detail="true"/> <template v-if="kind != 'image'"><fa icon="file"/></template> <footer v-if="kind == 'image' && file.properties && file.properties.width && file.properties.height"> <span class="size"> @@ -149,8 +149,8 @@ export default Vue.extend({ background var(--bg) > .preview + width fit-content max-width 100% - max-height 300px margin 0 auto box-shadow 1px 1px 4px rgba(#000, 0.2) overflow hidden