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);
}
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;

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

@ -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,26 +98,27 @@ 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 {
/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 {
.p-datatable-tbody > tr > td {
text-align: left;
display: block;
border: 0 none;
border: 0 none !important;
width: 100% !important;
float: left;
clear: left;
}
.p-datatable-responsive .p-datatable-tbody > tr > td .p-column-title {
.p-column-title {
padding: .4em;
min-width: 30%;
display: inline-block;
@ -125,6 +126,12 @@ export default {
font-weight: bold;
}
}
.p-datatable-tbody > tr > td {
border: 0 none;
}
}
}
}
</CodeHighlight>
</TabPanel>
</TabView>
@ -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,27 +162,29 @@ 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 {
/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 {
.p-datatable-tbody > tr > td {
text-align: left;
display: block;
border: 0 none;
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 {
.p-column-title {
padding: .4em;
min-width: 30%;
display: inline-block;
@ -183,4 +192,7 @@ export default {
font-weight: bold;
}
}
}
}
}
</style>