Skip to content

Commit

Permalink
Merge pull request #503 from vanda/web-2858-etc-search-pagination-change
Browse files Browse the repository at this point in the history 
Alter etc search pagination design
  • Loading branch information
@methodog
methodog authored Apr 4, 2024
2 parents 0885939 + 53db04c commit f306ed7
Show file tree
Hide file tree
Showing 3 changed files with 189 additions and 109 deletions.
3 changes: 2 additions & 1 deletion src/components/blocks/search-pagination/_search-pagination.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,8 @@ if (paginationElement) {
|| target.closest('.b-search-pagination__next-link'))
&& !target.getAttribute('disabled')
) {
const { pageIndex } = target.dataset;
const { pageIndex } = target.closest('button').dataset;

paginationElement.dataset.pageIndex = pageIndex;
pageHiddenInput.value = pageIndex;
// directly changing the value of hidden input, does not trigger a change event
Expand Down
82 changes: 43 additions & 39 deletions src/components/blocks/search-pagination/search-pagination.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,48 +5,52 @@
<input class="b-search-pagination__hidden-input" type="hidden" name="page_size" />
</div>
<div class="b-search-pagination__container">
<button data-page-index="0" class="b-search-pagination__prev-link">
<span class="b-search-pagination__caret">
<</span> <span class="b-search-pagination__link-text">Prev
</span>
<button data-page-index="0" class="b-search-pagination__prev-link" aria-label="previous page"">
<span class="b-search-pagination__link-caret">
<svg role="presentation" aria-hidden="true">
<use xlink:href="../../{{ _config.project.buildDir }}/svg/vam-sprite.svg#point-left"></use>
</svg>
</span>
<span class="b-search-pagination__link-text">Back</span>
</button>
<div class="b-search-pagination__container b-search-pagination__container--col">
<div class="b-search-pagination__page-button-container">
<button data-page-index="1" value="1" class="b-search-pagination__page-button b-search-pagination__page-button--current">
01
</button>
<div class="b-search-pagination__page-button-seperator-start b-search-pagination__page-button-seperator">
...
</div>
<button data-page-index="2" value="2" class="b-search-pagination__page-button">
02
</button>
<button data-page-index="3" value="3" class="b-search-pagination__page-button">
03
</button>
<span class="b-search-pagination__page-button-seperator-middle b-search-pagination__page-button-seperator">
...
</span>
<button data-page-index="4" value="4" class="b-search-pagination__page-button b-search-pagination__page-button">
04
</button>
<span class="b-search-pagination__page-button-seperator-last b-search-pagination__page-button-seperator">
...
</span>
<button data-page-index="7" value="6" class="b-search-pagination__page-button">
08
</button>
</div>
<div class="b-search-pagination__container b-search-pagination__container--page-size">
<div class="b-search-pagination__page-size-container">
<span class="b-search-pagination__page-size-label">Results per page:</span>
<button data-page-size="15" class="b-search-pagination__page-size b-search-pagination__page-size--active">15</button>
<button data-page-size="100" class="b-search-pagination__page-size">100</button>
</div>
<div class="b-search-pagination__page-button-container">
<button data-page-index="1" value="1" class="b-search-pagination__page-button b-search-pagination__page-button--current">
01
</button>
<div class="b-search-pagination__page-button-seperator-start b-search-pagination__page-button-seperator">
...
</div>
<button data-page-index="2" value="2" class="b-search-pagination__page-button">
02
</button>
<button data-page-index="3" value="3" class="b-search-pagination__page-button">
03
</button>
<span class="b-search-pagination__page-button-seperator-middle b-search-pagination__page-button-seperator">
...
</span>
<button data-page-index="4" value="4" class="b-search-pagination__page-button b-search-pagination__page-button">
04
</button>
<span class="b-search-pagination__page-button-seperator-last b-search-pagination__page-button-seperator">
...
</span>
<button data-page-index="7" value="6" class="b-search-pagination__page-button">
08
</button>
</div>
<button data-page-index="2" class="b-search-pagination__next-link">
<span class="b-search-pagination__link-text">Next</span> <span class="b-search-pagination__link-caret">></span>
<button data-page-index="2" class="b-search-pagination__next-link" aria-label="next page">
<span class="b-search-pagination__link-text">Next</span>
<span class="b-search-pagination__link-caret">
<svg role="presentation" aria-hidden="true">
<use xlink:href="../../{{ _config.project.buildDir }}/svg/vam-sprite.svg#point-right"></use>
</svg>
</span>
</button>
</div>
<div class="b-search-pagination__container b-search-pagination__container--page-size">
<span class="b-search-pagination__page-size-label">Results per page:</span>
<button data-page-size="15" class="b-search-pagination__page-size b-search-pagination__page-size--active">15</button>
<button data-page-size="100" class="b-search-pagination__page-size">100</button>
</div>
</div>
213 changes: 144 additions & 69 deletions src/components/blocks/search-pagination/search-pagination.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,23 @@
@use "../../base";

.b-search-pagination {
@include base.typography-typeSetting(1);
@include base.typography-typeSetting(2);

@include mixins.breakpoints-bpMinSmall {
@include base.typography-typeSetting(3);
}
color: base.sitecolors-siteColor("vam-grey-4");

&__container {
color: base.sitecolors-siteColor("vam-white");
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
flex-flow: row wrap;
justify-content: space-between;

&--display-counter {
justify-content: left;
margin-bottom: 20px;
justify-content: center;
margin-bottom: 10px;
}

&--page-size {
color: base.sitecolors-siteColor("vam-white");
justify-content: center;
margin-top: 20px;
}

Expand All @@ -44,73 +42,155 @@
&:hover {
@include base.typography-fontWeight("x-bold");
}

&-label {
@include base.typography-typeSetting(2, "light");
}
}

&__link-caret {
align-items: center;
border: 1px solid base.sitecolors-siteColor("vam-grey-4");
border-radius: 50%;
display: inline-flex;
height: 40px;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
width: 40px;

svg {
height: 16px;
width: 16px;
}
}

&__link-text {
display: none;
pointer-events: none;

@include mixins.breakpoints-bpMinXSmall {
display: inline-block;
}
}

&__prev-link {
left: 0;
.b-search-pagination__link-text {
margin-left: 6px;

@include mixins.breakpoints-bpMinSmall {
margin-left: 8px;
}
}
}

&__next-link {
right: 0;
.b-search-pagination__link-text {
margin-right: 6px;

@include mixins.breakpoints-bpMinSmall {
margin-right: 8px;
}
}
}

&__prev-link,
&__next-link {
@include base.typography-typeSetting(2, "bold");
@include base.typography-typeSetting(2);

align-items: center;
color: base.sitecolors-siteColor("vam-white");
cursor: pointer;
position: absolute;
top: 15px;
display: flex;
user-select: none;

@include mixins.breakpoints-bpMinSmall {
@include base.typography-typeSetting(4, "bold");

top: 11px;
}

&[disabled] {
color: base.sitecolors-siteColor("vam-grey-4");
color: base.sitecolors-siteColor("vam-grey-3");
cursor: initial;

.b-search-pagination__link-caret {
border: 1px solid base.sitecolors-siteColor("vam-grey-3");
}
}
}

&__link {
&-caret {
text-decoration: none;
&:not([disabled]):hover,
&:not([disabled]):focus {
.b-search-pagination__link-caret {
background: base.sitecolors-siteColor("vam-grey-1");
border: 3px solid base.sitecolors-siteColor("vam-white");
color: base.sitecolors-siteColor("vam-white");
transform: scale(1.15);

svg {
transform: scale(0.87); // 1/1.15
}
}
}

&-text {
pointer-events: none;
text-decoration: underline;
&:not([disabled]):focus {
// ToDo: review box-shadow property when default focus states
// are overhauled.
// Override default at src/components/mixins/focus/_focus.scss
box-shadow: none;

// disable for all but WHCM users
outline: 1px solid transparent;
}
}

&__page-button,
&__page-button-start,
&__page-button-last {
@include base.typography-typeSetting(3);
&__page-button {
@include base.typography-typeSetting(2, "bold");

border: 1px solid base.sitecolors-siteColor("vam-white");
color: base.sitecolors-siteColor("vam-white");
height: 50px;
margin-right: 9px;
min-width: 36px;
padding: 0 10px;
border: 3px solid transparent;
border-radius: 50%;
display: block;
height: 44px;
margin-right: 6px;
transition: all 0.3s ease-out;
width: 44px;

@include mixins.breakpoints-bpMinSmall {
height: 44px;
margin-right: 8px;
}

&[disabled] {
display: none;
}

&:last-of-type {
margin-right: 0;
}

&:hover,
&:focus {
background-color: base.sitecolors-siteColor("vam-grey-1");
border: 3px solid base.sitecolors-siteColor("vam-white");
color: base.sitecolors-siteColor("vam-grey-4");
cursor: pointer;
}

&:focus {
// ToDo: review box-shadow property when default focus states
// are overhauled.
// Override default at src/components/mixins/focus/_focus.scss
box-shadow: none;

// disable for all but WHCM users
outline: 1px solid transparent;
}

&-seperator {
&-start,
&-middle,
&-last {
color: base.sitecolors-siteColor("vam-white");
margin: 8px 9px 0 0;
@include base.typography-fontSize(4);

margin: -10px 6px 0 0;
user-select: none;

@include mixins.breakpoints-bpMinSmall {
margin-right: 8px;
}
}

&[disabled] {
Expand All @@ -119,44 +199,39 @@
}

&--current {
background-color: base.themecolors-themeColor("silent-green");
border-color: base.themecolors-themeColor("silent-green");
border-radius: 0;
background-color: base.sitecolors-siteColor("vam-white");
border: 3px solid transparent;
color: base.sitecolors-siteColor("vam-black");
height: 40px;
width: 40px;

&:hover,
&:focus {
background-color: base.sitecolors-siteColor("vam-white");
color: base.sitecolors-siteColor("vam-black");
cursor: initial;
}

&:focus {
outline: 1px solid transparent;
}
}

&-container {
align-items: center;
display: flex;
flex-direction: row;
}
}

&__page-button {
display: block;

&[disabled] {
display: none;
}

&:last-of-type {
margin-right: 0;
}

&:hover {
background-color: base.sitecolors-siteColor("vam-grey-3");
cursor: pointer;
}
&__page-button-last[disabled] {
display: none;
}

&__page-button-start,
&__page-button-last {
&:hover {
background-color: base.sitecolors-siteColor("vam-grey-3");
cursor: pointer;
@include mixins.breakpoints-bpMaxXSmall {
&__page-button-seperator-start:not([disabled]) + &__page-button,
&__page-button-seperator-middle[disabled] + &__page-button {
display: none;
}
}

&__page-button-last[disabled] {
display: none;
}
}

0 comments on commit f306ed7

Please sign in to comment.