Update left navigation layout (#6137)

* Collections with no pages under the main page should not have an expander Signed-off-by: Fanit Kolchina <[email protected]> * Update left navigation layout Signed-off-by: Fanit Kolchina <[email protected]> * Add media query for back link Signed-off-by: Fanit Kolchina <[email protected]> --------- Signed-off-by: Fanit Kolchina <[email protected]>
opensearch-project · Jan 13, 2024 · 24ae787 · 24ae787
1 parent 1a20b77
commit 24ae787
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 11 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -107,7 +107,7 @@
 
                       {% assign collection_url_path = collection_key | append: "/" %}
                       {% assign category_comparison_url = "/" | append: collection_url_path %}
-                      {%- if collection.size > 0 -%}
+                      {%- if collection.size > 1 -%}
                         <a 
                           role="treeitem"
                           aria-owns="{{ owned_tree_id }}"

diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss
@@ -70,6 +70,12 @@ nav#site-nav > .nav-list:nth-of-type(1) {
 .nav-category {
   text-align: start;
   display: block;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.nav-list-expander {
+  margin-right: 0.5rem;
 }
 
 .main-content {
@@ -905,10 +911,7 @@ main {
 }
 
 .site-nav.nav-open {
-  padding-top: .5rem;
-  @include mq(md) {
-    padding-top: 2rem;
-  }
+  padding-top: 0;
 }
 
 .label {
@@ -951,13 +954,13 @@ main {
   top: 0;
   z-index: 9999999;
   background-color: $sidebar-color;
+  border-bottom: 1px solid #eeebee;
 }
 
 version-selector {
   z-index: 1;
   font-size: .9rem;
-  margin: 0.5rem 3px;
-
+  margin: 0.5rem 3px 1rem 3px;
   --normal-bg: linear-gradient(#{lighten($blue-300, 5%)}, #{darken($blue-300, 2%)});
   --hover-bg: linear-gradient(#{lighten($blue-300, 2%)}, #{darken($blue-300, 4%)});
   --link-color: #{$blue-300};
@@ -992,16 +995,18 @@ body {
   text-align: start;
   display: block;
   font-size: 0.9rem;
-  padding-right: 2rem;
-  padding-left: 2rem;
-  padding-top: 0.5rem;
-  margin-bottom: 1rem;
+  padding: 0.5rem 1rem;
+  margin-top: 1rem;
+  @include mq(md) {
+    padding: 0.5rem 2rem;
+  }
 }
 
 .site-category {
   @extend .back-link;
   padding-top: 1.5rem;
   padding-bottom: 0.5rem;
+  margin-top: 0;
   font-size: 0.8rem;
   color: $blue-dk-300;
   font-weight: 600;