Responsive pagination bar on Page Index
This commit is contained in:
parent
873a18fbc9
commit
f8bed73c26
|
@ -1879,18 +1879,16 @@ 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
|
||||
}
|
||||
}
|
||||
} 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>
|
||||
} ?>
|
||||
<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
|
||||
|
@ -1900,7 +1898,6 @@ ORCINUS;
|
|||
?></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 { ?>
|
||||
|
|
|
@ -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) {
|
||||
|
|
Loading…
Reference in a new issue