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 @@ -

Api reference

-
- - -
    -
  • - {{method.summary}} -
    • -
- +
+ API Reference: + + {{activeCatCaption}} + {{activeItemCaption}} + +
+
+

API reference

+
+ + +
    +
  • + {{method.summary}} +
    • +
+ +
diff --git a/lib/components/SideMenu/side-menu.js b/lib/components/SideMenu/side-menu.js index 3280e6ee..614b70bc 100644 --- a/lib/components/SideMenu/side-menu.js +++ b/lib/components/SideMenu/side-menu.js @@ -3,7 +3,7 @@ import {RedocComponent, BaseComponent} from '../base'; import {redocEvents} from '../../events'; -import {NgZone, ChangeDetectionStrategy} from 'angular2/core'; +import {NgZone, ChangeDetectionStrategy, ElementRef} from 'angular2/core'; import {document} from 'angular2/src/facade/browser'; import {BrowserDomAdapter} from 'angular2/platform/browser'; import {global} from 'angular2/src/facade/lang'; @@ -27,13 +27,15 @@ const INVIEW_POSITION = { changeDetection: ChangeDetectionStrategy.Default }) export default class SideMenu extends BaseComponent { - constructor(schemaMgr, adapter, zone, redoc) { + constructor(schemaMgr, elementRef, adapter, zone, redoc) { super(schemaMgr); this.zone = zone; this.adapter = adapter; this.redoc = redoc; this.scrollParent = this.redoc.scrollParent; + this.mobileNav = adapter.querySelector(elementRef.nativeElement, '.mobile-nav'); + this.resourcesNav = adapter.querySelector(elementRef.nativeElement, '#resources-nav'); // for some reason constructor is not run inside zone // as workaround running it manually @@ -45,6 +47,9 @@ export default class SideMenu extends BaseComponent { this.prevOffsetY = null; redocEvents.bootstrapped.subscribe(() => this.hashScroll()); + + this.activeCatCaption = ''; + this.activeItemCaption = ''; } scrollY() { @@ -65,7 +70,12 @@ export default class SideMenu extends BaseComponent { bindEvents() { this.prevOffsetY = this.scrollY(); - this.scrollYOffset = this.redoc.options.scrollYOffset; + + //decorate option.scrollYOffset to account mobile nav + this.scrollYOffset = () => { + let mobileNavOffset = this.mobileNav.clientHeight; + return this.redoc.options.scrollYOffset() + mobileNavOffset; + }; this._cancel = {}; this._cancel.scroll = this.adapter.onAndCancel(this.scrollParent, 'scroll', () => { this.scrollHandler(); }); this._cancel.hash = this.adapter.onAndCancel(global, 'hashchange', evt => this.hashScroll(evt)); @@ -77,6 +87,9 @@ export default class SideMenu extends BaseComponent { } activateAndScroll(idx, methodIdx) { + if (this.mobileMode()) { + this.toggleMobileNav(); + } this.activate(idx, methodIdx); this.scrollToActive(); } @@ -98,6 +111,10 @@ export default class SideMenu extends BaseComponent { activate(catIdx, methodIdx) { let menu = this.data.menu; + + this.activeCatCaption = ''; + this.activeItemCaption = ''; + menu[this.activeCatIdx].active = false; if (menu[this.activeCatIdx].methods.length) { if (this.activeMethodIdx >= 0) { @@ -108,11 +125,13 @@ export default class SideMenu extends BaseComponent { this.activeCatIdx = catIdx; this.activeMethodIdx = methodIdx; menu[catIdx].active = true; + this.activeCatCaption = menu[catIdx].name; this.activeMethodPtr = null; if (menu[catIdx].methods.length && (methodIdx > -1)) { let currentItem = menu[catIdx].methods[methodIdx]; currentItem.active = true; this.activeMethodPtr = currentItem.pointer; + this.activeItemCaption = currentItem.summary; } } @@ -199,8 +218,26 @@ export default class SideMenu extends BaseComponent { ); } + mobileMode() { + return this.mobileNav.clientHeight > 0; + } + + toggleMobileNav() { + let dom = this.adapter; + let overflowParent = (this.scrollParent === global) ? dom.defaultDoc().body : this.scrollParent; + if (dom.hasStyle(this.resourcesNav, 'height')) { + dom.removeStyle(this.resourcesNav, 'height'); + dom.removeStyle(overflowParent, 'overflow-y'); + } else { + let viewportHeight = this.scrollParent.innerHeight || this.scrollParent.clientHeight; + let height = viewportHeight - this.mobileNav.getBoundingClientRect().bottom; + dom.setStyle(overflowParent, 'overflow-y', 'hidden'); + dom.setStyle(this.resourcesNav, 'height', height + 'px'); + } + } + init() { this.changeActive(CHANGE.INITIAL); } } -SideMenu.parameters = SideMenu.parameters.concat([[BrowserDomAdapter], [NgZone]]); +SideMenu.parameters = SideMenu.parameters.concat([[ElementRef], [BrowserDomAdapter], [NgZone]]); diff --git a/lib/components/SideMenu/side-menu.scss b/lib/components/SideMenu/side-menu.scss index bd26674a..4bbd83d2 100644 --- a/lib/components/SideMenu/side-menu.scss +++ b/lib/components/SideMenu/side-menu.scss @@ -1,4 +1,5 @@ @import '../../common/styles/variables'; +$mobile-menu-compact-breakpoint: 550px; .menu-header { text-transform: uppercase; @@ -24,6 +25,11 @@ background-color: $side-menu-even-bg-color; } +.menu-cat .menu-cat-header.active { + background-color: $side-menu-active-bg-color; + font-weight: bold; +} + .menu-subitems { margin: 0; padding: 0; @@ -61,7 +67,90 @@ } } -.menu-cat-header.active, .menu-subitems li.active { - background-color: $side-menu-active-bg-color !important; - font-weight: bold; +.menu-cat .menu-subitems { + li.active, li.active:nth-of-type(even) { + background-color: $side-menu-active-bg-color; + font-weight: bold; + } +} + +.mobile-nav { + display: none; + height: 3em; + line-height: 3em; + box-sizing: border-box; + border-bottom: 1px solid #ccc; + cursor: pointer; + + &:after { + content: ""; + display: inline-block; + width: 3em; + height: 3em; + background: url('data:image/svg+xml;utf8,'); + background-size: 70%; + background-repeat: no-repeat; + background-position: center; + + float: right; + vertical-align: middle; + } + + .menu-header { + padding: 0 10px; + font-size: 0.95em; + + @media (max-width: $mobile-menu-compact-breakpoint) { + display: none; + } + } +} + +@media (max-width: $side-menu-mobile-breakpoint) { + .mobile-nav { + display: block; + } + + #resources-nav { + height: 0; + overflow-y: auto; + transition: all 0.3s ease; + } + + #resources-nav .menu-header { + display: none; + } + + .menu-subitems { + height: auto; + } +} + +.selected-tag { + text-transform: capitalize; +} + +.selected-endpoint:before { + content: "/"; + padding: 0 2px; + color: #ccc; +} + +.selected-endpoint:empty:before { + display: none; +} + +.selected-item-info { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + box-sizing: border-box; + max-width: 350px; + + @media (max-width: $mobile-menu-compact-breakpoint) { + display: inline-block; + padding: 0 10px; + max-width: 80%; + max-width: calc(100% - 4em); + } }