aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--vnext/src/App.js130
-rw-r--r--vnext/src/index.css57
-rw-r--r--vnext/src/index.html18
-rw-r--r--vnext/src/ui/Message.css9
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"> &middot;
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;
+ }
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-07-19 19:37:30 +0000