From 71a4d23434fbfa300ce71510049e048cd7bfc797 Mon Sep 17 00:00:00 2001
From: pbca26 <pbca26@gmail.com>
Date: Thu, 1 Jun 2017 12:45:45 +0300
Subject: [PATCH] settings tab content collapsed height fix

---
 react/src/components/dashboard/settings.js | 20 ++++++++++----------
 react/src/styles/index.scss                |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/react/src/components/dashboard/settings.js b/react/src/components/dashboard/settings.js
index 77096ed..c4e23e7 100644
--- a/react/src/components/dashboard/settings.js
+++ b/react/src/components/dashboard/settings.js
@@ -32,7 +32,7 @@ class Settings extends React.Component {
       activeTab: 0,
       debugLinesCount: 10,
       debugTarget: 'iguana',
-      activeTabHeight: '10px',
+      activeTabHeight: '0',
       appSettings: {},
       tabElId: null,
     };
@@ -133,7 +133,7 @@ class Settings extends React.Component {
           </div>
           <div
             className={ this.state.activeTab === 8 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
-            style={{ height: this.state.activeTab === 8 ? this.state.activeTabHeight + 'px' : '10px' }}
+            style={{ height: this.state.activeTab === 8 ? this.state.activeTabHeight + 'px' : '0' }}
             aria-labelledby="DebugLog"
             role="tabpanel">
             <div className="panel-body">
@@ -363,7 +363,7 @@ class Settings extends React.Component {
                       </div>
                       <div
                         className={ this.state.activeTab === 0 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
-                        style={{ height: this.state.activeTab === 0 ? this.state.activeTabHeight + 'px' : '10px' }}
+                        style={{ height: this.state.activeTab === 0 ? this.state.activeTabHeight + 'px' : '0' }}
                         id="WalletInfoTab"
                         aria-labelledby="WalletInfo"
                         role="tabpanel">
@@ -429,7 +429,7 @@ class Settings extends React.Component {
                       </div>
                       <div
                         className={ this.state.activeTab === 1 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
-                        style={{ height: this.state.activeTab === 1 ? this.state.activeTabHeight + 'px' : '10px' }}
+                        style={{ height: this.state.activeTab === 1 ? this.state.activeTabHeight + 'px' : '0' }}
                         id="AddNodeforCoinTab"
                         aria-labelledby="AddNodeforCoin"
                         role="tabpanel">
@@ -523,7 +523,7 @@ class Settings extends React.Component {
                       </div>
                       <div
                         className={ this.state.activeTab === 2 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
-                        style={{ height: this.state.activeTab === 2 ? this.state.activeTabHeight + 'px' : '10px' }}
+                        style={{ height: this.state.activeTab === 2 ? this.state.activeTabHeight + 'px' : '0' }}
                         id="DumpWalletTab"
                         aria-labelledby="DumpWallet"
                         role="tabpanel">
@@ -542,7 +542,7 @@ class Settings extends React.Component {
                       </div>
                       <div
                         className={ this.state.activeTab === 3 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
-                        style={{ height: this.state.activeTab === 3 ? this.state.activeTabHeight + 'px' : '10px' }}
+                        style={{ height: this.state.activeTab === 3 ? this.state.activeTabHeight + 'px' : '0' }}
                         id="FiatCurrencySettingsTab"
                         aria-labelledby="FiatCurrencySettings"
                         role="tabpanel">
@@ -561,7 +561,7 @@ class Settings extends React.Component {
                       </div>
                       <div
                         className={ this.state.activeTab === 4 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
-                        style={{ height: this.state.activeTab === 4 ? this.state.activeTabHeight + 'px' : '10px' }}
+                        style={{ height: this.state.activeTab === 4 ? this.state.activeTabHeight + 'px' : '0' }}
                         id="ExportKeysTab"
                         aria-labelledby="ExportKeys"
                         role="tabpanel">
@@ -625,7 +625,7 @@ class Settings extends React.Component {
                       </div>
                       <div
                         className={ this.state.activeTab === 5 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
-                        style={{ height: this.state.activeTab === 5 ? this.state.activeTabHeight + 'px' : '10px' }}
+                        style={{ height: this.state.activeTab === 5 ? this.state.activeTabHeight + 'px' : '0' }}
                         id="ImportKeysTab"
                         aria-labelledby="ImportKeys"
                         role="tabpanel">
@@ -674,7 +674,7 @@ class Settings extends React.Component {
                       </div>
                       <div
                         className={ this.state.activeTab === 6 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
-                        style={{ height: this.state.activeTab === 6 ? this.state.activeTabHeight + 'px' : '10px' }}
+                        style={{ height: this.state.activeTab === 6 ? this.state.activeTabHeight + 'px' : '0' }}
                         id="DebugLogTab" aria-labelledby="DebugLog" role="tabpanel">
                         <div className="panel-body">
                           <p>{ translate('INDEX.DEBUG_LOG_DESC') }</p>
@@ -735,7 +735,7 @@ class Settings extends React.Component {
                       </div>
                       <div
                         className={ this.state.activeTab === 7 ? 'panel-collapse collapse in' : 'panel-collapse collapse' }
-                        style={{ height: this.state.activeTab === 7 ? this.state.activeTabHeight + 'px' : '10px' }}
+                        style={{ height: this.state.activeTab === 7 ? this.state.activeTabHeight + 'px' : '0' }}
                         id="DebugLogTab" aria-labelledby="DebugLog" role="tabpanel">
                         <div className="panel-body">
                           <p>
diff --git a/react/src/styles/index.scss b/react/src/styles/index.scss
index ff355cf..1e201b9 100644
--- a/react/src/styles/index.scss
+++ b/react/src/styles/index.scss
@@ -272,7 +272,7 @@ body {
       transition: all .3s;
 
       &.collapse {
-        height: 10px;
+        height: 0;
       }
     }
   }