diff --git a/scripts/site/_site/src/app/app.component.html b/scripts/site/_site/src/app/app.component.html index 2145dc365d0..708636fc262 100644 --- a/scripts/site/_site/src/app/app.component.html +++ b/scripts/site/_site/src/app/app.component.html @@ -1,6 +1,16 @@ -
+
+
+ +
+ +
+
@@ -66,93 +61,133 @@
-
-
-
- +
+ +
+
+
+
+
+ +
+
+ +
+
+
+
+ + + + diff --git a/scripts/site/_site/src/app/app.component.ts b/scripts/site/_site/src/app/app.component.ts index 77730ab1ec3..6e67601a9f6 100644 --- a/scripts/site/_site/src/app/app.component.ts +++ b/scripts/site/_site/src/app/app.component.ts @@ -1,7 +1,9 @@ -import { AfterViewInit, Component, ElementRef, HostListener, OnInit, ViewChild } from '@angular/core'; +import { AfterViewInit, Component, ElementRef, HostListener, NgZone, OnInit, ViewChild } from '@angular/core'; import { Title } from '@angular/platform-browser'; import { NavigationEnd, Router } from '@angular/router'; -import { en_US, zh_CN, NzI18nService, NzIconService, NzMessageService } from 'ng-zorro-antd'; +import { en_US, zh_CN, NzI18nService, NzMessageService } from 'ng-zorro-antd'; +import { fromEvent } from 'rxjs'; +import { debounceTime, map, startWith } from 'rxjs/operators'; import { environment } from '../environments/environment'; import { ROUTER_LIST } from './router'; @@ -12,7 +14,12 @@ declare const docsearch: any; templateUrl: './app.component.html' }) export class AppComponent implements OnInit, AfterViewInit { - hide = true; + /** + * When the screen size is smaller that 768 pixel, show the drawer and hide + * the navigation on the side. + **/ + showDrawer = false; + isDrawerOpen = false; routerList = ROUTER_LIST; componentList = []; searchComponent = null; @@ -39,11 +46,18 @@ export class AppComponent implements OnInit, AfterViewInit { this.router.navigateByUrl(url.join('/') + '/' + language); } - toggleHide() { - this.hide = !this.hide; + toggleMenu(): void { + if (this.showDrawer) { + + } } - constructor(private router: Router, private title: Title, private nzI18nService: NzI18nService, private msg: NzMessageService) { + constructor( + private router: Router, + private title: Title, + private nzI18nService: NzI18nService, + private msg: NzMessageService, + private ngZone: NgZone) { } navigateToPage(url) { @@ -103,6 +117,8 @@ export class AppComponent implements OnInit, AfterViewInit { if (this.useDocsearch) { this.initDocsearch(); } + + this.addWindowWidthListener(); } initDocsearch() { @@ -180,4 +196,18 @@ export class AppComponent implements OnInit, AfterViewInit { } // endregion + private addWindowWidthListener(): void { + this.ngZone.runOutsideAngular(() => { + fromEvent(window, 'resize').pipe( + startWith(true), + debounceTime(50), + map(() => window.innerWidth) + ).subscribe(width => { + const showDrawer = width <= 768; + if (this.showDrawer !== showDrawer) { + this.showDrawer = showDrawer; + } + }); + }); + } } diff --git a/scripts/site/_site/src/app/app.module.ts b/scripts/site/_site/src/app/app.module.ts index 09eea08e39d..a3c53b300d6 100644 --- a/scripts/site/_site/src/app/app.module.ts +++ b/scripts/site/_site/src/app/app.module.ts @@ -4,16 +4,16 @@ import { FormsModule } from '@angular/forms'; import { BrowserModule, Title } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { PreloadAllModules, RouterModule } from '@angular/router'; +import { ServiceWorkerModule } from '@angular/service-worker'; import { IconDefinition } from '@ant-design/icons-angular'; import { LeftOutline, RightOutline } from '@ant-design/icons-angular/icons'; import { NgZorroAntdModule, NZ_ICON_DEFAULT_TWOTONE_COLOR, NZ_ICONS } from 'ng-zorro-antd'; -import { ShareModule } from './share/share.module'; import { environment } from '../environments/environment'; import { DEMOComponent } from './_demo/demo.component'; import { AppComponent } from './app.component'; import { routes } from './app.routing.module'; -import { ServiceWorkerModule } from '@angular/service-worker'; +import { ShareModule } from './share/share.module'; const icons: IconDefinition[] = [ LeftOutline, RightOutline ]; diff --git a/scripts/site/_site/src/style/common.less b/scripts/site/_site/src/style/common.less index 9d73fb21e39..b3ded24c81e 100755 --- a/scripts/site/_site/src/style/common.less +++ b/scripts/site/_site/src/style/common.less @@ -15,7 +15,7 @@ body { } a { - transition: color .3s ease; + transition: color 0.3s ease; &:focus { text-decoration: underline; text-decoration-skip: ink; @@ -33,17 +33,25 @@ a { background: #fff; min-height: 500px; overflow: hidden; - border-left: 1px solid @site-border-color-split; position: relative; - margin-left: -1px; } .main-menu { z-index: 1; + + &-inner { + overflow-x: hidden; + overflow-y: hidden; + max-height: 100vh; + } + + &:hover &-inner { + overflow-y: auto; + } } .aside-container { - padding-bottom: 50px; + padding-bottom: 48px; font-family: Avenir, @font-family; &.ant-menu-inline .ant-menu-submenu-title h4, @@ -71,7 +79,7 @@ a { position: absolute; right: -10px; top: 16px; - transition: all .3s; + transition: all 0.3s; } &:hover .anticon { opacity: 1; @@ -83,7 +91,7 @@ a { font-size: 12px; margin-left: 6px; font-weight: normal; - opacity: .67; + opacity: 0.67; } .outside-link { @@ -111,7 +119,7 @@ a { } #react-content { - transition: transform .3s @ease-in-out-circ; + transition: transform 0.3s @ease-in-out-circ; height: 100%; } .page-wrapper { @@ -130,3 +138,7 @@ a { .drawer { z-index: 1029; } + +#_hj_feedback_container .path1:before { + color: @primary-color !important; +} diff --git a/scripts/site/_site/src/style/drawer.less b/scripts/site/_site/src/style/drawer.less new file mode 100644 index 00000000000..f4c858fc0aa --- /dev/null +++ b/scripts/site/_site/src/style/drawer.less @@ -0,0 +1,201 @@ +.drawer { + position: fixed; + top: 0; + z-index: 9999; +} +.drawer > * { + -webkit-transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), box-shaow 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), box-shaow 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), box-shaow 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), box-shaow 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.drawer .drawer-mask { + background: #000; + opacity: 0; + width: 0; + height: 0; + position: fixed; + top: 0; + -webkit-transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), width 0s ease 0.3s, height 0s ease 0.3s; + transition: opacity 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), width 0s ease 0.3s, height 0s ease 0.3s; +} +.drawer-content-wrapper { + position: fixed; + background: #fff; +} +.drawer-content { + overflow-y: auto; + z-index: 1; + position: relative; +} +.drawer-handle { + position: absolute; + top: 72px; + width: 41px; + height: 40px; + cursor: pointer; + z-index: 0; + text-align: center; + line-height: 40px; + font-size: 16px; + display: -ms-flexbox; + display: -webkit-box; + display: -webkit-flex; + display: flex; + -ms-flex-pack: center; + -webkit-box-pack: center; + -webkit-justify-content: center; + justify-content: center; + -ms-flex-align: center; + -webkit-box-align: center; + -webkit-align-items: center; + align-items: center; + background: #fff; +} +.drawer-handle-icon { + width: 14px; + height: 2px; + background: #333; + position: relative; + -webkit-transition: background 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: background 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.drawer-handle-icon:before, +.drawer-handle-icon:after { + content: ''; + display: block; + position: absolute; + background: #333; + width: 100%; + height: 2px; + -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + transition: transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86), -webkit-transform 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); +} +.drawer-handle-icon:before { + top: -5px; +} +.drawer-handle-icon:after { + top: 5px; +} +.drawer-left, +.drawer-right { + width: 0%; + height: 100%; +} +.drawer-left .drawer-content-wrapper, +.drawer-right .drawer-content-wrapper, +.drawer-left .drawer-content, +.drawer-right .drawer-content { + height: 100%; +} +.drawer-left.drawer-open, +.drawer-right.drawer-open { + width: 100%; +} +.drawer-left .drawer-handle { + right: -40px; + -webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); + box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); + border-radius: 0 4px 4px 0; +} +.drawer-left.drawer-open .drawer-content-wrapper { + -webkit-box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); + box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15); +} +.drawer-right .drawer-content-wrapper { + right: 0; +} +.drawer-right .drawer-handle { + left: -40px; + -webkit-box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); + box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); + border-radius: 4px 0 0 4px; +} +.drawer-right.drawer-open .drawer-content-wrapper { + -webkit-box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); + box-shadow: -2px 0 8px rgba(0, 0, 0, 0.15); +} +.drawer-top, +.drawer-bottom { + width: 100%; + height: 0%; +} +.drawer-top .drawer-content-wrapper, +.drawer-bottom .drawer-content-wrapper, +.drawer-top .drawer-content, +.drawer-bottom .drawer-content { + width: 100%; +} +.drawer-top .drawer-handle, +.drawer-bottom .drawer-handle { + left: 50%; + margin-left: -20px; +} +.drawer-top.drawer-open, +.drawer-bottom.drawer-open { + height: 100%; +} +.drawer-top .drawer-handle { + top: auto; + bottom: -40px; + -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + border-radius: 0 0 4px 4px; +} +.drawer-top.drawer-open .drawer-wrapper { + -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); +} +.drawer-bottom .drawer-content-wrapper { + bottom: 0; +} +.drawer-bottom .drawer-handle { + top: -40px; + -webkit-box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15); + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15); + border-radius: 4px 4px 0 0; +} +.drawer-bottom.drawer-open .drawer-content-wrapper { + -webkit-box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15); + box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15); +} +.drawer.drawer-open .drawer-mask { + opacity: .3; + width: 100%; + height: 100%; + -webkit-animation: rcDrawerFadeIn 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + animation: rcDrawerFadeIn 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86); + -webkit-transition: none; + transition: none; +} +.drawer.drawer-open .drawer-handle-icon { + background: transparent; +} +.drawer.drawer-open .drawer-handle-icon:before { + -webkit-transform: translateY(5px) rotate(45deg); + -ms-transform: translateY(5px) rotate(45deg); + transform: translateY(5px) rotate(45deg); +} +.drawer.drawer-open .drawer-handle-icon:after { + -webkit-transform: translateY(-5px) rotate(-45deg); + -ms-transform: translateY(-5px) rotate(-45deg); + transform: translateY(-5px) rotate(-45deg); +} +@-webkit-keyframes rcDrawerFadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 0.3; + } +} +@keyframes rcDrawerFadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 0.3; + } +} \ No newline at end of file diff --git a/scripts/site/_site/src/style/footer.less b/scripts/site/_site/src/style/footer.less index d58bed52f45..cd3675b353f 100755 --- a/scripts/site/_site/src/style/footer.less +++ b/scripts/site/_site/src/style/footer.less @@ -1,15 +1,16 @@ -@import 'colors'; +@import './colors'; -@padding-space: 144px; +@padding-space: 24px; footer { clear: both; font-size: 14px; background-color: #000; position: relative; - z-index: 100; + z-index: 9; + margin-left: -1px; color: rgba(255, 255, 255, 0.65); - box-shadow: 0 1000px 0 1000px #fff; + .ant-row { text-align: center; .footer-center { diff --git a/scripts/site/_site/src/style/icons.less b/scripts/site/_site/src/style/icons.less index 107f03a56cc..77497ee82a8 100755 --- a/scripts/site/_site/src/style/icons.less +++ b/scripts/site/_site/src/style/icons.less @@ -10,7 +10,7 @@ ul.anticons-list { cursor: pointer; height: 100px; color: #555; - transition: color .3s ease-in-out, background-color .3s ease-in-out; + transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out; position: relative; margin: 3px 0; border-radius: 4px; @@ -18,9 +18,9 @@ ul.anticons-list { overflow: hidden; padding: 10px 0 0; .anticon { - font-size: 24px; + font-size: 36px; margin: 12px 0 8px; - transition: transform .3s ease-in-out; + transition: transform 0.3s ease-in-out; will-change: transform; } @@ -28,10 +28,10 @@ ul.anticons-list { display: block; text-align: center; transform: scale(0.83); - font-family: "Lucida Console", Consolas; + font-family: 'Lucida Console', Consolas; white-space: nowrap; .ant-badge { - transition: color .3s ease-in-out; + transition: color 0.3s ease-in-out; } } @@ -56,7 +56,7 @@ ul.anticons-list { left: 0; height: 100%; width: 100%; - content: "Copied!"; + content: 'Copied!'; text-align: center; line-height: 110px; color: #fff; @@ -70,3 +70,10 @@ ul.anticons-list { } } } + +.copied-code { + font-size: 12px; + background: #f5f5f5; + border-radius: 2px; + padding: 2px 4px 2px; +} diff --git a/scripts/site/_site/src/style/index.less b/scripts/site/_site/src/style/index.less index 683468945a2..b7f6ea66bfd 100755 --- a/scripts/site/_site/src/style/index.less +++ b/scripts/site/_site/src/style/index.less @@ -15,3 +15,4 @@ @import './docsearch'; @import './responsive'; @import './patch'; +@import './drawer'; diff --git a/scripts/site/_site/src/style/patch.less b/scripts/site/_site/src/style/patch.less index d10cf75e984..112c489436a 100644 --- a/scripts/site/_site/src/style/patch.less +++ b/scripts/site/_site/src/style/patch.less @@ -110,4 +110,8 @@ span.ant-component-decs { .markdown pre code[class*="language-"] { padding: 12px 20px; overflow: auto; -} \ No newline at end of file +} + +.page-wrapper { + transition: transform cubic-bezier(.78, .14, .13, .86) .3s; +} diff --git a/scripts/site/_site/src/style/responsive.less b/scripts/site/_site/src/style/responsive.less index 48ecdac660e..ee8c0c1e9be 100755 --- a/scripts/site/_site/src/style/responsive.less +++ b/scripts/site/_site/src/style/responsive.less @@ -28,6 +28,18 @@ } } +@media only screen and (max-width: 991.99px) { + .main-menu { + > div > .ant-affix { + position: static !important; + } + .main-menu-inner { + overflow: hidden; + max-height: none; + } + } +} + @media only screen and (max-width: 767.99px) { #header { text-align: center; @@ -38,7 +50,8 @@ #search-box { display: none; } - .code-boxes-col-2-1, .code-boxes-col-1-1 { + .code-boxes-col-2-1, + .code-boxes-col-1-1 { float: none; width: 100%; } @@ -48,8 +61,9 @@ width: 100%; } .preview-image-box { - padding-left: 0; margin: 10px 0; + width: 100%; + padding: 0; } .image-wrapper { @@ -161,7 +175,7 @@ .prev-next-nav { margin-left: 16px; - width: ~"calc(100% - 32px)"; + width: ~'calc(100% - 32px)'; } .drawer {