fix themes cards heights (#17280)

faissaloux · web-flow · commit 69064ac0aeb4 · 2022-04-21T23:23:39.000-03:00
* fix themes cards heights

Signed-off-by: Faissal Wahabali &lt;fwahabali@gmail.com&gt;

* crop Original screen image

Signed-off-by: Faissal Wahabali &lt;fwahabali@gmail.com&gt;

* crop themes card image using CSS

Signed-off-by: Faissal Wahabali &lt;fwahabali@gmail.com&gt;

* fix card different heights

Signed-off-by: Faissal Wahabali &lt;fwahabali@gmail.com&gt;

* refactor styling

Signed-off-by: Faissal Wahabali &lt;fwahabali@gmail.com&gt;

* refactor card image height

Signed-off-by: Faissal Wahabali &lt;fwahabali@gmail.com&gt;
diff --git a/templates/home/themes.twig b/templates/home/themes.twig
@@ -3,8 +3,10 @@
   <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-cols-xl-4 g-4">
     {% for theme in themes %}
       <div class="col">
-        <div class="card">
-          <img src="./themes/{{ theme.id }}/screen.png" class="card-img-top" alt="{{ 'Screenshot of the %s theme.'|trans|format(theme.name) }}">
+        <div class="card h-100 mt-0">
+          <div class="card-img-container">
+            <img src="./themes/{{ theme.id }}/screen.png" class="card-img-top h-100" alt="{{ 'Screenshot of the %s theme.'|trans|format(theme.name) }}">
+          </div>
           <div class="card-body">
             <h5 class="card-title">{{ theme.name }} <small>({{ theme.version }})</small></h5>
           </div>
diff --git a/themes/bootstrap/scss/_card.scss b/themes/bootstrap/scss/_card.scss
@@ -0,0 +1,7 @@
+.card-img-container {
+  height: $card-img-height;
+  overflow: hidden;
+  img {
+    object-fit: cover;
+  }
+}
diff --git a/themes/bootstrap/scss/_variables.scss b/themes/bootstrap/scss/_variables.scss
@@ -8,3 +8,7 @@ $breadcrumb-navbar-padding-y: 0.5rem !default;
 $breadcrumb-navbar-padding-x: 1.8rem !default;
 $breadcrumb-navbar-margin-bottom: 0 !default;
 $breadcrumb-navbar-bg: #e9ecef !default; // $gray-200
+
+// Card
+
+$card-img-height: 16vh;
diff --git a/themes/bootstrap/scss/theme.scss b/themes/bootstrap/scss/theme.scss
@@ -12,3 +12,4 @@
 @import "forms";
 @import "breadcrumb";
 @import "print";
+@import "card";
diff --git a/themes/metro/scss/_card.scss b/themes/metro/scss/_card.scss
@@ -8,6 +8,14 @@
   border-bottom: 0;
 }
 
+.card-img-container {
+  height: $card-img-height;
+  overflow: hidden;
+  img {
+    object-fit: cover;
+  }
+}
+
 .card-footer {
   border-top: 0;
 }
diff --git a/themes/metro/scss/_variables.scss b/themes/metro/scss/_variables.scss
@@ -246,6 +246,7 @@ $pagination-disabled-border-color: $border-color;
 $card-border-radius: 0;
 $card-cap-bg: $th-background;
 $card-bg: $th-background;
+$card-img-height: 16vh;
 
 // Accordion
 
diff --git a/themes/original/scss/_card.scss b/themes/original/scss/_card.scss
@@ -18,6 +18,14 @@
   color: #444;
 }
 
+.card-img-container {
+  height: $card-img-height;
+  overflow: hidden;
+  img {
+    object-fit: cover;
+  }
+}
+
 #maincontainer .card-header {
   position: static;
   width: auto;
diff --git a/themes/original/scss/_variables.scss b/themes/original/scss/_variables.scss
@@ -133,6 +133,7 @@ $card-cap-bg: $th-background;
 $card-bg: $bg-one;
 $card-spacer-y: 0.5em;
 $card-spacer-x: 0.5em;
+$card-img-height: 16vh;
 
 // Accordion
 
diff --git a/themes/pmahomme/scss/_card.scss b/themes/pmahomme/scss/_card.scss
@@ -31,6 +31,14 @@
   }
 }
 
+.card-img-container {
+  height: $card-img-height;
+  overflow: hidden;
+  img {
+    object-fit: cover;
+  }
+}
+
 .card-footer {
   color: $th-color;
   background: $th-background;
diff --git a/themes/pmahomme/scss/_variables.scss b/themes/pmahomme/scss/_variables.scss
@@ -138,6 +138,7 @@ $pagination-disabled-border-color: #aaa;
 $card-border-color: #aaa;
 $card-bg: #eee;
 $card-cap-bg: #fff;
+$card-img-height: 16vh;
 
 // Accordion
 

Original file line number	Diff line number	Diff line change
`@@ -8,6 +8,14 @@`
`8`	`8`	`border-bottom: 0;`
`9`	`9`	`}`
`10`	`10`
	`11`	`+.card-img-container {`
	`12`	`+ height: $card-img-height;`
	`13`	`+ overflow: hidden;`
	`14`	`+ img {`
	`15`	`+ object-fit: cover;`
	`16`	`+ }`
	`17`	`+}`
	`18`	`+`
`11`	`19`	`.card-footer {`
`12`	`20`	`border-top: 0;`
`13`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -31,6 +31,14 @@`
`31`	`31`	`}`
`32`	`32`	`}`
`33`	`33`
	`34`	`+.card-img-container {`
	`35`	`+ height: $card-img-height;`
	`36`	`+ overflow: hidden;`
	`37`	`+ img {`
	`38`	`+ object-fit: cover;`
	`39`	`+ }`
	`40`	`+}`
	`41`	`+`
`34`	`42`	`.card-footer {`
`35`	`43`	`color: $th-color;`
`36`	`44`	`background: $th-background;`