diff options
Diffstat (limited to 'vnext/src')
| -rw-r--r-- | vnext/src/App.js | 86 | ||||
| -rw-r--r-- | vnext/src/index.css | 30 | ||||
| -rw-r--r-- | vnext/src/index.html | 10 |
3 files changed, 73 insertions, 53 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js index 9a0634ff..f39875c1 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -169,48 +169,50 @@ export default function App() { } </div> </div> - <section id="content"> - <Switch> - <Route exact path="/" render={(props) => <Discussions visitor={visitor} {...props} />} /> - <Route exact path="/home" render={(props) => <Home visitor={visitor} {...props} />} /> - <Route exact path="/discover" render={(props) => - <Discover visitor={visitor} {...props} /> - } /> - <Route exact path="/settings" render={(props) => - <Settings visitor={visitor} {...props} onChange={auth} /> - } /> - <Route exact path="/login" render={(props) => <Login visitor={visitor} {...props} onAuth={auth} />} /> - <Route exact path="/post" render={(props) => <Post visitor={visitor} {...props} />} /> - <Route exact path="/pm" render={(props) => <Contacts visitor={visitor} {...props} />} /> - <Route exact path="/pm/:user" render={(props) => <Chat connection={eventSource} visitor={visitor} {...props} />} /> - <Route exact path="/:user/friends" render={(props) => <Friends visitor={visitor} {...props} />} /> - <Route exact path="/:user/readers" render={(props) => <Readers visitor={visitor} {...props} />} /> - <Route exact path="/:user" render={(props) => <Blog visitor={visitor} {...props} />} /> - <Route exact path="/tag/:tag" render={(props) => <Tag visitor={visitor} {...props} />} /> - <Route exact path="/:user/:mid" render={(props) => <Thread connection={eventSource} visitor={visitor} {...props} />} /> - </Switch> - </section> - { - 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> - } + <div id="wrapper"> + <section id="content"> + <Switch> + <Route exact path="/" render={(props) => <Discussions visitor={visitor} {...props} />} /> + <Route exact path="/home" render={(props) => <Home visitor={visitor} {...props} />} /> + <Route exact path="/discover" render={(props) => + <Discover visitor={visitor} {...props} /> + } /> + <Route exact path="/settings" render={(props) => + <Settings visitor={visitor} {...props} onChange={auth} /> + } /> + <Route exact path="/login" render={(props) => <Login visitor={visitor} {...props} onAuth={auth} />} /> + <Route exact path="/post" render={(props) => <Post visitor={visitor} {...props} />} /> + <Route exact path="/pm" render={(props) => <Contacts visitor={visitor} {...props} />} /> + <Route exact path="/pm/:user" render={(props) => <Chat connection={eventSource} visitor={visitor} {...props} />} /> + <Route exact path="/:user/friends" render={(props) => <Friends visitor={visitor} {...props} />} /> + <Route exact path="/:user/readers" render={(props) => <Readers visitor={visitor} {...props} />} /> + <Route exact path="/:user" render={(props) => <Blog visitor={visitor} {...props} />} /> + <Route exact path="/tag/:tag" render={(props) => <Tag visitor={visitor} {...props} />} /> + <Route exact path="/:user/:mid" render={(props) => <Thread connection={eventSource} visitor={visitor} {...props} />} /> + </Switch> + </section> + { + 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> + } + </div> </> </Router> ); diff --git a/vnext/src/index.css b/vnext/src/index.css index c01d2aae..a371ae55 100644 --- a/vnext/src/index.css +++ b/vnext/src/index.css @@ -111,20 +111,30 @@ hr { } #app { + height: 100%; + width: 100%; + overflow: hidden; +} + +#wrapper { display: grid; - grid-template-areas: "header" "content" "footer"; + grid-template-areas: "content" "footer"; grid-template-columns: 100%; - grid-template-rows: auto 1fr auto; + grid-template-rows: 1fr auto; height: 100%; width: 100%; + overflow: hidden; } #header { - grid-area: header; background: var(--text-background-color); border-bottom: 1px solid var(--border-color); transition: transform 0.2s; + z-index: 10; overflow-x: hidden; + position: fixed; + width: 100%; + top: 0; } .header--hidden { @@ -153,8 +163,8 @@ hr { #content { grid-area: content; - margin-top: 12px; - overflow-y: scroll; + margin-top: 64px; + overflow: auto; } #footer { @@ -350,9 +360,12 @@ hr { @media (--viewport-desktop) { #app { - grid-template-areas: "header header header header"". footer content ."; + overflow: initial; + } + #wrapper { + grid-template-areas: ". footer content ."; grid-template-columns: auto 240px 760px auto; - grid-template-rows: auto 1fr; + overflow: initial; } #header_wrapper, .footer_container { @@ -367,12 +380,13 @@ hr { } #content { margin-bottom: 12px; + overflow: initial; } #sidebar { flex-direction: column; justify-content: initial; border-top: initial; - margin-top: 12px; + margin-top: 64px; } #sidebar a, .l a { diff --git a/vnext/src/index.html b/vnext/src/index.html index 226b89c6..7c408656 100644 --- a/vnext/src/index.html +++ b/vnext/src/index.html @@ -1,5 +1,6 @@ <!DOCTYPE html> <html prefix="og: http://ogp.me/ns#"> + <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> @@ -26,11 +27,12 @@ <link rel="icon" type="image/png" sizes="16x16" href="//i.juick.com/favicon-16x16.png" /> <link rel="manifest" href="//i.juick.com/manifest.json" /> </head> + <body> <div id="app"> <div id="header"> <div id="header_wrapper"> - <div id="logo"><a href="/"/></div> + <div id="logo"><a href="/" /></div> <nav id="global"> <a href="/">Loading...</a> </nav> @@ -40,7 +42,8 @@ <div id="content"> <noscript> <article> - Javascript is required to use Juick from browser.<br /> Alternatively we have <a href="mailto:juick@juick.com">maillist-like</a> + Javascript is required to use Juick from browser.<br /> Alternatively we have <a + href="mailto:juick@juick.com">maillist-like</a> and <a href="xmpp:juick@juick.com">chat</a> interfaces. </article> </noscript> @@ -58,4 +61,5 @@ </div> </div> </body> -</html> + +</html>
\ No newline at end of file |