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 { .header {
.search__dropdown { .search__dropdown {
position: absolute; position: absolute;
top: 100%; top: calc(100% - 1rem);
left: 0; left: 0.1rem;
width: 100%; width: calc(100% - 0.2rem);
} }
.search--focused { .search--focused {
@ -71,6 +71,11 @@
.search__reset { .search__reset {
display: grid; display: grid;
} }
#search-box {
position: relative;
z-index: 11;
}
} }
.search__form { .search__form {
@ -105,7 +110,9 @@
border-radius: $border-radius; border-radius: $border-radius;
cursor: pointer; cursor: pointer;
display: none; display: none;
margin-right: 0.75rem; position: absolute;
right: 0.75rem;
top: 0.6rem;
&:focus, &:focus,
&:hover { &:hover {
@ -127,7 +134,7 @@
} }
.search__powered-by { .search__powered-by {
padding: 0.6rem 1rem; padding: 0.3rem 0.7rem;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
color: var(--text-muted-color); color: var(--text-muted-color);
@ -190,7 +197,7 @@
border: 1px solid var(--is-refine-list-border-color); border: 1px solid var(--is-refine-list-border-color);
border-radius: $border-radius; border-radius: $border-radius;
line-height: 100%; line-height: 100%;
padding: 0.35rem 0.5rem; padding: 0.35rem 0.6rem;
font-weight: $font-weight-medium; font-weight: $font-weight-medium;
font-size: $font-size-xs; font-size: $font-size-xs;
} }
@ -217,6 +224,7 @@
.search__hits__list { .search__hits__list {
list-style: none; list-style: none;
margin: 0; margin: 0;
padding: 0;
text-align: left; text-align: left;
} }
@ -234,6 +242,10 @@
&:focus, &:focus,
&:hover { &:hover {
background-color: var(--is-highlight-color); background-color: var(--is-highlight-color);
.search__hits__icon {
background-color: $white;
}
} }
} }
} }
@ -292,7 +304,7 @@
flex-shrink: 0; flex-shrink: 0;
margin-right: 0.75rem; margin-right: 0.75rem;
border-radius: $border-radius; border-radius: $border-radius;
background-color: var(--is-search-bg); background-color: var(--theme-light-bg);
display: grid; display: grid;
fill: var(--text-muted-color); fill: var(--text-muted-color);
place-content: center; place-content: center;
@ -312,13 +324,13 @@
.search__hits--empty { .search__hits--empty {
display: grid; margin: 0;
place-content: center; padding: 0;
text-align: center; text-align: center;
font-size: $font-size-sm; font-size: $font-size-sm;
color: var(--text-muted-color); color: var(--text-muted-color);
svg { & > svg {
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@ -403,6 +415,7 @@
flex-direction: column; flex-direction: column;
border-radius: $border-radius-lg; border-radius: $border-radius-lg;
display: none; display: none;
padding-top: 1.5rem;
max-height: 24.5rem; max-height: 24.5rem;
box-shadow: 0px 7px 10px #00000036; box-shadow: 0px 7px 10px #00000036;
} }
@ -431,7 +444,7 @@
} }
.search__hits__list { .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, --docs-nav-group-border-color: $light-300 $dark-300,
// Scrollbar // Scrollbar
--scrollbar-bg: $light-500 $dark-200, --scrollbar-bg: $light-300 $dark-200,
--scrollbar-hover-bg: darken($light-500, 5%) $dark-300, --scrollbar-hover-bg: $light-400 $dark-300,
// Table // Table
--table-border-color: $light-300 $dark-200, --table-border-color: $light-300 $dark-200,
@ -120,7 +120,7 @@ $theme-properties: (
// Search // Search
--is-dropdown-bg: #edf1f3 #1c232d, --is-dropdown-bg: #edf1f3 #1c232d,
--is-container-background: rgba($black, 0.25) rgba(16, 21, 28, 0.851), --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-search-focus-shadow: rgba($white, 0.15) #1b232f,
--is-hit-icon-color: $black $light-500, --is-hit-icon-color: $black $light-500,
--is-search-bg: $white $dark-100, --is-search-bg: $white $dark-100,

View File

@ -28,16 +28,18 @@
<h2 class="header__title hidden-rm">Documentation</h2> <h2 class="header__title hidden-rm">Documentation</h2>
<div class="docs-menu-wrapper overflow-x-auto hide-scrollbar mb-20 text-center"> {% if docs %}
<nav class="docs-menu bg-white/75 inline-flex items-center rounded-lg font-heading border p-0.5 border-theme-neutral-subtle"> <div class="docs-menu-wrapper overflow-x-auto hide-scrollbar mb-20 text-center">
{% for doc in docs %} <nav class="docs-menu bg-white/75 inline-flex items-center rounded-lg font-heading border p-0.5 border-theme-neutral-subtle">
{% set current_name = doc.name if doc.current == True %} {% for doc in docs %}
<a target="{% if doc.external == True %}_blank{% endif %}" class="{% if doc.current == True %}active{% endif %} flex-1 rounded-md shrink-0 h-14 border border-transparent font-bold transition-all duration-300 hover:text-theme-red [&.active]:text-theme-red [&.active]:border-theme-red" href="{{ doc.url }}"> {% set current_name = doc.name if doc.current == True %}
<a target="{% if doc.external == True %}_blank{% endif %}" class="{% if doc.current == True %}active{% endif %} flex-1 rounded-md shrink-0 h-14 border border-transparent font-bold transition-all duration-300 hover:text-theme-red [&.active]:text-theme-red [&.active]:border-theme-red" href="{{ doc.url }}">
{{ doc.name }} {{ doc.name }}
</a> </a>
{% endfor %} {% endfor %}
</nav> </nav>
</div> </div>
{% endif %}
{%- include "platform-navigation.html" %} {%- include "platform-navigation.html" %}