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

2
app/javascript/src/styles/base/040_colors.css
View File

@@ -183,7 +183,6 @@
--wiki-page-other-name-background-color: #EEE;
--paginator-ellipsis-color: grey;
--paginator-arrow-background-color: white;
--paginator-arrow-color: var(--link-color);
@@ -377,7 +376,6 @@ body[data-current-user-theme="dark"] {
--paginator-arrow-background-color: white;
--paginator-arrow-color: var(--link-color);
--paginator-ellipsis-color: var(--grey-4);
--post-artist-commentary-container-background: var(--grey-3);
--post-artist-commentary-container-border: 1px solid var(--grey-3);

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; }

16
app/javascript/src/styles/specific/z_responsive.scss
View File

@@ -41,22 +41,6 @@
}
}
div.paginator {
font-size: var(--text-lg);
padding: 1em 0 0;
li {
a, span {
margin: 0 0.25rem;
padding: 0;
}
&.numbered-page, &.more {
display: none;
}
}
}
#posts #posts-container {
width: 100%;
display: flex;