Browse Source

fix(admin-ui): Styling improvements to image display

Improve display of images that have not been resized dynamically. Relates to #1514
Michael Bromley 3 years ago
parent
commit
7b308c10d6

+ 1 - 1
packages/admin-ui/src/lib/core/src/shared/components/asset-gallery/asset-gallery.component.html

@@ -7,7 +7,7 @@
     >
         <div class="card-img">
             <div class="selected-checkbox"><clr-icon shape="check-circle" size="32"></clr-icon></div>
-            <img [src]="asset | assetPreview: 'thumb'" />
+            <img class="asset-thumb" [src]="asset | assetPreview: 'thumb'" />
         </div>
         <div class="detail">
             <vdr-entity-info

+ 4 - 0
packages/admin-ui/src/lib/core/src/shared/components/asset-gallery/asset-gallery.component.scss

@@ -28,6 +28,10 @@
     position: relative;
 }
 
+img.asset-thumb {
+    aspect-ratio: 1;
+}
+
 .selected-checkbox {
     opacity: 0;
     position: absolute;

+ 1 - 1
packages/admin-ui/src/lib/static/styles/global/_overrides.scss

@@ -5,7 +5,7 @@
     background-color: var(--clr-global-app-background);
 }
 
-.content-area img {
+.content-area img, .modal-content img {
     object-fit: cover;
     width: 100%;
     height: 100%;