mirror of
https://github.com/minio/docs.git
synced 2025-07-28 19:42:10 +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
GitHub
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -28,16 +28,18 @@
|
||||
|
||||
<h2 class="header__title hidden-rm">Documentation</h2>
|
||||
|
||||
<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 %}
|
||||
{% 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 }}">
|
||||
{% 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 %}
|
||||
{% 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 }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{%- include "platform-navigation.html" %}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user