CardView: CardTemplate demo, adaptivity fix (DevExpress#30161)

Co-authored-by: wdevfx <[email protected]>

Author: Raushen

apps/demos/Demos/CardView/CardTemplate/Angular/app/vehicle-card/vehicle-card.component.css

@@ -1,6 +1,9 @@
 .vehicle__img-wrapper {
-    height: 135px;
-    border-bottom: var(--dx-border-width) solid var(--dx-color-border);
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    aspect-ratio: 16 / 9;
+    width: 100%;
     background-color: #fff;
 }
 
@@ -12,6 +15,7 @@
 
 .vehicle__info {
     padding: 12px;
+    border-top: var(--dx-border-width) solid var(--dx-color-border);
 }
 
 .vehicle__name {

apps/demos/Demos/CardView/CardTemplate/React/styles.css

@@ -1,6 +1,9 @@
 .vehicle__img-wrapper {
-    height: 135px;
-    border-bottom: var(--dx-border-width) solid var(--dx-color-border);
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    aspect-ratio: 16 / 9;
+    width: 100%;
     background-color: #fff;
 }
 
@@ -12,6 +15,7 @@
 
 .vehicle__info {
     padding: 12px;
+    border-top: var(--dx-border-width) solid var(--dx-color-border);
 }
 
 .vehicle__name {

apps/demos/Demos/CardView/CardTemplate/ReactJs/styles.css

@@ -1,6 +1,9 @@
 .vehicle__img-wrapper {
-    height: 135px;
-    border-bottom: var(--dx-border-width) solid var(--dx-color-border);
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    aspect-ratio: 16 / 9;
+    width: 100%;
     background-color: #fff;
 }
 
@@ -12,6 +15,7 @@
 
 .vehicle__info {
     padding: 12px;
+    border-top: var(--dx-border-width) solid var(--dx-color-border);
 }
 
 .vehicle__name {

apps/demos/Demos/CardView/CardTemplate/Vue/VehicleCard.vue

@@ -61,8 +61,11 @@ defineEmits(['show-info']);
 
 <style>
   .vehicle__img-wrapper {
-      height: 135px;
-      border-bottom: var(--dx-border-width) solid var(--dx-color-border);
+      overflow: hidden;
+      display: flex;
+      justify-content: center;
+      aspect-ratio: 16 / 9;
+      width: 100%;
       background-color: #fff;
   }
 
@@ -74,6 +77,7 @@ defineEmits(['show-info']);
 
   .vehicle__info {
       padding: 12px;
+      border-top: var(--dx-border-width) solid var(--dx-color-border);
   }
 
   .vehicle__name {

apps/demos/Demos/CardView/CardTemplate/jQuery/styles.css

@@ -1,6 +1,9 @@
 .vehicle__img-wrapper {
-    height: 135px;
-    border-bottom: var(--dx-border-width) solid var(--dx-color-border);
+    overflow: hidden;
+    display: flex;
+    justify-content: center;
+    aspect-ratio: 16 / 9;
+    width: 100%;
     background-color: #fff;
 }
 
@@ -12,6 +15,7 @@
 
 .vehicle__info {
     padding: 12px;
+    border-top: var(--dx-border-width) solid var(--dx-color-border);
 }
 
 .vehicle__name {