From 98e541a70031c757bdf54c1eeedd69f87f50d7bc Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 17 Mar 2020 12:07:30 +0300
Subject: [PATCH] Refactored responsive demo

---
 public/themes/nova-light/theme.css            | 36 -------
 .../datatable/DataTableResponsiveDemo.vue     | 98 +++++++++++--------
 2 files changed, 55 insertions(+), 79 deletions(-)

diff --git a/public/themes/nova-light/theme.css b/public/themes/nova-light/theme.css
index 263794cc5..005c5c76e 100644
--- a/public/themes/nova-light/theme.css
+++ b/public/themes/nova-light/theme.css
@@ -1899,9 +1899,6 @@ body .p-card {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12);
 }
 
-body {
-  /* Responsive Table */
-}
 body .p-paginator {
   background-color: #f4f4f4;
   border: 1px solid #c8c8c8;
@@ -2199,39 +2196,6 @@ body .p-datatable.p-datatable-borderless .p-datatable-tfoot > tr > td {
 body .p-datatable.p-datatable-borderless .p-paginator {
   border: 0 none;
 }
-body .p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
-  display: none;
-}
-@media screen and (max-width: 40em) {
-  body .p-datatable.p-datatable-responsive .p-datatable-thead > tr > th,
-body .p-datatable.p-datatable-responsive .p-datatable-tfoot > tr > td {
-    display: none !important;
-  }
-  body .p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td {
-    text-align: left;
-    display: block;
-    border: 0 none !important;
-    width: 100% !important;
-    float: left;
-    clear: left;
-  }
-  body .p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
-    padding: 0.4em;
-    min-width: 30%;
-    display: inline-block;
-    margin: -0.4em 1em -0.4em -0.4em;
-    font-weight: bold;
-  }
-  body .p-datatable.p-datatable-responsive .p-paginator-top {
-    border-bottom: 1px solid #c8c8c8;
-  }
-  body .p-datatable.p-datatable-responsive .p-paginator-bottom {
-    border-top: 1px solid #c8c8c8;
-  }
-  body .p-datatable.p-datatable-responsive .p-datatable-tbody > tr > td {
-    border: 0 none;
-  }
-}
 body .p-datascroller .p-datascroller-header {
   background-color: #f4f4f4;
   color: #333333;
diff --git a/src/views/datatable/DataTableResponsiveDemo.vue b/src/views/datatable/DataTableResponsiveDemo.vue
index ffa59bbae..a334c4592 100644
--- a/src/views/datatable/DataTableResponsiveDemo.vue
+++ b/src/views/datatable/DataTableResponsiveDemo.vue
@@ -5,12 +5,12 @@
 		<div class="content-section introduction">
 			<div class="feature-intro">
 				<h1>DataTable - Responsive</h1>
-				<p>DataTable display can be optimized according for different screen sizes, this example demonstrates a demo where columns are stacked on small screens.</p>
+				<p>DataTable display can be optimized according for different screen sizes, this example demonstrates a demo where columns are stacked on a small screens.</p>
 			</div>
 		</div>
 
 		<div class="content-section implementation">
-			<DataTable :value="cars" class="p-datatable-responsive">
+			<DataTable :value="cars" class="p-datatable-responsive-demo" :paginator="true" :rows="10" paginatorPosition="both">
                 <template #header>
                     Responsive
                 </template>
@@ -46,7 +46,7 @@
                 <TabPanel header="Source">
 <CodeHighlight>
 <template v-pre>
-&lt;DataTable :value="cars" class="p-datatable-responsive"&gt;
+&lt;DataTable :value="cars" class="p-datatable-responsive" :paginator="true" rows="10" paginatorPosition="both"&gt;
     &lt;template #header&gt;
         Responsive
     &lt;/template&gt;
@@ -98,31 +98,38 @@ export default {
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-.p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
+.p-datatable-responsive-demo .p-datatable-tbody > tr > td .p-column-title {
     display: none;
 }
 
 @media screen and (max-width: 40em) {
-    .p-datatable-responsive .p-datatable-thead > tr > th,
-    .p-datatable-responsive .p-datatable-tfoot > tr > td {
-        display: none !important;
-    }
+    /deep/ .p-datatable {
+        &.p-datatable-responsive-demo {
+            .p-datatable-thead > tr > th,
+            .p-datatable-tfoot > tr > td {
+                display: none !important;
+            }
 
-    .p-datatable-responsive .p-datatable-tbody > tr > td {
-        text-align: left;
-        display: block;
-        border: 0 none;
-        width: 100% !important;
-		float: left;
-		clear: left;
-    }
+            .p-datatable-tbody > tr > td {
+                text-align: left;
+                display: block;
+                border: 0 none !important;
+                width: 100% !important;
+                float: left;
+                clear: left;
 
-    .p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
-        padding: .4em;
-        min-width: 30%;
-        display: inline-block;
-        margin: -.4em 1em -.4em -.4em;
-        font-weight: bold;
+                .p-column-title {
+                    padding: .4em;
+                    min-width: 30%;
+                    display: inline-block;
+                    margin: -.4em 1em -.4em -.4em;
+                    font-weight: bold;
+                }
+            }
+            .p-datatable-tbody > tr > td {
+                border: 0 none;
+            }
+        }
     }
 }
 </CodeHighlight>
@@ -147,7 +154,7 @@ export default {
         this.carService = new CarService();
     },
     mounted() {
-        this.carService.getCarsSmall().then(data => this.cars = data);
+        this.carService.getCarsMedium().then(data => this.cars = data);
     },
     components: {
         'DataTableSubMenu': DataTableSubMenu
@@ -155,32 +162,37 @@ export default {
 }
 </script>
 
-<style>
-.p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
+<style lang="scss" scoped>
+.p-datatable-responsive-demo .p-datatable-tbody > tr > td .p-column-title {
     display: none;
 }
 
 @media screen and (max-width: 40em) {
-    .p-datatable-responsive .p-datatable-thead > tr > th,
-    .p-datatable-responsive .p-datatable-tfoot > tr > td {
-        display: none !important;
-    }
+    /deep/ .p-datatable {
+        &.p-datatable-responsive-demo {
+            .p-datatable-thead > tr > th,
+            .p-datatable-tfoot > tr > td {
+                display: none !important;
+            }
 
-    .p-datatable-responsive .p-datatable-tbody > tr > td {
-        text-align: left;
-        display: block;
-        border: 0 none;
-        width: 100% !important;
-		float: left;
-		clear: left;
-    }
+            .p-datatable-tbody > tr > td {
+                text-align: left;
+                display: block;
+                border: 0 none !important;
+                width: 100% !important;
+                float: left;
+                clear: left;
+                border: 0 none;
 
-    .p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
-        padding: .4em;
-        min-width: 30%;
-        display: inline-block;
-        margin: -.4em 1em -.4em -.4em;
-        font-weight: bold;
+                .p-column-title {
+                    padding: .4em;
+                    min-width: 30%;
+                    display: inline-block;
+                    margin: -.4em 1em -.4em -.4em;
+                    font-weight: bold;
+                }
+            }
+        }
     }
 }
 </style>
\ No newline at end of file