fixed toc and menu (#979)

Co-authored-by: Taron Chatoyan <chatoyan48@gmailc.com>
kestra-io · Mar 1, 2024 · 45a8534 · 45a8534
1 parent fb8bff2
commit 45a8534
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 17 deletions.
diff --git a/components/common/SocialsList.vue b/components/common/SocialsList.vue
@@ -67,19 +67,13 @@
         line-height: 1.188rem;
 
         ul {
-            padding-left: 0.75rem;
+            padding-left: 0;
             margin-bottom: 0;
             list-style: none;
 
             li {
                 a {
-                    padding-left: 0.75rem;
-
-                    @for $i from 2 through 6 {
-                        &.depth-#{$i} {
-                            padding-left: calc(0.75rem * ($i - 2) + 0.75rem);
-                        }
-                    }
+                    padding-left: 2rem;
 
                     &:hover,
                     &.active {

diff --git a/components/docs/NavSideBar.vue b/components/docs/NavSideBar.vue
@@ -2,7 +2,7 @@
     <aside class="bd-sidebar scroller">
         <div class="mb-4">
             <button
-                class="btn d-lg-none"
+                class="btn d-lg-none mt-2"
                 type="button"
                 data-bs-toggle="collapse"
                 data-bs-target="#docs-menu"

diff --git a/components/docs/NavToc.vue b/components/docs/NavToc.vue
@@ -21,7 +21,7 @@
                     <slot name="header"></slot>
                     <strong class="d-none d-lg-block h6 my-2">Table of Contents</strong>
                     <nav id="nav-toc">
-                        <ul class="pt-3">
+                        <ul class="ps-0 pt-2 pt-lg-0">
                             <template v-for="item in generated" >
                                 <li v-if="item.depth > 1 && item.depth < 6" @click="closeToc" class="mb-3">
                                     <a :href="'#' + item.id" :class="'depth-' + item.depth">{{ item.text }}</a>
@@ -117,11 +117,9 @@
 
         nav {
             padding-bottom: calc($spacer * 1.165);
-            padding-left: calc($spacer * 1.165);
             border-bottom: 1px solid $black-6;
             @include font-size(.875rem);
             ul {
-                padding-left: .75rem;
                 margin-bottom: 0;
                 list-style: none;
                 li {
@@ -133,7 +131,7 @@
 
                         @for $i from 2 through 6 {
                             &.depth-#{$i} {
-                                padding-left: calc(.75rem * ($i - 2) +  0.75rem);
+                                padding-left: calc(0.5rem * ($i - 2) +  2rem);
                             }
                         }
 
@@ -219,11 +217,9 @@
             border-radius: 0 0 8px 8px;
         }
         ul, :deep(ul) {
-            padding-left: 0 !important;
             li {
                 a {
                     border-left: 0 !important;
-                    padding-left: 2rem !important;
 
                     &:hover {
                         color: $purple-36 !important;

diff --git a/components/docs/RecursiveNavSidebar.vue b/components/docs/RecursiveNavSidebar.vue
@@ -175,7 +175,7 @@
             @for $i from 0 through 6 {
                 &.depth-#{$i} {
                     a {
-                        padding-left: calc(.75rem * ($i));
+                        padding-left: calc(.5rem * ($i));
                     }
                 }
             }

diff --git a/components/layout/Container.vue b/components/layout/Container.vue
@@ -8,7 +8,7 @@
                     <h1 v-if="page && page.title" v-html="transformTitle(page.title)" class="py-0 title "></h1>
                 </div>
 
-                <NavToc :page="page"/>
+                <NavToc :page="page" class="my-md-0 my-4" />
 
                 <div class="bd-content">
                     <ContentRendererMarkdown
@@ -133,6 +133,9 @@
         gap: calc($spacer * 4);
         .bd-title {
             margin-top: calc($spacer * 4);
+            @include media-breakpoint-down(lg) {
+                margin-top: calc($spacer * 1);
+            }
             h1 {
                 max-width: 945px;
                 margin-left: 0;