Responsive pagination bar on Page Index

This commit is contained in:
Brian Huisman 2023-09-15 10:32:59 -04:00
parent 873a18fbc9
commit f8bed73c26
2 changed files with 47 additions and 21 deletions

View file

@ -1879,28 +1879,25 @@ ORCINUS;
} else { ?>
<li class="page-item disabled"><span class="page-link">Previous</span></li><?php
}
if ($_RDATA['index_pages'] < 6) {
for ($x = 1; $x <= $_RDATA['index_pages']; $x++) {
if ($x != $_SESSION['index_page']) { ?>
<li class="page-item"><a class="page-link" href="?ipage=<?php echo $x; ?>"><?php echo $x; ?></a></li><?php
} else { ?>
<li class="page-item disabled"><span class="page-link"><strong><?php echo $x; ?></strong></span></li><?php
}
for ($x = 1; $x <= $_RDATA['index_pages']; $x++) {
if ($x != $_SESSION['index_page']) { ?>
<li class="page-item"><a class="page-link" href="?ipage=<?php echo $x; ?>"><?php echo $x; ?></a></li><?php
} else { ?>
<li class="page-item disabled"><span class="page-link"><strong><?php echo $x; ?></strong></span></li><?php
}
} else { ?>
<li class="page-item d-table">
<label class="d-table-cell align-middle h-100 text-nowrap ps-3 pe-3 h-100 border border-1">
<span class="align-middle">Jump to page:</span>
<select name="os_index_pagination_page_select" class="form-select form-select-sm d-inline-block w-auto"><?php
for ($x = 1; $x <= $_RDATA['index_pages']; $x++) { ?>
<option value="<?php echo $x; ?>"<?php
if ($x == $_SESSION['index_page']) echo ' selected="selected"';
?>><?php echo $x; ?></option><?php
}
?></select>
</label>
</li><?php
}
} ?>
<li class="page-item d-none border border-1" id="os_pagination_jump">
<label class="text-nowrap ps-3 pe-3 h-100 d-flex align-items-center">
<span class="pe-1">Jump to page:</span>
<select name="os_index_pagination_page_select" class="form-select form-select-sm d-inline-block w-auto"><?php
for ($x = 1; $x <= $_RDATA['index_pages']; $x++) { ?>
<option value="<?php echo $x; ?>"<?php
if ($x == $_SESSION['index_page']) echo ' selected="selected"';
?>><?php echo $x; ?></option><?php
}
?></select>
</label>
</li><?php
if ($_SESSION['index_page'] < $_RDATA['index_pages']) { ?>
<li class="page-item"><a class="page-link" href="?ipage=<?php echo $_SESSION['index_page'] + 1; ?>">Next</a></li><?php
} else { ?>

View file

@ -176,6 +176,35 @@ for (let x = 0; x < os_index_pagination_page_select.length; x++) {
}, false);
}
let os_index_pagination_bars = document.querySelectorAll('nav > ul.pagination');
for (let x = 0; x < os_index_pagination_bars.length; x++) {
os_index_pagination_bars[x].items = os_index_pagination_bars[x].getElementsByTagName('li');
os_index_pagination_bars[x].checkWidth = function() {
let totalWidth = 0;
for (let y = 0; y < this.items.length; y++) {
if (this.items[y].id != 'os_pagination_jump') {
this.items[y].classList.remove('d-none');
totalWidth += this.items[y].offsetWidth;
}
}
for (let y = 1; y < this.items.length - 1; y++) {
if (totalWidth / this.offsetWidth > 0.75) {
this.items[y].classList.add('d-none');
if (this.items[y].id == 'os_pagination_jump')
this.items[y].classList.remove('d-none');
} else if (this.items[y].id == 'os_pagination_jump')
this.items[y].classList.add('d-none');
}
}
os_index_pagination_bars[x].checkWidth();
}
if (os_index_pagination_bars.length) {
window.addEventListener('resize', function() {
for (let x = 0; x < os_index_pagination_bars.length; x++)
os_index_pagination_bars[x].checkWidth();
}, false);
}
let os_index_filter_text = document.querySelector('input[name="os_index_filter_text"]');
let os_index_filter_text_clear = document.querySelector('button[name="os_index_filter_text_clear"]');
if (os_index_filter_text_clear && os_index_filter_text) {