Skip to content
This repository was archived by the owner on Oct 1, 2018. It is now read-only.

docs(toolbar): made it responsive #306

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

docs(toolbar): made it responsive #306

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
9f0acf9
docs(toolbar): made it responsive
Mar 30, 2018
a7a87e0
Merge branch 'master' into addinglogo
niklas-wortmann Apr 20, 2018
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
10 changes: 10 additions & 0 deletions e2e/app.e2e-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { AppPage } from './app.po';
import { browser } from 'protractor';

describe('rxjs-docs App', () => {
let page: AppPage;
Expand All @@ -11,4 +12,13 @@ describe('rxjs-docs App', () => {
page.navigateTo();
expect(page.getPageTitle()).toEqual('RxJS Docs');
});

it('should not display title if the window is mobile', () => {
browser
.manage()
.window()
.setSize(320, 480);
page.navigateTo();
expect(page.getPageTitleReference().isDisplayed()).toBeFalsy();
});
});
4 changes: 4 additions & 0 deletions e2e/app.po.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,4 +8,8 @@ export class AppPage {
getPageTitle() {
return element(by.css('span.title')).getText();
}

getPageTitleReference() {
return element(by.css('span.title'));
}
}
59 changes: 33 additions & 26 deletions src/app/core/components/toolbar/toolbar.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,37 @@
<mat-toolbar color="accent" class="mat-elevation-z6">
<button mat-icon-button (click)="navOpen()" aria-label="menu" value="menu">
<mat-icon>
menu
</mat-icon>
</button>
<a routerLink="/" aria-label="ReactiveX" class="mat-button" aria-disabled="false">
<span class="mat-button-wrapper">
<mat-toolbar color="accent" class="mat-elevation-z6" fxLayout="row" fxLayoutAlign="space-between center">
<div>
<button mat-icon-button (click)="navOpen()" aria-label="menu" value="menu" fxFlex="10">
<mat-icon>
menu
</mat-icon>
</button>
<a routerLink="/" aria-label="ReactiveX" class="mat-button" aria-disabled="false" fxFlex="10">
<span class="mat-button-wrapper">
<img src="assets/img/Rx_Trnsprt_Logo-48-48.png" alt="RxJS Docs Home">
</span>
</a>
<span class="title" fxFlex>
RxJS Docs
</span>
</a>
</div>

<span class="title" fxHide fxShow.gt-sm>
RxJS Docs
</span>

<span class="title" fxFlex> WARNING: This is BETA site </span>
<button mat-icon-button [matMenuTriggerFor]="appMenu">
<mat-icon>language</mat-icon>
</button>
<mat-menu #appMenu="matMenu" [overlapTrigger]="false" xPosition="before">
<button mat-menu-item *ngFor="let language of languagesList" (click)="onLangSwitch(language)">
{{language.nativeName}}
<span class="title" fxHide fxShow.gt-sm> WARNING: This is BETA site </span>

<div>
<button mat-icon-button [matMenuTriggerFor]="appMenu">
<mat-icon>language</mat-icon>
</button>
</mat-menu>
<a aria-label="GitHub Repository" target="_blank" class="mat-button" href="https://github.com/ReactiveX" aria-disabled="false">
<span class="mat-button-wrapper">
<img src="assets/img/GitHub-Mark-Light-64px.png" alt="ReactiveX GitHub Repository"> GitHub
</span>
</a>
</mat-toolbar>
<mat-menu #appMenu="matMenu" [overlapTrigger]="false" xPosition="before">
<button mat-menu-item *ngFor="let language of languagesList" (click)="onLangSwitch(language)">
{{language.nativeName}}
</button>
</mat-menu>
<a aria-label="GitHub Repository" target="_blank" class="mat-button" href="https://github.com/ReactiveX" aria-disabled="false">
<span class="mat-button-wrapper">
<img src="assets/img/GitHub-Mark-Light-64px.png" alt="ReactiveX GitHub Repository"> GitHub
</span>
</a>
</div>

</mat-toolbar>