Merge pull request #5459 from marmelab/doc-main-navigation

Improve doc main navigation
marmelab · Oct 30, 2020 · b506145 · b506145
2 parents 68601a3 + 1708fe7
commit b506145
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 50 deletions.
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
@@ -16,7 +16,7 @@
         />
         <link
             rel="stylesheet"
-            href="{{ '/css/style-v7.css' | relative_url }}"
+            href="{{ '/css/style-v8.css' | relative_url }}"
         />
         <link rel="stylesheet" href="{{ '/css/syntax.css' | relative_url }}" />
         <link rel="stylesheet" href="{{ '/css/prism.css' | relative_url }}" />

diff --git a/docs/css/style-v7.css → docs/css/style-v8.css b/docs/css/style-v7.css → docs/css/style-v8.css
@@ -91,9 +91,21 @@ nav ul#nav-mobile a {
     fill: rgba(0, 0, 0, 0.6);
 }
 
+.sidenav ul {
+    padding: 0.5em 1em;
+}
+.sidenav ul div {
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 0.8em;
+}
+
 .sidenav li > a {
-    height: 40px;
-    line-height: 40px;
+    height: 1.6em;
+    line-height: 1.6em;
+    padding: 0 1em;
+    font-size: 1em;
+    font-weight: normal;
 }
 
 .sidenav.sidenav-fixed ul.collapsible-accordion a.collapsible-header {

diff --git a/docs/navigation.html b/docs/navigation.html
@@ -1,49 +1,35 @@
 <li {% if page.path contains 'Readme.md' %} class="active" {% endif %}><a href="./Readme.html">Read Me</a></li>
-<li {% if page.path contains 'Tutorial.md' %} class="active" {% endif %}><a href="./Tutorial.html">Tutorial</a>
-</li>
-<li {% if page.path contains 'DataProviders.md' %} class="active" {% endif %}><a href="./DataProviders.html">Data
-                Providers</a></li>
-<li {% if page.path contains 'Admin.md' %} class="active" {% endif %}><a
-                href="./Admin.html"><code>&lt;Admin&gt;</code></a>
-</li>
-<li {% if page.path contains 'Resource.md' %} class="active" {% endif %}><a href="./Resource.html">
-                <code>&lt;Resource&gt;</code>
-        </a></li>
-<li {% if page.path contains 'List.md' %} class="active" {% endif %}><a href="./List.html"><code>&lt;List&gt;</code>
-                View</a></li>
-<li {% if page.path contains 'CreateEdit.md' %} class="active" {% endif %}><a
-                href="./CreateEdit.html"><code>&lt;Create&gt;</code>
-                and <code>&lt;Edit&gt;</code> Views</a>
-</li>
-<li {% if page.path contains 'Show.md' %} class="active" {% endif %}><a href="./Show.html"><code>&lt;Show&gt;</code>
-    View</a></li>
-<li {% if page.path contains 'Fields.md' %} class="active" {% endif %}><a
-    href="./Fields.html"><code>&lt;Field&gt;</code>
-    Components</a></li>
-<li {% if page.path contains 'Inputs.md' %} class="active" {% endif %}><a
-                href="./Inputs.html"><code>&lt;Input&gt;</code>
-                Components</a></li>
-<li {% if page.path contains 'Authentication.md' %} class="active" {% endif %}><a
-                href="./Authentication.html">Authentication</a></li>
-<li {% if page.path contains 'Authorization.md' %} class="active" {% endif %}><a
-                href="./Authorization.html">Authorization</a></li>
-<li {% if page.path contains 'Actions.md' %} class="active" {% endif %}><a href="./Actions.html">Querying the
-                API</a></li>
-<li {% if page.path contains 'Theming.md' %} class="active" {% endif %}><a href="./Theming.html">Theming</a></li>
-<li {% if page.path contains 'Translation.md' %} class="active" {% endif %}><a href="./Translation.html">Translation & i18n</a>
-</li>
-<li {% if page.path contains 'Caching.md' %} class="active" {% endif %}><a href="./Caching.html">Caching</a>
-</li>
-<li {% if page.path contains 'CustomApp.md' %} class="active" {% endif %}><a href="./CustomApp.html">Including in
-                Another App</a>
-</li>
-<li {% if page.path contains 'Reference.md' %} class="active" {% endif %}><a href="./Reference.html">Reference</a>
-</li>
-<li {% if page.path contains 'Ecosystem.md' %} class="active" {% endif %}><a href="./Ecosystem.html">Ecosystem</a>
-</li>
-<li {% if page.path contains 'UnitTesting.md' %} class="active" {% endif %}><a href="./UnitTesting.html">Unit
-    Testing</a></li>
-<li {% if page.path contains 'AdvancedTutorials.md' %} class="active" {% endif %}><a
-        href="./AdvancedTutorials.html">Advanced
-        tutorials</a></li>
+<li {% if page.path contains 'Tutorial.md' %} class="active" {% endif %}><a href="./Tutorial.html">Tutorial</a></li>
+
+<ul><div>App Configuration</div>
+  <li {% if page.path contains 'DataProviders.md' %} class="active" {% endif %}><a href="./DataProviders.html">Data Providers</a></li>
+  <li {% if page.path contains 'Admin.md' %} class="active" {% endif %}><a href="./Admin.html"><code>&lt;Admin&gt;</code></a></li>
+  <li {% if page.path contains 'Resource.md' %} class="active" {% endif %}><a href="./Resource.html"><code>&lt;Resource&gt;</code></a></li>
+  <li {% if page.path contains 'Authentication.md' %} class="active" {% endif %}><a href="./Authentication.html">Authentication</a></li>
+  <li {% if page.path contains 'Authorization.md' %} class="active" {% endif %}><a href="./Authorization.html">Authorization</a></li>
+  <li {% if page.path contains 'Translation.md' %} class="active" {% endif %}><a href="./Translation.html">Translation & i18n</a></li>
+</ul>
+
+<ul><div>View Configuration</div>
+  <li {% if page.path contains 'List.md' %} class="active" {% endif %}><a href="./List.html"><code>&lt;List&gt;</code> View</a></li>
+  <li {% if page.path contains 'CreateEdit.md' %} class="active" {% endif %}><a href="./CreateEdit.html"><code>&lt;Create&gt;</code> and <code>&lt;Edit&gt;</code> Views</a></li>
+  <li {% if page.path contains 'Show.md' %} class="active" {% endif %}><a href="./Show.html"><code>&lt;Show&gt;</code> View</a></li>
+</ul>
+
+<ul><div>Fields and Inputs</div>
+  <li {% if page.path contains 'Fields.md' %} class="active" {% endif %}><a href="./Fields.html"><code>&lt;Field&gt;</code> Components</a></li>
+  <li {% if page.path contains 'Inputs.md' %} class="active" {% endif %}><a href="./Inputs.html"><code>&lt;Input&gt;</code> Components</a></li>
+</ul>
+
+<ul><div>Recipes</div>
+  <li {% if page.path contains 'Actions.md' %} class="active" {% endif %}><a href="./Actions.html">Querying the API</a></li>
+  <li {% if page.path contains 'Theming.md' %} class="active" {% endif %}><a href="./Theming.html">Theming</a></li>
+  <li {% if page.path contains 'Caching.md' %} class="active" {% endif %}><a href="./Caching.html">Caching</a></li>
+  <li {% if page.path contains 'CustomApp.md' %} class="active" {% endif %}><a href="./CustomApp.html">Including in Another App</a></li>
+  <li {% if page.path contains 'UnitTesting.md' %} class="active" {% endif %}><a href="./UnitTesting.html">Unit Testing</a></li>
+  <li {% if page.path contains 'AdvancedTutorials.md' %} class="active" {% endif %}><a href="./AdvancedTutorials.html">Advanced tutorials</a></li>
+</ul>
+
+<li {% if page.path contains 'Ecosystem.md' %} class="active" {% endif %}><a href="./Ecosystem.html">Ecosystem</a></li>
 <li {% if page.path contains 'FAQ.md' %} class="active" {% endif %}><a href="./FAQ.html">FAQ</a></li>
+<li {% if page.path contains 'Reference.md' %} class="active" {% endif %}><a href="./Reference.html">Reference</a></li>