diff --git a/src/.vitepress/config.mts b/src/.vitepress/config.mts index 514813e..7caac3b 100644 --- a/src/.vitepress/config.mts +++ b/src/.vitepress/config.mts @@ -80,7 +80,7 @@ export default defineConfig({ buttonAriaLabel: 'Поиск' }, modal: { - noResultsText: 'Нет результатов для', + noResultsText: 'Не удалось загрузить данные', resetButtonTitle: 'Сбросить', displayDetails: 'Показать расширенный список', footer: { diff --git a/src/.vitepress/theme/components/CustomHomeFeature.vue b/src/.vitepress/theme/components/CustomHomeFeature.vue index 14b9c38..31eda20 100644 --- a/src/.vitepress/theme/components/CustomHomeFeature.vue +++ b/src/.vitepress/theme/components/CustomHomeFeature.vue @@ -22,8 +22,7 @@ type ItemFeature = { const style = useCssModule() const classes = computed(() => ({ [style.CustomFeature]: true, - [style.CustomFeatureDisabled]: disabled || !link, - [style.CustomFeatureWithScroll]: scrollTo && !disabled + [style.CustomFeatureDisabled]: disabled || !link && !scrollTo, })) const handleClick = (event: Event) => { @@ -51,7 +50,11 @@ const handleClick = (event: Event) => {
- +

{{ item.title }}

@@ -94,16 +97,12 @@ const handleClick = (event: Event) => { color: themes.$color-text-active; &:hover { - color: themes.$color-text-link !important; + color: themes.$color-text-link; } #{$el}Disabled & { color: themes.$color-text-disabled; } - - #{$el}WithScroll & { - color: themes.$color-text-active; - } } &Subtitle { diff --git a/src/.vitepress/theme/components/CustomLocalSearchBox.vue b/src/.vitepress/theme/components/CustomLocalSearchBox.vue index 56f229a..19b0d6f 100644 --- a/src/.vitepress/theme/components/CustomLocalSearchBox.vue +++ b/src/.vitepress/theme/components/CustomLocalSearchBox.vue @@ -20,6 +20,7 @@ import { nextTick, onBeforeUnmount, onMounted, + Raw, ref, shallowRef, watch, @@ -132,6 +133,7 @@ watchEffect(() => { const results: Ref<(SearchResult & Result)[]> = shallowRef([]) const enableNoResults = ref(false) +const loadig = ref(true) watch(filterText, () => { enableNoResults.value = false @@ -160,11 +162,7 @@ debouncedWatch( if (!index) return // Search - results.value = index - .search(filterTextValue) - .slice(0, 16) as (SearchResult & Result)[] - enableNoResults.value = true - + retrySearch(index, filterTextValue) // Highlighting const mods = showDetailedListValue ? await Promise.all(results.value.map((r) => fetchExcerpt(r.id))) @@ -268,6 +266,16 @@ function focusSearchInput(select = true) { select && searchInput.value?.select() } +const retrySearch = (index: Raw>, filter: string) => { + if (!index) return + + results.value = index + .search(filter) + .slice(0, 16) as (SearchResult & Result)[] + + enableNoResults.value = true +} + onMounted(() => { focusSearchInput() }) @@ -481,33 +489,6 @@ function formMarkRegex(terms: Set) { class="search-input" />
- - +
@@ -675,16 +605,13 @@ function formMarkRegex(terms: Set) { .shell { position: relative; - padding: 12px; + padding: 24px; margin: 64px auto; - display: flex; - flex-direction: column; - gap: 16px; background: var(--vp-local-search-bg); width: min(100vw - 60px, 900px); height: min-content; max-height: min(100vh - 128px, 900px); - border-radius: 6px; + border-radius: 12px; } @media (max-width: 767px) { @@ -698,7 +625,7 @@ function formMarkRegex(terms: Set) { } .search-bar { - border: 1px solid var(--vp-c-divider); + border: 1px solid rgb(32, 33, 35); border-radius: 12px; display: flex; align-items: center; @@ -712,10 +639,6 @@ function formMarkRegex(terms: Set) { } } -.search-bar:focus-within { - border-color: var(--vp-c-brand-1); -} - .search-icon { margin: 8px; } @@ -802,27 +725,31 @@ function formMarkRegex(terms: Set) { } .results { - display: flex; - flex-direction: column; - gap: 6px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; + box-shadow: var(--vp-c-shadow-3); + border-radius: 12px; + border: 1px solid rgba(25, 28, 52, 0.18); + padding: 8px 0; + max-height: min(100vh - 214px, 900px); + + li:hover { + background-color: rgba(25, 28, 52, 0.08); + } } .result { display: flex; align-items: center; gap: 8px; - border-radius: 12px; transition: none; - line-height: 1rem; - border: solid 2px var(--vp-local-search-result-border); outline: none; + height: 66px; } .result > div { - margin: 12px; + margin: 12px 16px; width: 100%; overflow: hidden; } @@ -840,6 +767,13 @@ function formMarkRegex(terms: Set) { position: relative; z-index: 1001; padding: 2px 0; + font-size: 13px !important; + line-height: 16px !important; +} + +:deep(mark) { + background-color: transparent; + color: none; } .title { @@ -852,21 +786,10 @@ function formMarkRegex(terms: Set) { font-weight: 500; } -.title-icon { - opacity: 0.5; - font-weight: 500; - color: var(--vp-c-brand-1); -} - .title svg { opacity: 0.5; } -.result.selected { - --vp-local-search-result-bg: var(--vp-local-search-result-selected-bg); - border-color: var(--vp-local-search-result-selected-border); -} - .excerpt-wrapper { position: relative; } @@ -892,10 +815,7 @@ function formMarkRegex(terms: Set) { .titles :deep(mark), .excerpt :deep(mark) { - background-color: var(--vp-local-search-highlight-bg); - color: var(--vp-local-search-highlight-text); - border-radius: 2px; - padding: 0 2px; + background-color: transparent; } .excerpt :deep(.vp-code-group) .tabs { @@ -932,12 +852,42 @@ function formMarkRegex(terms: Set) { } .no-results { - font-size: 0.9rem; - text-align: center; - padding: 12px; + padding: 28px 0; + display: flex; + flex-direction: column; + gap: 24px; + align-items: center; + z-index: 100; + box-shadow: 0 0 10 0 rgba(0, 0, 0, 0.16); + border-radius: 12px; + border: 1px solid rgba(25, 28, 52, 0.18); + background-color: rgb(255, 255, 255); +} + +.no-results-text { + font-weight: 700; + font-size: 17px; + line-height: 22px; + letter-spacing: 0.2px; +} + +.no-results-button { + border-radius: 12px; + border: 1px solid rgba(25, 28, 52, 0.18); + padding: 13px 20px; + font-weight: 500; + font-size: 17px; + line-height: 22px; + letter-spacing: 0.2px; } svg { flex: none; } + +.text { + font-size: 13px !important; + line-height: 16px !important; + color: rgba(25, 28, 52, 0.48); +} diff --git a/src/.vitepress/theme/scss/components/vp-doc-aside.scss b/src/.vitepress/theme/scss/components/vp-doc-aside.scss index 24038aa..e4fc506 100644 --- a/src/.vitepress/theme/scss/components/vp-doc-aside.scss +++ b/src/.vitepress/theme/scss/components/vp-doc-aside.scss @@ -1,4 +1,5 @@ @use '@beeline/design-tokens/scss/tokens/components/navigationDrawer'; +@use "@beeline/design-tokens/scss/tokens/globals/colors"; .VPDocAside { .outline-link { @@ -9,10 +10,12 @@ padding-top: 8px; padding-bottom: 8px; white-space: unset; + color: colors.$color-text-grey-inactive; } .outline-link.active { font-weight: 500 !important; + color: colors.$color-text-black-active; } .outline-title { diff --git a/src/.vitepress/theme/scss/components/vp-sidebar.scss b/src/.vitepress/theme/scss/components/vp-sidebar.scss index baac9bd..df5c664 100644 --- a/src/.vitepress/theme/scss/components/vp-sidebar.scss +++ b/src/.vitepress/theme/scss/components/vp-sidebar.scss @@ -1,5 +1,6 @@ @use '@beeline/design-tokens/scss/tokens/components/navigationDrawer'; @use '@beeline/design-tokens/scss/tokens/themes/theme-variables' as theme; +@use 'src/assets/scss/app/helpers/media'; .VPSidebar { --vp-sidebar-bg-color: var(--vp-c-bg); @@ -109,5 +110,7 @@ } .VPLocalNav.has-sidebar { - padding-left: 320px !important; + @include media.max(sm) { + padding-left: 0px; + } } \ No newline at end of file diff --git a/src/.vitepress/theme/scss/vars.scss b/src/.vitepress/theme/scss/vars.scss index 39cead5..ab23abc 100644 --- a/src/.vitepress/theme/scss/vars.scss +++ b/src/.vitepress/theme/scss/vars.scss @@ -203,3 +203,6 @@ --docsearch-primary-color: var(--vp-c-brand-1) !important; } +:root { + --vp-sidebar-width: 320px; +} \ No newline at end of file