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

chore(docs): make the layout fully responsive #6355

Closed
wants to merge 1 commit into from
Closed

chore(docs): make the layout fully responsive #6355

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
112 changes: 110 additions & 2 deletions docs/app/assets/css/docs.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,11 +60,10 @@ h1,h2,h3,h4,h5,h6 {
}

.docs-search {
margin:10px;
margin:10px 0;
padding:4px 0 4px 20px;
background:white;
border-radius:20px;
display:table-cell;
vertical-align:middle;
}

Expand Down Expand Up @@ -403,6 +402,14 @@ iframe.example {
float:left;
}

.main-body-grid .side-navigation {
position:relative;
}

.main-body-grid .side-navigation.ng-hide {
display:block!important;
}

.variables-matrix td {
vertical-align:top;
padding:5px;
Expand Down Expand Up @@ -551,3 +558,104 @@ ul.methods > li,
ul.events > li {
margin-bottom:40px;
}

@media only screen and (max-width : 768px) {
.picker, .picker select {
width:auto;
display:block;
margin-bottom:10px;
}
.docs-navbar-primary {
text-align:center;
}
.main-body-grid {
margin-top:0;
}
.main-header-grid > .grid-left,
.main-body-grid > .grid-left,
.main-header-grid > .grid-right,
.main-body-grid > .grid-right {
display:block;
float:none;
width:auto!important;
margin-left:0;
}
.main-body-grid > .grid-left,
.header-fixed, .footer {
position:static!important;
}
.main-body-grid > .grid-left {
background:#efefef;
margin-left:-1em;
margin-right:-1em;
padding:1em;
width:auto!important;
overflow:visible;
}
.main-header-grid > .grid-right,
.main-body-grid > .grid-right {
margin-left:0;
}
.main-body-grid .side-navigation {
display:block!important;
}
.main-body-grid .side-navigation.ng-hide {
display:none!important;
}
.nav-index-group .nav-index-listing {
display:inline-block;
padding:3px 0;
}
.nav-index-group .nav-index-listing:not(.nav-index-section) + .nav-index-listing:not(.nav-index-section):after {
padding-right:5px;
content:", ";
}
.nav-index-group .nav-index-listing:last-child {
content:"";
}
.nav-index-group .nav-index-section {
display:block;
}
.toc-toggle {
margin-bottom:20px;
}
.toc-close {
position: absolute;
bottom: -50px;
left: 50%;
margin-left: -50%;
text-align: center;
padding: 5px;
background: #eee;
border-radius: 5px;
width: 90%;
border:1px solid #ddd;
box-shadow:0 0 10px #bbb;
}
.navbar-brand {
float:none;
text-align:center;
}
.search-results-container {
padding-bottom:60px;
text-align:left;
}
.search-results-group {
float:none!important;
display:block!important;
width:auto!important;
border:0!important;
padding:0!important;
}
.search-results-group .search-result {
display:inline-block!important;
padding:0 5px;
width:auto!important;
}
.search-results-group .search-result:after {
content:", ";
}
#wrapper {
padding-bottom:0px;
}
}
117 changes: 61 additions & 56 deletions docs/config/templates/indexPage.template.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<!doctype html>
<html lang="en" ng-app="docsApp" ng-controller="DocsController">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="Description"
Expand Down Expand Up @@ -81,62 +82,62 @@
<header class="header header-fixed">
<section class="navbar navbar-inverse docs-navbar-primary" ng-controller="DocsSearchCtrl">
<div class="container">
<div class="navbar-header">
<a class="brand navbar-brand" href="http://angularjs.org">
<img class="logo" src="img/angularjs-for-header-only.svg">
</a>
</div>
<div class="row">
<ul class="nav navbar-nav col-md-7">
<li class="divider-vertical"></li>
<li><a href="http://angularjs.org"><i class="icon-home icon-white"></i> Home</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-eye-open icon-white"></i> Learn <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="disabled"><a href="http://angularjs.org/">Why AngularJS?</a></li>
<li><a href="http://www.youtube.com/user/angularjs">Watch</a></li>
<li><a href="tutorial">Tutorial</a></li>
<li><a href="http://builtwith.angularjs.org/">Case Studies</a></li>
<li><a href="https://github.com/angular/angular-seed">Seed App project template</a></li>
<li><a href="misc/faq">FAQ</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-book icon-white"></i> Develop <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="tutorial">Tutorial</a></li>
<li><a href="guide">Developer Guide</a></li>
<li><a href="api">API Reference</a></li>
<li><a href="error">Error Reference</a></li>
<li><a href="misc/contribute">Contribute</a></li>
<li><a href="http://code.angularjs.org/">Download</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-comment icon-white"></i> Discuss <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="http://blog.angularjs.org">Blog</a></li>
<li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
<li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">Chat Room</a></li>
<li class="divider"></li>
<li><a href="https://twitter.com/#!/angularjs">Twitter</a></li>
<li><a href="https://plus.google.com/110323587230527980117">Google+</a></li>
<li class="divider"></li>
<li><a href="https://github.com/angular/angular.js">GitHub</a></li>
<li><a href="https://github.com/angular/angular.js/issues">Issue Tracker</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
</ul>
<div class="col-md-9 header-branding">
<a class="brand navbar-brand" href="http://angularjs.org">
<img class="logo" src="img/angularjs-for-header-only.svg">
</a>
<ul class="nav navbar-nav">
<li class="divider-vertical"></li>
<li><a href="http://angularjs.org"><i class="icon-home icon-white"></i> Home</a></li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-eye-open icon-white"></i> Learn <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li class="disabled"><a href="http://angularjs.org/">Why AngularJS?</a></li>
<li><a href="http://www.youtube.com/user/angularjs">Watch</a></li>
<li><a href="tutorial">Tutorial</a></li>
<li><a href="http://builtwith.angularjs.org/">Case Studies</a></li>
<li><a href="https://github.com/angular/angular-seed">Seed App project template</a></li>
<li><a href="misc/faq">FAQ</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li class="dropdown active">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-book icon-white"></i> Develop <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="tutorial">Tutorial</a></li>
<li><a href="guide">Developer Guide</a></li>
<li><a href="api">API Reference</a></li>
<li><a href="error">Error Reference</a></li>
<li><a href="misc/contribute">Contribute</a></li>
<li><a href="http://code.angularjs.org/">Download</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="icon-comment icon-white"></i> Discuss <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><a href="http://blog.angularjs.org">Blog</a></li>
<li><a href="http://groups.google.com/group/angular">Mailing List</a></li>
<li><a href="http://webchat.freenode.net/?channels=angularjs&uio=d4">Chat Room</a></li>
<li class="divider"></li>
<li><a href="https://twitter.com/#!/angularjs">Twitter</a></li>
<li><a href="https://plus.google.com/110323587230527980117">Google+</a></li>
<li class="divider"></li>
<li><a href="https://github.com/angular/angular.js">GitHub</a></li>
<li><a href="https://github.com/angular/angular.js/issues">Issue Tracker</a></li>
</ul>
</li>
<li class="divider-vertical"></li>
</ul>
</div>
<form ng-class="{focus:focus}" class="navbar-search col-md-3 docs-search" ng-submit="submit()">
<span class="glyphicon glyphicon-search search-icon"></span>
<input type="text"
Expand Down Expand Up @@ -196,7 +197,8 @@ <h4 class="search-results-group-heading">{{ key }}</h4>
<section role="main" class="container main-body">
<div class="main-grid main-body-grid">
<div class="grid-left">
<div class="side-navigation">
<a class="btn toc-toggle visible-xs" ng-click="toc=!toc">Show / Hide Table of Contents</a>
<div class="side-navigation" ng-show="toc==true">
<ul class="nav-list naked-list">
<li ng-repeat="navGroup in currentArea.navGroups track by navGroup.name" class="nav-index-group">
<a href="{{ navGroup.href }}" ng-class="navClass(navGroup)" class="nav-index-group-heading">{{ navGroup.name }}</a>
Expand All @@ -210,6 +212,9 @@ <h4 class="search-results-group-heading">{{ key }}</h4>
</ul>
</li>
</ul>
<a href="" ng-click="toc=false" class="toc-close visible-xs">
<span class="glyphicon glyphicon-remove toc-close-icon"></span> Close
</a>
</div>
</div>
<div class="grid-right">
Expand Down