1
0
mirror of https://github.com/minio/docs.git synced 2025-07-30 07:03:26 +03:00

Fix UI issues (#1464)

1. Toggle the docs menu conditionally to avoid showing empty white space
when the menu is not present.

<img width="752" alt="Screenshot 2025-05-02 at 10 41 07 AM"
src="https://github.com/user-attachments/assets/5d39502b-566b-4488-b94c-33347456d4d1"
/>

2. Fix padding and layout shift when pasting into the search input
field.

<img width="752" alt="Screenshot 2025-05-02 at 10 42 28 AM"
src="https://github.com/user-attachments/assets/454621c7-1639-44f7-894e-668c6d45a6ea"
/>
This commit is contained in:
Rushan
2025-05-03 00:29:28 +05:30
committed by GitHub
parent d48cb3e006
commit 1fc3907da0
3 changed files with 38 additions and 23 deletions

View File

@ -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;
}
}

View File

@ -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,

View File

@ -28,6 +28,7 @@
<h2 class="header__title hidden-rm">Documentation</h2>
{% if docs %}
<div class="docs-menu-wrapper overflow-x-auto hide-scrollbar mb-20 text-center">
<nav class="docs-menu bg-white/75 inline-flex items-center rounded-lg font-heading border p-0.5 border-theme-neutral-subtle">
{% for doc in docs %}
@ -38,6 +39,7 @@
{% endfor %}
</nav>
</div>
{% endif %}
{%- include "platform-navigation.html" %}