Merge pull request #2425 from lbryio/scroll

bring back scroll restoration
2019-04-19 14:58:28 -04:00 · 2019-04-19 14:58:28 -04:00 · 39ec33f38a
parent dc25b0a759 9bd2aa4936
commit 39ec33f38a
17 changed files with 139 additions and 162 deletions
--- a/src/ui/component/app/view.jsx
+++ b/src/ui/component/app/view.jsx
@ -69,14 +69,14 @@ class App extends React.PureComponent<Props> {
    return (
      <div id="window" onContextMenu={e => openContextMenu(e)}>
        <Header />
-        <section className="page">
-          {enhancedLayout && <Yrbl className="yrbl--enhanced" />}
-          <SideBar />
-          <div className="content" id="content">
-            <Router />
-            <ModalRouter />
-          </div>
-        </section>
+        <SideBar />
+
+        <div className="main-wrapper">
+          <Router />
+        </div>
+
+        <ModalRouter />
+        {enhancedLayout && <Yrbl className="yrbl--enhanced" />}
      </div>
    );
  }
--- a/src/ui/component/common/icon-custom.jsx
+++ b/src/ui/component/common/icon-custom.jsx
@ -118,9 +118,16 @@ export const customIcons = {
  ),
  // The LBRY icon is different from the base icon set so don't use buildIcon()
  [ICONS.LBRY]: props => (
-    <svg stroke="currentColor" fill="currentColor" transform="scale(0.1)" {...props}>
-      <path d="M296.05, 85.9l0, 14.1l-138.8, 85.3l-104.6, -51.3l0.2, -7.9l104, 51.2l132.2, -81.2l0, -5.8l-124.8, -60.2l-139.2, 86.1l0, 38.5l131.8, 65.2l137.6, -84.4l3.9, 6l-141.1, 86.4l-139.2, -68.8l0, -46.8l145.8, -90.2l132.2, 63.8Z" />
-      <path d="M294.25, 150.9l2, -12.6l-12.2, -2.1l0.8, -4.9l17.1, 2.9l-2.8, 17.5l-4.9, -0.8Z" />
+    <svg
+      stroke="currentColor"
+      fill="currentColor"
+      x="0px"
+      y="0px"
+      viewBox="0 0 322 254"
+      className="icon lbry-icon"
+    >
+      <path d="M296,85.9V100l-138.8,85.3L52.6,134l0.2-7.9l104,51.2L289,96.1v-5.8L164.2,30.1L25,116.2v38.5l131.8,65.2 l137.6-84.4l3.9,6l-141.1,86.4L18.1,159.1v-46.8l145.8-90.2C163.9,22.1,296,85.9,296,85.9z" />
+      <path d="M294.3,150.9l2-12.6l-12.2-2.1l0.8-4.9l17.1,2.9l-2.8,17.5L294.3,150.9L294.3,150.9z" />
    </svg>
  ),
 };
--- a/src/ui/component/header/view.jsx
+++ b/src/ui/component/header/view.jsx
@ -37,9 +37,14 @@ const Header = (props: Props) => {
  return (
    <header className="header">
      <div className="header__navigation">
+        <Button
+          className="header__navigation-item header__navigation-item--lbry"
+          label={__('LBRY')}
+          iconRight={ICONS.LBRY}
+          navigate="/"
+        />
        {/* @if TARGET='app' */}
        <div className="header__navigation-app">
-          <Icon className="lbry-icon" icon={ICONS.LBRY} />
          <div className="header__navigation-arrows">
            <Button
              className="header__navigation-item header__navigation-item--back"
@ -59,14 +64,6 @@ const Header = (props: Props) => {
          </div>
        </div>
        {/* @endif */}
-        {/* @if TARGET='web' */}
-        <Button
-          className="header__navigation-item header__navigation-item--lbry"
-          label={__('LBRY')}
-          iconRight={ICONS.LBRY}
-          navigate="/"
-        />
-        {/* @endif */}
      </div>

      <WunderBar />
--- a/src/ui/component/navigationHistory/view.jsx
+++ b/src/ui/component/navigationHistory/view.jsx
@ -164,7 +164,7 @@ class UserHistoryPage extends React.PureComponent<Props, State> {
        )}
      </React.Fragment>
    ) : (
-      <div className="page__empty">
+      <div className="main--empty">
        <section className="card card--section">
          <header className="card__header">
            <h2 className="card__title">
--- a/src/ui/component/page/view.jsx
+++ b/src/ui/component/page/view.jsx
@ -93,7 +93,7 @@ class Page extends React.PureComponent<Props, State> {
      >
        {!loading && children}
        {showLoader && (
-          <div className="page__empty">
+          <div className="main--empty">
            <Spinner />
          </div>
        )}
--- a/src/ui/component/router/view.jsx
+++ b/src/ui/component/router/view.jsx
@ -1,6 +1,6 @@
 import * as PAGES from 'constants/pages';
 import React, { useEffect } from 'react';
-import { Route, Switch } from 'react-router-dom';
+import { Route, Switch, withRouter } from 'react-router-dom';
 import SettingsPage from 'page/settings';
 import HelpPage from 'page/help';
 import ReportPage from 'page/report';
@ -21,32 +21,46 @@ import UserHistoryPage from 'page/userHistory';
 import SendCreditsPage from 'page/sendCredits';
 import NavigationHistory from 'page/navigationHistory';

+const Scroll = withRouter(function ScrollWrapper(props) {
+  const { pathname } = props.location;
+  useEffect(() => {
+    // Auto scroll to the top of a window for new pages
+    // The browser will handle scrolling if it needs to, but
+    // for new pages, react-router maintains the current y scroll position
+    window.scrollTo(0, 0);
+  }, [pathname]);
+
+  return props.children;
+});
+
 export default function AppRouter() {
  return (
-    <Switch>
-      <Route path="/" exact component={DiscoverPage} />
-      <Route path={`/$/${PAGES.AUTH}`} exact component={AuthPage} />
-      <Route path={`/$/${PAGES.BACKUP}`} exact component={BackupPage} />
-      <Route path={`/$/${PAGES.INVITE}`} exact component={InvitePage} />
-      <Route path={`/$/${PAGES.DOWNLOADED}`} exact component={FileListDownloaded} />
-      <Route path={`/$/${PAGES.PUBLISHED}`} exact component={FileListPublished} />
-      <Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} />
-      <Route path={`/$/${PAGES.PUBLISH}`} exact component={PublishPage} />
-      <Route path={`/$/${PAGES.REPORT}`} exact component={ReportPage} />
-      <Route path={`/$/${PAGES.REWARDS}`} exact component={RewardsPage} />
-      <Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} />
-      <Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} />
-      <Route path={`/$/${PAGES.SUBSCRIPTIONS}`} exact component={SubscriptionsPage} />
-      <Route path={`/$/${PAGES.TRANSACTIONS}`} exact component={TransactionHistoryPage} />
-      <Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} />
-      <Route path={`/$/${PAGES.ACCOUNT}`} exact component={AccountPage} />
-      <Route path={`/$/${PAGES.SEND}`} exact component={SendCreditsPage} />
-      <Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} />
-      <Route path={`/$/${PAGES.HISTORY}/all`} exact component={NavigationHistory} />
+    <Scroll>
+      <Switch>
+        <Route path="/" exact component={DiscoverPage} />
+        <Route path={`/$/${PAGES.AUTH}`} exact component={AuthPage} />
+        <Route path={`/$/${PAGES.BACKUP}`} exact component={BackupPage} />
+        <Route path={`/$/${PAGES.INVITE}`} exact component={InvitePage} />
+        <Route path={`/$/${PAGES.DOWNLOADED}`} exact component={FileListDownloaded} />
+        <Route path={`/$/${PAGES.PUBLISHED}`} exact component={FileListPublished} />
+        <Route path={`/$/${PAGES.HELP}`} exact component={HelpPage} />
+        <Route path={`/$/${PAGES.PUBLISH}`} exact component={PublishPage} />
+        <Route path={`/$/${PAGES.REPORT}`} exact component={ReportPage} />
+        <Route path={`/$/${PAGES.REWARDS}`} exact component={RewardsPage} />
+        <Route path={`/$/${PAGES.SEARCH}`} exact component={SearchPage} />
+        <Route path={`/$/${PAGES.SETTINGS}`} exact component={SettingsPage} />
+        <Route path={`/$/${PAGES.SUBSCRIPTIONS}`} exact component={SubscriptionsPage} />
+        <Route path={`/$/${PAGES.TRANSACTIONS}`} exact component={TransactionHistoryPage} />
+        <Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} />
+        <Route path={`/$/${PAGES.ACCOUNT}`} exact component={AccountPage} />
+        <Route path={`/$/${PAGES.SEND}`} exact component={SendCreditsPage} />
+        <Route path={`/$/${PAGES.HISTORY}`} exact component={UserHistoryPage} />
+        <Route path={`/$/${PAGES.HISTORY}/all`} exact component={NavigationHistory} />

-      {/* Below need to go at the end to make sure we don't match any of our pages first */}
-      <Route path="/:claimName/:claimId" component={ShowPage} />
-      <Route path="/:claimName" component={ShowPage} />
-    </Switch>
+        {/* Below need to go at the end to make sure we don't match any of our pages first */}
+        <Route path="/:claimName/:claimId" component={ShowPage} />
+        <Route path="/:claimName" component={ShowPage} />
+      </Switch>
+    </Scroll>
  );
 }
--- a/src/ui/component/subscribeSuggested/view.jsx
+++ b/src/ui/component/subscribeSuggested/view.jsx
@ -14,7 +14,7 @@ class SuggestedSubscriptions extends PureComponent<Props> {

    if (loading) {
      return (
-        <div className="page__empty">
+        <div className="main--empty">
          <Spinner delayed />
        </div>
      );
--- a/src/ui/page/fileListDownloaded/view.jsx
+++ b/src/ui/page/fileListDownloaded/view.jsx
@ -23,7 +23,7 @@ class FileListDownloaded extends React.PureComponent<Props> {
        {hasDownloads ? (
          <FileList fileInfos={fileInfos} sortBy={sortBy} page={PAGES.DOWNLOADED} />
        ) : (
-          <div className="page__empty">
+          <div className="main--empty">
            <section className="card card--section">
              <header className="card__header">
                <h2 className="card__title">
--- a/src/ui/page/fileListPublished/view.jsx
+++ b/src/ui/page/fileListPublished/view.jsx
@ -32,7 +32,7 @@ class FileListPublished extends React.PureComponent<Props> {
            page={PAGES.PUBLISHED}
          />
        ) : (
-          <div className="page__empty">
+          <div className="main--empty">
            <section className="card card--section">
              <header className="card__header">
                <h2 className="card__title">
--- a/src/ui/scss/all.scss
+++ b/src/ui/scss/all.scss
@ -1,6 +1,5 @@
@charset "utf-8";

-// @import '~@lbry/color/lbry-color';
@import '~@lbry/components/sass/init/_color.scss';
@import '~@lbry/components/sass/init/_mixins.scss';
@import '~@lbry/components/sass/init/_variables.scss';
@ -33,7 +32,6 @@
@import 'component/modal';
@import 'component/navigation';
@import 'component/notice';
-@import 'component/page';
@import 'component/pagination';
@import 'component/placeholder';
@import 'component/scrollbar';
--- a/src/ui/scss/component/_content.scss
+++ b/src/ui/scss/component/_content.scss
@ -1,10 +1,3 @@
-.content {
-  flex: 1 0 var(--file-page-min-width);
-  overflow-x: hidden;
-  overflow-y: auto;
-  position: relative;
-}
-
 .content__cover {
  // Video thumbnail with play/download button
  top: 0;
--- a/src/ui/scss/component/_header.scss
+++ b/src/ui/scss/component/_header.scss
@ -1,16 +1,16 @@
 .header {
+  position: fixed;
  width: 100%;
  height: var(--header-height);
-
  align-items: center;
  background-color: $lbry-white;
  display: flex;
  justify-content: space-between;
-  position: fixed;
  z-index: 1;

  html[data-mode='dark'] & {
    background-color: rgba($lbry-black, 0.9);
+    background-color: mix($lbry-black, $lbry-gray-3, 90%);
    color: $lbry-white;
  }
 }
@ -22,7 +22,7 @@
    // Main navigation collapses into a menu button
    // at smaller screen widths
    @media (min-width: 601px) {
-      width: 170px;
+      width: calc(var(--side-nav-width) - 1px);
    }

    @media (max-width: 600px) {
@ -31,28 +31,25 @@
  }
 }

-.header__navigation-app {
+// .header__navigation-app {
+//   flex: 1;
+//   display: flex;
+//   justify-content: space-between;
+
+// LBRY logo in the top left corner
+.lbry-icon {
+  height: var(--header-height);
+  width: 1rem;
+  overflow: visible;
+}
+
+.header__navigation-arrows {
  flex: 1;
  display: flex;
-  justify-content: space-between;
-
-  // LBRY logo in the top left corner
-  .lbry-icon {
-    height: 1rem;
-    width: 1rem;
-    padding-left: 3.5rem;
-    padding-top: 1.5rem;
-    margin-right: 3.6rem;
-    overflow: visible;
-  }
-
-  .header__navigation-arrows {
-    flex: 1;
-    display: flex;
-    justify-content: flex-end;
-    border-left: 1px solid $lbry-gray-1;
-  }
+  justify-content: flex-end;
+  border-left: 1px solid $lbry-gray-1;
 }
+// }

 .header__navigation-item {
  height: var(--header-height);
@ -96,6 +93,8 @@
  width: var(--header-height);

  svg {
+    stroke: $lbry-black;
+
    &:only-child {
      // Header icons are a little different because they are larger
      top: 0.25rem;
@ -111,13 +110,11 @@
  flex: 1;
  font-weight: 800;
  font-size: 1.2rem;
-  margin-left: -1.25rem; // Needed because the lbry icon overflows it's parent so the centering is off

-  svg {
-    overflow: visible;
-    color: $lbry-white;
-    opacity: 1;
-    top: -0.8rem;
+  .lbry-icon {
+    height: 2rem;
+    width: 2rem;
+    top: 0.6rem;
  }
 }

@ -170,7 +167,8 @@
  .header__navigation-item--back,
  .header__navigation-item--forward,
  .header__navigation-item--home,
-  .header__navigation-item--right-action {
+  .header__navigation-item--right-action,
+  .header__navigation-item--wallet {
    display: none;
  }

--- a/src/ui/scss/component/_main.scss
+++ b/src/ui/scss/component/_main.scss
@ -1,16 +1,28 @@
+.main-wrapper {
+  position: absolute;
+  top: var(--header-height);
+  left: var(--side-nav-width);
+  min-height: calc(100% - var(--header-height));
+  width: calc(100% - var(--side-nav-width));
+  background-color: mix($lbry-white, $lbry-gray-1, 70%);
+
+  html[data-mode='dark'] & {
+    background-color: $lbry-black;
+  }
+}
+
 .main {
+  display: flex;
+  flex-direction: column;
  margin: auto;
-  overflow: hidden;
-  position: relative;
-  z-index: 1;
+}

-  &.main--contained {
-    max-width: 1000px;
-  }
+.main--contained {
+  max-width: 900px;
+}

-  &:not(.main--no-padding) {
-    padding: var(--spacing-vertical-large);
-  }
+.main:not(.main--no-padding) {
+  padding: var(--spacing-vertical-large);
 }

 .main--file-page {
@ -39,3 +51,12 @@
    grid-area: related;
  }
 }
+
+.main--empty {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  margin-top: 100px;
+  margin-bottom: 100px;
+  text-align: center;
+}
--- a/src/ui/scss/component/_navigation.scss
+++ b/src/ui/scss/component/_navigation.scss
@ -1,13 +1,15 @@
 .navigation {
-  background-color: $lbry-white;
-  border-right: 1px solid rgba($lbry-gray-1, 0.9);
-  font-size: 1.25rem;
-  padding-top: var(--spacing-vertical-large);
-  padding-right: var(--spacing-vertical-small);
-  position: relative;
+  position: fixed;
+  top: var(--header-height);
+  height: calc(100vh - var(--header-height));
  display: flex;
  flex-direction: column;
  overflow-y: overlay;
+  background-color: $lbry-white;
+  border-right: 1px solid rgba($lbry-gray-1, 0.9);
+  padding-top: var(--spacing-vertical-large);
+  padding-right: var(--spacing-vertical-small);
+  font-size: 1.2rem;

  html[data-mode='dark'] & {
    background-color: $lbry-black;
@ -18,7 +20,7 @@
  // on smaller screen widths

  @media (min-width: 601px) {
-    width: 171px; // 1px is for the border
+    width: var(--side-nav-width);
  }

  @media (max-width: 600px) {
--- a/src/ui/scss/component/_page.scss
+++ b/src/ui/scss/component/_page.scss
@ -1,53 +0,0 @@
-.page {
-  top: var(--header-height);
-  left: 0;
-  bottom: 0;
-  right: 0;
-
-  background-color: mix($lbry-white, $lbry-gray-1, 70%);
-  display: flex;
-  position: absolute;
-  z-index: 0;
-
-  html[data-mode='dark'] & {
-    background-color: $lbry-black;
-  }
-
-  &::after {
-    width: 100%;
-    height: 1px;
-    top: 0;
-    left: 0;
-
-    background-color: $lbry-gray-1;
-    content: '';
-    position: absolute;
-    z-index: 1;
-
-    html[data-mode='dark'] & {
-      background-color: $lbry-black;
-    }
-  }
-
-  @media only screen and (min-width: $medium-breakpoint) {
-    grid-template-columns: var(--side-nav-width-m) auto;
-  }
-
-  @media only screen and (min-width: $large-breakpoint) {
-    grid-template-columns: var(--side-nav-width-l) auto;
-  }
-}
-
-.page__header {
-  padding: var(--spacing-vertical-medium) var(--spacing-vertical-medium) 0
-    var(--spacing-vertical-medium);
-}
-
-.page__empty {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  margin-top: 100px;
-  margin-bottom: 100px;
-  text-align: center;
-}
--- a/src/ui/scss/init/_vars.scss
+++ b/src/ui/scss/init/_vars.scss
@ -7,9 +7,7 @@ $large-breakpoint: 1921px;

 :root {
  // Width & spacing
-  --side-nav-width: 160px;
-  --side-nav-width-m: 240px;
-  --side-nav-width-l: 320px;
+  --side-nav-width: 180px;
  --font-size-subtext-multiple: 0.92;

  --spacing-vertical-miniscule: calc(2rem / 5);
--- a/src/ui/store.js
+++ b/src/ui/store.js
@ -36,12 +36,14 @@ function enableBatching(reducer) {
  };
 }

+let history;
 // @if TARGET='app'
-const history = createHashHistory();
+history = createHashHistory();
 // @endif
 // @if TARGET='web'
-const history = createBrowserHistory();
+history = createBrowserHistory();
 // @endif
+
 const bulkThunk = createBulkThunkMiddleware();
 const middleware = [routerMiddleware(history), thunk, bulkThunk];
 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;