vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactored responsive demo

pull/256/head
cagataycivici 2020-03-17 12:07:30 +03:00
parent cd0136f088
commit 98e541a700
2 changed files with 55 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
public/themes/nova-light/theme.css
View File

@ -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); 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 { body .p-paginator {
background-color: #f4f4f4; background-color: #f4f4f4;
border: 1px solid #c8c8c8; 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 { body .p-datatable.p-datatable-borderless .p-paginator {
border: 0 none; 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 { body .p-datascroller .p-datascroller-header {
background-color: #f4f4f4; background-color: #f4f4f4;
color: #333333; color: #333333;

98
src/views/datatable/DataTableResponsiveDemo.vue
View File

@ -5,12 +5,12 @@
<div class="content-section introduction"> <div class="content-section introduction">
<div class="feature-intro"> <div class="feature-intro">
<h1>DataTable - Responsive</h1> <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> </div>
<div class="content-section implementation"> <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> <template #header>
Responsive Responsive
</template> </template>
@ -46,7 +46,7 @@
<TabPanel header="Source"> <TabPanel header="Source">
<CodeHighlight> <CodeHighlight>
<template v-pre> <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; &lt;template #header&gt;
Responsive Responsive
&lt;/template&gt; &lt;/template&gt;
@ -98,31 +98,38 @@ export default {
</CodeHighlight> </CodeHighlight>
<CodeHighlight lang="css"> <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; display: none;
} }
@media screen and (max-width: 40em) { @media screen and (max-width: 40em) {
.p-datatable-responsive .p-datatable-thead > tr > th, /deep/ .p-datatable {
.p-datatable-responsive .p-datatable-tfoot > tr > td { &.p-datatable-responsive-demo {
display: none !important; .p-datatable-thead > tr > th,
} .p-datatable-tfoot > tr > td {
display: none !important;
}
.p-datatable-responsive .p-datatable-tbody > tr > td { .p-datatable-tbody > tr > td {
text-align: left; text-align: left;
display: block; display: block;
border: 0 none; border: 0 none !important;
width: 100% !important; width: 100% !important;
float: left; float: left;
clear: left; clear: left;
}
.p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title { .p-column-title {
padding: .4em; padding: .4em;
min-width: 30%; min-width: 30%;
display: inline-block; display: inline-block;
margin: -.4em 1em -.4em -.4em; margin: -.4em 1em -.4em -.4em;
font-weight: bold; font-weight: bold;
}
}
.p-datatable-tbody > tr > td {
border: 0 none;
}
}
} }
} }
</CodeHighlight> </CodeHighlight>
@ -147,7 +154,7 @@ export default {
this.carService = new CarService(); this.carService = new CarService();
}, },
mounted() { mounted() {
this.carService.getCarsSmall().then(data => this.cars = data); this.carService.getCarsMedium().then(data => this.cars = data);
}, },
components: { components: {
'DataTableSubMenu': DataTableSubMenu 'DataTableSubMenu': DataTableSubMenu
@ -155,32 +162,37 @@ export default {
} }
</script> </script>
<style> <style lang="scss" scoped>
.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; display: none;
} }
@media screen and (max-width: 40em) { @media screen and (max-width: 40em) {
.p-datatable-responsive .p-datatable-thead > tr > th, /deep/ .p-datatable {
.p-datatable-responsive .p-datatable-tfoot > tr > td { &.p-datatable-responsive-demo {
display: none !important; .p-datatable-thead > tr > th,
} .p-datatable-tfoot > tr > td {
display: none !important;
}
.p-datatable-responsive .p-datatable-tbody > tr > td { .p-datatable-tbody > tr > td {
text-align: left; text-align: left;
display: block; display: block;
border: 0 none; border: 0 none !important;
width: 100% !important; width: 100% !important;
float: left; float: left;
clear: left; clear: left;
} border: 0 none;
.p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title { .p-column-title {
padding: .4em; padding: .4em;
min-width: 30%; min-width: 30%;
display: inline-block; display: inline-block;
margin: -.4em 1em -.4em -.4em; margin: -.4em 1em -.4em -.4em;
font-weight: bold; font-weight: bold;
}
}
}
} }
} }
</style> </style>