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

Fixed #4458 - Paginator: Responsive Templating showing multiple layouts on break points

pull/4837/head
tugcekucukoglu 2023-11-16 17:00:19 +03:00
parent a1992e475f
commit fbec81fa8d
1 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/lib/paginator/Paginator.vue
View File

@ -160,7 +160,15 @@ export default {
});
for (const [index, [key]] of Object.entries(Object.entries(sortedBreakpoints))) {
const minValue = Object.entries(sortedBreakpoints)[index - 1] ? `and (min-width:${Object.keys(sortedBreakpoints)[index - 1]})` : '';
let minValue, calculatedMinValue;
if (key !== 'default' && typeof Object.keys(sortedBreakpoints)[index - 1] === 'string') {
calculatedMinValue = Number(Object.keys(sortedBreakpoints)[index - 1].slice(0, -2)) + 1 + 'px';
} else {
calculatedMinValue = Object.keys(sortedBreakpoints)[index - 1];
}
minValue = Object.entries(sortedBreakpoints)[index - 1] ? `and (min-width:${calculatedMinValue})` : '';
if (key === 'default') {
innerHTML += `
@ -173,18 +181,18 @@ export default {
`;
} else {
innerHTML += `
.paginator[${this.attributeSelector}], .p-paginator-${key} {
display: none !important;
}
@media screen ${minValue} and (max-width: ${key}) {
.paginator[${this.attributeSelector}], .p-paginator-${key} {
display: flex !important;
}
.paginator[${this.attributeSelector}],
.p-paginator-default{
display: none !important;
}
}
.paginator[${this.attributeSelector}], .p-paginator-${key} {
display: none !important;
}
@media screen ${minValue} and (max-width: ${key}) {
.paginator[${this.attributeSelector}], .p-paginator-${key} {
display: flex !important;
}
.paginator[${this.attributeSelector}],
.p-paginator-default{
display: none !important;
}
}
`;
}
}