Path navigation plus branch switcher in file browser.

prose · Jul 22, 2012 · ce1e2c0 · ce1e2c0
1 parent 050da27
commit ce1e2c0
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 12 deletions.
diff --git a/_includes/styles/style.css b/_includes/styles/style.css
@@ -133,15 +133,20 @@ body.post #header {
 }
 
 
-#header .navigation > * {
+#header .navigation > a {
   display: block;
   position: relative;
   padding: 0 20px 0 20px;
   margin: 0px;
   float: left;
+  /*font-weight: normal;*/
   text-indent: 0px;
   }
 
+#header .navigation a.user, #header .navigation a.repo {
+  font-size: 16px;
+}
+
 #header .navigation a:hover {
   background-color: #c9d1d6;
   }
@@ -701,41 +706,70 @@ ul.site li a {
 
 #posts .breadcrumbs {
   overflow: visible;
-  margin-bottom: 10px;
+  margin-bottom: 30px;
+}
+
+#posts .breadcrumbs a {
+  font-weight: bold;
+}
+
+#posts .breadcrumbs .slash {
+  color: #ccc;
+  font-size: 20px;
 }
 
 #posts .breadcrumbs > * {
   display: block;
   position: relative;
-  padding: 0 20px 0 0px;
-  margin: 0px;
+  margin: 0 20px 0 0px;
+  padding: 0px;
   float: left;
   text-indent: 0px;
 }
 
+#posts .breadcrumbs .switch-branch {
+  margin-left: 5px;
+}
+
 #posts .breadcrumbs .branch-wrapper {
   position: relative;
 }
 
 #posts .breadcrumbs .branch-wrapper .branches {
   display: none;
   position: absolute;
-  right: 0px;
-  top: 60px;
+  right: -100px;
+  top: 30px;
   width: 200px;
 
-  overflow: auto;
+  overflow-y: visible;
   background: #3D4548;
   z-index: 5000;
   max-height: 300px;
 }
 
+#posts .breadcrumbs .branch-wrapper .branches .inner {
+  overflow: auto;
+}
+
+#posts .breadcrumbs .branch-wrapper .branches .arrow-up {
+  position: absolute;
+  top: -5px;
+  left: 90px;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #3D4548;
+}
+
 /*#header .navigation .branch-wrapper:hover .branches {
   display: block;
   
 }*/
 
 #posts .breadcrumbs .branch-wrapper .branches .select-branch {
+  padding: 10px 0;
   text-align: center;
   display: block;
   color: #fff;

diff --git a/_includes/templates/posts._ b/_includes/templates/posts._
@@ -6,14 +6,21 @@
       <a class="branch" href="#<%= [user, repo, 'tree', branch].join('/') %>">
         <%= branch %>
       </a>
+      <a class="switch-branch" href="#<%= [user, repo, 'tree', branch].join('/') %>">
+        x
+      </a>
       <div class="branches">
-        <% _.each(app.state.branches, function(branch) { %>
-          <a class="select-branch" href="#<%= [user, repo, 'tree', branch].join('/') %>"><%= branch %></a>
-        <% }); %>
+        <div class="inner">
+          <div class="arrow-up"></div>
+          <% _.each(app.state.branches, function(branch) { %>
+            <a class="select-branch" href="#<%= [user, repo, 'tree', branch].join('/') %>"><%= branch %></a>
+          <% }); %>
+        </div>
       </div>
     </div>
 
     <% _.each(_.chunkedPath(path), function(p) { %>
+      <div class="slash">/</div>
       <a class="path" href="#<%= [user, repo, 'tree', branch, p.url].join('/') %>"><%= p.name %></a>
     <% }); %>
     <br class="clear"/>

diff --git a/_includes/views/posts.js b/_includes/views/posts.js
@@ -4,7 +4,7 @@ views.Posts = Backbone.View.extend({
   events: {
     'click a.link': '_loading',
     'keyup #search_str': '_search',
-    'click a.branch': '_toggleBranchSelection'
+    'click a.switch-branch': '_toggleBranchSelection'
   },
 
   _toggleBranchSelection: function() {

diff --git a/help.html b/help.html
@@ -1,5 +1,5 @@
 ---
-layout: default
+layout: static
 ---
 
 <div class="help">