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!",
"%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--"
}

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

@ -81,8 +81,9 @@ function Paginate(props: Props) {
<FormField
value={textValue}
onChange={(e) => 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"
/>

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

@ -358,8 +358,6 @@ fieldset-group {
}
&:nth-of-type(2) {
&:not(input.paginate-channel) {
// yuck
input,
select {
border-top-left-radius: 0;
@ -370,18 +368,18 @@ 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);
}
}
}

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

@ -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);