aboutsummaryrefslogtreecommitdiff
path: root/vnext/src
diff options
context:
space:
mode:
Diffstat (limited to 'vnext/src')
-rw-r--r--vnext/src/App.js86
-rw-r--r--vnext/src/index.css30
-rw-r--r--vnext/src/index.html10
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