jaculabilis/danbooru
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

views: factor out paginator component.

Browse Source 
* Refactor the paginator into a ViewComponent.
* Fix inconsistent spacing between paginator items.
* Fix a bug where the sequential paginator generated the wrong next /
  previous page links in the <link rel="{next|prev}"> tags in the <head>.
* Always include the final page as a hidden html element, so that it can
  be unhidden with custom CSS.
* Make it easier to change the pagination window.
This commit is contained in:
evazion
2021-02-18 00:49:05 -06:00
parent 8b8a3f3836
commit c1805cc4e0
19 changed files with 181 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
app/javascript/src/styles/common/paginator.scss
View File

@@ -1,32 +0,0 @@
div.paginator {
display: block;
padding: 2em 0 1em 0;
text-align: center;
li {
a {
margin: 0 0.25em;
padding: 0.25em 0.75em;
}
&.more {
color: var(--paginator-ellipsis-color);
}
a.arrow:hover {
background: var(--paginator-arrow-background-color);
color: var(--paginator-arrow-color);
}
a:hover {
background: var(--paginator-arrow-color);
color: var(--paginator-arrow-background-color);
}
span {
margin: 0 0.25em;
padding: 0.25em 0.75em;
font-weight: bold;
}
}
}

4
app/javascript/src/styles/common/utilities.scss
View File

@@ -12,12 +12,14 @@ $spacer: 0.25rem; /* 4px */
.flex { display: flex; }
.text-center { text-align: center; }
.text-muted { color: var(--muted-text-color); }
.mx-auto { margin-left: auto; margin-right: auto; }
.mx-2 { margin-left: 2 * $spacer; margin-right: 2 * $spacer; }
.mt-2 { margin-top: 2 * $spacer; }
.mt-4 { margin-top: 4 * $spacer; }
.mt-8 { margin-top: 8 * $spacer; }
.mb-2 { margin-bottom: 2 * $spacer; }
.mb-4 { margin-bottom: 4 * $spacer; }
@@ -31,6 +33,7 @@ $spacer: 0.25rem; /* 4px */
.h-10 { height: 10 * $spacer; }
.space-x-2 > * + * { margin-left: 2 * $spacer; }
.space-x-4 > * + * { margin-left: 4 * $spacer; }
.space-y-4 > * + * { margin-top: 4 * $spacer; }
@@ -38,6 +41,7 @@ $spacer: 0.25rem; /* 4px */
.flex-auto { flex: 1 1 auto; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
@media screen and (min-width: 660px) {
.md\:inline-block { display: inline-block; }