diff options
Diffstat (limited to 'vnext')
| -rw-r--r-- | vnext/src/App.js | 27 | ||||
| -rw-r--r-- | vnext/src/components/Thread.js | 32 | ||||
| -rw-r--r-- | vnext/src/style/main.css | 21 |
3 files changed, 41 insertions, 39 deletions
diff --git a/vnext/src/App.js b/vnext/src/App.js index 7f383900..626153e0 100644 --- a/vnext/src/App.js +++ b/vnext/src/App.js @@ -105,19 +105,28 @@ export default class App extends React.Component { <nav id="global"> {user.uid > 0 ? <Link to={{ pathname: '/' }}> - <Icon name="ei-bell" size="s" /><span>Discuss</span> + <Icon name="ei-bell" size="s" /><span className="desktop">Discuss</span> { user.unreadCount && <span className="badge">{user.unreadCount}</span> } </Link> : - <Link to='/?media=1' rel="nofollow"><Icon name="ei-camera" size="s" />Photos</Link> + <Link to='/?media=1' rel="nofollow"> + <Icon name="ei-camera" size="s" /> + <span className="desktop">Photos</span> + </Link> } - <Link to={{ pathname: '/discover' }} rel="nofollow"><Icon name="ei-search" size="s" />Discover</Link> + <Link to={{ pathname: '/discover' }} rel="nofollow"> + <Icon name="ei-search" size="s" /> + <span className="desktop">Discover</span> + </Link> {user.uid > 0 ? - <Link to={{ pathname: '/post' }}><Icon name="ei-pencil" size="s" />Post</Link> + <Link to={{ pathname: '/post' }}> + <Icon name="ei-pencil" size="s" /> + <span className="desktop">Post</span> + </Link> : <LoginButton title="Login" onAuth={this.auth} /> } @@ -158,13 +167,9 @@ export default class App extends React.Component { <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 to="/settings" rel="nofollow"> + <Icon name="ei-gear" size="s" /> + <span className="desktop">Settings</span> </Link> </aside> </div> diff --git a/vnext/src/components/Thread.js b/vnext/src/components/Thread.js index 079674a7..b824c0ed 100644 --- a/vnext/src/components/Thread.js +++ b/vnext/src/components/Thread.js @@ -80,20 +80,16 @@ export default class Thread extends React.Component { const loaders = Math.min(msg.replies || 0, 10); return ( <> - <ul id="0"> - <li className="msg msgthread"> - { - msg.mid ? ( - <Message data={msg} visitor={this.props.visitor}> - {this.state.active === (msg.rid || 0) && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>} - <Recommendations forMessage={msg} /> - </Message> - ) : ( - <Spinner /> - ) - } - </li> - </ul> + { + msg.mid ? ( + <Message data={msg} visitor={this.props.visitor}> + {this.state.active === (msg.rid || 0) && <MessageInput data={msg} onSend={this.postComment}>Write a comment...</MessageInput>} + <Recommendations forMessage={msg} /> + </Message> + ) : ( + <Spinner /> + ) + } <ul id="replies"> { !this.state.loading ? this.state.replies.map((msg) => ( @@ -140,10 +136,10 @@ export default class Thread extends React.Component { </li> )) : ( <> - {Array(loaders).fill().map((it, i) => <Spinner key={i} />)} - </> - ) - } + {Array(loaders).fill().map((it, i) => <Spinner key={i} />)} + </> + ) + } </ul> </> ); diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css index dfc657cf..4d6b1a7a 100644 --- a/vnext/src/style/main.css +++ b/vnext/src/style/main.css @@ -6,6 +6,7 @@ html, body, div, h1, h2, ul, li, p, form, input, textarea, pre { margin: 0; padding: 0; + box-sizing: border-box; } textarea { @@ -14,7 +15,6 @@ textarea { html, input, textarea { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 12pt; -webkit-font-smoothing: subpixel-antialiased; } @@ -40,8 +40,7 @@ img, hr { display: grid; grid-template-areas: "header" "content" "footer"; grid-template-columns: 1fr; - grid-template-rows: auto minmax(1fr, auto) auto; - grid-gap: 6px; + grid-template-rows: minmax(1fr, auto) minmax(1fr, auto) auto; min-height: 100vh; font: -apple-system-body; font-family: -apple-system, Segoe UI; @@ -53,7 +52,12 @@ img, hr { background: #fff; box-shadow: 0 0 3px rgba(0, 0, 0, 0.28); } - +#header_wrapper, .footer_container { + display: flex; + justify-content: space-between; + align-items: center; + flex-wrap: wrap; +} #sidebar { border-right: 1px solid #ccc; color: #222; @@ -77,7 +81,8 @@ img, hr { background: #fefdfe; grid-area: content; height: 100%; - padding: 10px; + width: 100%; + margin-top: 12px; } #footer { @@ -189,16 +194,11 @@ img, hr { #header_wrapper, .footer_container { margin: 0 auto; width: var(--main-width); - display: flex; - justify-content: space-between; - align-items: center; - flex-wrap: wrap; } #wrapper { justify-self: center; width: var(--main-width); display: grid; - grid-gap: 10px; grid-template-columns: 200px minmax(1fr, max-content); grid-template-rows: auto; grid-template-areas: "nav feed"; @@ -211,6 +211,7 @@ img, hr { } #content { grid-area: feed; + width: 728px; } #sidebar { border: 0; |