fix: icon aspect ratio

AppOutlet · May 10, 2021 · b397c41 · b397c41
1 parent 1cdee81
commit b397c41
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 10 deletions.
diff --git a/src/app/ui/components/card/card.component.html b/src/app/ui/components/card/card.component.html
@@ -5,7 +5,7 @@
         [title]="application?.packageType"
         alt="{{ application?.packageType }} icon"
     />
-    <nb-card>
+    <nb-card class="img-wrapper">
         <img
             [src]="application?.icon || 'assets/icon/icon-placeholder.png'"
             alt="{{ application?.name }} icon"

diff --git a/src/app/ui/components/card/card.component.scss b/src/app/ui/components/card/card.component.scss
@@ -1,9 +1,24 @@
-img {
+.img-wrapper {
+    padding-bottom: 100%;
+    position: relative;
+}
+
+.img-wrapper img {
+    position: absolute;
     padding: 1rem;
     width: 100%;
     height: auto;
 }
 
+.badge {
+    position: absolute;
+    height: 2rem;
+    width: 2rem;
+    margin-top: -0.5rem;
+    margin-left: -0.5rem;
+    z-index: 1;
+}
+
 nb-card {
     margin-bottom: 0;
 }
@@ -29,11 +44,3 @@ h6 {
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
 }
-
-.badge {
-    position: absolute;
-    height: 3.6rem;
-    width: 3.6rem;
-    margin-top: -0.5rem;
-    margin-left: -0.5rem;
-}