Better code for side_bar tabs

Grasia · Sep 5, 2018 · 1e07668 · 1e07668
1 parent 96cfc75
commit 1e07668
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 43 deletions.
diff --git a/side_bar.py b/side_bar.py
@@ -204,7 +204,6 @@ def group_metrics_in_accordion(metrics, metric_category):
             style={'color': 'white'},
             id='metrics-tab-container',
             ),
-        #~ select_time_axis_control(),
         ],
         id='metrics-tab'
     );
@@ -232,40 +231,38 @@ def selection_result_container():
 
 
 def generate_tabs(wikis, metrics):
-    return ([gdc.Tabs(
-                        tabs=[
-                            {'value': 'wikis', 'label': 'WIKIS'},
-                            {'value': 'metrics', 'label': 'METRICS'}
-                        ],
-                        value='wikis',
-                        id='side-bar-tabs',
-                        vertical=False,
-                        selectedTabStyle={
-                            'backgroundColor': '#004481',
-                        },
-                        selectedTabClassName='side-bar-selected-tab',
-                        style={
-                            'width': '100%',
-                            'textAlign': 'center',
-                            'border': 'none',
-                        },
-                        tabsStyle={
-                            'width': '50%',
-                            'height': '70px',
-                            'borderRadius': '3px',
-                            'backgroundColor': '#072146',
-                            'borderLeftStyle': 'none',
-                            'borderRightStyle': 'none',
-                            'fontSize': '18px',
-                            'lineHeight': '21px',
-                            'justifyContent': 'center',
-                            'flexDirection': 'column'
-                        },
-                        tabsClassName='side-bar-tab',
-                        ),
-                    wikis_tab(wikis),
-                    metrics_tab(metrics)
-            ]);
+    return (html.Div([
+                gdc.Tabs(
+                    tabs=[
+                        {'value': 'wikis', 'label': 'WIKIS'},
+                        {'value': 'metrics', 'label': 'METRICS'}
+                    ],
+                    value='wikis',
+                    id='side-bar-tabs',
+                    vertical=False,
+                    selectedTabStyle={
+                        'backgroundColor': '#004481',
+                    },
+                    selectedTabClassName='side-bar-selected-tab',
+                    style={
+                        'width': '100%',
+                        'textAlign': 'center',
+                        'border': 'none',
+                    },
+                    tabsStyle={
+                        'backgroundColor': '#072146',
+                        'borderRadius': '3px',
+                        'borderLeftStyle': 'none',
+                        'borderRightStyle': 'none',
+                    },
+                    tabsClassName='side-bar-tab',
+                ),
+                wikis_tab(wikis),
+                metrics_tab(metrics)
+                ],
+            id='side-bar-tabs-container',
+        )
+    );
 
 
 def generate_side_bar(wikis, metrics):
@@ -274,11 +271,10 @@ def generate_side_bar(wikis, metrics):
             fold_button(),
             html.Div(id='side-bar-content',
                 children = [
-                    #~ html.Div(style={'backgroundColor': '#072146', 'height': '15px'}),
-                    ] + generate_tabs(wikis, metrics) +
-                    [compare_button(),
+                    generate_tabs(wikis, metrics),
+                    compare_button(),
                     selection_result_container()
-                    ]
+                ]
             )
         ]
     );

diff --git a/styles/app.css b/styles/app.css
@@ -129,11 +129,7 @@ p#fold-button {
 .side-bar-tab {
     width: 50%;
     height: 70px;
-    border-radius: 3px;
-    background-color: #072146;
     color: #49A5E6;
-    border-left-style: none;
-    border-right-style: none;
     font-size: 18px;
     line-height: 21px;
     justify-content: center;