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>
</Column>
<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>
<Calendar v-model="filters['date']" dateFormat="yy-mm-dd" class="p-column-filter" placeholder="Registration Date"/>
</template>
@ -291,7 +295,7 @@ export default {
display: none;
}
@media screen and (max-width: 64em) {
@media screen and (max-width: 960px) {
/deep/ .p-datatable {
&.p-datatable-customers {
.p-datatable-thead > tr > th,
@ -299,21 +303,29 @@ export default {
display: none !important;
}
.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-tbody > tr {
border-bottom: 1px solid var(--layer-2);
.p-column-title {
padding: .4rem;
min-width: 30%;
display: inline-block;
margin: -.4rem 1rem -.4rem -.4rem;
font-weight: bold;
> td {
text-align: left;
display: block;
border: 0 none !important;
width: 100% !important;
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;
}
}
}
}