hide input field for guests

web/TODO.md

@@ -1,7 +1,6 @@
 major features:
 
 - improve design
-  - add true preloader
   - disable inputs for guests
   - hide reply links for guests
   - check mobile ui

web/app/components/root/__auth-panel/root__auth-panel.scss

@@ -1,3 +0,0 @@
-.root__auth-panel {
-  margin-bottom: 4px;
-}

web/app/components/root/__input/root__input.scss

@@ -1,3 +1,3 @@
 .root__input {
-  margin-bottom: 24px;
+  margin-top: 4px;
 }

web/app/components/root/__pinned-comments/root__pinned-comments.scss

@@ -1,7 +1,7 @@
 @import 'common/variables';
 
 .root__pinned-comments {
-  margin-bottom: $offset * 2;
+  margin-top: 24px;
   padding: ($offset / 3) ($offset / 2);
   border: 2px solid #0aa;
   border-radius: 4px;

web/app/components/root/__threads/root__threads.scss

@@ -0,0 +1,3 @@
+.root__threads {
+  margin-top: 24px;
+}

web/app/components/root/index.js

@@ -2,9 +2,9 @@ export { default } from './root';
 
 require('./root.scss');
 
-require('./__auth-panel/root__auth-panel.scss');
 require('./__input/root__input.scss');
 require('./__preloader/root__preloader.scss');
 require('./__pinned-comment/root__pinned-comment.scss');
 require('./__pinned-comments/root__pinned-comments.scss');
 require('./__thread/root__thread.scss');
+require('./__threads/root__threads.scss');

web/app/components/root/root.jsx

@@ -101,22 +101,26 @@ export default class Root extends Component {
 
     // TODO: i think we should do it on backend
     const pinnedComments = store.getPinnedComments();
+    const isGuest = !Object.keys(user).length;
 
     return (
       <div id={NODE_ID}>
         <div className="root">
           <AuthPanel
-            mix="root__auth-panel"
             user={user}
             providers={config.auth_providers}
             onSignIn={this.onSignIn}
             onSignOut={this.onSignOut}
           />
 
-          <Input
-            mix="root__input"
-            onSubmit={this.addComment}
-          />
+          {
+            !isGuest && (
+              <Input
+                mix="root__input"
+                onSubmit={this.addComment}
+              />
+            )
+          }
 
           {
             !!pinnedComments.length && (
@@ -135,14 +139,20 @@ export default class Root extends Component {
           }
 
           {
-            comments.map(thread => (
-              <Thread
-                mix="root__thread"
-                mods={{ level: 0 }}
-                data={thread}
-                onReply={this.addComment}
-              />
-            ))
+            !!comments.length && (
+              <div className="root__threads">
+                {
+                  comments.map(thread => (
+                    <Thread
+                      mix="root__thread"
+                      mods={{ level: 0 }}
+                      data={thread}
+                      onReply={this.addComment}
+                    />
+                  ))
+                }
+              </div>
+            )
           }
         </div>
       </div>