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

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

@ -160,7 +160,15 @@ export default {
}); });
for (const [index, [key]] of Object.entries(Object.entries(sortedBreakpoints))) { 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') { if (key === 'default') {
innerHTML += ` innerHTML += `
@ -173,10 +181,10 @@ export default {
`; `;
} else { } else {
innerHTML += ` innerHTML += `
.paginator[${this.attributeSelector}], .p-paginator-${key} { .paginator[${this.attributeSelector}], .p-paginator-${key} {
display: none !important; display: none !important;
} }
@media screen ${minValue} and (max-width: ${key}) { @media screen ${minValue} and (max-width: ${key}) {
.paginator[${this.attributeSelector}], .p-paginator-${key} { .paginator[${this.attributeSelector}], .p-paginator-${key} {
display: flex !important; display: flex !important;
} }
@ -184,7 +192,7 @@ export default {
.p-paginator-default{ .p-paginator-default{
display: none !important; display: none !important;
} }
} }
`; `;
} }
} }