Skip to content

Commit b87be86

Browse files
wesleyboarwesleyboar
committed
feat(pagination): WIP See TODO and XXX
- 🚧 bootstrap4 .pagination - ✅ default - 🐞 tacc (CMS/Portal) - UI bugs - consider combining - ✅ djangocms-blog .pagination - ❌ TACC .c-page - deleted out of ignorance - must be restored - reference provided
1 parent 89841fc commit b87be86

File tree

10 files changed

+289
-144
lines changed

10 files changed

+289
-144
lines changed

‎src/lib/_imports/bootstrap4/pagination.postcss‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
@import url("../tools/x-pagination.postcss");
2+
3+
.pagination {
4+
@mixin pagination;
5+
}
6+
7+
.page-item:not( :first-child, :last-child ) {
8+
@mixin pagination__item;
9+
}
10+
.page-item:is( :first-child, :last-child ) {
11+
@mixin pagination__item--end;
12+
}
13+
14+
.page-item.skip {
15+
@mixin pagination__item--etc;
16+
}
17+
18+
.page-link {
19+
@mixin pagination__link;
20+
21+
.page-item:is( :first-child, :last-child ) & {
22+
@mixin pagination__link--end;
23+
}
24+
.page-item.skip & {
25+
@mixin pagination__link--etc;
26+
}
27+
28+
.page-item.active & {
29+
@mixin pagination__link--active;
30+
}
31+
.page-item.disabled & {
32+
@mixin pagination__link--disabled;
33+
}
34+
}

‎src/lib/_imports/bootstrap4/pagination/config.yml‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
variants:
2+
- name: default
3+
label: Bootstrap
4+
status: reference
5+
context:
6+
shouldSkipBase: true
7+
- name: tacc-portal
8+
label: TACC (Portal)
9+
status: prototype
10+
context:
11+
shouldSkipPattern: false
12+
shouldLoadPortal: true
13+
- name: tacc-cms
14+
label: TACC (CMS)
15+
status: prototype
16+
context:
17+
shouldSkipPattern: false
18+
shouldLoadCMS: true

‎src/lib/_imports/bootstrap4/pagination/pagination.hbs‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<nav aria-label="Page navigation example">
2+
<ul class="pagination">
3+
<li class="page-item">
4+
<a class="page-link" href="#">&lt; Previous</a>
5+
</li>
6+
<li class="page-item active">
7+
<a class="page-link" href="#">1</a>
8+
</li>
9+
<li class="page-item disabled">
10+
<a class="page-link" href="#">2</a>
11+
</li>
12+
<li class="page-item">
13+
<a class="page-link" href="#">3</a>
14+
</li>
15+
<li class="page-item skip">
16+
<span class="page-link">...</span>
17+
</li>
18+
<li class="page-item">
19+
<a class="page-link" href="#">14</a>
20+
</li>
21+
<li class="page-item">
22+
<a class="page-link" href="#">Next &gt;</a>
23+
</li>
24+
</ul>
25+
</nav>

‎src/lib/_imports/bootstrap4/pagination/readme.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
To override and extend [Bootstrap Pagination](https://getbootstrap.com/docs/4.0/components/pagination/).
2+
3+
<script src="{{path '/assets/scripts/open-ext-links-in-new-window.js'}}" />

‎src/lib/_imports/bootstrap4/pagination/reference/_pagination.scss‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
.pagination {
2+
display: flex;
3+
@include list-unstyled();
4+
@include border-radius();
5+
}
6+
7+
.page-link {
8+
position: relative;
9+
display: block;
10+
padding: $pagination-padding-y $pagination-padding-x;
11+
margin-left: -$pagination-border-width;
12+
line-height: $pagination-line-height;
13+
color: $pagination-color;
14+
text-decoration: if($link-decoration == none, null, none);
15+
background-color: $pagination-bg;
16+
border: $pagination-border-width solid $pagination-border-color;
17+
18+
&:hover {
19+
z-index: 2;
20+
color: $pagination-hover-color;
21+
text-decoration: none;
22+
background-color: $pagination-hover-bg;
23+
border-color: $pagination-hover-border-color;
24+
}
25+
26+
&:focus {
27+
z-index: 3;
28+
outline: $pagination-focus-outline;
29+
box-shadow: $pagination-focus-box-shadow;
30+
}
31+
}
32+
33+
.page-item {
34+
&:first-child {
35+
.page-link {
36+
margin-left: 0;
37+
@include border-left-radius($border-radius);
38+
}
39+
}
40+
&:last-child {
41+
.page-link {
42+
@include border-right-radius($border-radius);
43+
}
44+
}
45+
46+
&.active .page-link {
47+
z-index: 3;
48+
color: $pagination-active-color;
49+
background-color: $pagination-active-bg;
50+
border-color: $pagination-active-border-color;
51+
}
52+
53+
&.disabled .page-link {
54+
color: $pagination-disabled-color;
55+
pointer-events: none;
56+
// Opinionated: remove the "hand" cursor set previously for .page-link
57+
cursor: auto;
58+
background-color: $pagination-disabled-bg;
59+
border-color: $pagination-disabled-border-color;
60+
}
61+
}
62+
63+
64+
//
65+
// Sizing
66+
//
67+
68+
.pagination-lg {
69+
@include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $line-height-lg, $pagination-border-radius-lg);
70+
}
71+
72+
.pagination-sm {
73+
@include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $line-height-sm, $pagination-border-radius-sm);
74+
}

‎src/lib/_imports/components/bootstrap/config.yml‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎src/lib/_imports/components/bootstrap/demo.css‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

‎src/lib/_imports/components/c-page.postcss‎

Lines changed: 4 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,7 @@
1-
/*
2-
Pagination
1+
@import url("../tools/x-pagination.postcss");
32

4-
A navigation list of sequential page toggles with end cap links.
3+
/* TODO: Support /c-page.html classes */
4+
/* FAQ: Core-Components Paginator module expects them */
5+
/* SEE: https://github.com/TACC/Core-Components/blob/v0.0.4/src/lib/Paginator/Paginator.module.css */
56

6-
Markup: c-page.html
77

8-
Styleguide Components.Pagination
9-
*/
10-
@import url("../components/c-button.selectors.postcss");
11-
12-
13-
14-
/* Pagination: Variables */
15-
16-
.c-page-list {
17-
--item-width: 2em;
18-
--item-buffer: 3px;
19-
--item-border: var(--global-border-width--normal); /* WARNING: assumption */
20-
}
21-
22-
23-
24-
/* Pagination: List */
25-
26-
.c-page-list {
27-
display: flex;
28-
flex-direction: row;
29-
align-items: baseline;
30-
list-style: none;
31-
32-
font-size: 14px; /* TEMPORARY: Should be 14px and have commented rem value */
33-
}
34-
ul.c-page-list {
35-
list-style: none;
36-
}
37-
38-
/* Pagination: List: Constant Hover */
39-
40-
.c-page-link--always-click {
41-
position: relative;
42-
box-sizing: content-box;
43-
}
44-
.c-page-link--always-click::before,
45-
.c-page-link--always-click::after {
46-
--width: var(--item-buffer);
47-
--vert-offset: calc( -1 * var(--item-border) );
48-
--horz-offset: calc( 100% + var(--item-border) );
49-
50-
content: '';
51-
width: var(--width);
52-
position: absolute;
53-
top: var(--vert-offset);
54-
bottom: var(--vert-offset);
55-
}
56-
.c-page-link--always-click:--c-button {
57-
overflow: visible; /* overwrite `.c-button` so pseudo elements show */
58-
}
59-
.c-page-link--always-click::before { right: var(--horz-offset) }
60-
.c-page-link--always-click::after { left: var(--horz-offset) }
61-
62-
63-
64-
65-
66-
/* Pagination: Item */
67-
68-
.c-page-item { margin-inline: var(--item-buffer) }
69-
.c-page-item:first-child { margin-left: 0 }
70-
.c-page-item:last-child { margin-right: 0 }
71-
72-
/* Pagination: Item: Truncated */
73-
74-
.c-page-item--etcetera {
75-
min-width: var(--item-width);
76-
margin-inline: 2px;
77-
text-align: center;
78-
79-
cursor: default;
80-
}
81-
82-
83-
84-
/* Pagination: End */
85-
86-
.c-page-end { padding: 4px 12px }
87-
88-
89-
90-
/* Pagination: Link */
91-
92-
.c-page-link {
93-
padding: 5px 0;
94-
min-width: var(--item-width);
95-
line-height: 1.2;
96-
}

‎src/lib/_imports/djangocms-blog/cms-pagination.postcss‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,20 @@
1-
/*
2-
Pagination (Bootstrap)
3-
4-
Style Bootstrap pagination. See:
5-
6-
- [Bootstrap Pagination](https://getbootstrap.com/docs/4.0/components/pagination/)
7-
8-
Styleguide Components.Bootstrap.Pagination
9-
*/
10-
@import url("../components/c-page.postcss");
11-
1+
@import url("../tools/x-pagination.postcss");
122

133
.pagination {
14-
@extend .c-page-list;
4+
@mixin pagination;
155

166
margin-block: var(--global-space--x-large);
177

188
width: fit-content;
199
margin-inline: auto;
2010
}
21-
.pagination a,
11+
.pagination a {
12+
@mixin pagination__item--end;
13+
14+
padding-block: 0;
15+
}
2216
.pagination span {
23-
@extend .c-page-end;
17+
@mixin pagination__item;
2418

2519
padding-block: 0;
2620
}

0 commit comments

Comments
 (0)