Permalink
Browse files

Move breadcrumbs and branch selection to the filebrowser.

  • Loading branch information...
1 parent f4712c1 commit c5dc7ec2f04e6ed17bdd880b5aa3d46759bd66a2 Michael Aufreiter committed Jul 22, 2012
Showing with 83 additions and 67 deletions.
  1. +55 −35 _includes/styles/style.css
  2. +2 −23 _includes/templates/header._
  3. +18 −1 _includes/templates/posts._
  4. +1 −7 _includes/views/header.js
  5. +7 −1 _includes/views/posts.js
View
90 _includes/styles/style.css
@@ -127,42 +127,10 @@ body.post #header {
text-indent: 20px;
}
-#header .navigation .branch-wrapper {
- position: relative;
-}
-#header .navigation .branch-wrapper .branches {
- display: none;
- position: absolute;
- right: 0px;
- top: 60px;
- width: 200px;
-
- overflow: auto;
- background: #3D4548;
- z-index: 5000;
- max-height: 300px;
-}
-/*#header .navigation .branch-wrapper:hover .branches {
- display: block;
-
-}*/
-#header .navigation .branch-wrapper .branches .select-branch {
- text-align: center;
- display: block;
- color: #fff;
- opacity: 0.9;
-}
-
-#header .navigation .branch-wrapper .branches .select-branch:hover {
- opacity: 1.0;
- background: rgba(0,0,0, 0.5);
-}
-
-
-#header .navigation > *, #header .navigation a.branch {
+#header .navigation > * {
display: block;
position: relative;
padding: 0 20px 0 20px;
@@ -171,7 +139,7 @@ body.post #header {
text-indent: 0px;
}
-#header .navigation a.branch {
+/*#header .navigation a.branch {
width: 40px;
height: 60px;
background-image: url('images/sprite.png');
@@ -181,7 +149,7 @@ body.post #header {
#header .navigation .branch-wrapper {
margin: 0;
padding: 0;
-}
+}*/
#header .navigation a:hover {
background-color: #c9d1d6;
@@ -737,6 +705,58 @@ ul.site li a {
Posts
---------------------------------------------*/
+/* Breadcrumbs */
+
+#posts .breadcrumbs {
+ overflow: visible;
+ margin-bottom: 10px;
+}
+
+#posts .breadcrumbs > * {
+ display: block;
+ position: relative;
+ padding: 0 20px 0 0px;
+ margin: 0px;
+ float: left;
+ text-indent: 0px;
+}
+
+#posts .breadcrumbs .branch-wrapper {
+ position: relative;
+}
+
+#posts .breadcrumbs .branch-wrapper .branches {
+ display: none;
+ position: absolute;
+ right: 0px;
+ top: 60px;
+ width: 200px;
+
+ overflow: auto;
+ background: #3D4548;
+ z-index: 5000;
+ max-height: 300px;
+}
+
+/*#header .navigation .branch-wrapper:hover .branches {
+ display: block;
+
+}*/
+
+#posts .breadcrumbs .branch-wrapper .branches .select-branch {
+ text-align: center;
+ display: block;
+ color: #fff;
+ opacity: 0.9;
+}
+
+#posts .breadcrumbs .branch-wrapper .branches .select-branch:hover {
+ opacity: 1.0;
+ background: rgba(0,0,0, 0.5);
+}
+
+
+
#posts {
padding: 30px 0;
width: 960px;
View
25 _includes/templates/header._
@@ -5,33 +5,12 @@
<% var path = state.path %>
<a class="user" href="#<%= [state.user].join('/') %>"><%= state.user %></a>
-
<% if (state.repo) { %>
<a class="repo" href="#<%= [state.user, state.repo, 'tree', state.branch].join('/') %>">
- <%= state.repo %> / <%= state.branch %>
+ <%= state.repo %>
</a>
- <div class="branch-wrapper">
- <a class="branch" href="#<%= [state.user, state.repo, 'tree', state.branch].join('/') %>">
-
- </a>
- <div class="branches">
- <% _.each(app.state.branches, function(branch) { %>
- <a class="select-branch" href="#<%= [state.user, state.repo, 'tree', branch].join('/') %>"><%= branch %></a>
- <% }); %>
- </div>
- </div>
<% } %>
-
- <% if (path) { %>
- <% _.each(_.chunkedPath(path), function(p) { %>
- <a class="path" href="#<%= [state.user, state.repo, 'tree', state.branch, p.url].join('/') %>"><%= p.name %></a>
- <% }); %>
- <% } %>
- <% if (state.file) { %>
- <div class="file">
- <%= _.clip(state.file, 30) %>
- </div>
- <% } %>
+
<% } else { %>
<%= app.state.title %>
<% } %>
View
19 _includes/templates/posts._
@@ -1,5 +1,23 @@
<div class='inner'>
+ <div class="breadcrumbs">
+
+ <div class="branch-wrapper">
+ <a class="branch" href="#<%= [user, repo, 'tree', branch].join('/') %>">
+ <%= branch %>
+ </a>
+ <div class="branches">
+ <% _.each(app.state.branches, function(branch) { %>
+ <a class="select-branch" href="#<%= [user, repo, 'tree', branch].join('/') %>"><%= branch %></a>
+ <% }); %>
+ </div>
+ </div>
+
+ <% _.each(_.chunkedPath(path), function(p) { %>
+ <a class="path" href="#<%= [user, repo, 'tree', branch, p.url].join('/') %>"><%= p.name %></a>
+ <% }); %>
+ <br class="clear"/>
+ </div>
<div class="search-menu">
<% parent = _.parentPath(path); %>
<% if (parent !== path) { %>
@@ -16,7 +34,6 @@
New File
</a>
<% } %>
-
</div>
</div>
<div class='post-listing prose clearfix'>
View
8 _includes/views/header.js
@@ -4,13 +4,7 @@ views.Header = Backbone.View.extend({
id: 'header',
events: {
- "click a.logout": "_logout",
- "click a.branch": "_toggleBranchSelection"
- },
-
- _toggleBranchSelection: function() {
- this.$('.branch-wrapper .branches').toggle();
- return false;
+ "click a.logout": "_logout"
},
_logout: function() {
View
8 _includes/views/posts.js
@@ -3,7 +3,13 @@
views.Posts = Backbone.View.extend({
events: {
'click a.link': '_loading',
- 'keyup #search_str': '_search'
+ 'keyup #search_str': '_search',
+ 'click a.branch': '_toggleBranchSelection'
+ },
+
+ _toggleBranchSelection: function() {
+ this.$('.branch-wrapper .branches').toggle();
+ return false;
},
initialize: function(options) {

0 comments on commit c5dc7ec

Please sign in to comment.