Skip to content

feat(v3): pagination #451

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wesleyboar merged 25 commits into from
Feb 17, 2025
Merged

feat(v3): pagination #451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
89841fc
feat(djangocms-blog): pagination
wesleyboar Oct 25, 2024
b87be86
feat(pagination): WIP See `TODO` and `XXX`
wesleyboar Feb 15, 2025
7ba42f6
fix(pagination): skin (color, border, outline, …)
wesleyboar Feb 16, 2025
bcb021d
refactor(pagination): link vs link--end
wesleyboar Feb 16, 2025
b199a3d
docs(pagination): TODO @import x-link x-button
wesleyboar Feb 16, 2025
19d4a58
refactor(pagination): __item & __link → vs __…-item & __…-link
wesleyboar Feb 16, 2025
d4cd2de
fix(pagination): skipped bootstrap link blue
wesleyboar Feb 16, 2025
a3392a9
chore(pagination): re-order style and remove cruft
wesleyboar Feb 16, 2025
f94f955
fix(pagination): button (as link) looses width
wesleyboar Feb 16, 2025
df26eaf
refactor(pagination): assume links are <a>
wesleyboar Feb 16, 2025
5139a24
enhance(pagination): edge cases
wesleyboar Feb 16, 2025
d97bb4f
fix(pagination): cms & portal match but are split
wesleyboar Feb 16, 2025
33c942f
fix(pagination): easy button links & square links
wesleyboar Feb 17, 2025
e4a29f3
fix(c-page): restore
wesleyboar Feb 17, 2025
33d5cc2
fix(c-page): restore it as it was, no c-pagination
wesleyboar Feb 17, 2025
6a3f0c2
feat(pagination): tools/x-pagination demo
wesleyboar Feb 17, 2025
ccc1fbf
fix(pagination): consistent border-radius
wesleyboar Feb 17, 2025
d920d3e
fix(pagination): consistent skip/etc links
wesleyboar Feb 17, 2025
c5e1af5
refactor(pag…): disabled/active links → modifiers
wesleyboar Feb 17, 2025
08f5cb0
enhance(pagination): disabled link for c-page
wesleyboar Feb 17, 2025
bcde2e0
fix(pag…): c-page should NOT use button class
wesleyboar Feb 17, 2025
adcdd86
fix(pag…): list too tall, inconsistentent w/ x-…
wesleyboar Feb 17, 2025
a32678f
enhancepagination): consistent demos
wesleyboar Feb 17, 2025
dc38145
chore(pagination): mark all demos as ready
wesleyboar Feb 17, 2025
2f15737
fix(pagination): bootstrap discrepancy
wesleyboar Feb 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
68 changes: 68 additions & 0 deletions src/lib/_imports/bootstrap4/pagination.postcss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
@import url("../tools/x-pagination.postcss");

.pagination {
@mixin pagination;
}

.page-item:not(
:first-child,
:last-child,
.skip
) {
@mixin pagination__page-item;

& .page-link {
@mixin pagination__page-link;
}
}

.page-item:is(
:first-child,
:last-child
) {
@mixin pagination__end-item;

& .page-link {
@mixin pagination__end-link;

border: none;
background-color: transparent;
border-radius: unset;
}
}

.page-item.skip {
@mixin pagination__skipped-item;

& .page-link {
@mixin pagination__skipped-link;

color: inherit;
border: none;
background-color: transparent;
}
}

.page-item.active {
@mixin pagination__active-item;

& .page-link {
@mixin pagination__page-link--active;
}
}

.page-item.disabled {
@mixin pagination__disabled-item;

& .page-link {
@mixin pagination__page-link--disabled;
}
}

.page-link {
margin-left: unset;

&:focus {
box-shadow: none;
}
}
12 changes: 12 additions & 0 deletions src/lib/_imports/bootstrap4/pagination/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
variants:
- name: default
label: Bootstrap
status: reference
context:
shouldSkipBase: true
- name: tacc
label: TACC
status: ready
context:
shouldSkipPattern: false

3 changes: 3 additions & 0 deletions src/lib/_imports/bootstrap4/pagination/demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
nav + nav {
padding-top: 20px;
}
194 changes: 194 additions & 0 deletions src/lib/_imports/bootstrap4/pagination/pagination.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,194 @@
<!-- Single Page -->
<nav>
<ul class="pagination">
<li class="page-item disabled">
<span class="page-link">&lt; Previous</span>
</li>
<li class="page-item active">
<span class="page-link">1</span>
</li>
<li class="page-item disabled">
<span class="page-link">Next &gt;</span>
</li>
</ul>
</nav>

<!-- Few Pages (Current: 2 of 4) -->
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">&lt; Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item active">
<span class="page-link">2</span>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next &gt;</a>
</li>
</ul>
</nav>

<!-- Few Pages (Current: Last) -->
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">&lt; Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item">
<a class="page-link" href="#">3</a>
</li>
<li class="page-item active">
<span class="page-link">4</span>
</li>
<li class="page-item disabled">
<span class="page-link">Next &gt;</span>
</li>
</ul>
</nav>

<!-- Many Pages - Near Start (Current: 3 of 20) -->
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">&lt; Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item active">
<span class="page-link">3</span>
</li>
<li class="page-item">
<a class="page-link" href="#">4</a>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item skip">
<span class="page-link">...</span>
</li>
<li class="page-item">
<a class="page-link" href="#">20</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next &gt;</a>
</li>
</ul>
</nav>

<!-- Many Pages - Middle (Current: 10 of 20) -->
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">&lt; Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item skip">
<span class="page-link">...</span>
</li>
<li class="page-item">
<a class="page-link" href="#">8</a>
</li>
<li class="page-item">
<a class="page-link" href="#">9</a>
</li>
<li class="page-item active">
<span class="page-link">10</span>
</li>
<li class="page-item">
<a class="page-link" href="#">11</a>
</li>
<li class="page-item">
<a class="page-link" href="#">12</a>
</li>
<li class="page-item skip">
<span class="page-link">...</span>
</li>
<li class="page-item">
<a class="page-link" href="#">20</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next &gt;</a>
</li>
</ul>
</nav>

<!-- Many Pages - Near End (Current: 18 of 20) -->
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">&lt; Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item skip">
<span class="page-link">...</span>
</li>
<li class="page-item">
<a class="page-link" href="#">16</a>
</li>
<li class="page-item">
<a class="page-link" href="#">17</a>
</li>
<li class="page-item active">
<span class="page-link">18</span>
</li>
<li class="page-item">
<a class="page-link" href="#">19</a>
</li>
<li class="page-item">
<a class="page-link" href="#">20</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next &gt;</a>
</li>
</ul>
</nav>

<!-- Example with Disabled Link -->
<nav>
<ul class="pagination">
<li class="page-item">
<a class="page-link" href="#">&lt; Previous</a>
</li>
<li class="page-item">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2</a>
</li>
<li class="page-item active">
<span class="page-link">3</span>
</li>
<li class="page-item disabled">
<span class="page-link">4</span>
</li>
<li class="page-item">
<a class="page-link" href="#">5</a>
</li>
<li class="page-item">
<a class="page-link" href="#">Next &gt;</a>
</li>
</ul>
</nav>
3 changes: 3 additions & 0 deletions src/lib/_imports/bootstrap4/pagination/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
To override and extend [Bootstrap Pagination](https://getbootstrap.com/docs/4.0/components/pagination/).

<script src="{{path '/assets/scripts/open-ext-links-in-new-window.js'}}" />
74 changes: 74 additions & 0 deletions src/lib/_imports/bootstrap4/pagination/reference/_pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
.pagination {
display: flex;
@include list-unstyled();
@include border-radius();
}

.page-link {
position: relative;
display: block;
padding: $pagination-padding-y $pagination-padding-x;
margin-left: -$pagination-border-width;
line-height: $pagination-line-height;
color: $pagination-color;
text-decoration: if($link-decoration == none, null, none);
background-color: $pagination-bg;
border: $pagination-border-width solid $pagination-border-color;

&:hover {
z-index: 2;
color: $pagination-hover-color;
text-decoration: none;
background-color: $pagination-hover-bg;
border-color: $pagination-hover-border-color;
}

&:focus {
z-index: 3;
outline: $pagination-focus-outline;
box-shadow: $pagination-focus-box-shadow;
}
}

.page-item {
&:first-child {
.page-link {
margin-left: 0;
@include border-left-radius($border-radius);
}
}
&:last-child {
.page-link {
@include border-right-radius($border-radius);
}
}

&.active .page-link {
z-index: 3;
color: $pagination-active-color;
background-color: $pagination-active-bg;
border-color: $pagination-active-border-color;
}

&.disabled .page-link {
color: $pagination-disabled-color;
pointer-events: none;
// Opinionated: remove the "hand" cursor set previously for .page-link
cursor: auto;
background-color: $pagination-disabled-bg;
border-color: $pagination-disabled-border-color;
}
}


//
// Sizing
//

.pagination-lg {
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $pagination-border-radius-lg);
}

.pagination-sm {
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $pagination-border-radius-sm);
}
30 changes: 0 additions & 30 deletions src/lib/_imports/components/bootstrap/config.yml
View file
Open in desktop

This file was deleted.

7 changes: 0 additions & 7 deletions src/lib/_imports/components/bootstrap/demo.css
View file
Open in desktop

This file was deleted.

Loading