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

fix side navigation scroll behavior on mobile

Browse source
This commit is contained in:
Sean Yesmunt 2020-08-26 10:59:50 -04:00
parent 4a86d25891
commit 6377dc86e0
2 changed files with 11 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
ui/component/sideNavigation/view.jsx
View file

@ -261,7 +261,7 @@ function SideNavigation(props: Props) {
{TOP_LEVEL_LINKS.map(linkProps => {
const { hideForUnauth, ...passedProps } = linkProps;
return !email && linkProps.hideForUnauth && IS_WEB ? null : (
<li key={linkProps.navigate}>
<li key={linkProps.icon}>
<Button
{...passedProps}
label={__(linkProps.label)}
@ -309,7 +309,7 @@ function SideNavigation(props: Props) {
const { hideForUnauth, ...passedProps } = linkProps;
return !email && hideForUnauth && IS_WEB ? null : (
<li key={linkProps.navigate}>
<li key={linkProps.icon}>
<Button
{...passedProps}
label={__(linkProps.label)}
@ -330,7 +330,7 @@ function SideNavigation(props: Props) {
const { hideForUnauth, ...passedProps } = linkProps;
return !email && hideForUnauth && IS_WEB ? null : (
<li key={linkProps.navigate} className="mobile-only">
<li key={linkProps.icon} className="mobile-only">
<Button
{...passedProps}
label={__(linkProps.label)}

11
ui/scss/component/_navigation.scss
View file

@ -20,16 +20,20 @@
.navigation {
position: fixed;
left: 0;
overflow-y: auto;
top: var(--header-height);
width: var(--side-nav-width);
height: calc(100vh - var(--header-height));
overflow-y: hidden;
border-right: 1px solid var(--color-border);
padding-top: var(--spacing-l);
padding-bottom: var(--spacing-xl);
&:hover {
overflow-y: auto;
@media (min-width: $breakpoint-small) {
overflow-y: hidden;
&:hover {
overflow-y: auto;
}
}
}
@ -70,6 +74,7 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
color: var(--color-navigation-link);
padding-left: var(--spacing-s);
font-size: var(--font-body);