From e425f4a7b3e74975e84c29f01b9a67328253f264 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Fri, 18 Oct 2019 10:08:11 +0300
Subject: [PATCH] Updated DataView Demo

---
 src/views/dataview/DataViewDemo.vue | 88 +++++++++++++----------------
 src/views/dataview/DataViewDoc.vue  | 87 ++++++++++++++++------------
 2 files changed, 90 insertions(+), 85 deletions(-)

diff --git a/src/views/dataview/DataViewDemo.vue b/src/views/dataview/DataViewDemo.vue
index 6f1317e79..8fa34f382 100644
--- a/src/views/dataview/DataViewDemo.vue
+++ b/src/views/dataview/DataViewDemo.vue
@@ -7,7 +7,7 @@
 			</div>
 		</div>
 
-		<div class="content-section implementation dataview-demo">
+		<div class="content-section implementation">
 			<DataView :value="cars" :layout="layout" paginatorPosition="both" :paginator="true" :rows="20" :sortOrder="sortOrder" :sortField="sortField">
 				<template #header>
 					<div class="p-grid p-nogutter">
@@ -20,27 +20,20 @@
 					</div>
 				</template>
 				<template #list="slotProps" >
-					<div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9">
-						<div class="p-grid">
-							<div class="p-col-12 p-md-3">
-								<img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
-							</div>
-							<div class="p-col-12 p-md-8 car-details">
-								<div class="p-grid">
-									<div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
-
-									<div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
-
-									<div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
-
-									<div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
-								</div>
-							</div>
-							<div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px">
-								<Button icon="pi pi-search"></Button>
-							</div>
-						</div>
-					</div>
+					<div class="p-col-12">
+                        <div class="car-details">
+                            <div>
+                                <img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/>
+                                <div class="p-grid">
+                                    <div class="p-col-12">Vin: <b>{{slotProps.data.vin}}</b></div>
+                                    <div class="p-col-12">Year: <b>{{slotProps.data.year}}</b></div>
+                                    <div class="p-col-12">Brand: <b>{{slotProps.data.brand}}</b></div>
+                                    <div class="p-col-12">Color: <b>{{slotProps.data.color}}</b></div>
+                                </div>
+                            </div>
+                            <Button icon="pi pi-search"></Button>
+                        </div>
+                    </div>
 				</template>
 				<template #grid="slotProps">
 					<div style="padding: .5em" class="p-col-12 p-md-3">
@@ -108,36 +101,33 @@ export default {
 }
 </script>
 
-<style lang="scss">
-.dataview-demo {
-	.ui-button {
-		margin-top: 3em;
-	}
+<style lang="scss" scoped>
+.p-dataview {
+    .car-details {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 2em;
+        border-bottom: 1px solid #d9dad9;
 
-	.filter-container {
-		text-align: center;
-	}
-
-	.car-data > div {
-		padding: .429em;
-    }
-
-    .p-dropdown {
-        width: 12em;
+        & > div {
+            display: flex;
+            align-items: center;
+            
+            img {
+                margin-right: 14px;
+            }
+        }
     }
 }
+@media (max-width: 1024px) {
+	.p-dataview {
+        .car-details {
 
-@media (max-width: 767px) {
-	.dataview-demo {
-		.car-details, .search-icon {
-			text-align: center;
-			margin-top: 0;
-		}
-
-		.filter-container {
-			text-align: left;
-		}
-	}
+            img {
+                width: 75px;
+            }
+        }
+    }
 }
-
 </style>
\ No newline at end of file
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
index f1b4ef408..0dad4dca2 100644
--- a/src/views/dataview/DataViewDoc.vue
+++ b/src/views/dataview/DataViewDoc.vue
@@ -37,24 +37,21 @@ export default {
 				<p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
 <CodeHighlight>
 <template v-pre>
-&lt;template #list="slotProps" &gt;
-	&lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
-		&lt;div class="p-grid"&gt;
-			&lt;div class="p-col-12 p-md-3"&gt;
-				&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
-			&lt;/div&gt;
-			&lt;div class="p-col-12 p-md-8 car-data"&gt;
-				&lt;div&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
-				&lt;div&gt;Year: &lt;b&gt;{{slotProps.data.year}}&lt;/b&gt;&lt;/div&gt;
-				&lt;div&gt;Brand: &lt;b&gt;{{slotProps.data.brand}}&lt;/b&gt;&lt;/div&gt;
-				&lt;div&gt;Color: &lt;b&gt;{{slotProps.data.color}}&lt;/b&gt;&lt;/div&gt;
-			&lt;/div&gt;
-
-			&lt;div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px"&gt;
-				&lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
-			&lt;/div&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
+&lt;template #list="slotProps"&gt;
+	&lt;div class="p-col-12"&gt;
+        &lt;div class="car-details"&gt;
+            &lt;div&gt;
+                &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
+                &lt;div class="p-grid"&gt;
+                    &lt;div class="p-col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                    &lt;div class="p-col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                    &lt;div class="p-col-12"&gt;Brand: &lt;b&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                    &lt;div class="p-col-12"&gt;Color: &lt;b&gt;&#123;&#123;slotProps.data.color&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/div&gt;
+            &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
 &lt;/template&gt;
 &lt;template #grid="slotProps"&gt;
 	&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
@@ -426,26 +423,19 @@ export default {
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
-    &lt;template #list="slotProps" &gt;
-        &lt;div class="p-col-12 car-details" style="padding: 2em; border-bottom: 1px solid #d9d9d9"&gt;
-            &lt;div class="p-grid"&gt;
-                &lt;div class="p-col-12 p-md-3"&gt;
+    &lt;template #list="slotProps"&gt;
+        &lt;div class="p-col-12"&gt;
+            &lt;div class="car-details"&gt;
+                &lt;div&gt;
                     &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
-                &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-8 car-details"&gt;
                     &lt;div class="p-grid"&gt;
-                        &lt;div class="p-col-12"&gt;Vin: &lt;b&gt;{{slotProps.data.vin}}&lt;/b&gt;&lt;/div&gt;
-
-                        &lt;div class="p-col-12"&gt;Year: &lt;b&gt;{{slotProps.data.year}}&lt;/b&gt;&lt;/div&gt;
-
-                        &lt;div class="p-col-12"&gt;Brand: &lt;b&gt;{{slotProps.data.brand}}&lt;/b&gt;&lt;/div&gt;
-
-                        &lt;div class="p-col-12"&gt;Color: &lt;b&gt;{{slotProps.data.color}}&lt;/b&gt;&lt;/div&gt;
+                        &lt;div class="p-col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                        &lt;div class="p-col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                        &lt;div class="p-col-12"&gt;Brand: &lt;b&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                        &lt;div class="p-col-12"&gt;Color: &lt;b&gt;&#123;&#123;slotProps.data.color&#125;&#125;&lt;/b&gt;&lt;/div&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
-                &lt;div class="p-col-12 p-md-1 search-icon" style="margin-top: 40px"&gt;
-                    &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
-                &lt;/div&gt;
+                &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
             &lt;/div&gt;
         &lt;/div&gt;
     &lt;/template&gt;
@@ -509,8 +499,33 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-.p-dropdown {
-	width: 12em;
+.p-dataview {
+    .car-details {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 2em;
+        border-bottom: 1px solid #d9dad9;
+
+        &amp; > div {
+            display: flex;
+            align-items: center;
+            
+            img {
+                margin-right: 14px;
+            }
+        }
+    }
+}
+@media (max-width: 1024px) {
+	.p-dataview {
+        .car-details {
+
+            img {
+                width: 75px;
+            }
+        }
+    }
 }
 </CodeHighlight>
 			</TabPanel>