Clone sidenav design from http://getbootstrap.com.

authbucket · Dec 20, 2014 · ffed2e1 · ffed2e1
1 parent 7465375
commit ffed2e1
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 6 deletions.
diff --git a/tests/AuthBucket/OAuth2/Tests/TestBundle/Resources/views/index.html.twig b/tests/AuthBucket/OAuth2/Tests/TestBundle/Resources/views/index.html.twig
@@ -179,21 +179,26 @@ $ php app/console server:run</code></pre>
 {% endblock %}
 
 {% block aside %}
-    <ul class="nav nav-pills nav-stacked" role="navigation" data-spy="affix" data-offset-top="60">
+    <ul class="nav" data-spy="affix">
         <li><a href="#installation">Installation</a>
-            <ul class="nav nav-pills nav-stacked">
+            <ul class="nav">
                 <li><a href="#parameters">Parameters</a></li>
                 <li><a href="#services">Services</a></li>
                 <li><a href="#registering">Registering</a></li>
             </ul>
         </li>
         <li><a href="#usage">Usage</a>
-            <ul class="nav nav-pills nav-stacked">
+            <ul class="nav">
                 <li><a href="#authorization-endpoint">Authorization Endpoint</a></li>
                 <li><a href="#token-endpoint">Token Endpoint</a></li>
                 <li><a href="#debug-endpoint">Debug Endpoint</a></li>
                 <li><a href="#resource-endpoint">Resource Endpoint</a></li>
             </ul>
         </li>
+        <li><a href="#demo">Demo</a></li>
+        <li><a href="#documentation">Documentation</a></li>
+        <li><a href="#tests">Tests</a></li>
+        <li><a href="#references">References</a></li>
+        <li><a href="#license">License</a></li>
     </ul>
 {% endblock %}
diff --git a/tests/AuthBucket/OAuth2/Tests/TestBundle/Resources/views/page.html.twig b/tests/AuthBucket/OAuth2/Tests/TestBundle/Resources/views/page.html.twig
@@ -4,7 +4,7 @@
             <main class="col-md-9">
                 {% block main %}{% endblock %}
             </main>
-            <aside class="col-md-3 hidden-xs hidden-sm">
+            <aside class="col-md-3 hidden-print hidden-xs hidden-sm">
                 {% block aside %}{% endblock %}
             </aside>
         </div>

diff --git a/tests/AuthBucket/OAuth2/Tests/TestBundle/Resources/views/page_bottom.html.twig b/tests/AuthBucket/OAuth2/Tests/TestBundle/Resources/views/page_bottom.html.twig
@@ -1,4 +1,4 @@
-<footer class="authbucket-docs-footer text-muted">
+<footer>
     <div class="container">
         <ul class="list-inline">
             <li><iframe src="http://ghbtns.com/github-btn.html?user=authbucket&repo=oauth2-php&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="90px" height="20px"></iframe></li>

diff --git a/web/css/style.css b/web/css/style.css
@@ -6,8 +6,62 @@ pre code {
   overflow: auto;
   white-space: pre;
 }
-footer.authbucket-docs-footer {
+aside {
+  margin-bottom: 40px;
+  margin-top: 40px;
+}
+aside .nav > li > a {
+  color: #777;
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  padding: 4px 20px;
+}
+aside .nav > li > a:hover,
+aside .nav > li > a:focus {
+  background-color: transparent;
+  border-left: 1px solid #337ab7;
+  color: #337ab7;
+  padding-left: 19px;
+  text-decoration: none;
+}
+aside .nav > .active > a,
+aside .nav > .active:hover > a,
+aside .nav > .active:focus > a {
+  background-color: transparent;
+  border-left: 2px solid #337ab7;
+  color: #337ab7;
+  font-weight: 700;
+  padding-left: 18px;
+}
+aside .nav .nav {
+  display: none;
+  padding-bottom: 10px;
+}
+aside .nav .active .nav {
+  display: block;
+}
+aside .nav .nav > li > a {
+  font-size: 12px;
+  font-weight: 400;
+  padding-bottom: 1px;
+  padding-left: 30px;
+  padding-top: 1px;
+}
+aside .nav .nav > li > a:hover,
+aside .nav .nav > li > a:focus {
+  padding-left: 29px;
+}
+aside .nav .nav > .active > a,
+aside .nav .nav > .active:hover > a,
+aside .nav .nav > .active:focus > a {
+  display: block;
+  font-weight: 500;
+  padding-left: 28px;
+}
+body > footer {
   border-top: 1px solid #eee;
+  color: #777;
   margin-top: 100px;
   padding-bottom: 40px;
   padding-top: 40px;