implemented mock sidebar and updated some styles

ros2 · Nov 8, 2013 · 8d7c92e · 8d7c92e
1 parent 604c144
commit 8d7c92e
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 76 deletions.
diff --git a/_includes/header.html b/_includes/header.html
@@ -29,7 +29,7 @@
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <a class="navbar-brand" href="/">{{ site.name }}</a>
+          <a class="navbar-brand" href="{{ site.baseurl }}/">{{ site.name }}</a>
         </div>
         <div class="collapse navbar-collapse">
           <ul class="nav navbar-nav">

diff --git a/_includes/sidebar.html b/_includes/sidebar.html
@@ -0,0 +1,24 @@
+<button type="button" class="btn btn-default pull-left">
+  <span class="glyphicon glyphicon-file"></span> View Source
+</button>
+
+<button type="button" class="btn btn-default pull-right">
+  <span class="glyphicon glyphicon-edit"></span> Edit in Github
+</button>
+
+<div class="clearfix tbmargin">&nbsp;</div>
+
+<div class="panel panel-default">
+  <div class="panel-heading">Pull Requests</div>
+  <ul class="nav nav-pills" style="margin: 10px;">
+    <li class="active"><a href="#">Open</a></li>
+    <li><a href="#">Closed</a></li>
+  </ul>
+
+  <!-- List group -->
+  <div class="list-group">
+    <a href="#" class="list-group-item">Example pull request 1</a>
+    <a href="#" class="list-group-item">Example pull request 2</a>
+    <a href="#" class="list-group-item">Example pull request 3</a>
+  </ul>
+</div>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -1,9 +1,12 @@
 {% include header.html %}
 
-<div class="row-fluid">
-  <div class="span12">
+<div class="row">
+  <div class="col-md-9">
     {{ content }}
   </div>
+  <div class="col-md-3">
+    {% include sidebar.html %}
+  </div>
 </div>
 
 {% include footer.html %}
diff --git a/css/bootstrap.css b/css/bootstrap.css
@@ -269,7 +269,7 @@ body {
   font-size: 14px;
   line-height: 1.428571429;
   color: #333333;
-  background-color: #cfcfc4;
+  background-color: #eeeeee;
 }
 input,
 button,
@@ -280,12 +280,12 @@ textarea {
   line-height: inherit;
 }
 a {
-  color: #aec6cf;
+  color: #428bca;
   text-decoration: none;
 }
 a:hover,
 a:focus {
-  color: #7ea4b3;
+  color: #2a6496;
   text-decoration: underline;
 }
 a:focus {
@@ -307,7 +307,7 @@ img {
 .img-thumbnail {
   padding: 4px;
   line-height: 1.428571429;
-  background-color: #cfcfc4;
+  background-color: #eeeeee;
   border: 1px solid #dddddd;
   border-radius: 4px;
   -webkit-transition: all 0.2s ease-in-out;
@@ -360,10 +360,10 @@ cite {
   color: #999999;
 }
 .text-primary {
-  color: #aec6cf;
+  color: #428bca;
 }
 .text-primary:hover {
-  color: #8eafbc;
+  color: #3071a9;
 }
 .text-warning {
   color: #c09853;
@@ -1416,7 +1416,7 @@ th {
   border-top: 2px solid #dddddd;
 }
 .table .table {
-  background-color: #cfcfc4;
+  background-color: #eeeeee;
 }
 .table-condensed > thead > tr > th,
 .table-condensed > tbody > tr > th,
@@ -2006,17 +2006,17 @@ fieldset[disabled] .btn-default.active {
 }
 .btn-primary {
   color: #ffffff;
-  background-color: #aec6cf;
-  border-color: #9ebbc6;
+  background-color: #428bca;
+  border-color: #357ebd;
 }
 .btn-primary:hover,
 .btn-primary:focus,
 .btn-primary:active,
 .btn-primary.active,
 .open .dropdown-toggle.btn-primary {
   color: #ffffff;
-  background-color: #94b4c0;
-  border-color: #78a0af;
+  background-color: #3276b1;
+  border-color: #285e8e;
 }
 .btn-primary:active,
 .btn-primary.active,
@@ -2038,8 +2038,8 @@ fieldset[disabled] .btn-primary:active,
 .btn-primary.disabled.active,
 .btn-primary[disabled].active,
 fieldset[disabled] .btn-primary.active {
-  background-color: #aec6cf;
-  border-color: #9ebbc6;
+  background-color: #428bca;
+  border-color: #357ebd;
 }
 .btn-warning {
   color: #ffffff;
@@ -2190,7 +2190,7 @@ fieldset[disabled] .btn-info.active {
   border-color: #46b8da;
 }
 .btn-link {
-  color: #aec6cf;
+  color: #428bca;
   font-weight: normal;
   cursor: pointer;
   border-radius: 0;
@@ -2211,7 +2211,7 @@ fieldset[disabled] .btn-link {
 }
 .btn-link:hover,
 .btn-link:focus {
-  color: #7ea4b3;
+  color: #2a6496;
   text-decoration: underline;
   background-color: transparent;
 }
@@ -2960,7 +2960,7 @@ input[type="button"].btn-block {
   color: #ffffff;
   text-decoration: none;
   outline: 0;
-  background-color: #aec6cf;
+  background-color: #428bca;
 }
 .dropdown-menu > .disabled > a,
 .dropdown-menu > .disabled > a:hover,
@@ -3456,13 +3456,13 @@ textarea.input-group-sm > .input-group-btn > .btn {
 .nav .open > a:hover,
 .nav .open > a:focus {
   background-color: #eeeeee;
-  border-color: #aec6cf;
+  border-color: #428bca;
 }
 .nav .open > a .caret,
 .nav .open > a:hover .caret,
 .nav .open > a:focus .caret {
-  border-top-color: #7ea4b3;
-  border-bottom-color: #7ea4b3;
+  border-top-color: #2a6496;
+  border-bottom-color: #2a6496;
 }
 .nav .nav-divider {
   height: 1px;
@@ -3493,7 +3493,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
 .nav-tabs > li.active > a:hover,
 .nav-tabs > li.active > a:focus {
   color: #555555;
-  background-color: #cfcfc4;
+  background-color: #eeeeee;
   border: 1px solid #dddddd;
   border-bottom-color: transparent;
   cursor: default;
@@ -3539,7 +3539,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
   .nav-tabs.nav-justified > .active > a,
   .nav-tabs.nav-justified > .active > a:hover,
   .nav-tabs.nav-justified > .active > a:focus {
-    border-bottom-color: #cfcfc4;
+    border-bottom-color: #eeeeee;
   }
 }
 .nav-pills > li {
@@ -3555,7 +3555,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
 .nav-pills > li.active > a:hover,
 .nav-pills > li.active > a:focus {
   color: #ffffff;
-  background-color: #aec6cf;
+  background-color: #428bca;
 }
 .nav-pills > li.active > a .caret,
 .nav-pills > li.active > a:hover .caret,
@@ -3613,7 +3613,7 @@ textarea.input-group-sm > .input-group-btn > .btn {
   .nav-tabs-justified > .active > a,
   .nav-tabs-justified > .active > a:hover,
   .nav-tabs-justified > .active > a:focus {
-    border-bottom-color: #cfcfc4;
+    border-bottom-color: #eeeeee;
   }
 }
 .tab-content > .tab-pane {
@@ -3623,12 +3623,12 @@ textarea.input-group-sm > .input-group-btn > .btn {
   display: block;
 }
 .nav .caret {
-  border-top-color: #aec6cf;
-  border-bottom-color: #aec6cf;
+  border-top-color: #428bca;
+  border-bottom-color: #428bca;
 }
 .nav a:hover .caret {
-  border-top-color: #7ea4b3;
-  border-bottom-color: #7ea4b3;
+  border-top-color: #2a6496;
+  border-bottom-color: #2a6496;
 }
 .nav-tabs .dropdown-menu {
   margin-top: -1px;
@@ -4234,8 +4234,8 @@ textarea.input-group-sm > .input-group-btn > .btn {
 .pagination > .active > span:focus {
   z-index: 2;
   color: #ffffff;
-  background-color: #aec6cf;
-  border-color: #aec6cf;
+  background-color: #428bca;
+  border-color: #428bca;
   cursor: default;
 }
 .pagination > .disabled > span,
@@ -4370,11 +4370,11 @@ textarea.input-group-sm > .input-group-btn > .btn {
   background-color: #808080;
 }
 .label-primary {
-  background-color: #aec6cf;
+  background-color: #428bca;
 }
 .label-primary[href]:hover,
 .label-primary[href]:focus {
-  background-color: #8eafbc;
+  background-color: #3071a9;
 }
 .label-success {
   background-color: #5cb85c;
@@ -4433,7 +4433,7 @@ a.badge:focus {
 }
 a.list-group-item.active > .badge,
 .nav-pills > .active > a > .badge {
-  color: #aec6cf;
+  color: #428bca;
   background-color: #ffffff;
 }
 .nav-pills > li > a > .badge {
@@ -4474,7 +4474,7 @@ a.list-group-item.active > .badge,
 .thumbnail {
   padding: 4px;
   line-height: 1.428571429;
-  background-color: #cfcfc4;
+  background-color: #eeeeee;
   border: 1px solid #dddddd;
   border-radius: 4px;
   -webkit-transition: all 0.2s ease-in-out;
@@ -4495,7 +4495,7 @@ a.list-group-item.active > .badge,
 a.thumbnail:hover,
 a.thumbnail:focus,
 a.thumbnail.active {
-  border-color: #aec6cf;
+  border-color: #428bca;
 }
 .thumbnail .caption {
   padding: 9px;
@@ -4623,7 +4623,7 @@ a.thumbnail.active {
   line-height: 20px;
   color: #ffffff;
   text-align: center;
-  background-color: #aec6cf;
+  background-color: #428bca;
   -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
   -webkit-transition: width 0.6s ease;
@@ -4747,8 +4747,8 @@ a.list-group-item.active:hover,
 a.list-group-item.active:focus {
   z-index: 2;
   color: #ffffff;
-  background-color: #aec6cf;
-  border-color: #aec6cf;
+  background-color: #428bca;
+  border-color: #428bca;
 }
 a.list-group-item.active .list-group-item-heading,
 a.list-group-item.active:hover .list-group-item-heading,
@@ -4758,7 +4758,7 @@ a.list-group-item.active:focus .list-group-item-heading {
 a.list-group-item.active .list-group-item-text,
 a.list-group-item.active:hover .list-group-item-text,
 a.list-group-item.active:focus .list-group-item-text {
-  color: #ffffff;
+  color: #e1edf7;
 }
 .list-group-item-heading {
   margin-top: 0;
@@ -4935,21 +4935,21 @@ a.list-group-item.active:focus .list-group-item-text {
   border-bottom-color: #dddddd;
 }
 .panel-primary {
-  border-color: #aec6cf;
+  border-color: #428bca;
 }
 .panel-primary > .panel-heading {
   color: #ffffff;
-  background-color: #aec6cf;
-  border-color: #aec6cf;
+  background-color: #428bca;
+  border-color: #428bca;
 }
 .panel-primary > .panel-heading + .panel-collapse .panel-body {
-  border-top-color: #aec6cf;
+  border-top-color: #428bca;
 }
 .panel-primary > .panel-heading > .dropdown .caret {
   border-color: #ffffff transparent;
 }
 .panel-primary > .panel-footer + .panel-collapse .panel-body {
-  border-bottom-color: #aec6cf;
+  border-bottom-color: #428bca;
 }
 .panel-success {
   border-color: #d6e9c6;