aboutsummaryrefslogtreecommitdiff
path: root/vnext
diff options
context:
space:
mode:
Diffstat (limited to 'vnext')
-rw-r--r--vnext/src/components/Header.js4
-rw-r--r--vnext/src/index.js14
-rw-r--r--vnext/src/style/main.css52
-rw-r--r--vnext/src/views/index.html19
4 files changed, 67 insertions, 22 deletions
diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js
index 8bf4bc8d..91fa02fd 100644
--- a/vnext/src/components/Header.js
+++ b/vnext/src/components/Header.js
@@ -66,11 +66,11 @@ export default class Header extends React.Component {
this.wScrollBefore = this.wScrollCurrent;
}
render() {
- return (<header id="header" ref={this.header} style={this.props.style}>{this.props.children}</header>);
+ return (<header id="header" ref={this.header} style={this.props.style || {}}>{this.props.children}</header>);
}
}
Header.propTypes = {
children: PropTypes.node,
- style: PropTypes.style
+ style: PropTypes.object
};
diff --git a/vnext/src/index.js b/vnext/src/index.js
index 74a332fd..c2d2b6b7 100644
--- a/vnext/src/index.js
+++ b/vnext/src/index.js
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom';
function LoadingView(props) {
return (
- <div id="body">
+ <>
<div id="header">
<div id="header_wrapper">
<div id="logo">
@@ -14,11 +14,17 @@ function LoadingView(props) {
<input name="search" className="text" placeholder="Search..." />
</form>
</div>
- <nav id="global"></nav>
+ <nav id="global">
+ <a href="/">Loading...</a>
+ </nav>
</div>
</div>
- <div id="wrapper"></div>
- </div>
+ <div id="wrapper">
+ <div id="content">
+ <div className="lds-ripple"><div></div><div></div></div>
+ </div>
+ </div>
+ </>
);
}
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index 726c2cba..964890c2 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -58,12 +58,14 @@ img, hr {
transition: margin-left 0.4s;
overflow-x: hidden;
}
+
#header_wrapper, .footer_container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
+
#sidebar {
color: #222;
transition: width 0.4s;
@@ -90,7 +92,7 @@ img, hr {
width: 100%;
margin-top: 12px;
overflow-x: hidden;
- transition: margin-left 0.4s;
+ transition: margin-left 0.4s;
}
#footer {
@@ -144,8 +146,7 @@ img, hr {
display: flex;
}
-#global a,
-#ctitle a {
+#global a, #ctitle a {
display: flex;
align-items: center;
border-bottom: 2px solid transparent;
@@ -156,7 +157,7 @@ img, hr {
padding: 14px 16px;
}
-#sidebar > a {
+#sidebar>a {
color: #88958d;
border-right: 2px solid transparent;
display: flex;
@@ -164,7 +165,8 @@ img, hr {
align-items: center;
vertical-align: middle;
}
-#sidebar > a:hover {
+
+#sidebar>a:hover {
background-color: #f8f8f8;
border-right: 2px solid #ff339a;
cursor: pointer;
@@ -174,10 +176,7 @@ img, hr {
padding: 2px 20px;
}
-#global a:hover,
-#ctitle a:hover,
-.l a:hover
-.msg-button:hover {
+#global a:hover, #ctitle a:hover, .l a:hover .msg-button:hover {
background-color: #f8f8f8;
border-bottom: 2px solid #ff339a;
cursor: pointer;
@@ -196,6 +195,41 @@ img, hr {
border-radius: 0;
}
+.lds-ripple {
+ display: inline-block;
+ position: relative;
+ width: 64px;
+ height: 64px;
+}
+
+.lds-ripple div {
+ position: absolute;
+ border: 4px solid #ff339a;
+ opacity: 1;
+ border-radius: 50%;
+ animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
+}
+
+.lds-ripple div:nth-child(2) {
+ animation-delay: -0.5s;
+}
+
+@keyframes lds-ripple {
+ 0% {
+ top: 28px;
+ left: 28px;
+ width: 0;
+ height: 0;
+ opacity: 1;
+ }
+ 100% {
+ top: -1px;
+ left: -1px;
+ width: 58px;
+ height: 58px;
+ opacity: 0;
+ }
+}
@media (--viewport-desktop) {
#app {
diff --git a/vnext/src/views/index.html b/vnext/src/views/index.html
index 3b8480d7..792424e2 100644
--- a/vnext/src/views/index.html
+++ b/vnext/src/views/index.html
@@ -34,15 +34,20 @@
<div id="header">
<div id="header_wrapper">
<div id="logo"><a href="/">Juick</a></div>
+ <nav id="global">
+ <a href="/">Loading..</a>
+ </nav>
</div>
</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 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>
<div id="footer">
<div id="footer-right"> &middot;