Scrollable sidebar (#279)

equinor · Sep 9, 2020 · 06fd34e · 06fd34e
1 parent e23fb93
commit 06fd34e
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 1 deletion.
diff --git a/webviz_config/static/assets/webviz_layout.css b/webviz_config/static/assets/webviz_layout.css
@@ -61,6 +61,48 @@ div.pageWrapper.tab-content {
     align-items: center;
 }
 
+.sideBar {
+    overflow-x: hidden;
+    overflow-y: scroll;
+    height: 100vh;
+    scrollbar-width: thin;
+    scrollbar-color: var(--menuBackground) var(--menuBackground); /* thumb and track color */
+}
+
+.sideBar:hover {
+    scrollbar-color: var(--menuLinkColor) var(--menuBackground); /* thumb and track color */
+}
+
+.sideBar::-webkit-scrollbar
+{
+	width: 3px;
+	background-color:var(--menuBackground);
+}
+
+.sideBar::-webkit-scrollbar-track
+{
+	-webkit-box-shadow: inset 0 0 3px var(--menuBackground);
+	background-color: var(--menuBackground);
+}
+
+.sideBar:hover::-webkit-scrollbar-track
+{
+    -webkit-box-shadow: inset 0 0 3px var(--menuLinkBackgroundHover);
+
+	background-color: var(--menuBackground);
+}
+
+.sideBar::-webkit-scrollbar-thumb
+{
+	background-color: var(--menuBackground);
+}
+
+.sideBar:hover::-webkit-scrollbar-thumb
+{
+	background-color: var(--menuLinkColor);
+}
+
+
 /* Needed to override border for the last tab */
 #last_page {border: none!important;} /* csslint allow: known-properties, important */
-#logo {border: none!important;} /* csslint allow: known-properties, important */
+#logo {padding:50px!important; border: none!important;max-width: 100%; height:auto;} /* csslint allow: known-properties, important */
diff --git a/webviz_config/templates/webviz_template.py.jinja2 b/webviz_config/templates/webviz_template.py.jinja2
@@ -74,6 +74,7 @@ else:
     app.layout = dcc.Tabs(
         parent_className="layoutWrapper",
         content_className="pageWrapper",
+        className="sideBar",
         vertical=True,
         children=[
           {% for page in pages %}