Redocly/redoc
1
1
Fork 0
mirror of https://github.com/Redocly/redoc.git synced 2025-11-04 01:37:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Move sidemenu into sidebar

Browse Source
This commit is contained in:
Roman Hotsiy 2015-12-20 22:19:56 +02:00
parent f5394eec94
commit 7795ef5b15
5 changed files with 18 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
lib/common/styles/_variables.scss
View File

@ -1,13 +1,14 @@
$headers-color: #00329F; $headers-color: #00329F;
$method-headers-color: #253137; $method-headers-color: #253137;
$side-bar-width: 260px;
$side-bar-bg-color: #FAFAFA;
$side-menu-item-color: #384248; $side-menu-item-color: #384248;
$side-menu-bg-color: #FAFAFA;
$side-menu-even-bg-color: #F0F0F0; $side-menu-even-bg-color: #F0F0F0;
$side-menu-active-bg-color: #E6E6E6; $side-menu-active-bg-color: #E6E6E6;
$side-menu-item-hpadding: 20px; $side-menu-item-hpadding: 20px;
$side-menu-item-vpadding: 5px; $side-menu-item-vpadding: 5px;
$side-menu-width: 260px;
$samples-panel-bg-color: #263238; $samples-panel-bg-color: #263238;
$samples-panel-width: 40%; $samples-panel-width: 40%;

2
lib/components/Redoc/redoc.html
View File

@ -1,4 +1,6 @@
<div class="side-bar">
<side-menu> </side-menu> <side-menu> </side-menu>
</div>
<div class="api-content"> <div class="api-content">
<api-info> </api-info> <api-info> </api-info>
<methods-list> </methods-list> <methods-list> </methods-list>

10
lib/components/Redoc/redoc.scss
View File

@ -5,7 +5,7 @@ side-menu {
box-sizing: border-box; box-sizing: border-box;
} }
api-info, side-menu { api-info, .side-bar {
display: block; display: block;
padding: 10px 0; padding: 10px 0;
} }
@ -14,15 +14,15 @@ api-info {
padding: 10px 20px; padding: 10px 20px;
} }
side-menu { .side-bar {
position: fixed; position: fixed;
width: $side-menu-width; width: $side-bar-width;
height: 100%; height: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden;; overflow-x: hidden;;
background-color: $side-menu-bg-color; background-color: $side-bar-bg-color;
} }
.api-content { .api-content {
margin-left: $side-menu-width; margin-left: $side-bar-width;
} }

2
lib/components/SideMenu/side-menu.js
View File

@ -32,7 +32,7 @@ export default class SideMenu extends BaseComponent {
this.zone = zone; this.zone = zone;
this.adapter = new BrowserDomAdapter(); this.adapter = new BrowserDomAdapter();
this.scrollParent = detectScollParent(document.querySelector('side-menu')); this.scrollParent = detectScollParent(document.querySelector('methods-list'));
// for some reason constructor is not run inside zone // for some reason constructor is not run inside zone
// as workaround running it manually // as workaround running it manually

10
lib/components/SideMenu/side-menu.scss
View File

@ -4,15 +4,17 @@
text-transform: uppercase; text-transform: uppercase;
color: $headers-color; color: $headers-color;
padding: 0 $side-menu-item-hpadding; padding: 0 $side-menu-item-hpadding;
margin: 10px 0;
font-size: 16px;
} }
.menu-cat-header { .menu-cat-header {
font-weight: bold; //font-weight: bold;
font-size: 15px; font-size: 15px;
cursor: pointer; cursor: pointer;
color: $side-menu-item-color; color: $side-menu-item-color;
text-transform: uppercase; text-transform: uppercase;
background-color: $side-menu-bg-color; background-color: $side-bar-bg-color;
display: block; display: block;
padding: $side-menu-item-vpadding $side-menu-item-hpadding; padding: $side-menu-item-vpadding $side-menu-item-hpadding;
@ -39,7 +41,7 @@
padding: $side-menu-item-vpadding $side-menu-item-hpadding; padding: $side-menu-item-vpadding $side-menu-item-hpadding;
padding-left: $side-menu-item-hpadding*2; padding-left: $side-menu-item-hpadding*2;
background-color: $side-menu-bg-color; background-color: $side-bar-bg-color;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@ -55,7 +57,7 @@
} }
.menu-subitems li:nth-of-type(even) { .menu-subitems li:nth-of-type(even) {
background-color: $side-menu-bg-color; background-color: $side-bar-bg-color;
} }
} }