Skip to content

Commit

Permalink
docs: optimize mobile experience (NG-ZORRO#2789)
Browse files Browse the repository at this point in the history 
* docs: optimize mobile experience

* docs: make left scroll independently
  • Loading branch information
@Ricbet
Wendell authored and Ricbet committed Apr 9, 2020
1 parent 6fd4808 commit c3ee8ff
Show file tree
Hide file tree
Showing 10 changed files with 440 additions and 135 deletions.
247 changes: 141 additions & 106 deletions scripts/site/_site/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,16 @@
<div class="page-wrapper">
<div class="page-wrapper" [style.transform]="isDrawerOpen ? 'translateX(245px)' : null ">
<header id="header" class="clearfix">
<i nz-icon type="menu" class="nav-phone-icon" (click)="toggleHide()"></i>
<ng-template #languageAndVersionTpl>
<div>
<nz-select nzSize="small" style="width: 180px;" [ngModel]="currentVersion" (ngModelChange)="navigateToVersion($event)">
<nz-option *ngFor="let version of oldVersionList" [nzLabel]="version" [nzValue]="version"></nz-option>
<nz-option [nzLabel]="currentVersion" [nzValue]="currentVersion"></nz-option>
</nz-select>
<button nz-button style="margin-left: 8px;" nzSize="small" (click)="switchLanguage(language==='zh'?'en':'zh')">{{language=='zh'?'English':'中文'}}</button>
</div>
</ng-template>
<i nz-icon type="menu" class="nav-phone-icon" nz-popover [nzTitle]="'Change language or version'" nzPlacement="bottomRight" [nzContent]="languageAndVersionTpl" [nzTrigger]="'click'">
</i>
<div nz-row>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="8" [nzLg]="5" [nzXl]="5" [nzXXl]="4">
<a id="logo" href>
Expand Down Expand Up @@ -37,27 +47,12 @@
</header>
<div class="main-wrapper">
<div nz-row>
<div nz-col [class.hide-menu]="hide" [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="6" [nzXl]="5" [nzXXl]="4" class="main-menu">
<ul nz-menu [nzMode]="'inline'" class="aside-container menu-site" nzInlineIndent="40">
<li *ngFor="let intro of routerList.intro" nz-menu-item routerLinkActive="ant-menu-item-selected" [hidden]="intro.language!=language">
<a routerLink="{{intro.path}}">{{intro.label}}</a>
</li>
<li nz-submenu nzOpen routerLinkActive="ant-menu-submenu-selected">
<span title><h4>Components</h4></span>
<ul>
<li nz-menu-group *ngFor="let group of routerList.components">
<span title>{{group.name}}</span>
<ul>
<li nz-menu-item routerLinkActive="ant-menu-item-selected" *ngFor="let component of group.children" [hidden]="component.language!=language">
<a routerLink="{{component.path}}">
<span>{{component.label}}</span><span class="chinese">{{component.zh}}</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<div nz-col *ngIf="!showDrawer" [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="6" [nzXl]="5" [nzXXl]="4" class="main-menu">
<nz-affix [nzOffsetTop]="0">
<section class="main-menu-inner">
<ng-template [ngTemplateOutlet]="sideOrDrawerTpl"></ng-template>
</section>
</nz-affix>
</div>
<div nz-col class="main-container main-container-component" [nzXs]="24" [nzSm]="24" [nzMd]="24" [nzLg]="18" [nzXl]="19" [nzXXl]="20">
<router-outlet></router-outlet>
Expand All @@ -66,93 +61,133 @@
<div nz-row>
<div nz-col [nzXs]="{span:24}" [nzSm]="{span:24}" [nzMd]="{span:24}" [nzLg]="{span:18,offset:6}" [nzXl]="{span:19,offset:5}" [nzXXl]="{span:20,offset:4}">
<nz-nav-bottom></nz-nav-bottom>
</div>
</div>
</div>
<footer id="footer" class="dark">
<div class="footer-wrap">
<div nz-row>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="6">
<div class="footer-center">
<h2>Ant Design</h2>
<div>
<a target="_blank " href="https://github.com/NG-ZORRO/ng-zorro-antd"><span>GitHub</span></a>
<span> - </span><span><i nz-icon type="github"></i></span>
</div>
<div>
<a href="https://ant.design/docs/react/introduce-cn" target="_blank">Ant Design</a>
<span> - </span><span>React</span>
</div>
<div>
<a href="http://ng.mobile.ant.design" target="_blank">NG-ZORRO-MOBILE</a>
<span> - </span><span>Angular</span>
</div>
<div>
<a target="_blank " href="https://github.com/websemantics/awesome-ant-design">
<span>Awesome Ant Design</span></a>
</div>
</div>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="6">
<div class="footer-center">
<h2>{{language==='zh'?'资源链接':'Resources'}}</h2>
<div>
<a href="https://angular.cn" target="_blank">Angular</a>
</div>
<div>
<a href="https://cli.angular.io/" target="_blank">Angular CLI</a>
</div>
<div>
<a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/">AntD Library</a>
</div>
</div>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="6">
<div class="footer-center">
<h2>{{language==='zh'?'社区':'Community'}}</h2>
<div>
<a *ngIf="language==='zh'" href="https://zhuanlan.zhihu.com/100000" target="_blank"><span>知乎专栏</span></a>
</div>
<div>
<a href="https://medium.com/ng-zorro" target="_blank"><span>Medium</span></a>
</div>
<div>
<a href="https://github.com/NG-ZORRO/ng-zorro-antd/releases" target="_blank"><span>{{language==='zh'?'更新记录':'Change Log'}}</span></a>
</div>
<div>
<a target="_blank" rel="noopener noreferrer" [href]="'http://ng.ant.design/issue-helper/#/'+language">
<span>{{language==='zh'?'报告 Bug':'Bug Report'}}</span>
</a>
</div>
</div>
<footer id="footer" class="dark">
<div class="footer-wrap">
<div nz-row>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="6">
<div class="footer-center">
<h2>Ant Design</h2>
<div>
<a target="_blank " href="https://github.com/NG-ZORRO/ng-zorro-antd"><span>GitHub</span></a>
<span> - </span><span><i nz-icon type="github"></i></span>
</div>
<div>
<a href="https://ant.design/docs/react/introduce-cn" target="_blank">Ant Design</a>
<span> - </span><span>React</span>
</div>
<div>
<a href="http://ng.mobile.ant.design" target="_blank">NG-ZORRO-MOBILE</a>
<span> - </span><span>Angular</span>
</div>
<div>
<a target="_blank " href="https://github.com/websemantics/awesome-ant-design">
<span>Awesome Ant Design</span></a>
</div>
</div>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="6">
<div class="footer-center">
<h2>{{language==='zh'?'资源链接':'Resources'}}</h2>
<div>
<a href="https://angular.cn" target="_blank">Angular</a>
</div>
<div>
<a href="https://cli.angular.io/" target="_blank">Angular CLI</a>
</div>
<div>
<a target="_blank" rel="noopener noreferrer" href="http://library.ant.design/">AntD Library</a>
</div>
</div>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="6">
<div class="footer-center">
<h2>{{language==='zh'?'社区':'Community'}}</h2>
<div>
<a *ngIf="language==='zh'" href="https://zhuanlan.zhihu.com/100000" target="_blank"><span>知乎专栏</span></a>
</div>
<div>
<a href="https://medium.com/ng-zorro" target="_blank"><span>Medium</span></a>
</div>
<div>
<a href="https://github.com/NG-ZORRO/ng-zorro-antd/releases" target="_blank"><span>{{language==='zh'?'更新记录':'Change Log'}}</span></a>
</div>
<div>
<a target="_blank" rel="noopener noreferrer" [href]="'http://ng.ant.design/issue-helper/#/'+language">
<span>{{language==='zh'?'报告 Bug':'Bug Report'}}</span>
</a>
</div>
</div>

</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="6">
<div class="footer-center">
<h2>
<img class="title-icon" src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg" alt="">
<span>{{language==='zh'?'更多产品':'More Products'}}</span>
</h2>
<div>
<a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/">AntV</a>
<span> - </span><span>{{language==='zh'?'数据可视化':'Data Visualization'}}</span></div>
<div>
<a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/">Egg</a>
<span> - </span><span>{{language==='zh'?'企业级 Node 开发框架':'Enterprise Node Framework'}}</span>
</div>
<div style="margin-top: 20px;">
<nz-popover [nzTrigger]="'click'" nzOverlayClassName="theme-color-content">
<div class="theme-color" nz-popover>
<div class="theme-color-value" [ngStyle]="{'background': color}"></div>
</div>
<div nz-col [nzXs]="24" [nzSm]="24" [nzMd]="6">
<div class="footer-center">
<h2>
<img class="title-icon" src="https://gw.alipayobjects.com/zos/rmsportal/nBVXkrFdWHxbZlmMbsaH.svg" alt="">
<span>{{language==='zh'?'更多产品':'More Products'}}</span>
</h2>
<div>
<a target="_blank" rel="noopener noreferrer" href="https://antv.alipay.com/">AntV</a>
<span> - </span><span>{{language==='zh'?'数据可视化':'Data Visualization'}}</span></div>
<div>
<a target="_blank" rel="noopener noreferrer" href="https://eggjs.org/">Egg</a>
<span> - </span><span>{{language==='zh'?'企业级 Node 开发框架':'Enterprise Node Framework'}}</span>
</div>
<div style="margin-top: 20px;">
<nz-popover [nzTrigger]="'click'" nzOverlayClassName="theme-color-content">
<div class="theme-color" nz-popover>
<div class="theme-color-value" [ngStyle]="{'background': color}"></div>
</div>
<ng-template #nzTemplate>
<color-sketch [color]="color" (onChangeComplete)="changeColor($event)"></color-sketch>
</ng-template>
</nz-popover>
</div>
</div>
<ng-template #nzTemplate>
<color-sketch [color]="color" (onChangeComplete)="changeColor($event)"></color-sketch>
</ng-template>
</nz-popover>
</div>
</div>
</div>
</div>
<div class="bottom-bar">
Made with <span class="heart">❤</span> by NG-ZORRO team
</div>
</footer>
</div>
</div>
</footer>
</div>
</div>

<div class="drawer-wrapper" *ngIf="showDrawer">
<div class="drawer drawer-left" [class.drawer-open]="isDrawerOpen">
<div class="drawer-mask" (click)="isDrawerOpen = false"></div>
<div class="drawer-content-wrapper" [style.transform]="isDrawerOpen ? null : 'translateX(-100%)'">
<div class="drawer-content">
<ng-container [ngTemplateOutlet]="sideOrDrawerTpl"></ng-container>
</div>
<div class="drawer-handle" (click)="isDrawerOpen = !isDrawerOpen">
<i class="drawer-handle-icon"></i>
</div>
</div>
</div>
</div>

<ng-template #sideOrDrawerTpl>
<ul nz-menu [nzMode]="'inline'" class="aside-container menu-site" nzInlineIndent="40">
<li *ngFor="let intro of routerList.intro" nz-menu-item routerLinkActive="ant-menu-item-selected" [hidden]="intro.language!=language">
<a routerLink="{{intro.path}}">{{intro.label}}</a>
</li>
<li nz-submenu nzOpen routerLinkActive="ant-menu-submenu-selected">
<span title><h4>Components</h4></span>
<ul>
<li nz-menu-group *ngFor="let group of routerList.components">
<span title>{{group.name}}</span>
<ul>
<li nz-menu-item routerLinkActive="ant-menu-item-selected" *ngFor="let component of group.children" [hidden]="component.language!=language">
<a routerLink="{{component.path}}">
<span>{{component.label}}</span><span class="chinese">{{component.zh}}</span>
</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</ng-template>
42 changes: 36 additions & 6 deletions scripts/site/_site/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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;
Expand All @@ -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) {
Expand Down Expand Up @@ -103,6 +117,8 @@ export class AppComponent implements OnInit, AfterViewInit {
if (this.useDocsearch) {
this.initDocsearch();
}

this.addWindowWidthListener();
}

initDocsearch() {
Expand Down Expand Up @@ -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;
}
});
});
}
}
4 changes: 2 additions & 2 deletions scripts/site/_site/src/app/app.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 ];

Expand Down
Loading

0 comments on commit c3ee8ff

Please sign in to comment.