makes left sidebar and header of water theme fixed #11

Thecarisma · Sep 13, 2020 · 8346703 · 8346703
1 parent cb95e5f
commit 8346703
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 61 deletions.
diff --git a/docs/water/index.rst b/docs/water/index.rst
@@ -158,6 +158,8 @@ Variable Options
         }
     
    The name of the page must be relative to the index project root folder. Another way to make a page have no sidebar is to add the extension **.single** to it file name e.g. **test.single.rst**"
+   "collapsible_sidebar <boolean>", "A boolean value to determine whether the left sidebar should be collapsible or not."
+   "collapsible_sidebar_display <string>", "The left sidebar unordered list display css value. Set to 'none' if the list should be hidden by default when collapsible_sidebar is set to True, if collapsible_sidebar is set to False rember to remove this option or set it to 'block'."
    "source_root <string>", "The full link to the web root folder where the source of the documentation source is e.g. the documentation github repo"
    "source_root_edit_text <string>", "The text to show on the button that link to the page source in a repository. The default is '**Edit this page**'"
    "metadata <object>", "Set the metadata values of the generated website. The object should contain any, more or all of the keys, enable, url, type, title, description, image, keywords, author. E.g. 

diff --git a/test/static_water/_static/css/water.css b/test/static_water/_static/css/water.css
@@ -38,6 +38,7 @@ header {
     top: 0px;
     width: 100vw;
     z-index: 100000000;
+    position: fixed;
 }
 
 dl {
@@ -142,36 +143,33 @@ pre {
 }
 
 .documentwrapper {
-    margin: 5%;
-    margin-top: 70px;
+    margin-top: 70px !important;
     max-width: 58%;
     margin: auto;
     font-size: 16px; /* theme_document_font_size */
 }  
 
 .sidebar-left {
     float:left;
-    width:20%;
+    width:13%;
     z-index: 1;
     font-size: 13px;
-    top: 70px;
-    bottom:100px;
-    overflow-y:auto;
-    margin-right: -0px;
-    padding-right: 0px;
+    overflow: scroll;
+    position: fixed;
+    max-height: 80%;
 }
 
 .bodywrapper {
     float:right;
-    width:75%;
+    width:73%;
     line-height: 3vh;
 }
 
 .sidebar-left ul {
     padding: 1px;
     list-style-type: none;
     margin: 0px;
-    display: none;
+    display: none; /* theme_header_background_color */
 }
 
 .sidebar-left li {
@@ -186,10 +184,11 @@ pre {
 }
 
 .sidebar-left input[type=text] {
-  padding: 6px;
-  font-size: 17px;
-  border: none;
-  outline: none;
+    padding: 6px;
+    font-size: 17px;
+    border: none;
+    outline: none;
+    width: 90%;
 }
 
 .footer ul {
@@ -216,7 +215,6 @@ pre {
     padding: 10px;
     padding-left: 1px;
     padding-bottom: 5px;
-    width: 100%;
     border: none;
     outline: none;
     border-bottom: 1px solid #ccdee3; /* theme_header_background_color */

diff --git a/themata/water/static/css/water.css_t b/themata/water/static/css/water.css_t
@@ -38,6 +38,7 @@ header {
     top: 0px;
     width: 100vw;
     z-index: 100000000;
+    position: fixed;
 }
 
 dl {
@@ -143,28 +144,25 @@ pre {
 }
 
 .documentwrapper {
-    margin: 5%;
-    margin-top: 70px;
+    margin-top: 70px !important;
     max-width: 58%;
     margin: auto;
     font-size: {{ theme_document_font_size }}; /* theme_document_font_size */
 }  
 
 .sidebar-left {
     float:left;
-    width:20%;
+    width:13%;
     z-index: 1;
     font-size: 13px;
-    top: 70px;
-    bottom:100px;
-    overflow-y:auto;
-    margin-right: -0px;
-    padding-right: 0px;
+    overflow: scroll;
+    position: fixed;
+    max-height: 80%;
 }
 
 .bodywrapper {
     float:right;
-    width:75%;
+    width:73%;
     line-height: 3vh;
 }
 
@@ -175,6 +173,43 @@ pre {
     display: {{ theme_collapsible_sidebar_display }};
 }
 
+.sidebar-left li {
+    padding-left: 10px;
+    margin-top: 5px;
+}
+
+.sidebar-left .search-container {
+    display: inline-block;
+    margin-top: 20px;
+    border: 1px solid {{ theme_header_background_color }}; /* theme_header_background_color */
+}
+
+.sidebar-left input[type=text] {
+    padding: 6px;
+    font-size: 17px;
+    border: none;
+    outline: none;
+    width: 90%;
+}
+
+.footer ul {
+    padding: 1px;
+    list-style-type: none;
+    margin: 0px;
+}
+
+.footer li {
+    padding-left: 10px;
+    margin-top: 5px;
+}
+
+.sidebar-left::-webkit-scrollbar {
+    display: none;
+}
+
+.sidebar-left {
+    -ms-overflow-style: none;
+}
 
 {% if theme_collapsible_sidebar == True %}
 
@@ -183,7 +218,6 @@ pre {
     padding: 10px;
     padding-left: 1px;
     padding-bottom: 5px;
-    width: 100%;
     border: none;
     outline: none;
     border-bottom: 1px solid {{ theme_header_background_color }}; /* theme_header_background_color */
@@ -218,42 +252,6 @@ pre {
 }
 
 {% endif %}
-.sidebar-left li {
-    padding-left: 10px;
-    margin-top: 5px;
-}
-
-.sidebar-left .search-container {
-    display: inline-block;
-    margin-top: 20px;
-    border: 1px solid {{ theme_header_background_color }}; /* theme_header_background_color */
-}
-
-.sidebar-left input[type=text] {
-  padding: 6px;
-  font-size: 17px;
-  border: none;
-  outline: none;
-}
-
-.footer ul {
-    padding: 1px;
-    list-style-type: none;
-    margin: 0px;
-}
-
-.footer li {
-    padding-left: 10px;
-    margin-top: 5px;
-}
-
-.sidebar-left::-webkit-scrollbar {
-    display: none;
-}
-
-.sidebar-left {
-    -ms-overflow-style: none;
-}
 
 /* -- body styles ----------------------------------------------------------- */