side navigation hide improvement (#130)

* improves styling when `navigation.side.hide` is enabled.  instead of leaving an empty column in a two column layout, switch to a one column layout so that page content can have full use of the space.

Author: ntno

documentation/docs/about/coverage-report/index.html

@@ -47,7 +47,7 @@ <h1>Coverage report:
         </form>
         <p class="text">
             <a class="nav" href="https://coverage.readthedocs.io/en/7.2.3">coverage.py v7.2.3</a>,
-            created at 2023-04-15 03:31 +0000
+            created at 2023-04-15 04:24 +0000
         </p>
     </div>
 </header>
@@ -158,7 +158,7 @@ <h1>Coverage report:
     <div class="content">
         <p>
             <a class="nav" href="https://coverage.readthedocs.io/en/7.2.3">coverage.py v7.2.3</a>,
-            created at 2023-04-15 03:31 +0000
+            created at 2023-04-15 04:24 +0000
         </p>
     </div>
     <aside class="hidden">

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mkdocs-terminal",
-    "version": "4.3.0",
+    "version": "4.4.0",
     "description": "Terminal.css theme for MkDocs",
     "keywords": [
         "mkdocs",

terminal/css/theme.css

@@ -16,21 +16,6 @@ a.btn {
     text-decoration: none !important;
 }
 
-/* grid for side nav and main content */
-.terminal-mkdocs-main-grid {
-    display: grid;
-    grid-column-gap: 1.4em;
-    grid-template-columns: auto;
-    grid-template-rows: auto;
-}
-
-/* place main content to the right of side nav when screen wide enough for two columns */
-@media only screen and (min-width: 70em) {
-    .terminal-mkdocs-main-grid {
-        grid-template-columns: 4fr 9fr;
-    }
-}
-
 .terminal-mkdocs-side-nav-item--active {
     font-style: italic;
 }

terminal/partials/side-panel/side-panel.html

@@ -1,7 +1,7 @@
 {%- set features = config.theme.features or [] -%}
+{%- if "navigation.side.hide" not in features -%}
 <aside id="terminal-mkdocs-side-panel">
-    {%- if "navigation.side.hide" not in features -%}
     {%- block side_nav %}{% include "partials/side-nav/side-nav.html" %}{%- endblock side_nav %}
     {%- block side_toc %}{% include "partials/side-panel/side-toc.html" %}{%- endblock side_toc %}
-    {%- endif -%}
-</aside>
+</aside>
+{%- endif -%}

terminal/partials/styles.html

@@ -8,8 +8,33 @@
 <link href="{{ 'css/theme.css' | url }}" rel="stylesheet">
 <link href="{{ 'css/theme.tile_grid.css' | url }}" rel="stylesheet">
 <link href="{{ 'css/theme.footer.css' | url }}" rel="stylesheet">
-<!-- {{ palette_name }} color palette-->
+<!-- {{ palette_name }} color palette -->
 <link href="{{ palette | url }}" rel="stylesheet">
+
+<!-- page layout -->
+<style>
+/* initially set page layout to a one column grid */
+.terminal-mkdocs-main-grid {
+    display: grid;
+    grid-column-gap: 1.4em;
+    grid-template-columns: auto;
+    grid-template-rows: auto;
+}
+
+{% if 'navigation.side.hide' not in features -%}
+/*  
+*   when side navigation is not hidden, use a two column grid.  
+*   if the screen is too narrow, fall back to the initial one column grid layout.
+*   in this case the main content will be placed under the navigation panel. 
+*/
+@media only screen and (min-width: 70em) {
+    .terminal-mkdocs-main-grid {
+        grid-template-columns: 4fr 9fr;
+    }
+}
+{%- endif -%}
+</style>
+
 {% if 'navigation.top.cursor_animation.hide' in features -%}
 <!-- cursor_animation override -->
 <style>
@@ -18,6 +43,7 @@
   }
 </style>
 {%- endif -%}
+
 {% if 'style.links.underline.hide' in features -%}
 <!-- link underline override -->
 <style>

terminal/theme_version.html

@@ -1 +1 @@
-<meta name="generator" content="mkdocs-{{ mkdocs_version }}, mkdocs-terminal-4.3.0">
+<meta name="generator" content="mkdocs-{{ mkdocs_version }}, mkdocs-terminal-4.4.0">

tests/side_panel/test_side_panel.py

@@ -39,11 +39,11 @@ def side_panel_partial(env_with_terminal_loader):
 
 
 class TestSidePanel():
-    def test_no_panel_content_when_theme_feature_enabled(self, side_panel_partial, enabled_context):
-        enabled_context["config"]["theme"]["features"] = [theme_features.HIDE_SIDE_NAV, theme_features.HIDE_SIDE_TOC]
+    def test_no_panel_element_when_hide_feature_enabled(self, side_panel_partial, enabled_context):
+        enabled_context["config"]["theme"]["features"] = [theme_features.HIDE_SIDE_NAV]
         context_data = enabled_context
         rendered_side_panel = side_panel_partial.render(context_data)
-        assert "<aside id=\"terminal-mkdocs-side-panel\"></aside>" in rendered_side_panel
+        assert rendered_side_panel.strip() == ""
         assert_valid_html(rendered_side_panel, ALLOW_EMPTY_ELEMENTS)
 
     def test_that_visual_break_between_side_nav_and_side_toc(self, side_panel_partial, enabled_context):

tests/test_style.py

@@ -68,3 +68,17 @@ def test_that_override_css_added_when_link_underline_is_hidden(self, styles_part
         rendered_styles = styles_partial.render(context_data)
         assert "#terminal-mkdocs-main-content a:not(.headerlink)" in rendered_styles
         assert_valid_html(rendered_styles)
+
+    def test_that_main_grid_has_two_columns_by_default(self, styles_partial, enabled_context):
+        rendered_styles = styles_partial.render(enabled_context)
+        assert "grid-template-columns: auto;" in rendered_styles
+        assert "grid-template-columns: 4fr 9fr;" in rendered_styles
+        assert_valid_html(rendered_styles)
+
+    def test_that_main_grid_is_one_column_when_side_nav_is_hidden(self, styles_partial, enabled_context):
+        enabled_context["config"]["theme"]["features"] = [theme_features.HIDE_SIDE_NAV]
+        context_data = enabled_context
+        rendered_styles = styles_partial.render(context_data)
+        assert "grid-template-columns: auto;" in rendered_styles
+        assert "grid-template-columns: 4fr 9fr;" not in rendered_styles
+        assert_valid_html(rendered_styles)