diff options
Diffstat (limited to 'vnext')
| -rw-r--r-- | vnext/src/App.js | 64 | ||||
| -rw-r--r-- | vnext/src/components/Spinner.js | 2 | ||||
| -rw-r--r-- | vnext/src/style/main.css | 53 |
3 files changed, 80 insertions, 39 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js index 6d254d14..7f383900 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -99,33 +99,28 @@ export default class App extends React.Component { : <div id="logo"><Link to="/">Juick</Link></div> } - <div id="search"> + <div id="search" className="desktop"> <SearchBox pathname="/discover" onSearch={this.search} {...this.props} /> </div> <nav id="global"> - <ul> - {user.uid > 0 ? - <li> - <Link to={{ pathname: '/' }}> - <Icon name="ei-comment" size="s" /><span>Discuss</span> - { - user.unreadCount && - <span className="badge">{user.unreadCount}</span> - } - </Link> - </li> - : - <li><Link to='/?media=1' rel="nofollow"><Icon name="ei-camera" size="s" />Photos</Link></li> - } - <li><Link to={{ pathname: '/discover' }} rel="nofollow"><Icon name="ei-search" size="s" />Discover</Link></li> - <li> - {user.uid > 0 ? - <Link to={{ pathname: '/post' }}><Icon name="ei-pencil" size="s" />Post</Link> - : - <LoginButton title="Login" onAuth={this.auth} /> + {user.uid > 0 ? + <Link to={{ pathname: '/' }}> + <Icon name="ei-bell" size="s" /><span>Discuss</span> + { + user.unreadCount && + <span className="badge">{user.unreadCount}</span> } - </li> - </ul> + </Link> + : + <Link to='/?media=1' rel="nofollow"><Icon name="ei-camera" size="s" />Photos</Link> + } + <Link to={{ pathname: '/discover' }} rel="nofollow"><Icon name="ei-search" size="s" />Discover</Link> + + {user.uid > 0 ? + <Link to={{ pathname: '/post' }}><Icon name="ei-pencil" size="s" />Post</Link> + : + <LoginButton title="Login" onAuth={this.auth} /> + } </nav> </div> </Header> @@ -151,7 +146,26 @@ export default class App extends React.Component { </Switch> </section> <aside id="sidebar"> - SIDESIDESIDE + <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={`/${user.name}/?show=recomm`} rel="nofollow"> + <Icon name="ei-heart" size="s" /> + <span className="desktop">Recommendations</span> + </Link> + <Link to={`/${user.name}/?show=photos`} rel="nofollow"> + <Icon name="ei-camera" size="s" /> + <span className="desktop">Photos</span> + </Link> </aside> </div> <div id="footer"> @@ -162,7 +176,7 @@ export default class App extends React.Component { <div id="footer-left">juick.com © 2008-2018 <br /> </div> - </div> + </div> </> </Router> ); diff --git a/vnext/src/components/Spinner.js b/vnext/src/components/Spinner.js index b5ec4e0d..b5e33947 100644 --- a/vnext/src/components/Spinner.js +++ b/vnext/src/components/Spinner.js @@ -9,7 +9,7 @@ export default function Spinner(props) { speed={2} primaryColor="#f8f8f8" secondaryColor="#ecebeb" - style={{ width: '400px', height: '160px' }} + style={{ height: '160px' }} {...props}> <rect x="56" y="6" rx="0" ry="0" width="117" height="6.4" /> <rect x="56" y="20" rx="0" ry="0" width="85" height="6.4" /> diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css index 6a307b87..dfc657cf 100644 --- a/vnext/src/style/main.css +++ b/vnext/src/style/main.css @@ -41,6 +41,7 @@ img, hr { grid-template-areas: "header" "content" "footer"; grid-template-columns: 1fr; grid-template-rows: auto minmax(1fr, auto) auto; + grid-gap: 6px; min-height: 100vh; font: -apple-system-body; font-family: -apple-system, Segoe UI; @@ -50,7 +51,7 @@ img, hr { #header { grid-area: header; background: #fff; - border-bottom: 1px solid #ccc; + box-shadow: 0 0 3px rgba(0, 0, 0, 0.28); } #sidebar { @@ -64,6 +65,8 @@ img, hr { overflow-x: hidden; height: 100%; z-index: 1; + display: flex; + flex-direction: column; } .nav_content { @@ -112,7 +115,6 @@ img, hr { #ctitle { display: flex; - font-size: 14pt; } #ctitle img { @@ -126,32 +128,57 @@ img, hr { display: flex; } +#global a, +#ctitle a { + display: flex; + align-items: center; + border-bottom: 2px solid transparent; +} + #global a { - color: #888; - display: inline-block; - font-size: 13pt; + color: #88958d; padding: 14px 16px; } -#global li { - display: inline-block; +#sidebar a { + color: #88958d; + display: flex; + padding: 14px; + align-items: center; + vertical-align: middle; +} +#sidebar a:hover { + background-color: #f8f8f8; + border-right: 2px solid #ff339a; + cursor: pointer; } #ctitle a { - padding: 4px 20px; + padding: 2px 20px; } -#global a:hover, #global li:hover, #ctitle a:hover, .l a:hover .msg-button:hover { - background-color: #ec4b98; - color: #fff; +#global a:hover, +#ctitle a:hover, +.l a:hover +.msg-button:hover { + background-color: #f8f8f8; + border-bottom: 2px solid #ff339a; cursor: pointer; } .icon { - margin-top: -2px; vertical-align: middle; } +#search input { + background: #FFF; + border: 1px solid #ccc; + outline: none !important; + padding: 4px; + -webkit-appearance: none; + border-radius: 0; +} + @media (--viewport-desktop) { #app { @@ -189,10 +216,10 @@ img, hr { border: 0; position: static; grid-area: nav; - width: auto; top: inherit; left: inherit; z-index: inherit; overflow-x: inherit; + width: 240px; } }
\ No newline at end of file |