From f986a5691f36ac79a1b32926b4b4046d6486ed95 Mon Sep 17 00:00:00 2001 From: AIC BV <89913092+AIC-BV@users.noreply.github.com> Date: Sat, 14 Oct 2023 20:37:55 +0200 Subject: [PATCH] Further tweaks to the fileupload thumbnail styles (#991) Co-authored-by: Luke Towers --- .../formwidgets/fileupload/assets/css/fileupload.css | 4 ++-- .../fileupload/assets/less/fileupload.imagemulti.less | 11 +++++++---- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/modules/backend/formwidgets/fileupload/assets/css/fileupload.css b/modules/backend/formwidgets/fileupload/assets/css/fileupload.css index e9da8b4b11..91f828c02d 100644 --- a/modules/backend/formwidgets/fileupload/assets/css/fileupload.css +++ b/modules/backend/formwidgets/fileupload/assets/css/fileupload.css @@ -63,9 +63,9 @@ .field-fileupload.style-image-multi .upload-object{background:#fff;border:1px solid #ecf0f1;width:260px} .field-fileupload.style-image-multi .upload-object .progress-bar{display:block;width:100%;overflow:hidden;height:5px;background-color:#f5f5f5;border-radius:3px;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);box-shadow:inset 0 1px 2px rgba(0,0,0,0.1);position:absolute;bottom:10px;left:0} .field-fileupload.style-image-multi .upload-object .progress-bar .upload-progress{float:left;width:0%;height:100%;line-height:5px;color:#fff;background-color:#5fb6f5;-webkit-box-shadow:none;box-shadow:none;-webkit-transition:width 0.6s ease;transition:width 0.6s ease} -.field-fileupload.style-image-multi .upload-object .icon-container{border-right:1px solid #f6f8f9;float:left;display:inline-block;overflow:hidden;width:75px;height:75px} +.field-fileupload.style-image-multi .upload-object .icon-container{border-right:1px solid #f6f8f9;float:left;overflow:hidden;width:75px;height:75px;display:flex;align-items:center;justify-content:center} .field-fileupload.style-image-multi .upload-object .icon-container i{font-size:35px} -.field-fileupload.style-image-multi .upload-object .icon-container.image img{border-bottom-left-radius:3px;border-top-left-radius:3px;width:100%;height:100%;object-fit:cover} +.field-fileupload.style-image-multi .upload-object .icon-container.image img{border-bottom-left-radius:3px;border-top-left-radius:3px;width:auto;height:auto;max-height:100%} .field-fileupload.style-image-multi .upload-object .info{margin-left:90px} .field-fileupload.style-image-multi .upload-object .info h4{padding-right:15px} .field-fileupload.style-image-multi .upload-object .info h4 a{right:15px} diff --git a/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagemulti.less b/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagemulti.less index 734b8b87d1..ace43c1882 100644 --- a/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagemulti.less +++ b/modules/backend/formwidgets/fileupload/assets/less/fileupload.imagemulti.less @@ -34,20 +34,23 @@ .icon-container { border-right: 1px solid #f6f8f9; float: left; - display: inline-block; overflow: hidden; width: 75px; height: 75px; + display: flex; + align-items: center; + justify-content: center; + i { font-size: 35px; } &.image img { .border-left-radius(3px); - width: 100%; - height: 100%; - object-fit: cover; + width: auto; + height: auto; + max-height: 100%; } }