LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

fix pagination styling

Browse source
This commit is contained in:
zeppi 2022-04-15 11:07:00 -04:00
parent 65e510d61c
commit a9f436990a
4 changed files with 24 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
static/app-strings.json
View file

@ -2323,5 +2323,6 @@
"You followed @rossmanngroup!": "You followed @rossmanngroup!", "You followed @rossmanngroup!": "You followed @rossmanngroup!",
"%repost% %publish%": "%repost% %publish%", "%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.", "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--" "--end--": "--end--"
} }

5
ui/component/common/paginate.jsx
View file

@ -81,8 +81,9 @@ function Paginate(props: Props) {
<FormField <FormField
value={textValue} value={textValue}
onChange={(e) => setTextValue(e.target.value)} onChange={(e) => setTextValue(e.target.value)}
className="paginate-channel" className="paginate-goto"
label={__('Go to page:')} aria-label={__('Go to page:')}
placeholder={__('Go to')}
type="text" type="text"
name="paginate-file" name="paginate-file"
/> />

22
ui/scss/component/_form-field.scss
View file

@ -358,16 +358,13 @@ fieldset-group {
} }
&:nth-of-type(2) { &:nth-of-type(2) {
&:not(input.paginate-channel) { input,
// yuck select {
input, border-top-left-radius: 0;
select { border-bottom-left-radius: 0;
border-top-left-radius: 0; }
border-bottom-left-radius: 0; label {
} margin-left: var(--spacing-s);
label {
margin-left: var(--spacing-s);
}
} }
} }
} }
@ -375,13 +372,14 @@ fieldset-group {
&.fieldgroup--paginate { &.fieldgroup--paginate {
padding-bottom: var(--spacing-l); padding-bottom: var(--spacing-l);
margin-top: var(--spacing-l); margin-top: var(--spacing-l);
align-items: flex-end; align-items: center;
justify-content: center; justify-content: center;
fieldset-section { fieldset-section {
input { input {
margin-bottom: 5px !important;
margin-left: var(--spacing-s); margin-left: var(--spacing-s);
border-radius: calc(var(--height-button) / 2);
height: var(--height-button);
} }
} }
} }

23
ui/scss/component/_pagination.scss
View file

@ -10,11 +10,14 @@
@media (max-width: $breakpoint-small) { @media (max-width: $breakpoint-small) {
font-size: var(--font-small); font-size: var(--font-small);
} }
.pagination__item {
margin-bottom: 0;
}
} }
.pagination__item { .pagination__item {
width: 3rem; width: var(--height-button);
height: 3rem; height: var(--height-button);
border-radius: 50%; border-radius: 50%;
text-align: center; text-align: center;
@ -24,8 +27,6 @@
} }
&:not(.pagination__item--selected):not(.pagination__item--break):not(.disabled):hover { &:not(.pagination__item--selected):not(.pagination__item--break):not(.disabled):hover {
color: var(--color-primary);
&:hover { &:hover {
background-color: var(--color-button-secondary-bg-hover); background-color: var(--color-button-secondary-bg-hover);
} }
@ -33,12 +34,11 @@
&:not(.pagination__item--previous):not(.pagination__item--next) { &:not(.pagination__item--previous):not(.pagination__item--next) {
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
line-height: 3rem; line-height: var(--height-button);
margin: 0 0.5em; margin: 0 0.5em;
} }
&:not(.pagination__item--selected) {
&:not(.pagination__item--break):not(.disabled) { background-color: unset;
background-color: var(--color-header-background);
cursor: pointer; cursor: pointer;
} }
@ -64,18 +64,15 @@
.pagination__item--previous, .pagination__item--previous,
.pagination__item--next { .pagination__item--next {
line-height: 1.5; line-height: var(--height-button);
position: relative;
padding-top: var(--spacing-s);
background-color: var(--color-header-background); background-color: var(--color-header-background);
margin-bottom: 0px !important;
} }
.pagination__item--selected { .pagination__item--selected {
background-color: var(--color-button-secondary-bg); background-color: var(--color-button-secondary-bg);
} }
.paginate-channel { .paginate-goto {
width: 5rem; width: 5rem;
border-top-left-radius: var(--border-radius); border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius);