aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--vnext/src/App.js64
-rw-r--r--vnext/src/components/Spinner.js2
-rw-r--r--vnext/src/style/main.css53
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 &copy; 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