diff options
Diffstat (limited to 'vnext/src')
-rw-r--r-- | vnext/src/App.js | 130 | ||||
-rw-r--r-- | vnext/src/index.css | 57 | ||||
-rw-r--r-- | vnext/src/index.html | 18 | ||||
-rw-r--r-- | vnext/src/ui/Message.css | 9 |
4 files changed, 92 insertions, 122 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js index f8788972..f06d482f 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -149,72 +149,70 @@ export default function App() { <Router> <> <Header visitor={visitor} className={scrollState.hidden ? elClassHidden : ''} /> - <div id="wrapper"> - <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> - { - 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> + <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> + { + 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> + } </> </Router> ); diff --git a/vnext/src/index.css b/vnext/src/index.css index 6ca33a13..78a094b1 100644 --- a/vnext/src/index.css +++ b/vnext/src/index.css @@ -113,17 +113,6 @@ hr { #app { height: 100%; width: 100%; - overflow: hidden; -} - -#wrapper { - display: grid; - grid-template-areas: "content" "footer"; - grid-template-columns: 100%; - grid-template-rows: 1fr auto; - height: 100%; - width: 100%; - overflow: hidden; } #header { @@ -131,7 +120,6 @@ hr { border-bottom: 1px solid var(--border-color); transition: transform 0.2s; z-index: 10; - overflow-x: hidden; position: fixed; width: 100%; top: 0; @@ -150,11 +138,14 @@ hr { } #sidebar { - grid-area: footer; display: flex; flex-direction: row; justify-content: space-around; border-top: 1px solid var(--border-color); + position: fixed; + bottom: 0; + left: 0; + width: 100%; } .nav_content { @@ -162,10 +153,9 @@ hr { } #content { - grid-area: content; margin-top: 0; - overflow: auto; transition: margin-top 0.4s; + padding-bottom: 64px; } .content--top { @@ -179,7 +169,6 @@ hr { color: var(--text-color); padding: 10px; transition: margin-left 0.4s; - overflow-x: hidden; } .desktop { @@ -335,25 +324,6 @@ hr { color: var(--dimmed-link-color); } -::-webkit-scrollbar { - width: 6px; -} /* this targets the default scrollbar (compulsory) */ -::-webkit-scrollbar-track { - background-color: var(--main-background-color); -} /* the new scrollbar will have a flat appearance with the set background color */ - -::-webkit-scrollbar-thumb { - background-color: #ff339a; -} /* this will style the thumb, ignoring the track */ - -::-webkit-scrollbar-button { - background-color: var(--border-color); -} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */ - -::-webkit-scrollbar-corner { - background-color: black; -} - @media (--viewport-mobile) { #content { margin-bottom: 12px; @@ -363,15 +333,7 @@ hr { } } -@media (--viewport-desktop) { - #app { - overflow: initial; - } - #wrapper { - grid-template-areas: ". footer content ."; - grid-template-columns: auto 240px 760px auto; - overflow: initial; - } +@media (--viewport-desktop) { #header_wrapper, .footer_container { margin: 0 auto; @@ -384,14 +346,17 @@ hr { display: none; } #content { + margin-left: 320px; margin-bottom: 12px; - overflow: initial; + padding-bottom: 12px; } #sidebar { + left: 0; + top: 64px; flex-direction: column; justify-content: initial; border-top: initial; - margin-top: 64px; + width: 320px; } #sidebar a, .l a { diff --git a/vnext/src/index.html b/vnext/src/index.html index 7c408656..e69e1429 100644 --- a/vnext/src/index.html +++ b/vnext/src/index.html @@ -38,16 +38,14 @@ </nav> </div> </div> - <div id="wrapper"> - <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> - and <a href="xmpp:juick@juick.com">chat</a> interfaces. - </article> - </noscript> - </div> + <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> + and <a href="xmpp:juick@juick.com">chat</a> interfaces. + </article> + </noscript> </div> <div id="footer"> <div id="footer-right"> · diff --git a/vnext/src/ui/Message.css b/vnext/src/ui/Message.css index 9bcca83b..06ad5270 100644 --- a/vnext/src/ui/Message.css +++ b/vnext/src/ui/Message.css @@ -1,3 +1,6 @@ +@custom-media --viewport-desktop (width >=62.5rem); +@custom-media --viewport-mobile (width < 62.5rem); + .msg-cont .ir { padding: 12px; } @@ -231,3 +234,9 @@ blockquote { .msg-cont .nsfw .ir img:hover { opacity: 1; } + +@media (--viewport-desktop) { + .msg-cont { + width: 640px; + } +} |