aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--vnext/src/App.js130
-rw-r--r--vnext/src/index.css49
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;
+ }
}