This is an automated email from the ASF dual-hosted git repository.
jeffreyh pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new b12c18fcb5 [fix] docs style (#1519)
b12c18fcb5 is described below
commit b12c18fcb52a275dfee0aa8af7ff5de01c561c87
Author: yangon <2689991...@qq.com>
AuthorDate: Tue Dec 17 15:21:29 2024 +0800
[fix] docs style (#1519)
### Summary
1. Add `debounce` for search bar
2. Some style bugfix in mobile
---------
Co-authored-by: liyang <liy...@selectdb.com>
---
.../gettingStarted/demo-block/demo-block.css | 44 ++++++++++++++--------
.../gettingStarted/demo-block/latest.tsx | 10 ++---
src/scss/common.scss | 4 ++
src/scss/components/markdown.scss | 8 +++-
src/theme/DocItem/Layout/index.tsx | 4 +-
src/theme/DocSidebarItem/Category/style.scss | 6 +++
src/theme/SearchBar/SearchBar.jsx | 20 +++++++---
src/theme/SearchBar/SearchBar.module.css | 10 +++--
src/theme/TOC/index.tsx | 22 ++++++-----
src/utils/debounce.ts | 9 +++++
static/images/search-icon.svg | 10 +++--
static/images/toc-icon/github.svg | 11 ++++--
static/images/toc-icon/home.svg | 2 +-
static/images/toc-icon/pdf.svg | 2 +-
.../gettingStarted/demo-block/demo-block.css | 10 +++++
15 files changed, 122 insertions(+), 50 deletions(-)
diff --git
a/i18n/zh-CN/docusaurus-plugin-content-docs/version-2.1/gettingStarted/demo-block/demo-block.css
b/i18n/zh-CN/docusaurus-plugin-content-docs/version-2.1/gettingStarted/demo-block/demo-block.css
index 934e88ba28..1257919249 100644
---
a/i18n/zh-CN/docusaurus-plugin-content-docs/version-2.1/gettingStarted/demo-block/demo-block.css
+++
b/i18n/zh-CN/docusaurus-plugin-content-docs/version-2.1/gettingStarted/demo-block/demo-block.css
@@ -105,15 +105,6 @@ a:active {
padding-right: 2rem
}
-.home-page-hero-right {
- flex: 1;
- flex-direction: row;
- justify-content: center;
- width: fit-content
-}
-
-
-
.home-page-option-button {
display: flex;
margin-bottom: 0.5rem;
@@ -209,11 +200,6 @@ a:active {
justify-content: center;
}
-.home-page-hero-right {
- align-items: center;
- display: flex;
- flex-direction: row;
-}
.home-page-hero-button {
/* background-color: #fafafa; */
@@ -279,8 +265,18 @@ a:active {
margin-top: 15px
}
+.home-page-hero-right a {
+ color: #4c576c
+}
-
+.home-page-hero-right a:hover,
+a:active {
+ /* color: #444fd9; */
+ text-decoration: none;
+ transition-duration: .3s;
+ transition-timing-function: cubic-bezier(0, 0, .2, 1);
+ background-color: #fafafa
+}
.section-border {
@@ -355,6 +351,24 @@ a:active {
}
+@media (max-width: 996px) {
+ .latest-button {
+ flex: 1 1 100%;
+ margin-right: 0 !important;
+ max-width: calc(100vw - 2rem);
+ min-height: 170px;
+ height: auto !important;
+ }
+
+ .home-page-hero-right {
+ flex-wrap: wrap !important
+ }
+ .latest-button-CN{
+ margin-right: 0 !important;
+ max-width: calc(100vw - 2rem);
+ }
+}
+
.latest-button-CN {
/* background-color: #fafafa; */
border: 0.3px solid #dcdcdc;
diff --git
a/i18n/zh-CN/docusaurus-plugin-content-docs/version-2.1/gettingStarted/demo-block/latest.tsx
b/i18n/zh-CN/docusaurus-plugin-content-docs/version-2.1/gettingStarted/demo-block/latest.tsx
index 3e1eb5090e..acaf64e6c4 100644
---
a/i18n/zh-CN/docusaurus-plugin-content-docs/version-2.1/gettingStarted/demo-block/latest.tsx
+++
b/i18n/zh-CN/docusaurus-plugin-content-docs/version-2.1/gettingStarted/demo-block/latest.tsx
@@ -33,10 +33,10 @@ export default function Latest() {
<path fill="none" d="M0 0h24v24H0Z"></path>
</svg>
</div> */}
- <div style={{ marginBottom: 10 }}>Doris Summit
Asia 2024｜12 月 14 日 深圳</div>
+ <div style={{ marginBottom: 10 }}>Doris Summit
Asia 2024 圆满落幕</div>
</div>
- <div style={{ fontSize: 12, marginBottom: 20 }}>一年一度的
Apache Doris 峰会再次启航，Doris Summit Asia 2024 现已开启报名，将于 12 月 14 日在深圳正式举办。</div>
- <div style={{ fontSize: 14, marginBottom: 10
}}>立即报名</div>
+ <div style={{ fontSize: 12, marginBottom: 20 }}>2024 年
12 月 14 日，由飞轮科技主办，腾讯云和阿里云联合主办的 Doris Summit Asia 2024 在深圳圆满落幕。演讲回放及资料会在 10
个工作日内逐步释出，可通过 Doris Summit 官网获取。</div>
+ <div style={{ fontSize: 14, marginBottom: 10
}}>回放生成中</div>
</a>
<a className="latest-button"
href={`/zh-CN/docs${currentVersion === '' ? '' :
`/${currentVersion}`}/releasenotes/v3.0/release-3.0.2`}>
<div
className="home-page-hero-button-label"><div>版本发布</div></div>
@@ -47,9 +47,9 @@ export default function Latest() {
<path fill="none" d="M0 0h24v24H0Z"></path>
</svg>
</div> */}
- <div style={{ marginBottom: 10 }}>Apache Doris
3.0.2 正式发布</div>
+ <div style={{ marginBottom: 10 }}>Apache Doris
3.0.3 正式发布</div>
</div>
- <div style={{ fontSize: 12, marginBottom: 20 }}>3.0.2
版本在存算分离、存储、湖仓一体、查询优化器以及执行引擎持续升级改进，欢迎大家下载使用。</div>
+ <div style={{ fontSize: 12, marginBottom: 20 }}>3.0.3
版本在存算分离、存储、湖仓一体、查询优化器以及执行引擎持续升级改进，欢迎大家下载使用。</div>
<div style={{ fontSize: 14, marginBottom: 10
}}>查看详情</div>
</a>
diff --git a/src/scss/common.scss b/src/scss/common.scss
index bfa4a29cd0..34383f06fc 100644
--- a/src/scss/common.scss
+++ b/src/scss/common.scss
@@ -48,6 +48,10 @@
opacity: 0;
}
}
+
+ .theme-doc-markdown{
+ padding-left: 0;
+ }
}
@media (max-width: 576px) {
diff --git a/src/scss/components/markdown.scss
b/src/scss/components/markdown.scss
index f9e5498229..bd6dd7b99c 100644
--- a/src/scss/components/markdown.scss
+++ b/src/scss/components/markdown.scss
@@ -48,7 +48,6 @@
p,
li {
- margin-bottom: calc(var(--custom-leading) *
var(--custom-text-rhythm-bottom));
font-size: 1rem;
font-weight: 400;
line-height: var(--custom-text-line-height);
@@ -58,7 +57,8 @@
h1,
h2,
h3,
- h4 {
+ h4,
+ p {
margin-bottom: calc(var(--custom-leading) *
var(--custom-heading-rhythm-bottom)) !important;
}
@@ -224,6 +224,10 @@
list-style-type: square;
}
+ li>* {
+ margin-bottom: calc(var(--custom-leading) *
var(--custom-list-rhythm-bottom)) !important;
+ }
+
.tabs-container {
.tabs__item--active {
z-index: 999;
diff --git a/src/theme/DocItem/Layout/index.tsx
b/src/theme/DocItem/Layout/index.tsx
index b3099ef60e..7c4479da59 100644
--- a/src/theme/DocItem/Layout/index.tsx
+++ b/src/theme/DocItem/Layout/index.tsx
@@ -67,7 +67,7 @@ export default function DocItemLayout({ children }: Props):
JSX.Element {
<DocItemContent>{children}</DocItemContent>
<DocItemFooter />
</article>
- <div className="flex items-center justify-end col mt-10">
+ <div className={`flex items-center text-sm lg:text-base
justify-end lg:col mt-10`}>
{isNew ? (
<></>
) : (
@@ -79,7 +79,7 @@ export default function DocItemLayout({ children }: Props):
JSX.Element {
to={`https://github.com/apache/doris-website/issues/new?title=Issue on
docs&body=Path:${
typeof window !== 'undefined' &&
location.pathname
}`}
- className={`mr-6 ${styles.footerBtn}`}
+ className={`lg:mr-6 ${styles.footerBtn}`}
>
<DocsAttention /> <span className="ml-2">{isZH ?
'反馈问题' : 'Report issue'}</span>
</Link>
diff --git a/src/theme/DocSidebarItem/Category/style.scss
b/src/theme/DocSidebarItem/Category/style.scss
index 2398c43299..78ae0f0053 100644
--- a/src/theme/DocSidebarItem/Category/style.scss
+++ b/src/theme/DocSidebarItem/Category/style.scss
@@ -45,6 +45,12 @@
align-self: stretch;
}
+ @media (max-width: 996px) {
+ .title_level_1{
+ font-size: 1.125rem !important;
+ }
+ }
+
.menu__list_level_2 {
padding-left: 0 !important;
margin-top: 0 !important;
diff --git a/src/theme/SearchBar/SearchBar.jsx
b/src/theme/SearchBar/SearchBar.jsx
index 8051f3452e..b180e444b4 100644
--- a/src/theme/SearchBar/SearchBar.jsx
+++ b/src/theme/SearchBar/SearchBar.jsx
@@ -25,6 +25,7 @@ import { VERSIONS, DEFAULT_VERSION } from
'@site/src/constant/common';
import styles from './SearchBar.module.css';
import { normalizeContextByPath } from '../../utils/normalizeContextByPath';
import useIsDocPage from '@site/src/hooks/use-is-doc';
+import { debounce } from '@site/src/utils/debounce';
import { DataContext } from '../Layout';
async function fetchAutoCompleteJS() {
const autoCompleteModule = await import('@easyops-cn/autocomplete.js');
@@ -128,6 +129,7 @@ export default function SearchBar({ handleSearchBarToggle
}) {
setSearchContext(nextSearchContext);
}, [location.pathname, versionUrl]);
const hidden = !!hideSearchBarWithNoSearchContext &&
Array.isArray(searchContextByPaths) && searchContext === '';
+
const loadIndex = useCallback(
async (forceLoad = false) => {
if (hidden || (indexStateMap.current.get(searchContext) &&
!forceLoad)) {
@@ -218,7 +220,12 @@ export default function SearchBar({ handleSearchBarToggle
}) {
[styles.searchBarLeft]: searchBarPosition ===
'left',
}),
noPrefix: true,
- dropdownMenu: styles.dropdownMenu,
+ dropdownMenu: clsx(
+ {
+ [styles.mobileDropdownMenu]:
document.body.clientWidth < 996,
+ },
+ styles.dropdownMenu,
+ ),
input: styles.input,
hint: styles.hint,
suggestions: styles.suggestions,
@@ -230,10 +237,10 @@ export default function SearchBar({ handleSearchBarToggle
}) {
},
[
{
- source: async (input, callback) => {
+ source: debounce(async (input, callback) => {
const result = await searchByWorker(versionUrl,
searchContext, input);
callback(result);
- },
+ }, 300),
templates: {
suggestion: SuggestionTemplate,
empty: EmptyTemplate,
@@ -312,7 +319,10 @@ export default function SearchBar({ handleSearchBarToggle
}) {
setFocused(true);
handleSearchBarToggle?.(true);
}, [handleSearchBarToggle, loadIndex]);
- const onInputBlur = useCallback(() => {
+ const onInputBlur = useCallback((e) => {
+ if(document.body.clientWidth < 996 && e.code === "Enter"){
+ return;
+ }
setFocused(false);
handleSearchBarToggle?.(false);
}, [handleSearchBarToggle]);
@@ -321,11 +331,11 @@ export default function SearchBar({ handleSearchBarToggle
}) {
}, [loadIndex]);
const onInputChange = useCallback(event => {
setInputValue(event.target.value);
-
if (event.target.value) {
setInputChanged(true);
}
}, []);
+
// Implement hint icons for the search shortcuts on mac and the rest
operating systems.
const isMac = isBrowser ? /mac/i.test(navigator.userAgentData?.platform ??
navigator.platform) : false;
diff --git a/src/theme/SearchBar/SearchBar.module.css
b/src/theme/SearchBar/SearchBar.module.css
index b8c8a95507..75eb4360fb 100644
--- a/src/theme/SearchBar/SearchBar.module.css
+++ b/src/theme/SearchBar/SearchBar.module.css
@@ -1,5 +1,7 @@
+
+
.searchBar .dropdownMenu {
- left: auto !important;
+ left: -20% !important;
right: 0 !important;
background: var(--search-local-modal-background, #f5f6f7);
@@ -14,9 +16,12 @@
padding: var(--search-local-spacing, 12px);
}
+.searchBar .mobileDropdownMenu{
+ left: 0 !important;
+}
+
@media not (max-width: 996px) {
.searchBar.searchBarLeft .dropdownMenu {
- left: 0 !important;
right: auto !important;
}
}
@@ -27,7 +32,6 @@
}
}
-
@media (max-width: 576px) {
:global(.navbar__search-input):not(:focus) {
width: 2rem;
diff --git a/src/theme/TOC/index.tsx b/src/theme/TOC/index.tsx
index 95ce72ca56..2287fc0102 100644
--- a/src/theme/TOC/index.tsx
+++ b/src/theme/TOC/index.tsx
@@ -95,16 +95,18 @@ export default function TOC({ className, ...props }:
Props): JSX.Element {
</div>
) : null}
- <Link
- className="toc-icon-content"
- to={'https://github.com/apache/doris/discussions'}
- id="toc-icon-github"
- onMouseEnter={() => handleMouseEnter('toc-icon-github')}
- onMouseLeave={() => handleMouseLeave('toc-icon-github')}
- >
- <GithubIcon />
- <span>Ask Questions on Discussion</span>
- </Link>
+ {!isCN ? (
+ <Link
+ className="toc-icon-content"
+ to={'https://github.com/apache/doris/discussions'}
+ id="toc-icon-github"
+ onMouseEnter={() =>
handleMouseEnter('toc-icon-github')}
+ onMouseLeave={() =>
handleMouseLeave('toc-icon-github')}
+ >
+ <GithubIcon />
+ <span>Ask Questions on Discussion</span>
+ </Link>
+ ) : null}
</div>
<div>
<span className="ml-4 title-text">{!isCN ? 'On This Page' :
'本页导航'}</span>
diff --git a/src/utils/debounce.ts b/src/utils/debounce.ts
new file mode 100644
index 0000000000..171aceeb57
--- /dev/null
+++ b/src/utils/debounce.ts
@@ -0,0 +1,9 @@
+export const debounce = (fn, wait = 300, that = null) => {
+ let timeout: NodeJS.Timeout;
+ return (...args) => {
+ if (timeout) clearTimeout(timeout);
+ timeout = setTimeout(() => {
+ fn.apply(that ?? this, args);
+ }, wait);
+ };
+};
diff --git a/static/images/search-icon.svg b/static/images/search-icon.svg
index ef31db718f..a474d13b88 100644
--- a/static/images/search-icon.svg
+++ b/static/images/search-icon.svg
@@ -1,3 +1,7 @@
-<svg width="22" height="22" viewBox="0 0 22 22" fill="none"
xmlns="http://www.w3.org/2000/svg";>
-<path d="M10.0004 4.40039C6.90761 4.40039 4.40039 6.90761 4.40039
10.0004C4.40039 13.0932 6.90761 15.6004 10.0004 15.6004C11.3306 15.6004 12.5526
15.1366 13.5133 14.3618L16.0757 16.9242C16.31 17.1585 16.6899 17.1585 16.9242
16.9242C17.1585 16.6898 17.1585 16.3099 16.9242 16.0756L14.3618 13.5133C15.1366
12.5526 15.6004 11.3306 15.6004 10.0004C15.6004 6.90761 13.0932 4.40039 10.0004
4.40039ZM5.60039 10.0004C5.60039 7.57035 7.57035 5.60039 10.0004
5.60039C12.4304 5.60039 14.4004 7.57035 14. [...]
-</svg>
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none"
xmlns="http://www.w3.org/2000/svg";>
+ <path
+ d="M7 12C9.76141 12 12 9.76141 12 7C12 4.23859 9.76141 2 7 2C4.23859 2
2 4.23859 2 7C2 9.76141 4.23859 12 7 12Z"
+ stroke="#3F3F45" stroke-width="1.2" stroke-linejoin="round" />
+ <path d="M11 11L13.9023 13.9023" stroke="#3F3F45" stroke-width="1.2"
stroke-linecap="round"
+ stroke-linejoin="round" />
+</svg>
\ No newline at end of file
diff --git a/static/images/toc-icon/github.svg
b/static/images/toc-icon/github.svg
index 81f7a10327..62f06aac82 100644
--- a/static/images/toc-icon/github.svg
+++ b/static/images/toc-icon/github.svg
@@ -1,12 +1,17 @@
<svg width="21" height="20" viewBox="0 0 21 20" fill="#7F7F83"
xmlns="http://www.w3.org/2000/svg";>
<g clip-path="url(#clip0_8019_4529)">
- <path
- d="M11.0061 3C14.9792 2.99839 18.1973 6.21483 18.1973
10.1848C18.1973 13.3241 16.1842 15.9927 13.3806 16.9727C13.0031 17.0675 13.0609
16.7992 13.0609 16.616V15.3709C15.2411 15.6263 15.3295 14.1836 15.4757
13.9426C15.7713 13.4381 16.4702 13.3096 16.2613 13.0686C15.7649 12.8132 15.2588
13.1329 14.6724 13.9989C14.2482 14.627 13.4208 14.521 13.0015 14.4166C12.9099
14.039 12.7139 13.7016 12.444 13.4398C14.7029 13.0349 15.6444 11.6564 15.6444
10.0177C15.6444 9.2224 15.3825 8.49139 [...]
- />
+ <g clip-path="url(#clip1_8019_4529)">
+ <path
+ d="M10.506 2.69849C14.6502 2.69681 18.0068 6.05174 18.0068
10.1926C18.0068 13.4671 15.9071 16.2506 12.9828 17.2728C12.589 17.3717 12.6493
17.0918 12.6493 16.9008V15.6021C14.9234 15.8685 15.0155 14.3637 15.168
14.1123C15.4764 13.5861 16.2054 13.452 15.9875 13.2007C15.4697 12.9342 14.9418
13.2677 14.3302 14.1709C13.8877 14.8262 13.0247 14.7156 12.5873 14.6067C12.4918
14.2128 12.2874 13.8609 12.0058 13.5878C14.362 13.1655 15.344 11.7276 15.344
10.0183C15.344 9.18882 15.0709 [...]
+ />
+ </g>
</g>
<defs>
<clipPath id="clip0_8019_4529">
<rect width="21" height="20" fill="white" />
</clipPath>
+ <clipPath id="clip1_8019_4529">
+ <rect width="16" height="16" fill="white" transform="matrix(-1 0 0
1 18.5 2)" />
+ </clipPath>
</defs>
</svg>
\ No newline at end of file
diff --git a/static/images/toc-icon/home.svg b/static/images/toc-icon/home.svg
index 8df7e4ed5f..e5fe2a6352 100644
--- a/static/images/toc-icon/home.svg
+++ b/static/images/toc-icon/home.svg
@@ -1,5 +1,5 @@
<svg width="21" height="20" viewBox="0 0 21 20" fill="#7F7F83"
xmlns="http://www.w3.org/2000/svg";>
<path fill-rule="evenodd" clip-rule="evenodd"
- d="M3.33983 6.44003C3.06163 6.62549 2.89453 6.93773 2.89453
7.27208V16.2106C2.89453 16.6466 3.24799 17.0001 3.684 17.0001H16.3156C16.7516
17.0001 17.1051 16.6466 17.1051 16.2106V7.27208C17.1051 6.93773 16.938 6.62549
16.6598 6.44003L10.5545 2.36985C10.2186 2.14592 9.78099 2.14592 9.44509
2.36985L3.33983 6.44003ZM10.6001 10.6001C10.6001 10.2687 10.3315 10.0001
10.0001 10.0001C9.66873 10.0001 9.4001 10.2687 9.4001 10.6001L9.4001
13.9001C9.4001 14.2314 9.66873 14.5001 10.0001 14.500 [...]
+ d="M3.83544 6.44003C3.55724 6.62549 3.39014 6.93773 3.39014
7.27208V16.2106C3.39014 16.6466 3.74359 17.0001 4.17961 17.0001H16.8112C17.2472
17.0001 17.6007 16.6466 17.6007 16.2106V7.27208C17.6007 6.93773 17.4336 6.62549
17.1554 6.44003L11.0501 2.36985C10.7142 2.14592 10.2766 2.14592 9.9407
2.36985L3.83544 6.44003ZM11.0957 10.6001C11.0957 10.2687 10.8271 10.0001
10.4957 10.0001C10.1643 10.0001 9.8957 10.2687 9.8957 10.6001L9.8957
13.9001C9.8957 14.2314 10.1643 14.5001 10.4957 14.5 [...]
/>
</svg>
\ No newline at end of file
diff --git a/static/images/toc-icon/pdf.svg b/static/images/toc-icon/pdf.svg
index 05721ee3e1..6edc4f7455 100644
--- a/static/images/toc-icon/pdf.svg
+++ b/static/images/toc-icon/pdf.svg
@@ -1,5 +1,5 @@
<svg width="21" height="20" viewBox="0 0 21 20" fill="#7F7F83"
xmlns="http://www.w3.org/2000/svg";>
<path
- d="M15.1754 4H4.28648C3.43093 4 2.73096 4.70001 2.73096
5.55559V16.4445C2.73096 17.3 3.43093 18 4.28648 18H15.1754C16.031 18 16.731
17.3 16.731 16.4445V5.55559C16.7309 4.70005 16.0309 4 15.1754 4ZM9.38379
9.99791C9.20496 10.5735 8.9996 11.4635 8.69752 12.1952C8.54177 12.5909 8.54931
12.522 8.43222 12.7719L8.53333 12.7391C9.57248 12.4483 10.3 12.3762 10.9767
12.2517C10.8409 12.1445 10.7229 12.0616 10.6295 11.9761C10.1646 11.4614 10.0023
11.3648 9.38379 9.99791ZM14.4834 13.2945C14. [...]
+ d="M15.9444 3H5.05552C4.19998 3 3.5 3.70001 3.5 4.55559V15.4445C3.5
16.3 4.19998 17 5.05552 17H15.9444C16.8 17 17.5 16.3 17.5 15.4445V4.55559C17.5
3.70005 16.8 3 15.9444 3ZM10.1528 8.99791C9.97401 9.57345 9.76864 10.4635
9.46656 11.1952C9.31081 11.5909 9.31836 11.522 9.20126 11.7719L9.30237
11.7391C10.3415 11.4483 11.0691 11.3762 11.7457 11.2517C11.6099 11.1445 11.4919
11.0616 11.3985 10.9761C10.9336 10.4614 10.7714 10.3648 10.1528
8.99791ZM15.2525 12.2945C15.1202 12.4423 14.8869 [...]
/>
</svg>
\ No newline at end of file
diff --git
a/versioned_docs/version-2.1/gettingStarted/demo-block/demo-block.css
b/versioned_docs/version-2.1/gettingStarted/demo-block/demo-block.css
index 395936bc54..d1d12c338f 100644
--- a/versioned_docs/version-2.1/gettingStarted/demo-block/demo-block.css
+++ b/versioned_docs/version-2.1/gettingStarted/demo-block/demo-block.css
@@ -366,6 +366,16 @@ a:active {
}
}
+@media (max-width: 996px) {
+ .latest-button {
+ flex: 1 1 100%;
+ margin-right: 0 !important;
+ max-width: calc(100vw - 2rem);
+ min-height: 170px;
+ height: auto !important;
+ }
+}
+
.banner-button {
margin-right: 30px;
border-radius: 10px;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@doris.apache.org
For additional commands, e-mail: commits-h...@doris.apache.org
