diff --git a/src/client/components/elements/Nav/index.scss b/src/client/components/elements/Nav/index.scss index 5f6e1b2007..41ed529de7 100644 --- a/src/client/components/elements/Nav/index.scss +++ b/src/client/components/elements/Nav/index.scss @@ -80,7 +80,6 @@ a { padding: base(.125) 0; display: flex; - font-weight: 600; text-decoration: none; } @@ -104,6 +103,7 @@ &.active { padding-left: base(.6); + font-weight: 600; svg { opacity: 1; diff --git a/src/client/components/elements/Paginator/ClickableArrow/index.scss b/src/client/components/elements/Paginator/ClickableArrow/index.scss index bd79eda559..6e21852bb8 100644 --- a/src/client/components/elements/Paginator/ClickableArrow/index.scss +++ b/src/client/components/elements/Paginator/ClickableArrow/index.scss @@ -2,9 +2,10 @@ .clickable-arrow { cursor: pointer; + transform: rotate(-90deg); &--left { - transform: rotate(180deg); + transform: rotate(90deg); } &--is-disabled { diff --git a/src/client/components/elements/Paginator/index.scss b/src/client/components/elements/Paginator/index.scss index 07aad4ea8f..c31fda577f 100644 --- a/src/client/components/elements/Paginator/index.scss +++ b/src/client/components/elements/Paginator/index.scss @@ -2,15 +2,13 @@ .paginator { display: flex; - align-items: flex-end; - justify-content: flex-end; - margin-bottom: base(1); + margin-bottom: $baseline; &__page { cursor: pointer; &--is-current { - @include shadow-sm; + background: $color-background-gray; color: $color-gray; cursor: default; } @@ -23,11 +21,19 @@ .clickable-arrow, &__page { @extend %btn-reset; - @extend %small; + width: base(2); + height: base(2); + display: flex; + justify-content: center; + align-content: center; outline: 0; - padding: base(.35) base(.45); + padding: base(.5); color: $color-dark-gray; line-height: 1; + + &:hover:not(.clickable-arrow--is-disabled) { + background: $color-background-gray; + } } &__page, diff --git a/src/client/components/elements/Table/index.scss b/src/client/components/elements/Table/index.scss index 742f42ed42..dc396ae2b2 100644 --- a/src/client/components/elements/Table/index.scss +++ b/src/client/components/elements/Table/index.scss @@ -1,6 +1,7 @@ @import '../../../scss/styles.scss'; .table { + margin-bottom: $baseline; overflow-x: scroll; max-width: 100%; @@ -20,7 +21,7 @@ tbody { tr { - &:nth-child(1) { + &:nth-child(odd) { background: $color-background-gray; } } diff --git a/src/client/components/views/collections/List/index.js b/src/client/components/views/collections/List/index.js index 07b211b0e2..1476ab1d95 100644 --- a/src/client/components/views/collections/List/index.js +++ b/src/client/components/views/collections/List/index.js @@ -120,17 +120,28 @@ const DefaultList = (props) => { )} - +
+ +
+ {data.page} + - + {data.totalPages > 1 ? data.limit : data.totalDocs} + {' '} + of + {' '} + {data.totalDocs} +
+
); }; diff --git a/src/client/components/views/collections/List/index.scss b/src/client/components/views/collections/List/index.scss index 7844910f32..a3c7dc5ee8 100644 --- a/src/client/components/views/collections/List/index.scss +++ b/src/client/components/views/collections/List/index.scss @@ -25,23 +25,31 @@ } } - &__controls { - margin-bottom: $baseline; - } - .table { table { width: 100%; } } + &__page-controls { + width: 100%; + display: flex; + align-items: center; + } + + &__page-info { + margin-right: 0; + margin-left: auto; + } + @include mid-break { padding: $baseline 0; &__header, .list-controls, .table, - &__no-results { + &__no-results, + &__page-controls { padding-left: $baseline; padding-right: $baseline; } @@ -55,5 +63,9 @@ &__search-input { margin: 0; } + + &__page-controls { + display: block; + } } }