From 1fc3907da02ff77eea22f9db7b238d7c8ce7f11a Mon Sep 17 00:00:00 2001 From: Rushan Date: Sat, 3 May 2025 00:29:28 +0530 Subject: [PATCH] Fix UI issues (#1464) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. Toggle the docs menu conditionally to avoid showing empty white space when the menu is not present. Screenshot 2025-05-02 at 10 41 07 AM 2. Fix padding and layout shift when pasting into the search input field. Screenshot 2025-05-02 at 10 42 28 AM --- source/_static/scss/includes/_search.scss | 35 ++++++++++++++++------- source/_static/scss/includes/_theme.scss | 6 ++-- source/_templates/header.html | 20 +++++++------ 3 files changed, 38 insertions(+), 23 deletions(-) diff --git a/source/_static/scss/includes/_search.scss b/source/_static/scss/includes/_search.scss index 69ff0f56..a16e7864 100644 --- a/source/_static/scss/includes/_search.scss +++ b/source/_static/scss/includes/_search.scss @@ -3,9 +3,9 @@ .header { .search__dropdown { position: absolute; - top: 100%; - left: 0; - width: 100%; + top: calc(100% - 1rem); + left: 0.1rem; + width: calc(100% - 0.2rem); } .search--focused { @@ -71,6 +71,11 @@ .search__reset { display: grid; } + + #search-box { + position: relative; + z-index: 11; + } } .search__form { @@ -105,7 +110,9 @@ border-radius: $border-radius; cursor: pointer; display: none; - margin-right: 0.75rem; + position: absolute; + right: 0.75rem; + top: 0.6rem; &:focus, &:hover { @@ -127,7 +134,7 @@ } .search__powered-by { - padding: 0.6rem 1rem; + padding: 0.3rem 0.7rem; display: inline-flex; align-items: center; color: var(--text-muted-color); @@ -190,7 +197,7 @@ border: 1px solid var(--is-refine-list-border-color); border-radius: $border-radius; line-height: 100%; - padding: 0.35rem 0.5rem; + padding: 0.35rem 0.6rem; font-weight: $font-weight-medium; font-size: $font-size-xs; } @@ -217,6 +224,7 @@ .search__hits__list { list-style: none; margin: 0; + padding: 0; text-align: left; } @@ -234,6 +242,10 @@ &:focus, &:hover { background-color: var(--is-highlight-color); + + .search__hits__icon { + background-color: $white; + } } } } @@ -292,7 +304,7 @@ flex-shrink: 0; margin-right: 0.75rem; border-radius: $border-radius; - background-color: var(--is-search-bg); + background-color: var(--theme-light-bg); display: grid; fill: var(--text-muted-color); place-content: center; @@ -312,13 +324,13 @@ .search__hits--empty { - display: grid; - place-content: center; + margin: 0; + padding: 0; text-align: center; font-size: $font-size-sm; color: var(--text-muted-color); - svg { + & > svg { margin-bottom: 1rem; } @@ -403,6 +415,7 @@ flex-direction: column; border-radius: $border-radius-lg; display: none; + padding-top: 1.5rem; max-height: 24.5rem; box-shadow: 0px 7px 10px #00000036; } @@ -431,7 +444,7 @@ } .search__hits__list { - padding: 1rem; + padding: 0.75rem; } } diff --git a/source/_static/scss/includes/_theme.scss b/source/_static/scss/includes/_theme.scss index 3697bb56..17c7bee5 100644 --- a/source/_static/scss/includes/_theme.scss +++ b/source/_static/scss/includes/_theme.scss @@ -55,8 +55,8 @@ $theme-properties: ( --docs-nav-group-border-color: $light-300 $dark-300, // Scrollbar - --scrollbar-bg: $light-500 $dark-200, - --scrollbar-hover-bg: darken($light-500, 5%) $dark-300, + --scrollbar-bg: $light-300 $dark-200, + --scrollbar-hover-bg: $light-400 $dark-300, // Table --table-border-color: $light-300 $dark-200, @@ -120,7 +120,7 @@ $theme-properties: ( // Search --is-dropdown-bg: #edf1f3 #1c232d, --is-container-background: rgba($black, 0.25) rgba(16, 21, 28, 0.851), - --is-highlight-color: rgba(120, 133, 152, 0.125) rgba(16, 21, 28, 0.3), + --is-highlight-color: $light-100 rgba(16, 21, 28, 0.3), --is-search-focus-shadow: rgba($white, 0.15) #1b232f, --is-hit-icon-color: $black $light-500, --is-search-bg: $white $dark-100, diff --git a/source/_templates/header.html b/source/_templates/header.html index ec01653a..59c7aaa8 100644 --- a/source/_templates/header.html +++ b/source/_templates/header.html @@ -28,16 +28,18 @@

Documentation

-
- +
+ {% endif %} {%- include "platform-navigation.html" %}