Add title for reply section and shrink tab font

cofacts · Oct 24, 2017 · af9ccb0 · af9ccb0
1 parent 749cd5d
commit af9ccb0
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/pages/article.js b/pages/article.js
@@ -130,13 +130,19 @@ class ArticlePage extends React.Component {
           onClick={this.handleTabChange('new')}
           className={`tab ${tab === 'new' ? 'active' : ''}`}
         >
-          撰寫新回應
+          撰寫回應
         </li>
         <li
           onClick={this.handleTabChange('related')}
-          className={`tab ${tab === 'related' ? 'active' : ''}`}
+          className={`tab ${tab === 'related'
+            ? 'active'
+            : ''} ${relatedReplyCount === 0 ? 'disabled' : ''}`}
         >
-          使用相關回應 <span className="badge">{relatedReplyCount}</span>
+          {relatedReplyCount === 0
+            ? '無相關回應'
+            : <span>
+                使用相關回應 <span className="badge">{relatedReplyCount}</span>
+              </span>}
         </li>
         {/*<li
           onClick={this.handleTabChange('search')}
@@ -246,6 +252,7 @@ class ArticlePage extends React.Component {
         </section>
 
         <section className="section">
+          <h2>增加新回應</h2>
           {this.renderTabMenu()}
           <div className="tab-content">
             {this.renderNewReplyTab()}
@@ -266,7 +273,7 @@ class ArticlePage extends React.Component {
         <style jsx>{detailStyle}</style>
         <style jsx>{`
           .tab-content {
-            padding: 24px;
+            padding: 20px;
             border: 1px solid #ccc;
             border-top: 0;
           }

diff --git a/pages/article.styles.js b/pages/article.styles.js
@@ -30,7 +30,7 @@ export const detailStyle = `
 export const tabMenuStyle = `
   .tabs {
     display: flex;
-    font-size: 18px;
+    font-size: 16px;
     font-weight: 500;
     margin: 0;
     padding: 0;
@@ -39,7 +39,7 @@ export const tabMenuStyle = `
     list-style: none;
   }
   .tab {
-    padding: 16px 24px;
+    padding: 16px 20px;
     border: 1px solid #ccc;
     background: #eee;
     display: flex;
@@ -55,11 +55,15 @@ export const tabMenuStyle = `
     border-bottom-color: transparent;
     background: #fff;
   }
+  .tab.disabled {
+    color: #bbb;
+    pointer-events: none;
+  }
   .badge {
     background: #999;
     color: #fff;
     padding: 2px 8px;
-    border-radius: 100%;
+    border-radius: 20px;
     font-size: 0.75em;
     margin-left: 8px;
   }