aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorGravatar Vitaly Takmazov2018-12-06 15:18:08 +0300
committerGravatar Vitaly Takmazov2023-01-13 10:37:54 +0300
commit011b8df08e9319944210d62a75b11fa9f62df236 (patch)
tree669c612fac462743ade9d2e4cfa88f74e2edc8a0
parent96256e69b7041dfddebdde23d45c1c3aa5126de9 (diff)
layout fixes
-rw-r--r--vnext/src/App.js27
-rw-r--r--vnext/src/components/Thread.js32
-rw-r--r--vnext/src/style/main.css21
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;