diff --git a/scss/_pagination.scss b/scss/_pagination.scss index 7de7a280cb..c9028fad3e 100644 --- a/scss/_pagination.scss +++ b/scss/_pagination.scss @@ -100,6 +100,21 @@ } } +// Boosted mod +.page-ellipsis { + display: flex; + + &::after { + display: flex; + align-items: center; + justify-content: center; + width: calc((var(--#{$prefix}pagination-icon-size) + var(--#{$prefix}pagination-border-width) * 2)); // stylelint-disable-line function-disallowed-list + content: "..."; + background-color: var(--#{$prefix}pagination-bg); + } +} +// End mod + .page-item { &:not(:first-child) .page-link { margin-left: $pagination-margin-start; @@ -177,24 +192,18 @@ margin-left: var(--#{$prefix}pagination-margin-x-first-last); } - @include media-breakpoint-down(sm) { - @include pagination-max-items(4); - } - - @include media-breakpoint-between(sm, md) { - @include pagination-max-items(6); - } - - @include media-breakpoint-between(md, lg) { - @include pagination-max-items(8); - } + @if $enable-responsive-pagination { + @include media-breakpoint-down(sm) { + @include pagination-max-items(3); + } - @include media-breakpoint-between(lg, xl) { - @include pagination-max-items(10); - } + @include media-breakpoint-between(sm, md) { + @include pagination-max-items(10); + } - @include media-breakpoint-up(xl) { - @include pagination-max-items(12); + @include media-breakpoint-up(md) { + @include pagination-max-items(12); + } } // End mod } diff --git a/scss/_variables.scss b/scss/_variables.scss index 09aa0961c1..ddb861fb21 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -427,23 +427,24 @@ $orange-filter: invert(46%) sepia(60%) saturate(2878%) hue-rotate(6deg) // // Quickly modify global styling by enabling or disabling optional features. -$enable-caret: true !default; -$enable-rounded: false !default; -$enable-shadows: false !default; -$enable-gradients: false !default; -$enable-transitions: true !default; -$enable-reduced-motion: true !default; -$enable-smooth-scroll: true !default; -$enable-grid-classes: true !default; -$enable-container-classes: true !default; -$enable-cssgrid: false !default; -$enable-button-pointers: true !default; -$enable-rfs: false !default; -$enable-validation-icons: true !default; -$enable-negative-margins: false !default; -$enable-deprecation-messages: false !default; -$enable-important-utilities: true !default; -$enable-fixed-header: true !default; // Boosted mod: used to apply scroll-padding-top +$enable-caret: true !default; +$enable-rounded: false !default; +$enable-shadows: false !default; +$enable-gradients: false !default; +$enable-transitions: true !default; +$enable-reduced-motion: true !default; +$enable-smooth-scroll: true !default; +$enable-grid-classes: true !default; +$enable-container-classes: true !default; +$enable-cssgrid: false !default; +$enable-button-pointers: true !default; +$enable-rfs: false !default; +$enable-validation-icons: true !default; +$enable-negative-margins: false !default; +$enable-deprecation-messages: false !default; +$enable-important-utilities: true !default; +$enable-fixed-header: true !default; // Boosted mod: used to apply scroll-padding-top +$enable-responsive-pagination: false !default; // Boosted mod: used to apply smart responsive pagination behavior $enable-dark-mode: true !default; $color-mode-type: data !default; // `data` or `media-query` diff --git a/scss/mixins/_pagination.scss b/scss/mixins/_pagination.scss index 475000bec8..9c8c5f1061 100644 --- a/scss/mixins/_pagination.scss +++ b/scss/mixins/_pagination.scss @@ -11,17 +11,86 @@ // scss-docs-start pagination-max-items-mixin // Boosted mod -// Ensure we only display `n` items: -// - the first `n/2` items -// - the last `n/2` items -// - including the .active one (so maybe not the `n/2`th last item) -@mixin pagination-max-items($pagination-max-items) { +// The pagination list ((m) items) should display exactly (n) items and is built in 3 parts: +// - the begining of the list is made of the first (n/2) items +// - the end of the list is made of the last (n/2) items (or (n/2 - 1) depending on the active element) +// - the last part of the list is made of the active element +// - n should be greater than 0: +// - between 0 and 6 included, it displays the smallest version +// - above 7 included, it displays at least two arrows, the first, the active and the last and might have 2 three dots +@mixin pagination-max-items($pagination-max-items: 12) { display: none; - &.active, - &:nth-child(-n+#{$pagination-max-items * .5}), - &:nth-last-child(-n+#{$pagination-max-items * .5}) { - display: list-item; + @if $pagination-max-items >= 7 { + // this determines the number of displayed numbers required at the beginning and end of a list + $half-first-items: $pagination-max-items * .5; + $half-last-items: $pagination-max-items * .5; + @if $pagination-max-items % 2 != 0 { + $half-first-items: ($pagination-max-items - 1) * .5; + $half-last-items: ($pagination-max-items + 1) * .5; + } + + // rule 0: don't display any item unless they are part of the following list: + // - the active item + // - the (n/2 - 1) first items + // - the (n/2) last items + // - the (n/2) first item where m equals n + &.active, + &:nth-child(-n + #{$half-first-items - 1}), + &:nth-last-child(-n + #{$half-last-items}), + &:nth-child(#{$half-first-items}):nth-last-child(#{$half-last-items + 1}) { + display: flex; + } + + // rule 1: display `...` on: + // - the (n/2 - 1) first item if not the last child + // - the active item when it's: + // - not in (n/2 - 1) first items + // - not in (n/2) last items + // - not the (n/2) first item when m equals n + &:nth-child(#{$half-first-items - 1}):not(:last-child), + &:nth-child(#{$half-first-items - 1}) ~ .active:not(:nth-last-child(-n + #{$half-last-items})):not(:nth-child(#{$half-first-items}):nth-last-child(#{$half-last-items + 1})) { + &::after { + display: flex; + align-items: center; + justify-content: center; + width: calc((var(--#{$prefix}pagination-icon-size) + var(--#{$prefix}pagination-border-width) * 2)); // stylelint-disable-line function-disallowed-list + content: "..."; + background-color: var(--#{$prefix}pagination-bg); + } + } + + // rule 2: cover the three dots when: + // - the (n/2) first item when: + // - it's the active item + // - it's in a list where m is less or equal n + &.active:nth-child(#{$half-first-items}), + &:nth-child(#{$half-first-items}):nth-last-child(-n + #{$half-last-items + 1}) { + margin-left: calc(-1 * (var(--#{$prefix}pagination-icon-size) + var(--#{$prefix}pagination-border-width) * 2)); // stylelint-disable-line function-disallowed-list + } + + // rule 3: remove some extra items due to three dots: + // - the (n/2) last item when it follows the active item situated between the (n/2 - 1) first item and (n/2 + 1) last item (excluded) and m doesn't equal n + // - the (n/2 - 1) last item when it follows the active item situated between the (n/2) first item and (n/2) last item (excluded) + &:nth-child(#{$half-first-items}) ~ .active:not(:nth-last-child(#{$half-last-items})) ~ :nth-last-child(#{$half-last-items - 1}), + &:nth-child(#{$half-first-items - 1}) ~ .active:not(:nth-child(#{$half-first-items}):nth-last-child(#{$half-last-items + 1})) ~ :nth-last-child(#{$half-last-items}) { + display: none; + } + } @else { + // smallest version of the pagination + &.active, + &:first-child, + &:last-child { + display: flex; + } + + &.active .page-link { + --bs-pagination-padding-y: 0; + --bs-pagination-padding-x: .625rem; + color: var(--#{$prefix}pagination-color); + background-color: var(--#{$prefix}pagination-bg); + border-color: transparent; + } } } // scss-docs-end pagination-max-items-mixin diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index ee77113db0..d84e4ffdab 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -393,6 +393,26 @@ } } +// Boosted mod: allow to display smart responsive pagination behavior in the docs +// when `$enable-responsive-pagination` is enabled (see site/assets/scss/docs.scss) +.bd-example-responsive-pagination { + // scss-docs-start pagination-mixin-use + .page-item { + @include media-breakpoint-down(sm) { + @include pagination-max-items(3); + } + + @include media-breakpoint-between(sm, md) { + @include pagination-max-items(10); + } + + @include media-breakpoint-up(md) { + @include pagination-max-items(12); + } + } + // scss-docs-end pagination-mixin-use +} + .bd-file-ref { .highlight-toolbar { @include media-breakpoint-up(md) { diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index 2843f1fb1a..1579193ab9 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -24,6 +24,17 @@ // Load Bootstrap variables and mixins @import "../../../scss/functions"; + +// Boosted mod +// To display a smart responsive pagination example in our docs, we can enable `$enable-responsive-pagination` here. +// It won't have any effects on the normal use cases since boosted.css is generated with `$enable-responsive-pagination: false` by default. +// Since for this docs.scss we don't import "_pagination.scss" the definition of this variable requires a replay of the mixins +// related to the smart responsive pagination (see site/assets/scss/_component-examples.scss). +// fusv-disable +$enable-responsive-pagination: true; +// fusv-enable +// End mod + @import "../../../scss/variables"; @import "../../../scss/mixins"; diff --git a/site/content/docs/5.3/components/pagination.md b/site/content/docs/5.3/components/pagination.md index cef9aa4d48..8a8770eca1 100644 --- a/site/content/docs/5.3/components/pagination.md +++ b/site/content/docs/5.3/components/pagination.md @@ -121,18 +121,92 @@ Or with `.justify-content-end`: ## Responsive behavior -To avoid pagination wrapping or overflowing, we limit the number or pagination item to display depending on breakpoint. +By default, every item is visible. Here is an example with our basic responsive behavior. {{< example >}} +{{< /example >}} + +You may use `.page-ellipsis` to build your own custom pagination. It places `...` right after the number it's applied on. + +{{< example class="px-0 px-sm-3" >}} + +{{< /example >}} + +{{< callout warning >}} +**Heads up—our smart responsive pagination is opt-out as of v5.3.0!** + +It means that it is disabled by default in order to have a lighter CSS bundle. We included it here in our documentation's CSS for this specific use case just as a demonstration of the rendering. + +
+ +{{< markdown >}} +Enable the responsive pagination by setting `$enable-responsive-pagination: true;` +{{< /markdown >}} + +{{< markdown >}} + +```scss +// Required +@import "../node_modules/boosted/scss/functions"; + +// Activate responsive pagination +$enable-responsive-pagination: true; + +// Required +@import "../node_modules/boosted/scss/variables"; +@import "../node_modules/boosted/scss/mixins"; +@import "../node_modules/boosted/scss/grid"; + +// Optional Boosted components here +@import "../node_modules/boosted/scss/pagination"; +``` +Then, recompile your Sass. +{{< /markdown >}} +
+{{< /callout >}} + +The following example uses our smart responsive pagination. To avoid pagination wrapping or overflowing, we limit the number of displayed pagination items depending on the breakpoints by displaying automatically some ellipsis. + +Given that container queries lack adequate support, we offer an alternative solution that relies on page breakpoints. Nonetheless, our solution remains flexible and can be tailored to specific requirements using our [Sass mixin](#usage). + +{{< example class="bd-example-responsive-pagination px-0 px-sm-3" >}} +