diff --git a/static/app-strings.json b/static/app-strings.json index 2661cf9e9..0b7f246ca 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -2323,5 +2323,6 @@ "You followed @rossmanngroup!": "You followed @rossmanngroup!", "%repost% %publish%": "%repost% %publish%", "Failed to view lbry://@MicheL-PDF#7/LaDameAuPain#f, please try again. If this problem persists, visit https://lbry.com/faq/support for support.": "Failed to view lbry://@MicheL-PDF#7/LaDameAuPain#f, please try again. If this problem persists, visit https://lbry.com/faq/support for support.", + "Go to": "Go to", "--end--": "--end--" } diff --git a/ui/component/common/paginate.jsx b/ui/component/common/paginate.jsx index 6d321a5b0..e0e095140 100644 --- a/ui/component/common/paginate.jsx +++ b/ui/component/common/paginate.jsx @@ -81,8 +81,9 @@ function Paginate(props: Props) { setTextValue(e.target.value)} - className="paginate-channel" - label={__('Go to page:')} + className="paginate-goto" + aria-label={__('Go to page:')} + placeholder={__('Go to')} type="text" name="paginate-file" /> diff --git a/ui/scss/component/_form-field.scss b/ui/scss/component/_form-field.scss index 56e5fc9b3..c68788a80 100644 --- a/ui/scss/component/_form-field.scss +++ b/ui/scss/component/_form-field.scss @@ -358,16 +358,13 @@ fieldset-group { } &:nth-of-type(2) { - &:not(input.paginate-channel) { - // yuck - input, - select { - border-top-left-radius: 0; - border-bottom-left-radius: 0; - } - label { - margin-left: var(--spacing-s); - } + input, + select { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + label { + margin-left: var(--spacing-s); } } } @@ -375,13 +372,14 @@ fieldset-group { &.fieldgroup--paginate { padding-bottom: var(--spacing-l); margin-top: var(--spacing-l); - align-items: flex-end; + align-items: center; justify-content: center; fieldset-section { input { - margin-bottom: 5px !important; margin-left: var(--spacing-s); + border-radius: calc(var(--height-button) / 2); + height: var(--height-button); } } } diff --git a/ui/scss/component/_pagination.scss b/ui/scss/component/_pagination.scss index fa59c7942..9b0083863 100644 --- a/ui/scss/component/_pagination.scss +++ b/ui/scss/component/_pagination.scss @@ -10,11 +10,14 @@ @media (max-width: $breakpoint-small) { font-size: var(--font-small); } + .pagination__item { + margin-bottom: 0; + } } .pagination__item { - width: 3rem; - height: 3rem; + width: var(--height-button); + height: var(--height-button); border-radius: 50%; text-align: center; @@ -24,8 +27,6 @@ } &:not(.pagination__item--selected):not(.pagination__item--break):not(.disabled):hover { - color: var(--color-primary); - &:hover { background-color: var(--color-button-secondary-bg-hover); } @@ -33,12 +34,11 @@ &:not(.pagination__item--previous):not(.pagination__item--next) { font-weight: var(--font-weight-bold); - line-height: 3rem; + line-height: var(--height-button); margin: 0 0.5em; } - - &:not(.pagination__item--break):not(.disabled) { - background-color: var(--color-header-background); + &:not(.pagination__item--selected) { + background-color: unset; cursor: pointer; } @@ -64,18 +64,15 @@ .pagination__item--previous, .pagination__item--next { - line-height: 1.5; - position: relative; - padding-top: var(--spacing-s); + line-height: var(--height-button); background-color: var(--color-header-background); - margin-bottom: 0px !important; } .pagination__item--selected { background-color: var(--color-button-secondary-bg); } -.paginate-channel { +.paginate-goto { width: 5rem; border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius);