diff options
| -rw-r--r-- | vnext/src/components/Header.js | 4 | ||||
| -rw-r--r-- | vnext/src/index.js | 14 | ||||
| -rw-r--r-- | vnext/src/style/main.css | 52 | ||||
| -rw-r--r-- | vnext/src/views/index.html | 19 |
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"> · |