Backported fixed duplicated id bug for sidebar.

Fixes a bug that there was more than one div with id sidebar. [Backported from WikiChron-networks commit 64755f2](Grasia/WikiChron-networks@64755f2).
Grasia · Dec 20, 2018 · a623e45 · a623e45
1 parent 3387bb8
commit a623e45
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/wikichron/app.py b/wikichron/app.py
@@ -162,7 +162,7 @@ def set_layout():
 
             #~ generate_tabs_bar(tabs),
             #~ side_bar.generate_side_bar(available_wikis, available_metrics),
-            html.Div(id='side-bar'),
+            html.Div(id='side-bar-root', className='side-bar-cn'),
             html.Div(id='main-root', style={'flex': 'auto'}),
             html.Div(id='sidebar-selection', style={'display': 'none'}),
             html.Div(id='test', style={'display': 'none'})
@@ -255,9 +255,9 @@ def write_query_string_in_hidden_selection_div(query_string):
         return (json.dumps(selection))
 
 
-    @app.callback(Output('side-bar', 'children'),
+    @app.callback(Output('side-bar-root', 'children'),
         [Input('url', 'pathname')],
-        [State('side-bar', 'children'),
+        [State('side-bar-root', 'children'),
         State('url', 'search')],
     )
     def generate_side_bar_onload(pathname, sidebar, query_string):

diff --git a/wikichron/assets/side_bar.css b/wikichron/assets/side_bar.css
@@ -1,6 +1,6 @@
-/* Sidebar */
+/* Sidebars */
 
-#side-bar {
+.side-bar-cn {
     background-color: #004481;
     flex: 0 0 300px;
     color: white;

diff --git a/wikichron/js/side_bar.js b/wikichron/js/side_bar.js
@@ -7,7 +7,7 @@ function setEvents() {
 function hideSideBar() {
 
     console.log('Pressed hide side bar...');
-    // makes arrows point to the left <<
+    // makes arrows point to the right >>
     fold_button = document.getElementById('fold-button');
     fold_button.style.transform = "rotateY(180deg)";
 
@@ -16,7 +16,7 @@ function hideSideBar() {
 
     // hide side bar
     document.getElementById('side-bar-content').style.display = 'none';
-    document.getElementById('side-bar').style.flex = 'unset';
+    document.getElementById('side-bar-root').style.flex = 'unset';
 
     // set show bar in arrow
     fold_container = document.getElementById('fold-img-container');
@@ -28,15 +28,15 @@ function showSideBar() {
 
     console.log('Pressed show side bar...');
 
-    // makes arrows point to the right >>
+    // makes arrows point to the left <<
     fold_button = document.getElementById('fold-button');
     fold_button.style.transform = '';
 
     // effect pushing away side_bar (transform: translate - X)
 
     // show side bar
     document.getElementById('side-bar-content').style.display = '';
-    document.getElementById('side-bar').style.flex = '';
+    document.getElementById('side-bar-root').style.flex = '';
 
     // set hide bar in arrow
     fold_container = document.getElementById('fold-img-container');