diff options
| author | Jieiku | 2022-05-31 01:19:49 -0700 |
|---|---|---|
| committer | Jieiku | 2022-05-31 01:19:49 -0700 |
| commit | 6cf2997babcb488b14da04db0ba4a281dec6b942 (patch) | |
| tree | c9cd83e4ac3aff0f2c2db85d721b7334d8a42f52 | |
| parent | 9d756147a4e61275c68da65af12efc5166cbd5f9 (diff) | |
| download | abridge-6cf2997babcb488b14da04db0ba4a281dec6b942.tar.gz abridge-6cf2997babcb488b14da04db0ba4a281dec6b942.tar.bz2 abridge-6cf2997babcb488b14da04db0ba4a281dec6b942.zip | |
Paginator Improvements
| -rw-r--r-- | .nojekyll | 1 | ||||
| -rw-r--r-- | sass/include/_nav.scss | 14 | ||||
| -rw-r--r-- | templates/macros/macros.html | 53 |
3 files changed, 56 insertions, 12 deletions
diff --git a/.nojekyll b/.nojekyll new file mode 100644 index 0000000..8b13789 --- /dev/null +++ b/.nojekyll @@ -0,0 +1 @@ + diff --git a/sass/include/_nav.scss b/sass/include/_nav.scss index dbde885..999d296 100644 --- a/sass/include/_nav.scss +++ b/sass/include/_nav.scss @@ -7,6 +7,20 @@ } main nav { margin-top: var(--s2);//pagination margin + ul li:nth-child(-n+2) { + margin-right: var(--s2); //pagination prev/first padding + } + ul li:nth-last-child(-n+2) { + margin-left: var(--s2); //pagination next/last padding + } +} +.off { + color: var(--c4); + font-weight: var(--fh); + border: .1rem solid var(--c4); + border-radius: var(--br); + padding: .1rem var(--s1); + margin: .1rem; } main nav a, main nav a:visited {//pagination link styling diff --git a/templates/macros/macros.html b/templates/macros/macros.html index 454854a..e4fcf73 100644 --- a/templates/macros/macros.html +++ b/templates/macros/macros.html @@ -23,21 +23,50 @@ {%- macro pagination(paginator)%} {%- if paginator.number_pagers > 1 %} + {%- if paginator.number_pagers <= 5 %} {# 5 or less pager is simple, just display all 5 #} + {%- set start = 1 %} + {%- set end = paginator.number_pagers %} + {%- endif %} + + {%- if paginator.number_pagers > 5 %} + + {%- if paginator.current_index >= 3 %} {# Check if the first number will be 1 or not #} + {%- set start = paginator.current_index - 2 %} {# Set the start number #} + {%- if paginator.number_pagers - paginator.current_index < 2 %} {# the last two pages your no longer centered with equal pages start and end #} + {%- set difference = paginator.number_pagers - paginator.current_index %} + {%- set compensation = 1 - difference %} + {%- set start = paginator.current_index - 3 - compensation %} {# however many pages are missing on the end, add offset to start #} + {%- endif %} + {%- else %} + {%- set start = 1 %} + {%- endif %} + + {%- if paginator.number_pagers >= paginator.current_index + 2 %} {# Check if the last page is beyond our range #} + {%- set end = paginator.current_index + 2 %} {# End is beyond our range so we can safely set it to our range #} + {%- if paginator.current_index <= 3 %} {# check offset start, if on page 1 or 2 then set the end to page 5 #} + {%- set end = 5 %} + {%- endif %} + {%- else %} + {%- set end = paginator.number_pagers %} + {%- endif %} + {%- endif %} <nav> <ul> - {%- if paginator.previous %}<li><a href="{{ paginator.previous | safe }}">< Previous</a></li>{% endif %} - {%- for i in range(start=1, end=paginator.number_pagers+1) %} - <li> - {%- if i == paginator.current_index %} - <a class="cnav" href="#">{{i}}</a> - {%- elif i > 1 %} - <a href="{{paginator.base_url | safe }}{{i ~ '/'}}">{{i}}</a> - {%- else %} - <a href="{{paginator.first | safe }}">{{i}}</a> - {%- endif %} - </li> + {%- if paginator.previous %}<li><a href="{{ paginator.first | safe }}">| <</a></li>{% else %}<li><span class="off">| <</span></li>{% endif %} + {%- if paginator.previous %}<li><a href="{{ paginator.previous | safe }}"><</a></li>{% else %}<li><span class="off"><</span></li>{% endif %} + {%- for i in range(start=start, end=end+1) %} + <li> + {%- if i == paginator.current_index %} + <a class="cnav" href="#">{{i}}</a> + {%- elif i > 1 %} + <a href="{{ paginator.base_url | safe }}{{ i ~ '/' }}">{{i}}</a> + {%- else %} + <a href="{{ paginator.first | safe }}">{{ i }}</a> + {%- endif %} + </li> {%- endfor %} - {%- if paginator.next %}<li><a href="{{ paginator.next | safe }}">Next ></a></li>{% endif %} + {%- if paginator.next %}<li><a href="{{ paginator.next | safe }}">></a></li>{% else %}<li><span class="off">></span></li>{% endif %} + {%- if paginator.next %}<li><a href="{{ paginator.last | safe }}">> |</a></li>{% else %}<li><span class="off">> |</span></li>{% endif %} </ul> </nav> {%- endif %} |
