From 99a88aa9bb47b039ac14ed7bf553815c95bab8e1 Mon Sep 17 00:00:00 2001 From: James Mejia Date: Mon, 7 Dec 2020 12:47:47 -0600 Subject: [PATCH 001/257] =?UTF-8?q?Start=20prototyping=20Pagination.=20?= =?UTF-8?q?=F0=9F=94=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Add config file - Add template with sample markup - Start basic theming --- .../pagination/pagination.config.yml | 6 ++ src/components/pagination/pagination.njk | 64 +++++++++++++++++++ src/stylesheets/components/_pagination.scss | 38 +++++++++++ .../packages/_uswds-components.scss | 1 + 4 files changed, 109 insertions(+) create mode 100644 src/components/pagination/pagination.config.yml create mode 100644 src/components/pagination/pagination.njk create mode 100644 src/stylesheets/components/_pagination.scss diff --git a/src/components/pagination/pagination.config.yml b/src/components/pagination/pagination.config.yml new file mode 100644 index 0000000000..b4c92064ec --- /dev/null +++ b/src/components/pagination/pagination.config.yml @@ -0,0 +1,6 @@ +label: Pagination +status: wip +order: -1 + +context: + placeholder_link: "javascript:void(0);" diff --git a/src/components/pagination/pagination.njk b/src/components/pagination/pagination.njk new file mode 100644 index 0000000000..5ff9bb67e8 --- /dev/null +++ b/src/components/pagination/pagination.njk @@ -0,0 +1,64 @@ +{# TODO - Create macro #} +{% set sprite_path = uswds.path + "/img/sprite.svg" %} + + diff --git a/src/stylesheets/components/_pagination.scss b/src/stylesheets/components/_pagination.scss new file mode 100644 index 0000000000..ca333a6e23 --- /dev/null +++ b/src/stylesheets/components/_pagination.scss @@ -0,0 +1,38 @@ +// ? Potential settings +// ? --------------------------------- +$theme-pagination-breakpoint: "mobile-lg"; + +.usa-pagination__list { + @include add-list-reset; + display: flex; + flex-flow: row nowrap; + align-items: center; + justify-content: space-between; + + @include at-media($theme-pagination-breakpoint) { + justify-content: start; + } +} + +// +// Only display Previous/Next on mobile +// +.usa-pagination__item--previous-group, +.usa-pagination__item--page-no, +.usa-pagination__item--next-group { + @include at-media-max($theme-pagination-breakpoint) { + display: none; + } +} + +.usa-pagination__link, +.usa-pagination__current { + padding: units("05"); +} + +.usa-pagination__link { + color: inherit; + display: inline-flex; + align-items: center; + text-decoration: none; +} diff --git a/src/stylesheets/packages/_uswds-components.scss b/src/stylesheets/packages/_uswds-components.scss index 14074fdef6..25b5d2892a 100644 --- a/src/stylesheets/packages/_uswds-components.scss +++ b/src/stylesheets/packages/_uswds-components.scss @@ -42,6 +42,7 @@ @import "../components/nav-container"; @import "../components/navbar"; @import "../components/navigation"; +@import "../components/pagination"; @import "../components/process-list"; @import "../components/step-indicator"; @import "../components/search"; From 29a93d86c8169a905b222a927f2c6192eb1c99dc Mon Sep 17 00:00:00 2001 From: James Mejia Date: Tue, 8 Dec 2020 10:59:10 -0600 Subject: [PATCH 002/257] Update pagination nav classes, add label and view all. --- src/components/pagination/pagination.njk | 35 +++++++++++++++--------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/src/components/pagination/pagination.njk b/src/components/pagination/pagination.njk index 5ff9bb67e8..299286e54d 100644 --- a/src/components/pagination/pagination.njk +++ b/src/components/pagination/pagination.njk @@ -2,63 +2,72 @@ {% set sprite_path = uswds.path + "/img/sprite.svg" %} From 028c1eea4c68a17df20176bef7ad208b9b556cbd Mon Sep 17 00:00:00 2001 From: James Mejia Date: Tue, 8 Dec 2020 11:28:34 -0600 Subject: [PATCH 003/257] Theme pagination. --- src/stylesheets/components/_pagination.scss | 132 +++++++++++++++++--- 1 file changed, 117 insertions(+), 15 deletions(-) diff --git a/src/stylesheets/components/_pagination.scss b/src/stylesheets/components/_pagination.scss index ca333a6e23..c4e7910738 100644 --- a/src/stylesheets/components/_pagination.scss +++ b/src/stylesheets/components/_pagination.scss @@ -1,38 +1,140 @@ // ? Potential settings // ? --------------------------------- $theme-pagination-breakpoint: "mobile-lg"; +$theme-pagination-padding: 1; +$theme-pagination-border-radius: "md"; +$theme-pagination-border-width: 1px; +$theme-pagination-border-color: "base-light"; +$theme-pagination-background-color: "gray-2"; +$theme-pagination-margin-y: 1.5; +// Pagination +// --------------------------------- +.usa-pagination { + @include u-margin-y($theme-pagination-margin-y); + align-items: center; + display: flex; + flex-direction: row; +} + +// Shared styles +// --------------------------------- +.usa-pagination__label, +.usa-pagination__link, +.usa-pagination__current, +.usa-pagination__ellipsis { + padding: units($theme-pagination-padding); +} + +// Only display Previous/Next on mobile +.usa-pagination__label, +.usa-pagination__item:not(.usa-pagination__previous-page):not(.usa-pagination__next-page), +.usa-pagination__view-all { + @include at-media-max($theme-pagination-breakpoint) { + display: none; + } +} + +.usa-pagination__link, +.usa-pagination__current, +.usa-pagination__ellipsis { + background-color: color($theme-pagination-background-color); + border-color: color($theme-pagination-border-color); + border-style: solid; + border-width: units($theme-pagination-border-width); + display: inline-flex; + justify-content: center; + + @include at-media($theme-pagination-breakpoint) { + width: 100%; + } +} + +// Showing X of Y label +// --------------------------------- +.usa-pagination__label { + flex-grow: 1; + padding-left: 0; +} + +// Pagination nav +// --------------------------------- .usa-pagination__list { @include add-list-reset; + align-items: center; display: flex; flex-flow: row nowrap; - align-items: center; justify-content: space-between; + width: 100%; @include at-media($theme-pagination-breakpoint) { justify-content: start; + margin-left: units(2); + margin-right: units(2); + width: auto; } } -// -// Only display Previous/Next on mobile -// -.usa-pagination__item--previous-group, -.usa-pagination__item--page-no, -.usa-pagination__item--next-group { - @include at-media-max($theme-pagination-breakpoint) { - display: none; +// Pagination nav items +.usa-pagination__item { + line-height: 1; + min-width: 2ex; + + @include at-media($theme-pagination-breakpoint) { + flex: 1; } -} -.usa-pagination__link, -.usa-pagination__current { - padding: units("05"); + // All pagination items, except the 1st. + &:not(:first-of-type) > * { + @include at-media($theme-pagination-breakpoint) { + border-left-color: transparent; + } + } } .usa-pagination__link { - color: inherit; - display: inline-flex; align-items: center; + color: inherit; text-decoration: none; + outline-offset: (units($theme-pagination-padding) / 2) * -1 !important; + + &[disabled] { + color: color("base-light"); + pointer-events: none; + } + + &:hover { + color: color("primary"); + } +} + +.usa-pagination__previous-group { + .usa-pagination__link { + border-bottom-left-radius: radius($theme-pagination-border-radius); + border-top-left-radius: radius($theme-pagination-border-radius); + } +} + +.usa-pagination__current { + @include set-text-and-bg($theme-color-primary); + border-color: color("primary-darker"); +} + +.usa-pagination__next-group { + .usa-pagination__link { + border-bottom-right-radius: radius($theme-pagination-border-radius); + border-top-right-radius: radius($theme-pagination-border-radius); + } +} + +// View All link +// --------------------------------- +.usa-pagination__view-all { + color: color("base-darker"); + margin-left: auto; + text-decoration: none; + + &:hover { + color: color("primary"); + } } From 79f32cd2a95ce6acc18934b8ad7825219168428c Mon Sep 17 00:00:00 2001 From: James Mejia Date: Tue, 8 Dec 2020 11:44:25 -0600 Subject: [PATCH 004/257] Show 2 pages before and after. --- src/components/pagination/pagination.njk | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/pagination/pagination.njk b/src/components/pagination/pagination.njk index 299286e54d..e75aa567d6 100644 --- a/src/components/pagination/pagination.njk +++ b/src/components/pagination/pagination.njk @@ -30,25 +30,25 @@
  • - + 2 - -
    • -
  • - - 3
  • - + …
  • - + 11
    • +
  • + + 12 + +
    • {# Next buttons #}
  • From 6d1263b0e056e5dc585529e5c560b02022804df0 Mon Sep 17 00:00:00 2001 From: James Mejia Date: Tue, 8 Dec 2020 12:20:58 -0600 Subject: [PATCH 005/257] Fix label amount. --- src/components/pagination/pagination.njk | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/pagination/pagination.njk b/src/components/pagination/pagination.njk index e75aa567d6..40f050bf1f 100644 --- a/src/components/pagination/pagination.njk +++ b/src/components/pagination/pagination.njk @@ -3,7 +3,7 @@