From ccac2ee15c47fe9e8d521ec82f6d470e449d7875 Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Thu, 21 Jan 2016 00:09:42 +0200 Subject: [PATCH 01/27] refactor sticky-sidebar as directive --- .../StickySidebar/sticky-sidebar.js | 36 ++++++++----------- .../StickySidebar/sticky-sidebar.spec.js | 8 ++--- lib/components/Redoc/redoc.html | 4 +-- lib/components/Redoc/redoc.scss | 2 +- tests/helpers.js | 7 ++++ 5 files changed, 28 insertions(+), 29 deletions(-) diff --git a/lib/common/components/StickySidebar/sticky-sidebar.js b/lib/common/components/StickySidebar/sticky-sidebar.js index 345d1d8e..c0f2cd1b 100644 --- a/lib/common/components/StickySidebar/sticky-sidebar.js +++ b/lib/common/components/StickySidebar/sticky-sidebar.js @@ -1,34 +1,26 @@ 'use strict'; -import {Component, View, OnInit, OnDestroy, ElementRef} from 'angular2/core'; +import {Directive, ElementRef} from 'angular2/core'; import {BrowserDomAdapter} from 'angular2/platform/browser'; -@Component({ - selector: 'sticky-sidebar', +@Directive({ + selector: '[sticky-sidebar]', inputs: ['scrollParent', 'scrollYOffset'] }) -@View({ - template: ` - - `, - lifecycle: [OnInit, OnDestroy] -}) export default class StickySidebar { - constructor(elementRef, adapter) { + constructor(elementRef, dom) { this.element = elementRef.nativeElement; - this.adapter = adapter; + this.dom = dom; // initial styling - this.adapter.setStyle(this.element, 'position', 'absolute'); - this.adapter.setStyle(this.element, 'top', '0'); - this.adapter.setStyle(this.element, 'bottom', '0'); - this.adapter.setStyle(this.element, 'max-height', '100%'); + this.dom.setStyle(this.element, 'position', 'absolute'); + this.dom.setStyle(this.element, 'top', '0'); + this.dom.setStyle(this.element, 'bottom', '0'); + this.dom.setStyle(this.element, 'max-height', '100%'); } bind() { - this.cancelScrollBinding = this.adapter.onAndCancel(this.scrollParent, 'scroll', () => { this.updatePosition(); }); + this.cancelScrollBinding = this.dom.onAndCancel(this.scrollParent, 'scroll', () => { this.updatePosition(); }); this.updatePosition(); } @@ -45,13 +37,13 @@ export default class StickySidebar { } stick() { - this.adapter.setStyle(this.element, 'position', 'fixed'); - this.adapter.setStyle(this.element, 'top', this.scrollYOffset() + 'px'); + this.dom.setStyle(this.element, 'position', 'fixed'); + this.dom.setStyle(this.element, 'top', this.scrollYOffset() + 'px'); } unstick() { - this.adapter.setStyle(this.element, 'position', 'absolute'); - this.adapter.setStyle(this.element, 'top', 0); + this.dom.setStyle(this.element, 'position', 'absolute'); + this.dom.setStyle(this.element, 'top', 0); } get scrollY() { diff --git a/lib/common/components/StickySidebar/sticky-sidebar.spec.js b/lib/common/components/StickySidebar/sticky-sidebar.spec.js index 96bc5b3a..d77ea9eb 100644 --- a/lib/common/components/StickySidebar/sticky-sidebar.spec.js +++ b/lib/common/components/StickySidebar/sticky-sidebar.spec.js @@ -1,6 +1,6 @@ 'use strict'; -import { getChildDebugElement } from 'tests/helpers'; +import { getChildDebugElementByType } from 'tests/helpers'; import {Component, View, provide} from 'angular2/core'; import {BrowserDomAdapter} from 'angular2/platform/browser'; @@ -29,7 +29,7 @@ describe('Common components', () => { beforeEach((done) => { builder.createAsync(TestApp).then(_fixture => { fixture = _fixture; - let debugEl = getChildDebugElement(fixture.debugElement, 'sticky-sidebar'); + let debugEl = getChildDebugElementByType(fixture.debugElement, StickySidebar); component = debugEl.componentInstance; done(); }, err => done.fail(err)); @@ -67,8 +67,8 @@ describe('Common components', () => { `
- - +
+
` diff --git a/lib/components/Redoc/redoc.html b/lib/components/Redoc/redoc.html index 504d783e..3bb99055 100644 --- a/lib/components/Redoc/redoc.html +++ b/lib/components/Redoc/redoc.html @@ -1,8 +1,8 @@
- +
- +
diff --git a/lib/components/Redoc/redoc.scss b/lib/components/Redoc/redoc.scss index b62d179b..c02efc8f 100644 --- a/lib/components/Redoc/redoc.scss +++ b/lib/components/Redoc/redoc.scss @@ -51,7 +51,7 @@ api-logo { text-align: center; } -sticky-sidebar { +[sticky-sidebar] { width: $side-bar-width; overflow-y: auto; overflow-x: hidden; diff --git a/tests/helpers.js b/tests/helpers.js index ce7d6c97..3ce7c4ca 100644 --- a/tests/helpers.js +++ b/tests/helpers.js @@ -10,6 +10,13 @@ export function getChildDebugElement(parent, tagName) { }); } +/** Gets a child DebugElement by Component Type. */ +export function getChildDebugElementByType(parent, type) { + return parent.query(debugEl => { + return debugEl.componentInstance instanceof type; + }); +} + /** Gets a child DebugElements by tag name. */ export function getChildDebugElementAll(parent, tagName) { return parent.queryAll(debugEl => { From 825bf111f83d843c118aac46515a1cb9bc97b90c Mon Sep 17 00:00:00 2001 From: Roman Hotsiy Date: Thu, 21 Jan 2016 17:26:54 +0200 Subject: [PATCH 02/27] Responsive sidemenu --- demo/index.html | 2 +- lib/common/styles/_variables.scss | 2 + lib/components/Redoc/redoc.html | 6 +- lib/components/Redoc/redoc.scss | 33 ++++++++- lib/components/SideMenu/side-menu.html | 33 +++++---- lib/components/SideMenu/side-menu.js | 45 ++++++++++-- lib/components/SideMenu/side-menu.scss | 95 +++++++++++++++++++++++++- 7 files changed, 192 insertions(+), 24 deletions(-) diff --git a/demo/index.html b/demo/index.html index 89d6f4d2..0c59f6ef 100644 --- a/demo/index.html +++ b/demo/index.html @@ -3,6 +3,7 @@ ReDoc + - Loading... diff --git a/lib/common/styles/_variables.scss b/lib/common/styles/_variables.scss index ad0bba63..6dcd0496 100644 --- a/lib/common/styles/_variables.scss +++ b/lib/common/styles/_variables.scss @@ -16,3 +16,5 @@ $sample-panel-headers-color: #8A9094; $sample-panel-color: #CFD2D3; $tree-lines-color: #7D97CE; + +$side-menu-mobile-breakpoint: 1000px; diff --git a/lib/components/Redoc/redoc.html b/lib/components/Redoc/redoc.html index 3bb99055..c72f5d40 100644 --- a/lib/components/Redoc/redoc.html +++ b/lib/components/Redoc/redoc.html @@ -1,7 +1,7 @@
-
- - +
diff --git a/lib/components/Redoc/redoc.scss b/lib/components/Redoc/redoc.scss index c02efc8f..29e638d6 100644 --- a/lib/components/Redoc/redoc.scss +++ b/lib/components/Redoc/redoc.scss @@ -49,17 +49,48 @@ api-info { api-logo { display: block; text-align: center; + + @media (max-width: $side-menu-mobile-breakpoint) { + display: none; + } } [sticky-sidebar] { width: $side-bar-width; + background-color: $side-bar-bg-color; overflow-y: auto; overflow-x: hidden; - background-color: $side-bar-bg-color; + + @media (max-width: $side-menu-mobile-breakpoint) { + z-index: 1; + width: 100%; + bottom: auto !important; + } } #api-content { margin-left: $side-bar-width; + @media (max-width: $side-menu-mobile-breakpoint) { + padding-top: 3em; + margin-left: 0; + } +} + +#api-content:after { + content: ""; + position: absolute;; + left:0; + right: 0; + top: 0; + bottom: 0; + background-color: black; + opacity: 0.5; + transition: all 0.3s ease; + display: none; +} + +#api-content.menu-opened:after { + display: block;; } footer { diff --git a/lib/components/SideMenu/side-menu.html b/lib/components/SideMenu/side-menu.html index 53d125c1..754cde31 100644 --- a/lib/components/SideMenu/side-menu.html +++ b/lib/components/SideMenu/side-menu.html @@ -1,13 +1,22 @@ - -