From d36f8f53de8fdfff701dda54402afefb8cadecac Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 22 Oct 2019 11:40:31 +0300
Subject: [PATCH] Demo update

---
 src/sass/App.scss                     | 63 ++++++++++++++++++++++++---
 src/showcase/dataview/DataViewDemo.js | 55 +++++++++--------------
 2 files changed, 76 insertions(+), 42 deletions(-)

diff --git a/src/sass/App.scss b/src/sass/App.scss
index 9f25ed626f..e6c0d303f9 100644
--- a/src/sass/App.scss
+++ b/src/sass/App.scss
@@ -34,6 +34,12 @@
     border-top-right-radius: $val;
 }
 
+@mixin flex() {
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+}
+
 body {
     margin: 0px;
     height: 100%;
@@ -1213,19 +1219,50 @@ pre[class*="language-"] {
 
 /* Demos */
 .dataview-demo {
-    .ui-button {
-        margin-top: 3em;
-    }
+    .p-dataview {
+        .car-details {
+            @include flex();
+            justify-content: space-between;
+            align-items: center;
+            padding: 2em;
+            border-bottom: 1px solid #d9dad9;
     
-    .filter-container {
-        text-align: center;
+            & > div {
+                display: flex;
+                align-items: center;
+    
+                img {
+                    margin-right: 14px;
+                }
+            }
+        }
+
+        .car-detail {
+            padding: 0 1em 1em 1em;
+            border-bottom: 1px solid #d9dad9;
+            margin: 1em;
+        }
+
+        .p-panel-content {
+            padding: 1em;
+        }
     }
+}
 
-    .car-data > div {
-        padding: .429em;
+@media (max-width: 1024px) {
+    .dataview-demo {
+        .p-dataview {
+            .car-details {
+    
+                img {
+                    width: 75px;
+                }
+            }
+        }
     }
 }
 
+
 .loading-text {
     display: block;
     background-color: #f1f1f1;
@@ -1570,5 +1607,17 @@ pre[class*="language-"] {
                 }
             }
         }
+
+        .dataview-demo {
+            .p-dataview {
+                .car-details {
+                    border-bottom-color: #191919;
+                }
+
+                .car-detail {
+                    border-bottom: 1px solid #191919;
+                }
+            }
+        }
     }
 }
\ No newline at end of file
diff --git a/src/showcase/dataview/DataViewDemo.js b/src/showcase/dataview/DataViewDemo.js
index 5a1de8acdb..a428ae0ddb 100644
--- a/src/showcase/dataview/DataViewDemo.js
+++ b/src/showcase/dataview/DataViewDemo.js
@@ -51,21 +51,18 @@ export class DataViewDemo extends Component {
 
     renderListItem(car) {
         return (
-            <div className="p-col-12 car-details" style={{padding: '2em', borderBottom: '1px solid #d9d9d9'}}>
-                <div className="p-grid">
-                    <div className="p-col-12 p-md-3">
+            <div className="p-col-12">
+                <div className="car-details">
+                    <div>
                         <img src={`showcase/resources/demo/images/car/${car.brand}.png`} alt={car.brand}/>
+                        <div class="p-grid">
+                            <div className="p-col-12">Vin: <b>{car.vin}</b></div>
+                            <div className="p-col-12">Year: <b>{car.year}</b></div>
+                            <div className="p-col-12">Brand: <b>{car.brand}</b></div>
+                            <div className="p-col-12">Color: <b>{car.color}</b></div>
+                        </div>
                     </div>
-                    <div className="p-col-12 p-md-8 car-data">
-                        <div>Vin: <b>{car.vin}</b></div>
-                        <div>Year: <b>{car.year}</b></div>
-                        <div>Brand: <b>{car.brand}</b></div>
-                        <div>Color: <b>{car.color}</b></div>
-                    </div>
-
-                    <div className="p-col-12 p-md-1 search-icon" style={{marginTop:'40px'}}>
-                        <Button icon="pi pi-search" onClick={(e) => this.setState({ selectedCar: car, visible: true })}></Button>
-                    </div>
+                    <Button icon="pi pi-search" onClick={(e) => this.setState({ selectedCar: car, visible: true })}></Button>
                 </div>
             </div>
         );
@@ -77,7 +74,6 @@ export class DataViewDemo extends Component {
                 <Panel header={car.vin} style={{ textAlign: 'center' }}>
                     <img src={`showcase/resources/demo/images/car/${car.brand}.png`} alt={car.brand} />
                     <div className="car-detail">{car.year} - {car.color}</div>
-                    <hr className="ui-widget-content" style={{ borderTop: 0 }} />
                     <Button icon="pi pi-search" onClick={(e) => this.setState({ selectedCar: car, visible: true })}></Button>
                 </Panel>
             </div>
@@ -667,27 +663,17 @@ export class DataViewDemo extends Component {
 
     renderListItem(car) {
         return (
-            <div className="p-col-12" style={{padding: '2em', borderBottom: '1px solid #d9d9d9'}}>
-                <div className="p-col-12 p-md-3">
-                    <img src={'showcase/resources/demo/images/car/\${car.brand}.png'} alt={car.brand}/>
-                </div>
-                <div className="p-col-12 p-md-8 car-details">
-                    <div className="p-grid">
-                        <div className="p-col-2 p-sm-6">Vin:</div>
-                        <div className="p-col-10 p-sm-6">{car.vin}</div>
-
-                        <div className="p-col-2 p-sm-6">Year:</div>
-                        <div className="p-col-10 p-sm-6">{car.year}</div>
-
-                        <div className="p-col-2 p-sm-6">Brand:</div>
-                        <div className="p-col-10 p-sm-6">{car.brand}</div>
-
-                        <div className="p-col-2 p-sm-6">Color:</div>
-                        <div className="p-col-10 p-sm-6">{car.color}</div>
+            <div className="p-col-12">
+                <div className="car-details">
+                    <div>
+                        <img src={'showcase/resources/demo/images/car/\${car.brand}.png'} alt={car.brand}/>
+                        <div class="p-grid">
+                            <div className="p-col-12">Vin: <b>{car.vin}</b></div>
+                            <div className="p-col-12">Year: <b>{car.year}</b></div>
+                            <div className="p-col-12">Brand: <b>{car.brand}</b></div>
+                            <div className="p-col-12">Color: <b>{car.color}</b></div>
+                        </div>
                     </div>
-                </div>
-
-                <div className="p-col-12 p-md-1 search-icon" style={{marginTop:'40px'}}>
                     <Button icon="pi pi-search" onClick={(e) => this.setState({ selectedCar: car, visible: true })}></Button>
                 </div>
             </div>
@@ -700,7 +686,6 @@ export class DataViewDemo extends Component {
                 <Panel header={car.vin} style={{ textAlign: 'center' }}>
                     <img src={'showcase/resources/demo/images/car/\${car.brand}.png'} alt={car.brand} />
                     <div className="car-detail">{car.year} - {car.color}</div>
-                    <hr className="ui-widget-content" style={{ borderTop: 0 }} />
                     <Button icon="pi pi-search" onClick={(e) => this.setState({ selectedCar: car, visible: true })}></Button>
                 </Panel>
             </div>