mirror of
https://github.com/Redocly/redoc.git
synced 2024-11-25 10:03:45 +03:00
Responsive sidemenu
This commit is contained in:
Roman Hotsiy
parent
ccac2ee15c
commit
825bf111f8
|
|
@ -3,6 +3,7 @@
|
|||
<head>
|
||||
<title>ReDoc</title>
|
||||
<link rel="stylesheet" href="main.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
<body>
|
||||
<nav>
|
||||
|
|
@ -10,7 +11,6 @@
|
|||
<input id="schema-url-input" value='swagger.json'>
|
||||
<button id="load-button"> Explore </button>
|
||||
</nav>
|
||||
</nav>
|
||||
|
||||
<redoc scroll-y-offset="body > nav" spec-url='swagger.json'>
|
||||
Loading...
|
||||
|
|
|
|||
|
|
@ -16,3 +16,5 @@ $sample-panel-headers-color: #8A9094;
|
|||
$sample-panel-color: #CFD2D3;
|
||||
|
||||
$tree-lines-color: #7D97CE;
|
||||
|
||||
$side-menu-mobile-breakpoint: 1000px;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<div class="redoc-wrap">
|
||||
<div sticky-sidebar [scrollParent]="scrollParent" [scrollYOffset]="options.scrollYOffset">
|
||||
<api-logo> </api-logo>
|
||||
<side-menu> </side-menu>
|
||||
<div class="menu-content" sticky-sidebar [scrollParent]="scrollParent" [scrollYOffset]="options.scrollYOffset">
|
||||
<api-logo> </api-logo>
|
||||
<side-menu> </side-menu>
|
||||
</div>
|
||||
<div id="api-content">
|
||||
<api-info> </api-info>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,22 @@
|
|||
<h2 class="menu-header"> Api reference </h2>
|
||||
<div *ngFor="var cat of data.menu; #idx = index" class="menu-cat">
|
||||
|
||||
<label class="menu-cat-header" (click)="activateAndScroll(idx, -1)" [ngClass]="{active: cat.active}"> {{cat.name}}</label>
|
||||
<ul class="menu-subitems" [ngClass]="{active: cat.active}">
|
||||
<li *ngFor="var method of cat.methods; var methIdx = index"
|
||||
[ngClass]="{active: method.active}"
|
||||
(click)="activateAndScroll(idx, methIdx)">
|
||||
{{method.summary}}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="mobile-nav" (click)="toggleMobileNav()">
|
||||
<span class="menu-header"> API Reference: </span>
|
||||
<span class="selected-item-info">
|
||||
<span class="selected-tag"> {{activeCatCaption}} </span>
|
||||
<span class="selected-endpoint">{{activeItemCaption}}</span>
|
||||
</span>
|
||||
</div>
|
||||
<div id="resources-nav">
|
||||
<h2 class="menu-header"> API reference </h2>
|
||||
<div *ngFor="var cat of data.menu; #idx = index" class="menu-cat">
|
||||
|
||||
<label class="menu-cat-header" (click)="activateAndScroll(idx, -1)" [ngClass]="{active: cat.active}"> {{cat.name}}</label>
|
||||
<ul class="menu-subitems" [ngClass]="{active: cat.active}">
|
||||
<li *ngFor="var method of cat.methods; var methIdx = index"
|
||||
[ngClass]="{active: method.active}"
|
||||
(click)="activateAndScroll(idx, methIdx)">
|
||||
{{method.summary}}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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]]);
|
||||
|
|
|
|||
|
|
@ -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,<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 100 100" version="1.1" viewBox="0 0 100 100" xml:space="preserve"><polygon fill="#010101" points="23.1 34.1 51.5 61.7 80 34.1 81.5 35 51.5 64.1 21.5 35 23.1 34.1 "/></svg>');
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user