LBRYFoundation/lbry-desktop
1
0
Fork 0
mirror of https://github.com/LBRYFoundation/lbry-desktop.git synced 2025-09-03 02:35:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

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

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

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