Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 0b6ba9c

Browse files
matskomatsko
committed
chore(docs): make the layout fully responsive
Closes #6308
1 parent cc1f753 commit 0b6ba9c

File tree

2 files changed

+171
-58
lines changed

2 files changed

+171
-58
lines changed

‎docs/app/assets/css/docs.css

Lines changed: 110 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -60,11 +60,10 @@ h1,h2,h3,h4,h5,h6 {
6060
}
6161

6262
.docs-search {
63-
margin:10px;
63+
margin:10px 0;
6464
padding:4px 0 4px 20px;
6565
background:white;
6666
border-radius:20px;
67-
display:table-cell;
6867
vertical-align:middle;
6968
}
7069

@@ -403,6 +402,14 @@ iframe.example {
403402
float:left;
404403
}
405404

405+
.main-body-grid .side-navigation {
406+
position:relative;
407+
}
408+
409+
.main-body-grid .side-navigation.ng-hide {
410+
display:block!important;
411+
}
412+
406413
.variables-matrix td {
407414
vertical-align:top;
408415
padding:5px;
@@ -551,3 +558,104 @@ ul.methods > li,
551558
ul.events > li {
552559
margin-bottom:40px;
553560
}
561+
562+
@media only screen and (max-width : 768px) {
563+
.picker, .picker select {
564+
width:auto;
565+
display:block;
566+
margin-bottom:10px;
567+
}
568+
.docs-navbar-primary {
569+
text-align:center;
570+
}
571+
.main-body-grid {
572+
margin-top:0;
573+
}
574+
.main-header-grid > .grid-left,
575+
.main-body-grid > .grid-left,
576+
.main-header-grid > .grid-right,
577+
.main-body-grid > .grid-right {
578+
display:block;
579+
float:none;
580+
width:auto!important;
581+
margin-left:0;
582+
}
583+
.main-body-grid > .grid-left,
584+
.header-fixed, .footer {
585+
position:static!important;
586+
}
587+
.main-body-grid > .grid-left {
588+
background:#efefef;
589+
margin-left:-1em;
590+
margin-right:-1em;
591+
padding:1em;
592+
width:auto!important;
593+
overflow:visible;
594+
}
595+
.main-header-grid > .grid-right,
596+
.main-body-grid > .grid-right {
597+
margin-left:0;
598+
}
599+
.main-body-grid .side-navigation {
600+
display:block!important;
601+
}
602+
.main-body-grid .side-navigation.ng-hide {
603+
display:none!important;
604+
}
605+
.nav-index-group .nav-index-listing {
606+
display:inline-block;
607+
padding:3px 0;
608+
}
609+
.nav-index-group .nav-index-listing:not(.nav-index-section) + .nav-index-listing:not(.nav-index-section):after {
610+
padding-right:5px;
611+
content:", ";
612+
}
613+
.nav-index-group .nav-index-listing:last-child {
614+
content:"";
615+
}
616+
.nav-index-group .nav-index-section {
617+
display:block;
618+
}
619+
.toc-toggle {
620+
margin-bottom:20px;
621+
}
622+
.toc-close {
623+
position: absolute;
624+
bottom: -50px;
625+
left: 50%;
626+
margin-left: -50%;
627+
text-align: center;
628+
padding: 5px;
629+
background: #eee;
630+
border-radius: 5px;
631+
width: 90%;
632+
border:1px solid #ddd;
633+
box-shadow:0 0 10px #bbb;
634+
}
635+
.navbar-brand {
636+
float:none;
637+
text-align:center;
638+
}
639+
.search-results-container {
640+
padding-bottom:60px;
641+
text-align:left;
642+
}
643+
.search-results-group {
644+
float:none!important;
645+
display:block!important;
646+
width:auto!important;
647+
border:0!important;
648+
padding:0!important;
649+
}
650+
.search-results-group .search-result {
651+
display:inline-block!important;
652+
padding:0 5px;
653+
width:auto!important;
654+
}
655+
.search-results-group .search-result:after {
656+
content:", ";
657+
}
658+
#wrapper {
659+
padding-bottom:0px;
660+
}
661+
}

‎docs/config/templates/indexPage.template.html

Lines changed: 61 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<!doctype html>
22
<html lang="en" ng-app="docsApp" ng-controller="DocsController">
33
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
45
<meta charset="utf-8">
56
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
67
<meta name="Description"
@@ -81,62 +82,62 @@
8182
<header class="header header-fixed">
8283
<section class="navbar navbar-inverse docs-navbar-primary" ng-controller="DocsSearchCtrl">
8384
<div class="container">
84-
<div class="navbar-header">
85-
<a class="brand navbar-brand" href="http://angularjs.org">
86-
<img class="logo" src="img/angularjs-for-header-only.svg">
87-
</a>
88-
</div>
8985
<div class="row">
90-
<ul class="nav navbar-nav col-md-7">
91-
<li class="divider-vertical"></li>
92-
<li><a href="http://angularjs.org"><i class="icon-home icon-white"></i> Home</a></li>
93-
<li class="divider-vertical"></li>
94-
<li class="dropdown">
95-
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
96-
<i class="icon-eye-open icon-white"></i> Learn <b class="caret"></b>
97-
</a>
98-
<ul class="dropdown-menu">
99-
<li class="disabled"><a href="http://angularjs.org/">Why AngularJS?</a></li>
100-
<li><a href="http://www.youtube.com/user/angularjs">Watch</a></li>
101-
<li><a href="tutorial">Tutorial</a></li>
102-
<li><a href="http://builtwith.angularjs.org/">Case Studies</a></li>
103-
<li><a href="https://github.com/angular/angular-seed">Seed App project template</a></li>
104-
<li><a href="misc/faq">FAQ</a></li>
105-
</ul>
106-
</li>
107-
<li class="divider-vertical"></li>
108-
<li class="dropdown active">
109-
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
110-
<i class="icon-book icon-white"></i> Develop <b class="caret"></b>
111-
</a>
112-
<ul class="dropdown-menu">
113-
<li><a href="tutorial">Tutorial</a></li>
114-
<li><a href="guide">Developer Guide</a></li>
115-
<li><a href="api">API Reference</a></li>
116-
<li><a href="error">Error Reference</a></li>
117-
<li><a href="misc/contribute">Contribute</a></li>
118-
<li><a href="http://code.angularjs.org/">Download</a></li>
119-
</ul>
120-
</li>
121-
<li class="divider-vertical"></li>
122-
<li class="dropdown">
123-
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
124-
<i class="icon-comment icon-white"></i> Discuss <b class="caret"></b>
125-
</a>
126-
<ul class="dropdown-menu">
127-
<li><a href="http://blog.angularjs.org">Blog</a></li>
128-
<li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
129-
<li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">Chat Room</a></li>
130-
<li class="divider"></li>
131-
<li><a href="https://twitter.com/#!/angularjs">Twitter</a></li>
132-
<li><a href="https://plus.google.com/110323587230527980117">Google+</a></li>
133-
<li class="divider"></li>
134-
<li><a href="https://github.com/angular/angular.js">GitHub</a></li>
135-
<li><a href="https://github.com/angular/angular.js/issues">Issue Tracker</a></li>
136-
</ul>
137-
</li>
138-
<li class="divider-vertical"></li>
139-
</ul>
86+
<div class="col-md-9 header-branding">
87+
<a class="brand navbar-brand" href="http://angularjs.org">
88+
<img class="logo" src="img/angularjs-for-header-only.svg">
89+
</a>
90+
<ul class="nav navbar-nav">
91+
<li class="divider-vertical"></li>
92+
<li><a href="http://angularjs.org"><i class="icon-home icon-white"></i> Home</a></li>
93+
<li class="divider-vertical"></li>
94+
<li class="dropdown">
95+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
96+
<i class="icon-eye-open icon-white"></i> Learn <b class="caret"></b>
97+
</a>
98+
<ul class="dropdown-menu">
99+
<li class="disabled"><a href="http://angularjs.org/">Why AngularJS?</a></li>
100+
<li><a href="http://www.youtube.com/user/angularjs">Watch</a></li>
101+
<li><a href="tutorial">Tutorial</a></li>
102+
<li><a href="http://builtwith.angularjs.org/">Case Studies</a></li>
103+
<li><a href="https://github.com/angular/angular-seed">Seed App project template</a></li>
104+
<li><a href="misc/faq">FAQ</a></li>
105+
</ul>
106+
</li>
107+
<li class="divider-vertical"></li>
108+
<li class="dropdown active">
109+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
110+
<i class="icon-book icon-white"></i> Develop <b class="caret"></b>
111+
</a>
112+
<ul class="dropdown-menu">
113+
<li><a href="tutorial">Tutorial</a></li>
114+
<li><a href="guide">Developer Guide</a></li>
115+
<li><a href="api">API Reference</a></li>
116+
<li><a href="error">Error Reference</a></li>
117+
<li><a href="misc/contribute">Contribute</a></li>
118+
<li><a href="http://code.angularjs.org/">Download</a></li>
119+
</ul>
120+
</li>
121+
<li class="divider-vertical"></li>
122+
<li class="dropdown">
123+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
124+
<i class="icon-comment icon-white"></i> Discuss <b class="caret"></b>
125+
</a>
126+
<ul class="dropdown-menu">
127+
<li><a href="http://blog.angularjs.org">Blog</a></li>
128+
<li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
129+
<li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">Chat Room</a></li>
130+
<li class="divider"></li>
131+
<li><a href="https://twitter.com/#!/angularjs">Twitter</a></li>
132+
<li><a href="https://plus.google.com/110323587230527980117">Google+</a></li>
133+
<li class="divider"></li>
134+
<li><a href="https://github.com/angular/angular.js">GitHub</a></li>
135+
<li><a href="https://github.com/angular/angular.js/issues">Issue Tracker</a></li>
136+
</ul>
137+
</li>
138+
<li class="divider-vertical"></li>
139+
</ul>
140+
</div>
140141
<form ng-class="{focus:focus}" class="navbar-search col-md-3 docs-search" ng-submit="submit()">
141142
<span class="glyphicon glyphicon-search search-icon"></span>
142143
<input type="text"
@@ -196,7 +197,8 @@ <h4 class="search-results-group-heading">{{ key }}</h4>
196197
<section role="main" class="container main-body">
197198
<div class="main-grid main-body-grid">
198199
<div class="grid-left">
199-
<div class="side-navigation">
200+
<a class="btn toc-toggle visible-xs" ng-click="toc=!toc">Show / Hide Table of Contents</a>
201+
<div class="side-navigation" ng-show="toc==true">
200202
<ul class="nav-list naked-list">
201203
<li ng-repeat="navGroup in currentArea.navGroups track by navGroup.name" class="nav-index-group">
202204
<a href="{{ navGroup.href }}" ng-class="navClass(navGroup)" class="nav-index-group-heading">{{ navGroup.name }}</a>
@@ -210,6 +212,9 @@ <h4 class="search-results-group-heading">{{ key }}</h4>
210212
</ul>
211213
</li>
212214
</ul>
215+
<a href="" ng-click="toc=false" class="toc-close visible-xs">
216+
<span class="glyphicon glyphicon-remove toc-close-icon"></span> Close
217+
</a>
213218
</div>
214219
</div>
215220
<div class="grid-right">

0 commit comments

Comments
 (0)