DeokHong Kim (a.k.a insanehong) DeokHong Kim (a.k.a insanehong) 2014-02-07
Fix Broken layout when browser resize
@819c5e68684732c183f9564e2631ee285d2d2c41
app/assets/stylesheets/less/_common.less
--- app/assets/stylesheets/less/_common.less
+++ app/assets/stylesheets/less/_common.less
@@ -3,10 +3,6 @@
     padding:0
 }
 
-html, body {
-    min-height: 100%;
-}
-
 body {
    background-color: @yobi-background;
    font-family: @base-font-family;
app/assets/stylesheets/less/_page.less
--- app/assets/stylesheets/less/_page.less
+++ app/assets/stylesheets/less/_page.less
@@ -5,7 +5,7 @@
 
 .gnb-outer {
     height:40px;
-    background-color:#1d2d46;   
+    background-color:#1d2d46;
 }
 
 .gnb-inner {
@@ -313,6 +313,10 @@
     }
 }
 
+.page-wrap-outer {
+    min-height: 450px;
+}
+
 .page-wrap {
     background-color: @white;
     width: 1170px;
@@ -444,18 +448,16 @@
 }
 
 .page-footer-outer {
-
-    padding:10px 0;
-    position: absolute;
-    bottom:0;
-    width:100%;
-    .center-block;
+    margin-top:50px;
     background-color:@yobi-white;
-    border-top:1px solid #e8e8e8;
+    padding:10px 0;
 
     .page-footer {
+        margin: 0 auto;
         text-align:center;
         line-height: 34px;
+        border-top:1px solid #e8e8e8;
+        width:1170px;
     }
 
     .provider {
app/assets/stylesheets/less/_reponsive.less
--- app/assets/stylesheets/less/_reponsive.less
+++ app/assets/stylesheets/less/_reponsive.less
@@ -1,11 +1,19 @@
 // responsive
 @media all and (max-width:1199px){
     .gnb-outer {
+        min-width: 1000px;
+        padding:0 10px;
+
         .gnb-inner {
             width:980px;
         }
     }
     
+    .page-wrap-outer {
+        min-width: 1000px;
+        padding:0 10px;
+    }
+
     .page-wrap {
         width:980px;
     }
@@ -19,11 +27,17 @@
     }
 
     .site-breadcrumb-outer {
+        min-width: 1000px;
+        padding:0 10px;
+
         .site-breadcrumb-inner {
             width: 980px;
         }
     }
     .project-header-outer {
+        min-width: 1000px;
+        padding:0 10px;
+
         .project-header-inner {
             .project-header-wrap {
                 width: 980px;
@@ -32,10 +46,14 @@
     }
 
     .project-menu-outer {
+        min-width: 1000px;
+        padding:0 10px;
+
         .project-menu-inner {
             width: 980px;
         }
     }
+
     .project-home-header {
         .project-clone-wrap {
             .project-clone-url {
@@ -94,4 +112,13 @@
     .site-setting-wrap {
         width:980px;
     }
+
+    .page-footer-outer {
+        min-width: 1000px;
+        padding:10px;
+
+        .page-footer { 
+             width:980px;
+        }
+    }
 }
app/assets/stylesheets/less/_yobiUI.less
--- app/assets/stylesheets/less/_yobiUI.less
+++ app/assets/stylesheets/less/_yobiUI.less
@@ -6,7 +6,6 @@
  * (bootstrap 2.3.1 : 14px,
  *  bootstrap 2.2.1 : 12px)
  */
-html {position: relative; padding-bottom: 90px; }
 body { font-size:12px; }
 label, input, button, select, textarea { font-size:12px; }
 select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"],
app/views/board/create.scala.html
--- app/views/board/create.scala.html
+++ app/views/board/create.scala.html
@@ -6,62 +6,64 @@
 
 @projectLayout(title, project, utils.MenuType.BOARD) {
 @projectMenu(project, utils.MenuType.BOARD, "main-menu-only")
-<div class="project-page-wrap">
-	<form action="@routes.BoardApp.newPost(project.owner, project.name)" method="post" enctype="multipart/form-data" class="nm">
-	<div class="content-wrap frm-wrap">
-		<dl>
-			<dt>
-				<label for="title">@Messages("title")</label>
-			</dt>
-			<dd>
-				@defining(form.errors().get("title")) { errors =>
-				<input type="text" id="title" name="title" class="zen-mode text title @if(errors != null) {error}" maxlength="250" tabindex="1" />
-					@if(errors != null) {
-						<div class="message">
-						@for(error <- errors) {
-							<div>@Messages(error.message)</div>
-						}
-						</div>
-					}
-				}
-			</dd>
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+    	<form action="@routes.BoardApp.newPost(project.owner, project.name)" method="post" enctype="multipart/form-data" class="nm">
+    	<div class="content-wrap frm-wrap">
+    		<dl>
+    			<dt>
+    				<label for="title">@Messages("title")</label>
+    			</dt>
+    			<dd>
+    				@defining(form.errors().get("title")) { errors =>
+    				<input type="text" id="title" name="title" class="zen-mode text title @if(errors != null) {error}" maxlength="250" tabindex="1" />
+    					@if(errors != null) {
+    						<div class="message">
+    						@for(error <- errors) {
+    							<div>@Messages(error.message)</div>
+    						}
+    						</div>
+    					}
+    				}
+    			</dd>
 
-            <dd style="position: relative;">
-                <div id="mode-select">
-                    <input type="radio" name="edit-mode" id="edit-mode" value="edit" checked="checked" class="radio-btn">
-                    <label for="edit-mode" style="margin-right:3px;">Edit</label>
-                    <input type="radio" name="edit-mode" id="preview-mode" value="preview" class="radio-btn">
-                    <label for="preview-mode">Preview</label>
-                </div>
-                <a href="#" class="go-zen"><i class="s s--zen" >Edit in Zen Mode</i></a>
-                @help.markdown()
-				 <div class="textarea-box">
-                    <textarea id="body" name="body" class="zen-mode content" markdown="true" tabindex="2" data-label="@Messages("post.error.emptyBody")"></textarea>
-                </div>
-                
-			</dd>
+                <dd style="position: relative;">
+                    <div id="mode-select">
+                        <input type="radio" name="edit-mode" id="edit-mode" value="edit" checked="checked" class="radio-btn">
+                        <label for="edit-mode" style="margin-right:3px;">Edit</label>
+                        <input type="radio" name="edit-mode" id="preview-mode" value="preview" class="radio-btn">
+                        <label for="preview-mode">Preview</label>
+                    </div>
+                    <a href="#" class="go-zen"><i class="s s--zen" >Edit in Zen Mode</i></a>
+                    @help.markdown()
+    				 <div class="textarea-box">
+                        <textarea id="body" name="body" class="zen-mode content" markdown="true" tabindex="2" data-label="@Messages("post.error.emptyBody")"></textarea>
+                    </div>
+                    
+    			</dd>
 
-			@if(isAllowedToNotice){
-			<dd class="right-txt">
-				<input type="checkbox" id="notice" name="notice" class="checkbox" /><!--
-			 --><label for="notice" class="label-public">@Messages("post.notice.label")</label>
-			</dd>
-			}
-		</dl>
+    			@if(isAllowedToNotice){
+    			<dd class="right-txt">
+    				<input type="checkbox" id="notice" name="notice" class="checkbox" /><!--
+    			 --><label for="notice" class="label-public">@Messages("post.notice.label")</label>
+    			</dd>
+    			}
+    		</dl>
 
-        @** fileUploader **@
-        @if(!UserApp.currentUser.isAnonymous) {
-            @common.fileUploader(ResourceType.BOARD_POST, null)
-        }
-        @** end of fileUploader **@
+            @** fileUploader **@
+            @if(!UserApp.currentUser.isAnonymous) {
+                @common.fileUploader(ResourceType.BOARD_POST, null)
+            }
+            @** end of fileUploader **@
 
-		<div class="actions">
-			<button class="ybtn ybtn-success" tabindex="3">@Messages("button.save")</button><!--
-		 --><a href="javascript:history.back();" class="ybtn" tabindex="4">@Messages("button.cancel")</a>
-		</div>
+    		<div class="actions">
+    			<button class="ybtn ybtn-success" tabindex="3">@Messages("button.save")</button><!--
+    		 --><a href="javascript:history.back();" class="ybtn" tabindex="4">@Messages("button.cancel")</a>
+    		</div>
 
-	</div>
-	</form>
+    	</div>
+    	</form>
+    </div>
 </div>
 
 @common.markdown(project)
app/views/board/edit.scala.html
--- app/views/board/edit.scala.html
+++ app/views/board/edit.scala.html
@@ -6,65 +6,66 @@
 
 @projectLayout(title, project, utils.MenuType.BOARD) {
 @projectMenu(project, utils.MenuType.BOARD, "main-menu-only")
-<div class="project-page-wrap">
-	<form action="@routes.BoardApp.editPost(project.owner, project.name, number)" method="post" enctype="multipart/form-data" class="nm">
-	<div class="content-wrap frm-wrap">
-		<dl>
-			<dt>
-				<label for="title">@Messages("title")</label>
-			</dt>
-			<dd>
-				@defining(form.errors().get("title")) { errors =>
-				<input type="text" id="title" name="title" value="@posting.title" class="zen-mode text title @if(errors != null) {error}" maxlength="250" tabindex="1" />
-					@if(errors != null) {
-						<div class="message">
-						@for(error <- errors) {
-							<div>@Messages(error.message)</div>
-						}
-						</div>
-					}
-				}
-			</dd>
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+    	<form action="@routes.BoardApp.editPost(project.owner, project.name, number)" method="post" enctype="multipart/form-data" class="nm">
+    	<div class="content-wrap frm-wrap">
+    		<dl>
+    			<dt>
+    				<label for="title">@Messages("title")</label>
+    			</dt>
+    			<dd>
+    				@defining(form.errors().get("title")) { errors =>
+    				<input type="text" id="title" name="title" value="@posting.title" class="zen-mode text title @if(errors != null) {error}" maxlength="250" tabindex="1" />
+    					@if(errors != null) {
+    						<div class="message">
+    						@for(error <- errors) {
+    							<div>@Messages(error.message)</div>
+    						}
+    						</div>
+    					}
+    				}
+    			</dd>
 
-		    <dd style="position: relative;">
-                <div id="mode-select">
-                    <input type="radio" name="edit-mode" id="edit-mode" value="edit" checked="checked" class="radio-btn">
-                    <label for="edit-mode" style="margin-right:3px;">Edit</label>
-                    <input type="radio" name="edit-mode" id="preview-mode" value="preview" class="radio-btn">
-                    <label for="preview-mode">Preview</label>
-                </div>
-                <a href="#" class="go-zen" ><i class="s s--zen">Edit in Zen Mode</i></a>
-                @help.markdown()
-                <div class="textarea-box">
-                    <textarea id="body" name="body" class="zen-mode content" markdown="true" tabindex="2" data-label="@Messages("post.error.emptyBody")">@posting.body</textarea>
-                </div>
-			</dd>
+    		    <dd style="position: relative;">
+                    <div id="mode-select">
+                        <input type="radio" name="edit-mode" id="edit-mode" value="edit" checked="checked" class="radio-btn">
+                        <label for="edit-mode" style="margin-right:3px;">Edit</label>
+                        <input type="radio" name="edit-mode" id="preview-mode" value="preview" class="radio-btn">
+                        <label for="preview-mode">Preview</label>
+                    </div>
+                    <a href="#" class="go-zen" ><i class="s s--zen">Edit in Zen Mode</i></a>
+                    @help.markdown()
+                    <div class="textarea-box">
+                        <textarea id="body" name="body" class="zen-mode content" markdown="true" tabindex="2" data-label="@Messages("post.error.emptyBody")">@posting.body</textarea>
+                    </div>
+    			</dd>
 
-			@if(isAllowedToNotice){
-			@helper.input(form("notice")){(id, name, value, args) =>
-			<dd class="right-txt">
-				<input type="checkbox" id="notice" name="notice" class="checkbox" @toHtmlArgs(args) @(if(value.equals(Some("true"))) "checked" else "")/><!--
-			 --><label for="notice" class="label-public">@Messages("post.notice.label")</label>
-			</dd>
-			}
-			}
-		</dl>
+    			@if(isAllowedToNotice){
+    			@helper.input(form("notice")){(id, name, value, args) =>
+    			<dd class="right-txt">
+    				<input type="checkbox" id="notice" name="notice" class="checkbox" @toHtmlArgs(args) @(if(value.equals(Some("true"))) "checked" else "")/><!--
+    			 --><label for="notice" class="label-public">@Messages("post.notice.label")</label>
+    			</dd>
+    			}
+    			}
+    		</dl>
 
-        @** fileUploader **@
-        @if(!UserApp.currentUser.isAnonymous) {
-            @common.fileUploader(ResourceType.BOARD_POST, posting.id)
-        }
-        @** end of fileUploader **@
+            @** fileUploader **@
+            @if(!UserApp.currentUser.isAnonymous) {
+                @common.fileUploader(ResourceType.BOARD_POST, posting.id)
+            }
+            @** end of fileUploader **@
 
-		<div class="actions">
-			<button class="ybtn ybtn-info" tabindex="3">@Messages("button.save")</button><!--
-		 --><a href="javascript:history.back();" class="ybtn" tabindex="4">@Messages("button.cancel")</a>
-		</div>
+    		<div class="actions">
+    			<button class="ybtn ybtn-info" tabindex="3">@Messages("button.save")</button><!--
+    		 --><a href="javascript:history.back();" class="ybtn" tabindex="4">@Messages("button.cancel")</a>
+    		</div>
 
-	</div>
-	</form>
+    	</div>
+    	</form>
+    </div>
 </div>
-
 @common.markdown(project)
 
 <link rel="stylesheet" type="text/css" media="screen" href="@routes.Assets.at("javascripts/lib/mentionjs/mention.css")">
app/views/board/list.scala.html
--- app/views/board/list.scala.html
+++ app/views/board/list.scala.html
@@ -18,67 +18,68 @@
 
 @projectLayout(title, project, utils.MenuType.BOARD) {
 @projectMenu(project, utils.MenuType.BOARD, "main-menu-only")
-<div class="project-page-wrap">
-    <div class="search-wrap underline">
-        <form id="option_form" method="get" class="pull-left">
-            <input type="hidden" name="orderBy"  value="@param.orderBy">
-            <input type="hidden" name="orderDir" value="@param.orderDir">
-            <div class="search-bar">
-                <input name="filter" class="textbox" type="text" placeholder="@Messages("project.searchPlaceholder")" value="@param.filter">
-                <button type="submit" class="search-btn"><i class="yobicon-search"></i></button>
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+        <div class="search-wrap underline">
+            <form id="option_form" method="get" class="pull-left">
+                <input type="hidden" name="orderBy"  value="@param.orderBy">
+                <input type="hidden" name="orderDir" value="@param.orderDir">
+                <div class="search-bar">
+                    <input name="filter" class="textbox" type="text" placeholder="@Messages("project.searchPlaceholder")" value="@param.filter">
+                    <button type="submit" class="search-btn"><i class="yobicon-search"></i></button>
+                </div>
+            </form>
+            <div class="pull-right">
+                <a href="@routes.BoardApp.newPostForm(project.owner, project.name)" class="ybtn ybtn-success">@Messages("post.write")</a>
             </div>
-        </form>
-        <div class="pull-right">
-            <a href="@routes.BoardApp.newPostForm(project.owner, project.name)" class="ybtn ybtn-success">@Messages("post.write")</a>
         </div>
+
+    	@if(page.getTotalRowCount == 0 && notices.size == 0){
+
+    	<div class="error-wrap">
+    		<i class="ico ico-err1"></i>
+    		<p>@Messages("post.is.empty")</p>
+    	</div>
+
+    	} else {
+
+        @if(page.getTotalRowCount > 1){
+            <div class="filter-wrap board">
+                <div class="filters">
+                	@makeFilterLink("updatedDate", param.orderBy, param.orderDir, Messages("common.order.updatedDate"))
+                    @makeFilterLink("createdDate", param.orderBy, param.orderDir, Messages("common.order.date"))
+                    @makeFilterLink("numOfComments", param.orderBy, param.orderDir, Messages("common.order.comments"))
+                </div>
+            </div>
+        }
+
+    	@if(notices != null && notices.size > 0) {
+       
+    	<ul class="post-list-wrap notice-wrap">
+    	@for(post <- notices) {
+            @partial_list(post, project)
+    	}
+        </ul>
+    	
+    	}
+
+    	<ul class="post-list-wrap">
+    	@for(post <- page.getList()){
+            @partial_list(post, project)
+        }
+    	</ul>
+      }
+
+    	<div class="write-btn-wrap">
+    	</div>
+
+    	<div id="pagination">
+    		<!-- pagination.js will fill here. -->
+    	</div>
+
+        @help.keymap("boardList", project)
     </div>
-
-	@if(page.getTotalRowCount == 0 && notices.size == 0){
-
-	<div class="error-wrap">
-		<i class="ico ico-err1"></i>
-		<p>@Messages("post.is.empty")</p>
-	</div>
-
-	} else {
-
-    @if(page.getTotalRowCount > 1){
-        <div class="filter-wrap board">
-            <div class="filters">
-            	@makeFilterLink("updatedDate", param.orderBy, param.orderDir, Messages("common.order.updatedDate"))
-                @makeFilterLink("createdDate", param.orderBy, param.orderDir, Messages("common.order.date"))
-                @makeFilterLink("numOfComments", param.orderBy, param.orderDir, Messages("common.order.comments"))
-            </div>
-        </div>
-    }
-
-	@if(notices != null && notices.size > 0) {
-   
-	<ul class="post-list-wrap notice-wrap">
-	@for(post <- notices) {
-        @partial_list(post, project)
-	}
-    </ul>
-	
-	}
-
-	<ul class="post-list-wrap">
-	@for(post <- page.getList()){
-        @partial_list(post, project)
-    }
-	</ul>
-  }
-
-	<div class="write-btn-wrap">
-	</div>
-
-	<div id="pagination">
-		<!-- pagination.js will fill here. -->
-	</div>
-
-    @help.keymap("boardList", project)
 </div>
-
 <script type="text/javascript">
 	$(document).ready(function() {
 		$yobi.loadModule("board.List", {
app/views/board/view.scala.html
--- app/views/board/view.scala.html
+++ app/views/board/view.scala.html
@@ -14,100 +14,100 @@
 
 @projectLayout(post.title, project, utils.MenuType.BOARD){
 @projectMenu(project, utils.MenuType.BOARD, "main-menu-only")
-<div class="project-page-wrap board-view">
-
-	@** Post Info **@
-    <div class="board-header issue">
-        <div class="pull-right mr10 mt10">
-            <div class="date" title="@JodaDateUtil.getDateString(post.createdDate)">
-                @agoString(post.ago)
+<div class="page-wrap-outer">
+    <div class="project-page-wrap board-view">
+    	@** Post Info **@
+        <div class="board-header issue">
+            <div class="pull-right mr10 mt10">
+                <div class="date" title="@JodaDateUtil.getDateString(post.createdDate)">
+                    @agoString(post.ago)
+                </div>
+            </div>
+            <div class="title">
+                <strong class="board-id">@post.getNumber</strong> @post.title
             </div>
         </div>
-        <div class="title">
-            <strong class="board-id">@post.getNumber</strong> @post.title
-        </div>
-    </div>
 
-	@** Content body **@
-	<div class="board-body">
-		<div class="author-info">
-			<a href="@routes.UserApp.userInfo(post.authorLoginId)" class="avatar-wrap pull-left mr10">
-				<img src="@User.findByLoginId(post.authorLoginId).avatarUrl" width="32" height="32" alt="@post.authorName">
-			</a>
-			<div class="media-body">
-				<p>
-					<a href="@routes.UserApp.userInfo(post.authorLoginId)"><strong>@post.authorLoginId</strong> (@post.authorName)</a>
-				</p>
-				<p class="status">
-				    @Messages("comment") <strong class="num">@post.numOfComments</strong>
-				</p>
-			</div>
-		</div>
-		<div class="content markdown-wrap markdown-before" markdown="true">@post.body</div>
-		<div class="attachments" id="attachments" data-resourceType="@ResourceType.BOARD_POST" data-resourceId="@post.id"></div>
-	</div>
-	<div class="board-footer board-actrow">
-	    <div class="pull-left">
-            <a href="@urlToPostings" class="ybtn">@Messages("button.list")</a>
-        </div>
+    	@** Content body **@
+    	<div class="board-body">
+    		<div class="author-info">
+    			<a href="@routes.UserApp.userInfo(post.authorLoginId)" class="avatar-wrap pull-left mr10">
+    				<img src="@User.findByLoginId(post.authorLoginId).avatarUrl" width="32" height="32" alt="@post.authorName">
+    			</a>
+    			<div class="media-body">
+    				<p>
+    					<a href="@routes.UserApp.userInfo(post.authorLoginId)"><strong>@post.authorLoginId</strong> (@post.authorName)</a>
+    				</p>
+    				<p class="status">
+    				    @Messages("comment") <strong class="num">@post.numOfComments</strong>
+    				</p>
+    			</div>
+    		</div>
+    		<div class="content markdown-wrap markdown-before" markdown="true">@post.body</div>
+    		<div class="attachments" id="attachments" data-resourceType="@ResourceType.BOARD_POST" data-resourceId="@post.id"></div>
+    	</div>
+    	<div class="board-footer board-actrow">
+    	    <div class="pull-left">
+                <a href="@urlToPostings" class="ybtn">@Messages("button.list")</a>
+            </div>
 
-        @if(isAllowed(UserApp.currentUser(), post.asResource(), Operation.DELETE)){
-        <a href="#deleteConfirm" class="ybtn ybtn-danger" data-toggle="modal">@Messages("button.delete")</a>
-        }
+            @if(isAllowed(UserApp.currentUser(), post.asResource(), Operation.DELETE)){
+            <a href="#deleteConfirm" class="ybtn ybtn-danger" data-toggle="modal">@Messages("button.delete")</a>
+            }
 
-        @if(isAllowed(UserApp.currentUser(), post.asResource(), Operation.UPDATE)){
-        <a href="@routes.BoardApp.editPostForm(project.owner, project.name, post.getNumber)" class="ybtn">@Messages("button.edit")</a>
-        }
+            @if(isAllowed(UserApp.currentUser(), post.asResource(), Operation.UPDATE)){
+            <a href="@routes.BoardApp.editPostForm(project.owner, project.name, post.getNumber)" class="ybtn">@Messages("button.edit")</a>
+            }
 
-        @if(isAllowed(UserApp.currentUser(), post.asResource(), Operation.WATCH)){
-        <button id="watch-button" type="button" class="ybtn" data-toggle="button" data-watching="@if(post.getWatchers.contains(UserApp.currentUser())){true}else{false}">
-            @if(post.getWatchers.contains(UserApp.currentUser())) { @Messages("project.unwatch") } else { @Messages("project.watch") }
-        </button>
-        }
-	</div>
+            @if(isAllowed(UserApp.currentUser(), post.asResource(), Operation.WATCH)){
+            <button id="watch-button" type="button" class="ybtn" data-toggle="button" data-watching="@if(post.getWatchers.contains(UserApp.currentUser())){true}else{false}">
+                @if(post.getWatchers.contains(UserApp.currentUser())) { @Messages("project.unwatch") } else { @Messages("project.watch") }
+            </button>
+            }
+    	</div>
 
-	@** Comment **@
-	<div id="comments" class="board-comment-wrap">
-		<div class="comment-header"><i class="yobicon-comments"></i> <strong>@Messages("common.comment")</strong> <strong class="num">@post.comments.size</strong></div>
-	    <hr class="nm" />
+    	@** Comment **@
+    	<div id="comments" class="board-comment-wrap">
+    		<div class="comment-header"><i class="yobicon-comments"></i> <strong>@Messages("common.comment")</strong> <strong class="num">@post.comments.size</strong></div>
+    	    <hr class="nm" />
 
-	    <ul class="comments">
-	    @for(comment <-post.comments){
-			<li class="comment @isAuthorComment(comment.authorLoginId)" id="comment-@comment.id">
-                <div class="comment-avatar">
-                    <a href="@routes.UserApp.userInfo(comment.authorLoginId)" class="avatar-wrap" data-toggle="tooltip" data-placement="top" title="@comment.authorName">
-                        <img src="@User.findByLoginId(comment.authorLoginId).avatarUrl" width="32" height="32" alt="@comment.authorLoginId">
-                    </a>
-                </div>
-                <div class="media-body">
-                    <div class="meta-info">
-                        <span class="comment_author pull-left">
-                            <a href="@routes.UserApp.userInfo(comment.authorLoginId)" data-toggle="tooltip" data-placement="top" title="@comment.authorName">
-                                <strong>@comment.authorLoginId </strong>
-                            </a>
-                        </span>
-                        <a href="#comment-@comment.id" class="ago">@utils.TemplateHelper.agoString(comment.ago())</a>
-                        @if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE)){
-                        <span class="edit pull-right">
-                            <button type="button" class="btn-transparent close" data-request-method="delete" data-request-uri="@routes.BoardApp.deleteComment(project.owner, project.name, post.getNumber, comment.id)"><i class="yobicon-trash"></i></button>
-                        </span>
-                        }
+    	    <ul class="comments">
+    	    @for(comment <-post.comments){
+    			<li class="comment @isAuthorComment(comment.authorLoginId)" id="comment-@comment.id">
+                    <div class="comment-avatar">
+                        <a href="@routes.UserApp.userInfo(comment.authorLoginId)" class="avatar-wrap" data-toggle="tooltip" data-placement="top" title="@comment.authorName">
+                            <img src="@User.findByLoginId(comment.authorLoginId).avatarUrl" width="32" height="32" alt="@comment.authorLoginId">
+                        </a>
                     </div>
+                    <div class="media-body">
+                        <div class="meta-info">
+                            <span class="comment_author pull-left">
+                                <a href="@routes.UserApp.userInfo(comment.authorLoginId)" data-toggle="tooltip" data-placement="top" title="@comment.authorName">
+                                    <strong>@comment.authorLoginId </strong>
+                                </a>
+                            </span>
+                            <a href="#comment-@comment.id" class="ago">@utils.TemplateHelper.agoString(comment.ago())</a>
+                            @if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE)){
+                            <span class="edit pull-right">
+                                <button type="button" class="btn-transparent close" data-request-method="delete" data-request-uri="@routes.BoardApp.deleteComment(project.owner, project.name, post.getNumber, comment.id)"><i class="yobicon-trash"></i></button>
+                            </span>
+                            }
+                        </div>
 
-                    <div class="comment-body markdown-wrap markdown-before" markdown="true">@comment.contents</div>
+                        <div class="comment-body markdown-wrap markdown-before" markdown="true">@comment.contents</div>
 
-                    <div class="attachments pull-right" data-resourceType="@ResourceType.NONISSUE_COMMENT" data-resourceId="@comment.id"></div>
-                </div>
-            </li>
-	    }
-		</ul>
+                        <div class="attachments pull-right" data-resourceType="@ResourceType.NONISSUE_COMMENT" data-resourceId="@comment.id"></div>
+                    </div>
+                </li>
+    	    }
+    		</ul>
 
-        @common.commentForm(project, ResourceType.NONISSUE_COMMENT, routes.BoardApp.newComment(project.owner, project.name, post.getNumber).toString())
-	</div>
+            @common.commentForm(project, ResourceType.NONISSUE_COMMENT, routes.BoardApp.newComment(project.owner, project.name, post.getNumber).toString())
+    	</div>
 
-	@help.keymap("boardDetail", project)
+    	@help.keymap("boardDetail", project)
+    </div>
 </div>
-
 <script type="text/x-jquery-tmpl" id="tplAttachedFile"><!--
 	--><li class="attached-file" data-name="${fileName}" data-href="${fileHref}" data-mime="${mimeType}" data-size="${fileSize}">
     <strong>${fileName}(${fileSizeReadable})${notice}</strong><!--
app/views/code/branches.scala.html
--- app/views/code/branches.scala.html
+++ app/views/code/branches.scala.html
@@ -24,44 +24,46 @@
 
 @projectLayout(Messages("title.branches"), project, utils.MenuType.CODE) {
 @projectMenu(project, utils.MenuType.CODE, "main-menu-only")
-<div class="project-page-wrap">
-    <div class="bubble-wrap dark-gray repo-wrap">
-        <div class="code-browse-wrap">
-            <ul class="nav nav-tabs" style="margin-bottom:20px;">
-                <li>
-                    <a href="@routes.CodeApp.codeBrowserWithBranch(project.owner, project.name, "HEAD", "")">@Messages("code.files")</a>
-                </li>
-                <li>
-                    <a href="@routes.CodeHistoryApp.historyUntilHead(project.owner, project.name)">@Messages("code.commits")</a>
-                </li>
-                @if(project.isGit()) {
-                <li class="active">
-                    <a href="@routes.BranchApp.branches(project.owner, project.name)">@Messages("title.branches")</a>
-                </li>
-                }
-            </ul>
-
-            <table class="table branch-list-wrap">
-                <thead class="thead">
-                    <tr>
-                        <th>@Messages("title.branches")</th>
-                        <th>@Messages("code.branches.commitMsg")</th>
-                        <th>@Messages("code.branches.commitDate")</th>
-                        <th>@Messages("code.branches.pullRequest")</th>
-                        @if(isAllowed(UserApp.currentUser(), project.asResource(), Operation.DELETE) ||
-                            isAllowed(UserApp.currentUser(), project.asResource(), Operation.UPDATE)) {
-                            <th></th>
-                        }
-                    </tr>
-                </thead>
-                <tbody>
-                    @partial_branchrow(project, head, true)
-
-                    @for(branch <- branches.iterator()) {
-                        @partial_branchrow(project, branch, false)
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+        <div class="bubble-wrap dark-gray repo-wrap">
+            <div class="code-browse-wrap">
+                <ul class="nav nav-tabs" style="margin-bottom:20px;">
+                    <li>
+                        <a href="@routes.CodeApp.codeBrowserWithBranch(project.owner, project.name, "HEAD", "")">@Messages("code.files")</a>
+                    </li>
+                    <li>
+                        <a href="@routes.CodeHistoryApp.historyUntilHead(project.owner, project.name)">@Messages("code.commits")</a>
+                    </li>
+                    @if(project.isGit()) {
+                    <li class="active">
+                        <a href="@routes.BranchApp.branches(project.owner, project.name)">@Messages("title.branches")</a>
+                    </li>
                     }
-                </tbody>
-            </table>
+                </ul>
+
+                <table class="table branch-list-wrap">
+                    <thead class="thead">
+                        <tr>
+                            <th>@Messages("title.branches")</th>
+                            <th>@Messages("code.branches.commitMsg")</th>
+                            <th>@Messages("code.branches.commitDate")</th>
+                            <th>@Messages("code.branches.pullRequest")</th>
+                            @if(isAllowed(UserApp.currentUser(), project.asResource(), Operation.DELETE) ||
+                                isAllowed(UserApp.currentUser(), project.asResource(), Operation.UPDATE)) {
+                                <th></th>
+                            }
+                        </tr>
+                    </thead>
+                    <tbody>
+                        @partial_branchrow(project, head, true)
+
+                        @for(branch <- branches.iterator()) {
+                            @partial_branchrow(project, branch, false)
+                        }
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
 </div>
app/views/code/diff.scala.html
--- app/views/code/diff.scala.html
+++ app/views/code/diff.scala.html
@@ -8,129 +8,129 @@
 
 @projectLayout(Messages("code.commits") + " @" + commit.getId, project, utils.MenuType.CODE) {
 @projectMenu(project, utils.MenuType.CODE, "main-menu-only")
-
-<div class="project-page-wrap">
-    <div class="code-browse-wrap">
-        <div id="branches" class="btn-group branches pull-right" data-name="branch" data-activate="manual">
-            <button class="btn dropdown-toggle large" data-toggle="dropdown">
-                <span class="d-label">@selectedBranch</span>
-                <span class="d-caret"><span class="caret"></span></span>
-            </button>
-            <ul class="dropdown-menu">
-            @defining(RepositoryService.getRepository(project).getBranches()) { branches =>
-                @for(branch <- branches){
-                    @partial_branchitem(project, branch, "history", "")
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+        <div class="code-browse-wrap">
+            <div id="branches" class="btn-group branches pull-right" data-name="branch" data-activate="manual">
+                <button class="btn dropdown-toggle large" data-toggle="dropdown">
+                    <span class="d-label">@selectedBranch</span>
+                    <span class="d-caret"><span class="caret"></span></span>
+                </button>
+                <ul class="dropdown-menu">
+                @defining(RepositoryService.getRepository(project).getBranches()) { branches =>
+                    @for(branch <- branches){
+                        @partial_branchitem(project, branch, "history", "")
+                    }
                 }
-            }
-            </ul>
-        </div>
+                </ul>
+            </div>
 
-        <ul class="nav nav-tabs" style="margin-bottom:20px;">
-            <li>
-                <a href="@routes.CodeApp.codeBrowser(project.owner, project.name)">@Messages("code.files")</a>
-            </li>
-            <li class="active">
-                <a href="@routes.CodeHistoryApp.historyUntilHead(project.owner, project.name)">@Messages("code.commits")</a>
-            </li>
-        </ul>
-
-        <p class="commitInfo">
-            @(commit.getAuthor, commit.getAuthorEmail, commit.getAuthorName) match {
-            case (user: User, _, _) if !user.isAnonymous => {
-                <a href="@routes.UserApp.userInfo(commit.getAuthor.loginId)" class="avatar-wrap">
-                    <img src="@commit.getAuthor.avatarUrl" alt="@commit.getAuthor.name" width="32" height="32"/>
-                </a>
-                <strong>@commit.getAuthor.name</strong>
-            }
-            case (_, email, name) if email != null => {
-                <span class="avatar-wrap">
-                    <img src="@urlToPicture(commit.getAuthorEmail, 32)" width="32" height="32">
-                </span>
-                @if(name != null) {
-                <strong>@name</strong>
-                }
-            }
-            case (_, _, name) if name != null => {
-                <strong>@name</strong>
-            }
-            case (_, _, _) => {
-                <strong>@User.anonymous.name</strong>
-            }
-            }
-            <span class="ago" title="@JodaDateUtil.getDateString(commit.getAuthorDate)">
-                @agoString(JodaDateUtil.ago(commit.getAuthorDate))
-            </span>
-            <strong class="commitId pull-right">@{"@"}@commit.getId</strong>
-            @if(comments.size > 0) {
-            <span class="pull-right mt5 mr10">
-                <input id="toggle-comments" type="checkbox" checked="checked" class="checkbox">
-                <label for="toggle-comments" class="form-label">@Messages("code.showcomments")</label>
-            </span>
-            }
-        </p>
-        <pre class="commitMsg">@commit.getMessage</pre>
-        <div class="diff-body">
-        @views.html.partial_diff(diff, comments, project, project)
-        </div>
-
-        @** Comment **@
-        <div class="board-comment-wrap">
-            @defining(comments.filter(v => v.line == null)) { comments =>
-            @if(comments.size > 0) {
-            <ul class="comments">
-                @for(comment <- comments){
-                <li id="comment-@comment.id" data-path="@comment.path" data-side="@comment.side" data-line="@comment.line" class="comment">
-                    <div class="comment-avatar">
-                        <a href="@routes.UserApp.userInfo(comment.authorLoginId)" class="avatar-wrap" data-toggle="tooltip" data-placement="top" title="@comment.authorName">
-                            <img src="@User.findByLoginId(comment.authorLoginId).avatarUrl" width="32" height="32" alt="@comment.authorLoginId">
-                        </a>
-                    </div>
-                    <div class="media-body">
-                        <div class="meta-info">
-                            <span class="comment_author pull-left">
-                                <a href="@routes.UserApp.userInfo(comment.authorLoginId)" data-toggle="tooltip" data-placement="top" title="@comment.authorName">
-                                    <strong>@comment.authorLoginId </strong>
-                                </a>
-                            </span>
-                            <span class="ago" title="@JodaDateUtil.getDateString(comment.createdDate)">
-                                <a href="#comment-@comment.id">
-                                    @agoString(JodaDateUtil.ago(comment.createdDate))
-                                </a>
-                            </span>
-                            @if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE)){
-                            <span class="edit pull-right">
-                                <button class="btn-transparent pull-right close" data-request-method="delete" data-request-uri="@routes.CodeHistoryApp.deleteComment(project.owner, project.name, commit.getId, comment.id)"><i class="yobicon-trash"></i></button>
-                            </span>
-                            }
-                        </div>
-
-                        <div class="comment-body markdown-wrap markdown-before" markdown="true">@comment.contents</div>
-
-                        <div class="attachments" data-resourceType="@ResourceType.COMMIT_COMMENT" data-resourceId="@comment.id"></div>
-                    </div>
+            <ul class="nav nav-tabs" style="margin-bottom:20px;">
+                <li>
+                    <a href="@routes.CodeApp.codeBrowser(project.owner, project.name)">@Messages("code.files")</a>
                 </li>
-                }
+                <li class="active">
+                    <a href="@routes.CodeHistoryApp.historyUntilHead(project.owner, project.name)">@Messages("code.commits")</a>
+                </li>
             </ul>
-            }
-            }
 
-            @common.commentForm(project, ResourceType.COMMIT_COMMENT, routes.CodeHistoryApp.newComment(project.owner, project.name, commit.getId).toString())
+            <p class="commitInfo">
+                @(commit.getAuthor, commit.getAuthorEmail, commit.getAuthorName) match {
+                case (user: User, _, _) if !user.isAnonymous => {
+                    <a href="@routes.UserApp.userInfo(commit.getAuthor.loginId)" class="avatar-wrap">
+                        <img src="@commit.getAuthor.avatarUrl" alt="@commit.getAuthor.name" width="32" height="32"/>
+                    </a>
+                    <strong>@commit.getAuthor.name</strong>
+                }
+                case (_, email, name) if email != null => {
+                    <span class="avatar-wrap">
+                        <img src="@urlToPicture(commit.getAuthorEmail, 32)" width="32" height="32">
+                    </span>
+                    @if(name != null) {
+                    <strong>@name</strong>
+                    }
+                }
+                case (_, _, name) if name != null => {
+                    <strong>@name</strong>
+                }
+                case (_, _, _) => {
+                    <strong>@User.anonymous.name</strong>
+                }
+                }
+                <span class="ago" title="@JodaDateUtil.getDateString(commit.getAuthorDate)">
+                    @agoString(JodaDateUtil.ago(commit.getAuthorDate))
+                </span>
+                <strong class="commitId pull-right">@{"@"}@commit.getId</strong>
+                @if(comments.size > 0) {
+                <span class="pull-right mt5 mr10">
+                    <input id="toggle-comments" type="checkbox" checked="checked" class="checkbox">
+                    <label for="toggle-comments" class="form-label">@Messages("code.showcomments")</label>
+                </span>
+                }
+            </p>
+            <pre class="commitMsg">@commit.getMessage</pre>
+            <div class="diff-body">
+            @views.html.partial_diff(diff, comments, project, project)
+            </div>
+
+            @** Comment **@
+            <div class="board-comment-wrap">
+                @defining(comments.filter(v => v.line == null)) { comments =>
+                @if(comments.size > 0) {
+                <ul class="comments">
+                    @for(comment <- comments){
+                    <li id="comment-@comment.id" data-path="@comment.path" data-side="@comment.side" data-line="@comment.line" class="comment">
+                        <div class="comment-avatar">
+                            <a href="@routes.UserApp.userInfo(comment.authorLoginId)" class="avatar-wrap" data-toggle="tooltip" data-placement="top" title="@comment.authorName">
+                                <img src="@User.findByLoginId(comment.authorLoginId).avatarUrl" width="32" height="32" alt="@comment.authorLoginId">
+                            </a>
+                        </div>
+                        <div class="media-body">
+                            <div class="meta-info">
+                                <span class="comment_author pull-left">
+                                    <a href="@routes.UserApp.userInfo(comment.authorLoginId)" data-toggle="tooltip" data-placement="top" title="@comment.authorName">
+                                        <strong>@comment.authorLoginId </strong>
+                                    </a>
+                                </span>
+                                <span class="ago" title="@JodaDateUtil.getDateString(comment.createdDate)">
+                                    <a href="#comment-@comment.id">
+                                        @agoString(JodaDateUtil.ago(comment.createdDate))
+                                    </a>
+                                </span>
+                                @if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE)){
+                                <span class="edit pull-right">
+                                    <button class="btn-transparent pull-right close" data-request-method="delete" data-request-uri="@routes.CodeHistoryApp.deleteComment(project.owner, project.name, commit.getId, comment.id)"><i class="yobicon-trash"></i></button>
+                                </span>
+                                }
+                            </div>
+
+                            <div class="comment-body markdown-wrap markdown-before" markdown="true">@comment.contents</div>
+
+                            <div class="attachments" data-resourceType="@ResourceType.COMMIT_COMMENT" data-resourceId="@comment.id"></div>
+                        </div>
+                    </li>
+                    }
+                </ul>
+                }
+                }
+
+                @common.commentForm(project, ResourceType.COMMIT_COMMENT, routes.CodeHistoryApp.newComment(project.owner, project.name, commit.getId).toString())
+            </div>
+            @** // Comment **@
         </div>
-        @** // Comment **@
-    </div>
 
-    <button id="watch-button" type="button" class="ybtn @if(commit.getWatchers(project).contains(UserApp.currentUser())) { active ybtn-watching }" data-toggle="button">@Messages("notification.watch")</button>
+        <button id="watch-button" type="button" class="ybtn @if(commit.getWatchers(project).contains(UserApp.currentUser())) { active ybtn-watching }" data-toggle="button">@Messages("notification.watch")</button>
 
-    <a href="@routes.CodeHistoryApp.history(project.owner, project.name, selectedBranch, path)" class="ybtn pull-right">@Messages("button.list")</a>
+        <a href="@routes.CodeHistoryApp.history(project.owner, project.name, selectedBranch, path)" class="ybtn pull-right">@Messages("button.list")</a>
 
-    <div id="minimap" class="minimap-outer">
-        <div class="minimap-wrap">
-            <div class="minimap-curr"></div>
-            <div class="minimap-links"></div>
+        <div id="minimap" class="minimap-outer">
+            <div class="minimap-wrap">
+                <div class="minimap-curr"></div>
+                <div class="minimap-links"></div>
+            </div>
         </div>
     </div>
 </div>
-
 @common.markdown(project)
 @common.mergely()
 
app/views/code/history.scala.html
--- app/views/code/history.scala.html
+++ app/views/code/history.scala.html
@@ -61,136 +61,137 @@
 
 @projectLayout(Messages("title.commitHistory"), project, utils.MenuType.CODE) {
 @projectMenu(project, utils.MenuType.CODE, "main-menu-only")
-<div class="project-page-wrap">
-    <div class="bubble-wrap dark-gray repo-wrap">
-        <div class="code-browse-wrap">
-            @if(path != null){
-            <div id="breadcrumbs" class="code-breadcrumb-wrap">
-                <a href="@routes.CodeHistoryApp.history(project.owner, project.name, URLEncoder.encode(selectedBranch, "UTF-8"), "")">@project.name</a>
-                @makeBreadCrumbs(path)
-            </div>
-            }
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+        <div class="bubble-wrap dark-gray repo-wrap">
+            <div class="code-browse-wrap">
+                @if(path != null){
+                <div id="breadcrumbs" class="code-breadcrumb-wrap">
+                    <a href="@routes.CodeHistoryApp.history(project.owner, project.name, URLEncoder.encode(selectedBranch, "UTF-8"), "")">@project.name</a>
+                    @makeBreadCrumbs(path)
+                </div>
+                }
 
-            @if(path == null){
-            <div id="branches" class="btn-group branches pull-right" data-name="branch" data-activate="manual">
-                <button class="btn dropdown-toggle large" data-toggle="dropdown">
-                    <span class="d-label">@if(selectedBranch){ @selectedBranch } else { HEAD }</span>
-                    <span class="d-caret"><span class="caret"></span></span>
-                </button>
-                <ul class="dropdown-menu">
-                    @defining(RepositoryService.getRepository(project).getBranches()) { branches =>
-                        @for(branch <- branches){
-                            @partial_branchitem(project, branch, "history", "")
+                @if(path == null){
+                <div id="branches" class="btn-group branches pull-right" data-name="branch" data-activate="manual">
+                    <button class="btn dropdown-toggle large" data-toggle="dropdown">
+                        <span class="d-label">@if(selectedBranch){ @selectedBranch } else { HEAD }</span>
+                        <span class="d-caret"><span class="caret"></span></span>
+                    </button>
+                    <ul class="dropdown-menu">
+                        @defining(RepositoryService.getRepository(project).getBranches()) { branches =>
+                            @for(branch <- branches){
+                                @partial_branchitem(project, branch, "history", "")
+                            }
                         }
+                    </ul>
+                </div>
+
+                <ul class="nav nav-tabs" style="margin-bottom:20px;">
+                    <li>
+                        <a href="@getFilesURL">@Messages("code.files")</a>
+                    </li>
+                    <li class="active">
+                        <a href="@getHistoryURL(path)">@Messages("code.commits")</a>
+                    </li>
+                    @if(project.isGit()) {
+                    <li>
+                        <a href="@routes.BranchApp.branches(project.owner, project.name)">@Messages("title.branches")</a>
+                    </li>
                     }
                 </ul>
-            </div>
-
-            <ul class="nav nav-tabs" style="margin-bottom:20px;">
-                <li>
-                    <a href="@getFilesURL">@Messages("code.files")</a>
-                </li>
-                <li class="active">
-                    <a href="@getHistoryURL(path)">@Messages("code.commits")</a>
-                </li>
-                @if(project.isGit()) {
-                <li>
-                    <a href="@routes.BranchApp.branches(project.owner, project.name)">@Messages("title.branches")</a>
-                </li>
                 }
-            </ul>
-            }
 
-            <div id="history" class="commit-wrap">
-                <table class="code-table commits@if(path != null){ mt10}">
-                    <thead class="thead">
-                        <tr>
-                            <td class="commit-id"><strong>@{"@"}</strong></td>
-                            <td class="messages"><strong>@Messages("code.commitMsg")</strong></td>
-                            @if(path != null){
-                            <td class="browse"></td>
-                            }
-                            <td class="date"><strong>@Messages("code.commitDate")</strong></td>
-                            <td class="author"><strong>@Messages("code.author")</strong></td>
-                        </tr>
-                    </thead>
-                    <tbody class="tbody">
-                        @if(history.isEmpty()){
-                            <tr><td colspan="5" class="warning-none">@Messages("code.nocommits")</td></tr>
-                        }
-                        @for(commit <- history.iterator()) {
-                        @defining(getShowCommitURL(project, commit, path)){ showCommitURL =>
-                        <tr>
-                            <td class="commit-id">
-                                <a href="@showCommitURL" title="@Messages("code.showCommit")">
-                                    @commit.getShortId()
-                                </a>
-                            </td>
-                            <td class="messages">
-                                @defining(CommitComment.count(project, commit.getId, path)){ numOfComment =>
-                                    @if(numOfComment > 0) {
-                                    <span class="number-of-comments"><i class="yobicon-comments"></i> @numOfComment</span>
-                                    }
+                <div id="history" class="commit-wrap">
+                    <table class="code-table commits@if(path != null){ mt10}">
+                        <thead class="thead">
+                            <tr>
+                                <td class="commit-id"><strong>@{"@"}</strong></td>
+                                <td class="messages"><strong>@Messages("code.commitMsg")</strong></td>
+                                @if(path != null){
+                                <td class="browse"></td>
                                 }
-
-                                @common.commitMsg(commit.getShortMessage(), commit.getMessage(), showCommitURL.toString())
-                            </td>
-                            @if(path != null){
-                            <td class="browse">
-                                <a href="@routes.CodeApp.codeBrowserWithBranch(project.owner, project.name, commit.getShortId(), path)" title="@Messages("code.showCodeAtThisCommit")" class="ybtn">
-                                    @Messages("code.showCode")
-                                </a>
-                            </td>
+                                <td class="date"><strong>@Messages("code.commitDate")</strong></td>
+                                <td class="author"><strong>@Messages("code.author")</strong></td>
+                            </tr>
+                        </thead>
+                        <tbody class="tbody">
+                            @if(history.isEmpty()){
+                                <tr><td colspan="5" class="warning-none">@Messages("code.nocommits")</td></tr>
                             }
-                            <td class="date">@momentFromNow(commit.getAuthorDate(), lang.language)</td>
-                            <td class="author">
-                                @(commit.getAuthor, commit.getAuthorEmail, commit.getAuthorName) match {
-                                case (user: User, _, _) if !user.isAnonymous => {
-
-                                    <a href="@routes.UserApp.userInfo(commit.getAuthor.loginId)" class="avatar-wrap" data-toggle="tooltip" data-placement="top" title="@user.loginId">
-                                    @if(user.avatarUrl == UserApp.DEFAULT_AVATAR_URL){
-                                        @if(commit.getAuthorEmail != null) {
-                                            <img src="@urlToPicture(commit.getAuthorEmail, 32)">
-                                        } else {
-                                            <img src="@urlToPicture(commit.getAuthor.email, 32)">
+                            @for(commit <- history.iterator()) {
+                            @defining(getShowCommitURL(project, commit, path)){ showCommitURL =>
+                            <tr>
+                                <td class="commit-id">
+                                    <a href="@showCommitURL" title="@Messages("code.showCommit")">
+                                        @commit.getShortId()
+                                    </a>
+                                </td>
+                                <td class="messages">
+                                    @defining(CommitComment.count(project, commit.getId, path)){ numOfComment =>
+                                        @if(numOfComment > 0) {
+                                        <span class="number-of-comments"><i class="yobicon-comments"></i> @numOfComment</span>
                                         }
-                                    } else {
-                                        <img src="@commit.getAuthor.avatarUrl" alt="@commit.getAuthor.name" width="32" height="32"/>
-                                    } </a>
+                                    }
+
+                                    @common.commitMsg(commit.getShortMessage(), commit.getMessage(), showCommitURL.toString())
+                                </td>
+                                @if(path != null){
+                                <td class="browse">
+                                    <a href="@routes.CodeApp.codeBrowserWithBranch(project.owner, project.name, commit.getShortId(), path)" title="@Messages("code.showCodeAtThisCommit")" class="ybtn">
+                                        @Messages("code.showCode")
+                                    </a>
+                                </td>
                                 }
-                                case (_, email, _) if email != null => {
-                                    <span class="avatar-wrap"  class="avatar-wrap" data-toggle="tooltip" data-placement="top" title="@commit.getAuthorEmail">
-                                        <img src="@urlToPicture(commit.getAuthorEmail, 32)">
-                                    </span>
-                                }
-                                case (_, _, name) if name != null => {
-                                    <span>@commit.getAuthorName</span>
-                                }
-                                case (_, _, _) => {
-                                    <span>@User.anonymous.name</span>
-                                }
-                                }
-                            </td>
-                        </tr>
-                        }
-                        }
-                    </tbody>
-                </table>
+                                <td class="date">@momentFromNow(commit.getAuthorDate(), lang.language)</td>
+                                <td class="author">
+                                    @(commit.getAuthor, commit.getAuthorEmail, commit.getAuthorName) match {
+                                    case (user: User, _, _) if !user.isAnonymous => {
+
+                                        <a href="@routes.UserApp.userInfo(commit.getAuthor.loginId)" class="avatar-wrap" data-toggle="tooltip" data-placement="top" title="@user.loginId">
+                                        @if(user.avatarUrl == UserApp.DEFAULT_AVATAR_URL){
+                                            @if(commit.getAuthorEmail != null) {
+                                                <img src="@urlToPicture(commit.getAuthorEmail, 32)">
+                                            } else {
+                                                <img src="@urlToPicture(commit.getAuthor.email, 32)">
+                                            }
+                                        } else {
+                                            <img src="@commit.getAuthor.avatarUrl" alt="@commit.getAuthor.name" width="32" height="32"/>
+                                        } </a>
+                                    }
+                                    case (_, email, _) if email != null => {
+                                        <span class="avatar-wrap"  class="avatar-wrap" data-toggle="tooltip" data-placement="top" title="@commit.getAuthorEmail">
+                                            <img src="@urlToPicture(commit.getAuthorEmail, 32)">
+                                        </span>
+                                    }
+                                    case (_, _, name) if name != null => {
+                                        <span>@commit.getAuthorName</span>
+                                    }
+                                    case (_, _, _) => {
+                                        <span>@User.anonymous.name</span>
+                                    }
+                                    }
+                                </td>
+                            </tr>
+                            }
+                            }
+                        </tbody>
+                    </table>
+                </div>
             </div>
-        </div>
 
-        <div class="actrow margin-top-20">
-            @if(page > 0) {
-            <a href="@getHistoryURL(path)?page=@(page - 1)" class="ybtn pull-left">@Messages("code.newer")</a>
-            }
+            <div class="actrow margin-top-20">
+                @if(page > 0) {
+                <a href="@getHistoryURL(path)?page=@(page - 1)" class="ybtn pull-left">@Messages("code.newer")</a>
+                }
 
-            @if(isHistoryExistAndHasParent(history)) {
-            <a href="@getHistoryURL(path)?page=@(page + 1)" class="ybtn pull-left">@Messages("code.older")</a>
-            }
+                @if(isHistoryExistAndHasParent(history)) {
+                <a href="@getHistoryURL(path)?page=@(page + 1)" class="ybtn pull-left">@Messages("code.older")</a>
+                }
+            </div>
         </div>
     </div>
 </div>
-
 <script type="text/javascript">
 $(document).ready(function(){
     $("button.moreBtn").on("click", function(){
app/views/code/nohead.scala.html
--- app/views/code/nohead.scala.html
+++ app/views/code/nohead.scala.html
@@ -18,39 +18,39 @@
 
 @projectLayout(Messages("title.commitHistory"), project, utils.MenuType.CODE) {
 @projectMenu(project, utils.MenuType.CODE, "main-menu-only")
-
-<div class="project-page-wrap">
-	<div class="row-fluid">
-		<div class="span12">
-			@Html(Messages("code.nohead"))
-@if(isAllowed(UserApp.currentUser(), project.asResource(), Operation.UPDATE)) {
-            <h5>@Messages("code.nohead.clone", Messages("app.name"))</h5>
-			<pre><code>git clone @getCodeURL(project)
-cd @project.name/
-echo "# @project.name" > README.md
-git add README.md
-git commit -m "Hello @Messages("app.name")"
-git push origin master</code></pre>
-            <h5>@Messages("code.nohead.init", Messages("app.name"))</h5>
-            <pre><code>mkdir @project.name
-cd @project.name/
-echo "# @project.name" > README.md
-git init
-git add README.md
-git commit -m "Hello @Messages("app.name")"
-git remote add origin @getCodeURL(project)
-git push origin master</code></pre>
-            <h5>@Messages("code.nohead.remote", Messages("app.name"))</h5>
-            <pre><code>git remote add origin @getCodeURL(project)
-git push origin master</code></pre>
-            <h5>@Messages("code.nohead.pull.push")</h5>
-            <pre><code>git pull origin master
-git push origin master</code></pre>
-}
-		</div>
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+    	<div class="row-fluid">
+    		<div class="span12">
+    			@Html(Messages("code.nohead"))
+    @if(isAllowed(UserApp.currentUser(), project.asResource(), Operation.UPDATE)) {
+                <h5>@Messages("code.nohead.clone", Messages("app.name"))</h5>
+    			<pre><code>git clone @getCodeURL(project)
+    cd @project.name/
+    echo "# @project.name" > README.md
+    git add README.md
+    git commit -m "Hello @Messages("app.name")"
+    git push origin master</code></pre>
+                <h5>@Messages("code.nohead.init", Messages("app.name"))</h5>
+                <pre><code>mkdir @project.name
+    cd @project.name/
+    echo "# @project.name" > README.md
+    git init
+    git add README.md
+    git commit -m "Hello @Messages("app.name")"
+    git remote add origin @getCodeURL(project)
+    git push origin master</code></pre>
+                <h5>@Messages("code.nohead.remote", Messages("app.name"))</h5>
+                <pre><code>git remote add origin @getCodeURL(project)
+    git push origin master</code></pre>
+                <h5>@Messages("code.nohead.pull.push")</h5>
+                <pre><code>git pull origin master
+    git push origin master</code></pre>
+    }
+    		</div>
+        </div>
     </div>
 </div>
-
 <script type="text/javascript">
     $(document).ready(function(){
         $yobi.loadModule("code.Nohead", {
app/views/code/nohead_svn.scala.html
--- app/views/code/nohead_svn.scala.html
+++ app/views/code/nohead_svn.scala.html
@@ -25,22 +25,23 @@
 
 @projectLayout(Messages("title.commitHistory"), project, utils.MenuType.CODE) {
 @projectMenu(project, utils.MenuType.CODE, "main-menu-only")
-<div class="project-page-wrap">
-    <div class="row-fluid">
-        <div class="span12">
-            @Html(Messages("code.nohead"))
-            @if(isAllowed(UserApp.currentUser(), project.asResource(), Operation.UPDATE)) {
-            <h5>@Messages("code.nohead.svn.clone", Messages("app.name"))</h5>
-            <pre><code>svn co @CodeApp.getURL(project) --username @UserApp.currentUser().loginId
-cd @project.name/
-echo "# @project.name" > README.md
-svn add README.md
-svn commit -m "first commit"</code></pre>
-}
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+        <div class="row-fluid">
+            <div class="span12">
+                @Html(Messages("code.nohead"))
+                @if(isAllowed(UserApp.currentUser(), project.asResource(), Operation.UPDATE)) {
+                <h5>@Messages("code.nohead.svn.clone", Messages("app.name"))</h5>
+                <pre><code>svn co @CodeApp.getURL(project) --username @UserApp.currentUser().loginId
+    cd @project.name/
+    echo "# @project.name" > README.md
+    svn add README.md
+    svn commit -m "first commit"</code></pre>
+    }
+            </div>
         </div>
     </div>
 </div>
-
 <script type="text/javascript">
     $(document).ready(function(){
         $yobi.loadModule("code.Nohead", {
app/views/code/svnDiff.scala.html
--- app/views/code/svnDiff.scala.html
+++ app/views/code/svnDiff.scala.html
@@ -29,139 +29,140 @@
 
 @projectLayout(Messages("code.commits") + " @" + commit.getId, project, utils.MenuType.CODE) {
 @projectMenu(project, utils.MenuType.CODE, "main-menu-only")
-<div class="project-page-wrap">
-    <div class="code-browse-wrap">
-        <div id="branches" class="btn-group branches pull-right" data-name="branch" data-activate="manual">
-            <button class="btn dropdown-toggle large" data-toggle="dropdown">
-                <span class="d-label">@if(selectedBranch){ @selectedBranch } else { HEAD }</span>
-                <span class="d-caret"><span class="caret"></span></span>
-            </button>
-            <ul class="dropdown-menu">
-            @defining(RepositoryService.getRepository(project).getBranches()) { branches =>
-                @for(branch <- branches){
-                    @makeBranchItem(project, branch)
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+        <div class="code-browse-wrap">
+            <div id="branches" class="btn-group branches pull-right" data-name="branch" data-activate="manual">
+                <button class="btn dropdown-toggle large" data-toggle="dropdown">
+                    <span class="d-label">@if(selectedBranch){ @selectedBranch } else { HEAD }</span>
+                    <span class="d-caret"><span class="caret"></span></span>
+                </button>
+                <ul class="dropdown-menu">
+                @defining(RepositoryService.getRepository(project).getBranches()) { branches =>
+                    @for(branch <- branches){
+                        @makeBranchItem(project, branch)
+                    }
                 }
-            }
-            </ul>
-        </div>
-
-        <ul class="nav nav-tabs" style="margin-bottom:20px;">
-            <li>
-                <a href="@routes.CodeApp.codeBrowser(project.owner, project.name)">@Messages("code.files")</a>
-            </li>
-            <li class="active">
-                <a href="@routes.CodeHistoryApp.historyUntilHead(project.owner, project.name)">@Messages("code.commits")</a>
-            </li>
-        </ul>
-
-        <p class="commitInfo">
-            @(commit.getAuthor, commit.getAuthorEmail, commit.getAuthorName) match {
-            case (user: User, _, _) if !user.isAnonymous => {
-                <a href="@routes.UserApp.userInfo(commit.getAuthor.loginId)" class="avatar-wrap">
-                    <img src="@commit.getAuthor.avatarUrl" alt="@commit.getAuthor.name" width="32" height="32"/>
-                </a>
-                <strong>@commit.getAuthor.name</strong>
-            }
-            case (_, email, name) if email != null => {
-                <span class="avatar-wrap">
-                    <img src="@urlToPicture(commit.getAuthorEmail, 32)" width="32" height="32">
-                </span>
-                @if(name != null) {
-                <strong>@name</strong>
-                }
-            }
-            case (_, _, name) if name != null => {
-                <strong>@name</strong>
-            }
-            case (_, _, _) => {
-                <strong>@User.anonymous.name</strong>
-            }
-            }
-            <span class="ago" title="@JodaDateUtil.getDateString(commit.getAuthorDate)">
-                @agoString(JodaDateUtil.ago(commit.getAuthorDate))
-            </span>
-            <strong class="commitId pull-right">@{"@"}@commit.getId</strong>
-            @if(comments.size > 0) {
-            <span class="pull-right mt5 mr10">
-                <input id="toggle-comments" type="checkbox" checked="checked" class="checkbox">
-                <label for="toggle-comments" class="form-label">@Messages("code.showcomments")</label>
-            </span>
-            }
-        </p>
-        <pre class="commitMsg">@commit.getMessage</pre>
-        <div class="diff-wrap">
-            <div id="commit" data-commit-origin="true" class="diff-body hide">@patch</div>
-        </div>
-        @** Mergely **@
-        <div id="compare" class="modal hide compare-wrap" tabindex="-1" role="dialog">
-            <h4 class="path">
-                <span></span>
-                <button type="button" class="ybtn pull-right" data-dismiss="modal" style="margin-right:20px;">@Messages("button.confirm")</button>
-            </h4>
-            <div class="row-fluid">
-                <div class="span6 commitA"></div>
-                <div class="span6 commitB"></div>
+                </ul>
             </div>
-            <div id="mergely" class="mergely-wrap"></div>
-        </div>
-        @** // **@
 
-        @** Comment **@
-        <div class="board-comment-wrap">
-            @if(comments.size > 0) {
-            <ul class="comments">
-                @for(comment <- comments){
-                <li id="comment-@comment.id" data-path="@comment.path" data-side="@comment.side" data-line="@comment.line" class="comment">
-                    <div class="comment-avatar">
-                        <a href="@routes.UserApp.userInfo(comment.authorLoginId)" class="avatar-wrap" data-toggle="tooltip" data-placement="top" title="@comment.authorName">
-                            <img src="@User.findByLoginId(comment.authorLoginId).avatarUrl" width="32" height="32" alt="@comment.authorLoginId">
-                        </a>
-                    </div>
-                    <div class="media-body">
-                        <div class="meta-info">
-                            <span class="comment_author pull-left">
-                                <a href="@routes.UserApp.userInfo(comment.authorLoginId)" data-toggle="tooltip" data-placement="top" title="@comment.authorName">
-                                    <strong>@comment.authorLoginId </strong>
-                                </a>
-                            </span>
-                            <span class="ago">
-                                <a href="#comment-@comment.id" title="@JodaDateUtil.getDateString(commit.getAuthorDate)">
-                                    @agoString(JodaDateUtil.ago(comment.createdDate))
-                                </a>
-                            </span>
-                            @if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE)){
-                            <span class="edit pull-right">
-                                <button class="btn-transparent pull-right close" data-request-method="delete" data-request-uri="@routes.CodeHistoryApp.deleteComment(project.owner, project.name, commit.getId, comment.id)"><i class="yobicon-trash"></i></button>
-                            </span>
-                            }
-                        </div>
-
-                        <div class="comment-body markdown-wrap markdown-before" markdown="true">@comment.contents</div>
-
-                        <div class="attachments" data-resourceType="@ResourceType.COMMIT_COMMENT" data-resourceId="@comment.id"></div>
-                    </div>
+            <ul class="nav nav-tabs" style="margin-bottom:20px;">
+                <li>
+                    <a href="@routes.CodeApp.codeBrowser(project.owner, project.name)">@Messages("code.files")</a>
                 </li>
-                }
+                <li class="active">
+                    <a href="@routes.CodeHistoryApp.historyUntilHead(project.owner, project.name)">@Messages("code.commits")</a>
+                </li>
             </ul>
-            }
 
-            @common.commentForm(project, ResourceType.COMMIT_COMMENT, routes.CodeHistoryApp.newComment(project.owner, project.name, commit.getId).toString())
+            <p class="commitInfo">
+                @(commit.getAuthor, commit.getAuthorEmail, commit.getAuthorName) match {
+                case (user: User, _, _) if !user.isAnonymous => {
+                    <a href="@routes.UserApp.userInfo(commit.getAuthor.loginId)" class="avatar-wrap">
+                        <img src="@commit.getAuthor.avatarUrl" alt="@commit.getAuthor.name" width="32" height="32"/>
+                    </a>
+                    <strong>@commit.getAuthor.name</strong>
+                }
+                case (_, email, name) if email != null => {
+                    <span class="avatar-wrap">
+                        <img src="@urlToPicture(commit.getAuthorEmail, 32)" width="32" height="32">
+                    </span>
+                    @if(name != null) {
+                    <strong>@name</strong>
+                    }
+                }
+                case (_, _, name) if name != null => {
+                    <strong>@name</strong>
+                }
+                case (_, _, _) => {
+                    <strong>@User.anonymous.name</strong>
+                }
+                }
+                <span class="ago" title="@JodaDateUtil.getDateString(commit.getAuthorDate)">
+                    @agoString(JodaDateUtil.ago(commit.getAuthorDate))
+                </span>
+                <strong class="commitId pull-right">@{"@"}@commit.getId</strong>
+                @if(comments.size > 0) {
+                <span class="pull-right mt5 mr10">
+                    <input id="toggle-comments" type="checkbox" checked="checked" class="checkbox">
+                    <label for="toggle-comments" class="form-label">@Messages("code.showcomments")</label>
+                </span>
+                }
+            </p>
+            <pre class="commitMsg">@commit.getMessage</pre>
+            <div class="diff-wrap">
+                <div id="commit" data-commit-origin="true" class="diff-body hide">@patch</div>
+            </div>
+            @** Mergely **@
+            <div id="compare" class="modal hide compare-wrap" tabindex="-1" role="dialog">
+                <h4 class="path">
+                    <span></span>
+                    <button type="button" class="ybtn pull-right" data-dismiss="modal" style="margin-right:20px;">@Messages("button.confirm")</button>
+                </h4>
+                <div class="row-fluid">
+                    <div class="span6 commitA"></div>
+                    <div class="span6 commitB"></div>
+                </div>
+                <div id="mergely" class="mergely-wrap"></div>
+            </div>
+            @** // **@
+
+            @** Comment **@
+            <div class="board-comment-wrap">
+                @if(comments.size > 0) {
+                <ul class="comments">
+                    @for(comment <- comments){
+                    <li id="comment-@comment.id" data-path="@comment.path" data-side="@comment.side" data-line="@comment.line" class="comment">
+                        <div class="comment-avatar">
+                            <a href="@routes.UserApp.userInfo(comment.authorLoginId)" class="avatar-wrap" data-toggle="tooltip" data-placement="top" title="@comment.authorName">
+                                <img src="@User.findByLoginId(comment.authorLoginId).avatarUrl" width="32" height="32" alt="@comment.authorLoginId">
+                            </a>
+                        </div>
+                        <div class="media-body">
+                            <div class="meta-info">
+                                <span class="comment_author pull-left">
+                                    <a href="@routes.UserApp.userInfo(comment.authorLoginId)" data-toggle="tooltip" data-placement="top" title="@comment.authorName">
+                                        <strong>@comment.authorLoginId </strong>
+                                    </a>
+                                </span>
+                                <span class="ago">
+                                    <a href="#comment-@comment.id" title="@JodaDateUtil.getDateString(commit.getAuthorDate)">
+                                        @agoString(JodaDateUtil.ago(comment.createdDate))
+                                    </a>
+                                </span>
+                                @if(isAllowed(UserApp.currentUser(), comment.asResource(), Operation.DELETE)){
+                                <span class="edit pull-right">
+                                    <button class="btn-transparent pull-right close" data-request-method="delete" data-request-uri="@routes.CodeHistoryApp.deleteComment(project.owner, project.name, commit.getId, comment.id)"><i class="yobicon-trash"></i></button>
+                                </span>
+                                }
+                            </div>
+
+                            <div class="comment-body markdown-wrap markdown-before" markdown="true">@comment.contents</div>
+
+                            <div class="attachments" data-resourceType="@ResourceType.COMMIT_COMMENT" data-resourceId="@comment.id"></div>
+                        </div>
+                    </li>
+                    }
+                </ul>
+                }
+
+                @common.commentForm(project, ResourceType.COMMIT_COMMENT, routes.CodeHistoryApp.newComment(project.owner, project.name, commit.getId).toString())
+            </div>
+            @** // Comment **@
         </div>
-        @** // Comment **@
-    </div>
 
-    <button id="watch-button" type="button" class="ybtn @if(commit.getWatchers(project).contains(UserApp.currentUser())) { active }" data-toggle="button">@Messages("notification.watch")</button>
+        <button id="watch-button" type="button" class="ybtn @if(commit.getWatchers(project).contains(UserApp.currentUser())) { active }" data-toggle="button">@Messages("notification.watch")</button>
 
-    <a href="@routes.CodeHistoryApp.history(project.owner, project.name, selectedBranch, path)" class="ybtn pull-right">@Messages("button.list")</a>
+        <a href="@routes.CodeHistoryApp.history(project.owner, project.name, selectedBranch, path)" class="ybtn pull-right">@Messages("button.list")</a>
 
-    <div id="minimap" class="minimap-outer">
-        <div class="minimap-wrap">
-            <div class="minimap-curr"></div>
-            <div class="minimap-links"></div>
+        <div id="minimap" class="minimap-outer">
+            <div class="minimap-wrap">
+                <div class="minimap-curr"></div>
+                <div class="minimap-links"></div>
+            </div>
         </div>
     </div>
 </div>
-
 @common.markdown(project)
 
 <script type="text/x-jquery-tmpl" id="comment-icon-template">
app/views/code/view.scala.html
--- app/views/code/view.scala.html
+++ app/views/code/view.scala.html
@@ -31,54 +31,55 @@
 
 @projectLayout(Messages("menu.code"), project, utils.MenuType.CODE){
 @projectMenu(project, utils.MenuType.CODE, "main-menu-only")
-<div class="project-page-wrap">
-    <div class="code-browse-wrap">
-        @if(fieldText(recursiveData{0}, "type").eq("folder")){
-        <ul class="nav nav-tabs">
-            @if(path.lastIndexOf("/") > 0){
-            <li class="active"><a href="@routes.CodeApp.codeBrowserWithBranch(project.owner, project.name, URLEncoder.encode(branch, "UTF-8"), path.substring(0, path.lastIndexOf("/")))">@Messages("code.files")</a></li>
-            } else {
-            <li class="active"><a href="@routes.CodeApp.codeBrowserWithBranch(project.owner, project.name, URLEncoder.encode(branch, "UTF-8"), path)">@Messages("code.files")</a></li>
-            }
-            @if(branch.eq("HEAD")){
-            <li><a href="@routes.CodeHistoryApp.historyUntilHead(project.owner, project.name)">@Messages("code.commits")</a></li>
-            } else {
-            <li><a href="@routes.CodeHistoryApp.history(project.owner, project.name, URLEncoder.encode(branch, "UTF-8"), null)">@Messages("code.commits")</a></li>
-            }
-            @if(project.isGit()) {
-            <li>
-                <a href="@routes.BranchApp.branches(project.owner, project.name)">@Messages("title.branches")</a>
-            </li>
-            }
-        </ul>
-        }
-
-        <div class="code-browse-header">
-            <div id="branches" class="btn-group branches pull-left @if(fieldText(recursiveData{0}, "type").eq("file")){mb10}" data-name="branch" data-activate="manual">
-                <button class="btn dropdown-toggle large" data-toggle="dropdown">
-                    <span class="d-label">@branch</span>
-                    <span class="d-caret"><span class="caret"></span></span>
-                </button>
-                <ul class="dropdown-menu">
-                @for(branch <- branches){
-                    @partial_branchitem(project, branch, "code", path)
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+        <div class="code-browse-wrap">
+            @if(fieldText(recursiveData{0}, "type").eq("folder")){
+            <ul class="nav nav-tabs">
+                @if(path.lastIndexOf("/") > 0){
+                <li class="active"><a href="@routes.CodeApp.codeBrowserWithBranch(project.owner, project.name, URLEncoder.encode(branch, "UTF-8"), path.substring(0, path.lastIndexOf("/")))">@Messages("code.files")</a></li>
+                } else {
+                <li class="active"><a href="@routes.CodeApp.codeBrowserWithBranch(project.owner, project.name, URLEncoder.encode(branch, "UTF-8"), path)">@Messages("code.files")</a></li>
                 }
-                </ul>
-            </div>
-            <div id="breadcrumbs" class="code-breadcrumb-wrap ml10 pull-left">
-                <a href="@routes.CodeApp.codeBrowserWithBranch(project.owner, project.name, URLEncoder.encode(branch, "UTF-8"), "")">@project.name</a>
-                @makeBreadCrumbs(path)
-            </div>
-        </div>
-
-        <div class="code-viewer-wrap">
-            <div id="spin" style="position:fixed; top:50%; left:50%"></div>
-            @for(fileInfo <- recursiveData){
-                @parseFileInfo(fileInfo)
+                @if(branch.eq("HEAD")){
+                <li><a href="@routes.CodeHistoryApp.historyUntilHead(project.owner, project.name)">@Messages("code.commits")</a></li>
+                } else {
+                <li><a href="@routes.CodeHistoryApp.history(project.owner, project.name, URLEncoder.encode(branch, "UTF-8"), null)">@Messages("code.commits")</a></li>
+                }
+                @if(project.isGit()) {
+                <li>
+                    <a href="@routes.BranchApp.branches(project.owner, project.name)">@Messages("title.branches")</a>
+                </li>
+                }
+            </ul>
             }
-        </div>
-    </div>
 
+            <div class="code-browse-header">
+                <div id="branches" class="btn-group branches pull-left @if(fieldText(recursiveData{0}, "type").eq("file")){mb10}" data-name="branch" data-activate="manual">
+                    <button class="btn dropdown-toggle large" data-toggle="dropdown">
+                        <span class="d-label">@branch</span>
+                        <span class="d-caret"><span class="caret"></span></span>
+                    </button>
+                    <ul class="dropdown-menu">
+                    @for(branch <- branches){
+                        @partial_branchitem(project, branch, "code", path)
+                    }
+                    </ul>
+                </div>
+                <div id="breadcrumbs" class="code-breadcrumb-wrap ml10 pull-left">
+                    <a href="@routes.CodeApp.codeBrowserWithBranch(project.owner, project.name, URLEncoder.encode(branch, "UTF-8"), "")">@project.name</a>
+                    @makeBreadCrumbs(path)
+                </div>
+            </div>
+
+            <div class="code-viewer-wrap">
+                <div id="spin" style="position:fixed; top:50%; left:50%"></div>
+                @for(fileInfo <- recursiveData){
+                    @parseFileInfo(fileInfo)
+                }
+            </div>
+        </div>
+    </div>    
 </div>
 
 <link rel="stylesheet" type="text/css" href="@routes.Assets.at("stylesheets/dynatree/skin/ui.dynatree.css")" />
app/views/error/badrequest.scala.html
--- app/views/error/badrequest.scala.html
+++ app/views/error/badrequest.scala.html
@@ -2,10 +2,12 @@
 
 @projectLayout(Messages(messageKey), project, utils.MenuType.NONE) {
 @projectMenu(project, utils.MenuType.PROJECT_HOME, "")
-<div class="project-page-wrap">
-	<div class="error-wrap">
-		<i class="ico ico-err2"></i>
-		<p>@Messages(messageKey)</p>
-	</div>
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+    	<div class="error-wrap">
+    		<i class="ico ico-err2"></i>
+    		<p>@Messages(messageKey)</p>
+    	</div>
+    </div>
 </div>
 }
app/views/error/badrequest_default.scala.html
--- app/views/error/badrequest_default.scala.html
+++ app/views/error/badrequest_default.scala.html
@@ -1,11 +1,13 @@
 @(messageKey:String = "error.badrequest")
 
 @siteLayout(Messages(messageKey), utils.MenuType.SITE_HOME) {
-<div class="project-page-wrap">
-    <div class="error-wrap">
-        <i class="ico-404"></i>
-        <p>@Messages(messageKey)</p>
-        <a href="@routes.Application.index()" class="ybtn ybtn-info">@Messages("menu.home")</a>
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+        <div class="error-wrap">
+            <i class="ico-404"></i>
+            <p>@Messages(messageKey)</p>
+            <a href="@routes.Application.index()" class="ybtn ybtn-info">@Messages("menu.home")</a>
+        </div>
     </div>
 </div>
 }
app/views/error/forbidden.scala.html
--- app/views/error/forbidden.scala.html
+++ app/views/error/forbidden.scala.html
@@ -2,10 +2,12 @@
 
 @projectLayout(Messages(messageKey), project, utils.MenuType.NONE) {
 @projectMenu(project, utils.MenuType.PROJECT_HOME, "")
-<div class="project-page-wrap">
-	<div class="error-wrap">
-		<i class="ico ico-err2"></i>
-		<p>@Messages(messageKey)</p>
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+    	<div class="error-wrap">
+    		<i class="ico ico-err2"></i>
+    		<p>@Messages(messageKey)</p>
+        </div>
     </div>
 </div>
 }
app/views/error/forbidden_default.scala.html
--- app/views/error/forbidden_default.scala.html
+++ app/views/error/forbidden_default.scala.html
@@ -1,11 +1,13 @@
 @(messageKey:String = "error.forbidden")
 
 @siteLayout(Messages(messageKey), utils.MenuType.SITE_HOME) {
-<div class="project-page-wrap">
-    <div class="error-wrap">
-        <i class="ico ico-err2"></i>
-        <p>@Messages(messageKey)</p>
-        <a href="@routes.Application.index()" class="ybtn ybtn-primary">@Messages("menu.home")</a>
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+        <div class="error-wrap">
+            <i class="ico ico-err2"></i>
+            <p>@Messages(messageKey)</p>
+            <a href="@routes.Application.index()" class="ybtn ybtn-primary">@Messages("menu.home")</a>
+        </div>
     </div>
 </div>
 }
app/views/error/internalServerError_default.scala.html
--- app/views/error/internalServerError_default.scala.html
+++ app/views/error/internalServerError_default.scala.html
@@ -1,11 +1,13 @@
 @(messageKey:String = "error.internalServerError")
 
 @siteLayout(Messages(messageKey), utils.MenuType.SITE_HOME) {
-<div class="project-page-wrap">
-    <div class="error-wrap">
-        <i class="ico-404"></i>
-        <p>@Messages(messageKey)</p>
-        <a href="@routes.Application.index()" class="ybtn ybtn-primary">@Messages("menu.home")</a>
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+        <div class="error-wrap">
+            <i class="ico-404"></i>
+            <p>@Messages(messageKey)</p>
+            <a href="@routes.Application.index()" class="ybtn ybtn-primary">@Messages("menu.home")</a>
+        </div>
     </div>
 </div>
 }
app/views/error/notfound.scala.html
--- app/views/error/notfound.scala.html
+++ app/views/error/notfound.scala.html
@@ -28,11 +28,13 @@
 
 @projectLayout(title, project, utils.MenuType.NONE) {
 @projectMenu(project, getMenuType(targetType), "")
-<div class="project-page-wrap">
-    <div class="error-wrap">
-        <i class="ico ico-err2"></i>
-        <p>@getMessage(targetType)</p>
-        <a href="@getReturnURL(targetType)" class="ybtn ybtn-primary">@Messages("button.list")</a>
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+        <div class="error-wrap">
+            <i class="ico ico-err2"></i>
+            <p>@getMessage(targetType)</p>
+            <a href="@getReturnURL(targetType)" class="ybtn ybtn-primary">@Messages("button.list")</a>
+        </div>
     </div>
 </div>
 }
app/views/error/notfound_default.scala.html
--- app/views/error/notfound_default.scala.html
+++ app/views/error/notfound_default.scala.html
@@ -18,15 +18,15 @@
             @common.usermenu(null)
         </div>
     </header>
-
-    <div class="project-page-wrap">
-        <div class="error-wrap">
-            <i class="ico-404"></i>
-            <p>@Messages(messageKey)</p>
-            <a href="@routes.Application.index()" class="ybtn ybtn-info">@Messages("menu.home")</a>
+    <div class="page-wrap-outer">
+        <div class="project-page-wrap">
+            <div class="error-wrap">
+                <i class="ico-404"></i>
+                <p>@Messages(messageKey)</p>
+                <a href="@routes.Application.index()" class="ybtn ybtn-info">@Messages("menu.home")</a>
+            </div>
         </div>
     </div>
-
     <footer class="page-footer-outer">
         <div class="page-footer">
             <span class="provider">Copyright © <a href="http://navercorp.com/" target="_blank">NAVER Corp.</a> Supported by <a href="http://developer.naver.com/wiki/pages/techSupport" target="_blank" class="d2-program"><span class="d2">D2</span><span class="program"> Program</span></a></span>
app/views/error/requestTextEntityTooLarge.scala.html
--- app/views/error/requestTextEntityTooLarge.scala.html
+++ app/views/error/requestTextEntityTooLarge.scala.html
@@ -1,12 +1,14 @@
 @siteLayout(Messages("error.tooLargeText.title"), utils.MenuType.SITE_HOME) {
-<div class="project-page-wrap">
-	<div class="error-wrap">
-		<i class="ico ico-err2"></i>
-		<p>@Messages("error.tooLargeText.title")</p>
-        <p>@Messages("error.tooLargeText.limit", play.api.mvc.BodyParsers.parse.DEFAULT_MAX_TEXT_LENGTH)</p>
-        @if(UserApp.currentUser.isSiteManager) {
-        <p>@Messages("error.tooLargeText.admin")</p>
-        }
-	</div>
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+    	<div class="error-wrap">
+    		<i class="ico ico-err2"></i>
+    		<p>@Messages("error.tooLargeText.title")</p>
+            <p>@Messages("error.tooLargeText.limit", play.api.mvc.BodyParsers.parse.DEFAULT_MAX_TEXT_LENGTH)</p>
+            @if(UserApp.currentUser.isSiteManager) {
+            <p>@Messages("error.tooLargeText.admin")</p>
+            }
+    	</div>
+    </div>
 </div>
 }
app/views/git/clone.scala.html
--- app/views/git/clone.scala.html
+++ app/views/git/clone.scala.html
@@ -5,18 +5,20 @@
 
 @projectLayout(title, project.originalProject, utils.MenuType.PULL_REQUEST) {
 @projectMenu(project.originalProject, utils.MenuType.PULL_REQUEST, "main-menu-only")
-<div class="project-page-wrap">
-    <div class="content-wrap frm-wrap">
-        <legend>
-            @Messages("fork.forking", project.originalProject.owner, project.originalProject.name, project.owner, project.name)
-        </legend>
-        <p>
-            @Messages("fork.forking.message.1")
-        </p>
-        <p>
-            @Messages("fork.forking.message.2")
-        </p>
-        <div id="spin"></div>
+<div class="page-wrap-outer">
+    <div class="project-page-wrap">
+        <div class="content-wrap frm-wrap">
+            <legend>
+                @Messages("fork.forking", project.originalProject.owner, project.originalProject.name, project.owner, project.name)
+            </legend>
+            <p>
+                @Messages("fork.forking.message.1")
+            </p>
+            <p>
+                @Messages("fork.forking.message.2")
+            </p>
+            <div id="spin"></div>
+        </div>
     </div>
 </div>
 <script type="text/javascript">
app/views/git/create.scala.html