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

Cosmetics on DT responsive demo

pull/345/head
cagataycivici 2020-05-13 15:59:00 +03:00
parent 97bcbb79e3
commit 064e3be9af
1 changed files with 27 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/views/datatable/DataTableDemo.vue
View File

@ -67,6 +67,10 @@
</template> </template>
</Column> </Column>
<Column field="date" header="Date" :sortable="true" filterMatchMode="custom" :filterFunction="filterDate"> <Column field="date" header="Date" :sortable="true" filterMatchMode="custom" :filterFunction="filterDate">
<template #body="slotProps">
<span class="p-column-title">Date</span>
<span style="vertical-align: middle; margin-left: .5em">{{slotProps.data.date}}</span>
</template>
<template #filter> <template #filter>
<Calendar v-model="filters['date']" dateFormat="yy-mm-dd" class="p-column-filter" placeholder="Registration Date"/> <Calendar v-model="filters['date']" dateFormat="yy-mm-dd" class="p-column-filter" placeholder="Registration Date"/>
</template> </template>
@ -291,7 +295,7 @@ export default {
display: none; display: none;
} }
@media screen and (max-width: 64em) { @media screen and (max-width: 960px) {
/deep/ .p-datatable { /deep/ .p-datatable {
&.p-datatable-customers { &.p-datatable-customers {
.p-datatable-thead > tr > th, .p-datatable-thead > tr > th,
@ -299,21 +303,29 @@ export default {
display: none !important; display: none !important;
} }
.p-datatable-tbody > tr > td { .p-datatable-tbody > tr {
text-align: left; border-bottom: 1px solid var(--layer-2);
display: block;
border: 0 none !important;
width: 100% !important;
float: left;
clear: left;
border: 0 none;
.p-column-title { > td {
padding: .4rem; text-align: left;
min-width: 30%; display: block;
display: inline-block; border: 0 none !important;
margin: -.4rem 1rem -.4rem -.4rem; width: 100% !important;
font-weight: bold; float: left;
clear: left;
border: 0 none;
.p-column-title {
padding: .4rem;
min-width: 30%;
display: inline-block;
margin: -.4rem 1rem -.4rem -.4rem;
font-weight: bold;
}
.p-progressbar {
margin-top: .5rem;
}
} }
} }
} }