diff options
| -rw-r--r-- | vnext/src/App.js | 130 | ||||
| -rw-r--r-- | vnext/src/index.css | 49 |
2 files changed, 102 insertions, 77 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js index 91adf0b9..c3d4e5aa 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -149,70 +149,74 @@ export default function App() { return ( <> <Header visitor={visitor} className={scrollState.hidden ? elClassHidden : ''} /> - <section id="content" ref={contentRef} className={scrollState.top ? elClassTop : ''}> - <Switch> - <Route exact path="/"> - <Discussions visitor={visitor} /> - </Route> - <Route exact path="/home"> - <Home visitor={visitor} /> - </Route> - <Route exact path="/discover"> - <Discover visitor={visitor} /> - </Route> - <Route exact path="/settings"> - <Settings visitor={visitor} onChange={auth} /> - </Route> - <Route exact path="/login"> - <Login visitor={visitor} onAuth={auth} /> - </Route> - <Route exact path="/post"> - <Post visitor={visitor} /> - </Route> - <Route exact path="/pm"> - <Contacts visitor={visitor} /> - </Route> - <Route exact path="/pm/:user"> - <Chat connection={eventSource} visitor={visitor} /> - </Route> - <Route exact path="/:user/friends"> - <Friends /> - </Route> - <Route exact path="/:user/readers"> - <Readers /> - </Route> - <Route exact path="/:user"> - <Blog visitor={visitor} /> - </Route> - <Route exact path="/tag/:tag"> - <Tag visitor={visitor} /> - </Route> - <Route exact path="/:user/:mid"> - <Thread connection={eventSource} visitor={visitor} /> - </Route> - </Switch> - </section> + <div id="content_wrapper"> { - visitor.uid > 0 && - <aside id="sidebar"> - <Link to="/?show=my"> - <Icon name="ei-clock" size="s" /> - <span className="desktop">My feed</span> - </Link> - <Link to="/pm"> - <Icon name="ei-envelope" size="s" /> - <span className="desktop">Messages</span> - </Link> - <Link to="/?show=discuss"> - <Icon name="ei-bell" size="s" /> - <span className="desktop">Discussions</span> - </Link> - <Link to="/settings" rel="nofollow"> - <Icon name="ei-gear" size="s" /> - <span className="desktop">Settings</span> - </Link> - </aside> - } + visitor.uid > 0 && + <aside id="sidebar"> + <div id="sidebar_wrapper"> + <Link to="/?show=my"> + <Icon name="ei-clock" size="s" /> + <span className="desktop">My feed</span> + </Link> + <Link to="/pm"> + <Icon name="ei-envelope" size="s" /> + <span className="desktop">Messages</span> + </Link> + <Link to="/?show=discuss"> + <Icon name="ei-bell" size="s" /> + <span className="desktop">Discussions</span> + </Link> + <Link to="/settings" rel="nofollow"> + <Icon name="ei-gear" size="s" /> + <span className="desktop">Settings</span> + </Link> + </div> + </aside> + } + <section id="content" ref={contentRef} className={scrollState.top ? elClassTop : ''}> + <Switch> + <Route exact path="/"> + <Discussions visitor={visitor} /> + </Route> + <Route exact path="/home"> + <Home visitor={visitor} /> + </Route> + <Route exact path="/discover"> + <Discover visitor={visitor} /> + </Route> + <Route exact path="/settings"> + <Settings visitor={visitor} onChange={auth} /> + </Route> + <Route exact path="/login"> + <Login visitor={visitor} onAuth={auth} /> + </Route> + <Route exact path="/post"> + <Post visitor={visitor} /> + </Route> + <Route exact path="/pm"> + <Contacts visitor={visitor} /> + </Route> + <Route exact path="/pm/:user"> + <Chat connection={eventSource} visitor={visitor} /> + </Route> + <Route exact path="/:user/friends"> + <Friends /> + </Route> + <Route exact path="/:user/readers"> + <Readers /> + </Route> + <Route exact path="/:user"> + <Blog visitor={visitor} /> + </Route> + <Route exact path="/tag/:tag"> + <Tag visitor={visitor} /> + </Route> + <Route exact path="/:user/:mid"> + <Thread connection={eventSource} visitor={visitor} /> + </Route> + </Switch> + </section> + </div> </> ); } diff --git a/vnext/src/index.css b/vnext/src/index.css index 9117fe1c..5a829f03 100644 --- a/vnext/src/index.css +++ b/vnext/src/index.css @@ -138,14 +138,16 @@ hr { } #sidebar { - display: flex; - flex-direction: row; - justify-content: space-around; - border-top: 1px solid var(--border-color); position: fixed; bottom: 0; left: 0; width: 100%; + z-index: 10; +} +#sidebar_wrapper { + display: flex; + flex-direction: row; + justify-content: space-around; } .nav_content { @@ -228,7 +230,7 @@ hr { padding: 14px 16px; } -#sidebar > a, +#sidebar_wrapper > a, .l > a { color: var(--dimmed-link-color); display: flex; @@ -237,7 +239,7 @@ hr { vertical-align: middle; } -#sidebar > a:hover { +#sidebar_wrapper > a:hover { background-color: var(--background-color); border-top: 2px solid #ff339a; cursor: pointer; @@ -341,24 +343,43 @@ hr { display: none; } #content { - margin-left: 320px; + width: 100%; margin-bottom: 12px; padding-bottom: 12px; } #sidebar { - left: 0; - top: 64px; + position: sticky; + padding: 12px; + margin-top: 66px; + height: 100%; + z-index: auto; + overflow-y: auto; + } + article, + .page, + .msg-cont { + width: 640px; + } + #sidebar_wrapper { + width: 300px; + overflow-y: auto; + height: 100%; flex-direction: column; - border-top: 1px solid transparent; - justify-content: normal; - width: 320px; } - #sidebar a, + #sidebar_wrapper a, .l a { border-right: 2px solid transparent; } - #sidebar > a:hover { + #sidebar_wrapper > a:hover { border-top: initial; border-right: 2px solid #ff339a; } + #header_wrapper, + #content_wrapper { + width: 1000px; + margin: 0 auto; + } + #content_wrapper { + display: flex; + } } |