Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: optimize mobile experience #2789

Merged
merged 2 commits into from
Feb 12, 2019
Merged

docs: optimize mobile experience #2789

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
90bd66b
docs: optimize mobile experience
Jan 16, 2019
5fc29b2
docs: make left scroll independently
Jan 22, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
247 changes: 141 additions & 106 deletions scripts/site/_site/src/app/app.component.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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