Update docs list layout (#1678)

mdbootstrap · May 26, 2023 · ac60446 · ac60446
1 parent 052f614
commit ac60446
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 54 deletions.
diff --git a/site/layouts/docs/list.html b/site/layouts/docs/list.html
@@ -1,4 +1,6 @@
 {{ $hidden_sidenav := .Params.hidden_sidenav }}
+{{ $api_file_exists := fileExists (printf "/content/%s/a.html" .File.Dir) }}
+{{ $scrollspy_file_exists := fileExists (printf "/content/%s/index-ss.html" .File.Dir) }}
 
 
 <html lang="{{ .Language.Lang }}">
@@ -41,7 +43,9 @@
       >
       {{ partial "sidenav/standard.html" . }}
     </nav>
-    <div class="mt-10" id="page-content">
+    <div
+      class="{{ if ne $hidden_sidenav true }}xl:!pl-60{{ end }} mt-10"
+      id="page-content">
       <div
         class="{{ if eq $hidden_sidenav true }}
           mx-auto w-1/2
@@ -50,64 +54,90 @@
           xl:max-w-full xl:px-12 2xl:max-w-[1400px] mx-auto
         {{ end }} flex">
         <div class="flex w-full flex-col ">
-          <ul
-            id="docs-nav-pills"
-            class="mx-4 mt-3 flex"
-            role="tablist"
-            data-te-nav-ref>
-            <li>
-              <a
-                id="docs-tab-overview"
-                class="my-2 block min-w-[120px] rounded bg-neutral-100 px-6 pb-3.5 pt-4 text-center text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
-                href="#docsTabsOverview"
-                role="tab"
-                data-te-toggle="pill"
-                data-te-target="#docsTabsOverview"
-                aria-selected="true"
-                aria-controls="docsTabsOverview"
-                data-te-nav-active
-                >Overview</a
-              >
-            </li>
-
-            {{ if isset .Params "custom_links" }}
-              {{ $link_entries := split .Params.custom_links "," }}
-              {{ range $entry := $link_entries }}
-                {{ $link_data := split $entry "=" }}
-                <li class="nav-item">
-                  <a
-                    class="my-2 block min-w-[120px] rounded bg-neutral-100 px-6 pb-3.5 pt-4 text-center text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
-                    href="{{ index $link_data 1 }}"
-                    target="_blank"
-                    >{{ index $link_data 0 }}<span
-                      class=" inline-block align-bottom"
-                      ><svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke-width="1.5"
-                        stroke="currentColor"
-                        class="ml-2 h-4 w-4">
-                        <path
-                          stroke-linecap="round"
-                          stroke-linejoin="round"
-                          d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
-                      </svg>
-                    </span>
-                  </a>
-                </li>
+          {{ if (or ($api_file_exists) (isset .Params "custom_links")) }}
+            <ul
+              id="docs-nav-pills"
+              class="mx-4 mt-3 flex"
+              role="tablist"
+              data-te-nav-ref>
+              <li>
+                <a
+                  id="docs-tab-overview"
+                  class="my-2 block min-w-[120px] rounded bg-neutral-100 px-6 pb-3.5 pt-4 text-center text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
+                  href="#docsTabsOverview"
+                  role="tab"
+                  data-te-toggle="pill"
+                  data-te-target="#docsTabsOverview"
+                  aria-selected="true"
+                  aria-controls="docsTabsOverview"
+                  data-te-nav-active
+                  >Overview</a
+                >
+              </li>
+
+              {{ if isset .Params "custom_links" }}
+                {{ $link_entries := split .Params.custom_links "," }}
+                {{ range $entry := $link_entries }}
+                  {{ $link_data := split $entry "=" }}
+                  <li class="nav-item">
+                    <a
+                      class="my-2 block min-w-[120px] rounded bg-neutral-100 px-6 pb-3.5 pt-4 text-center text-xs font-medium uppercase leading-tight text-neutral-500 data-[te-nav-active]:!bg-primary-100 data-[te-nav-active]:text-primary-700 dark:bg-neutral-700 dark:text-white dark:data-[te-nav-active]:text-primary-700 md:mr-4"
+                      href="{{ index $link_data 1 }}"
+                      target="_blank"
+                      >{{ index $link_data 0 }}<span
+                        class=" inline-block align-bottom"
+                        ><svg
+                          xmlns="http://www.w3.org/2000/svg"
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke-width="1.5"
+                          stroke="currentColor"
+                          class="ml-2 h-4 w-4">
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
+                        </svg>
+                      </span>
+                    </a>
+                  </li>
+                {{ end }}
               {{ end }}
-            {{ end }}
-          </ul>
+            </ul>
+          {{ end }}
+
 
           <div
             id="docsTabsOverview"
             role="tabpanel"
-            class="mb-8 hidden px-4 opacity-100 transition-opacity data-[te-tab-active]:flex"
+            class="hidden opacity-100 transition-opacity data-[te-tab-active]:flex"
             role="tabpanel"
             aria-labelledby="docs-tab-overview-tab"
             data-te-tab-active>
-            <div class="flex w-full flex-col pr-4">
+            <div
+              class="{{ if $scrollspy_file_exists }}
+                lg:w-4/5
+              {{ end }}
+              flex w-full flex-col px-3">
+              {{ if not (isset .Params "custom_links") }}
+                <h2
+                  class="mt-0 text-3xl font-bold leading-8 sm:text-[33px] md:text-4xl lg:text-[40px]">
+                  {{ .Params.main_title }}
+                </h2>
+
+                <h1
+                  class="my-3 text-base font-bold text-neutral-500 dark:text-neutral-300">
+                  {{ .Params.subheading }}
+                </h1>
+
+                <p class="text-neutral-500 dark:text-neutral-300">
+                  {{ .Params.description }}
+                </p>
+
+                <hr class="my-12 dark:border-neutral-600" />
+              {{ end }}
+
+
               <main>{{ .Content }}</main>
             </div>
           </div>
@@ -141,8 +171,6 @@
           }
         };
 
-        setMode();
-
         // Event listeners
         window.addEventListener("resize", setMode);
       </script>

diff --git a/site/layouts/partials/header/header.html b/site/layouts/partials/header/header.html
@@ -52,7 +52,7 @@
         <div
           id="te-search-container"
           class="relative hidden lg:flex lg:items-center">
-          <form class="relative flex flex-wrap items-stretch">
+          <form class="relative mb-0 flex flex-wrap items-stretch">
             <style>
               #te-search-input:focus-within {
                 box-shadow: inset 0 0 0 1px #3b71ca;