list view: issue, label, milestone

9 files changed, 241 insertions, 265 deletions

diff --git a/templates/base/footer.tmpl b/templates/base/footer.tmpl
index 0f0f844223..b643850889 100644
--- a/templates/base/footer.tmpl
+++ b/templates/base/footer.tmpl
@@ -1,6 +1,6 @@
 	</div>
-	<footer class="ui page grid">
-		<div class="sixteen wide column">
+	<footer>
+		<div class="ui container">
 			<div class="ui left">
 				© 2015 Gogs · {{.i18n.Tr "version"}}: {{AppVer}} · {{.i18n.Tr "page"}}: <strong>{{LoadTimes .PageStartTime}}</strong> · {{.i18n.Tr "template"}}: <strong>{{call .TmplLoadTimes}}</strong>
 			</div>
diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl
index c5813f730e..161e0132cf 100644
--- a/templates/base/head.tmpl
+++ b/templates/base/head.tmpl
@@ -46,39 +46,8 @@
 		<noscript>Please enable JavaScript in your browser!</noscript>
 		{{if not .PageIsInstall}}
 		<div class="following bar light">
-		  <div class="ui page grid">
+		  <div class="ui container">
 		    <div class="column">
-	      	{{if .IsSigned}}
-		      <div class="ui right floated secondary menu">
-		      	<a class="view-ui item user avatar poping up" href="{{AppSubUrl}}/{{.SignedUser.Name}}" data-content="{{.SignedUser.Name}}" data-variation="inverted">
-		      		<img class="img-15" src="{{.SignedUser.AvatarLink}}"/>
-		      		<span class="sr-only">{{.SignedUser.Name}}</span>
-		      	</a>
-						<div class="ui pointing dropdown head link jump item">
-							<span class="text">
-								<i class="octicon octicon-plus"></i>
-								<i class="dropdown icon"></i>
-							</span>
-			        <div class="menu">
-			          <a class="item" href="{{AppSubUrl}}/repo/create"><i class="octicon octicon-repo-create"></i> {{.i18n.Tr "new_repo"}}</a>
-			          <a class="item" href="{{AppSubUrl}}/repo/migrate"><i class="octicon octicon-repo-clone"></i> {{.i18n.Tr "new_migrate"}}</a>
-			          <a class="item" href="{{AppSubUrl}}/org/create"><i class="octicon octicon-organization"></i> {{.i18n.Tr "new_org"}}</a>
-							</div>
-						</div>
-						{{if .IsAdmin}}
-						<a class="view-ui item poping up {{if .PageIsAdmin}}active{{end}}" href="{{AppSubUrl}}/admin" data-content="{{.i18n.Tr "admin_panel"}}" data-variation="inverted"><i class="octicon icon settings"></i><span class="sr-only">{{.i18n.Tr "admin_panel"}}</span></a>
-						{{end}}
-						<a class="view-ui item poping up {{if .PageIsSettings}}active{{end}}" href="{{AppSubUrl}}/user/settings" data-content="{{.i18n.Tr "account_settings"}}" data-variation="inverted"><i class="octicon octicon-settings"></i><span class="sr-only">{{.i18n.Tr "account_settings"}}</span></a>
-						<a class="view-ui item poping up" href="{{AppSubUrl}}/user/logout" data-content="{{.i18n.Tr "sign_out"}}" data-variation="inverted"><i class="octicon octicon-sign-out"></i><span class="sr-only">{{.i18n.Tr "sign_out"}}</span></a>
-		      </div>
-	      	{{else}}
-		      <div class="ui right floated secondary menu">
-		      	{{if .ShowRegistrationButton}}
-		      	<a class="view-ui item {{if .PageIsSignUp}}active{{end}}" href="{{AppSubUrl}}/user/sign_up"><i class="octicon octicon-person-add"></i> {{.i18n.Tr "register"}}</a>
-		      	{{end}}
-		      	<a class="view-ui item {{if .PageIsSignIn}}active{{end}}" href="{{AppSubUrl}}/user/login"><i class="octicon octicon-sign-in"></i> {{.i18n.Tr "sign_in"}}</a>
-		      </div>
-		      {{end}}
 		      <div class="ui secondary menu">
 		      	<img class="img-15 ui image brand" src="{{AppSubUrl}}/img/favicon.png">
 		      	<a class="view-ui item {{if .PageIsHome}}active{{end}}" href="{{AppSubUrl}}/">{{if .IsSigned}}{{.i18n.Tr "dashboard"}}{{else}}{{.i18n.Tr "home"}}{{end}}</a>
@@ -90,6 +59,38 @@
 		      	    <i class="search icon"></i>
 		      	  </div>
 		      	</div> -->
+
+  	      	{{if .IsSigned}}
+  		      <div class="right menu">
+  		      	<a class="view-ui item user avatar poping up" href="{{AppSubUrl}}/{{.SignedUser.Name}}" data-content="{{.SignedUser.Name}}" data-variation="inverted">
+  		      		<img class="img-15" src="{{.SignedUser.AvatarLink}}"/>
+  		      		<span class="sr-only">{{.SignedUser.Name}}</span>
+  		      	</a>
+  						<div class="ui dropdown head link jump item">
+  							<span class="text">
+  								<i class="octicon octicon-plus"></i>
+  								<i class="dropdown icon"></i>
+  							</span>
+  			        <div class="menu">
+  			          <a class="item" href="{{AppSubUrl}}/repo/create"><i class="octicon octicon-repo-create"></i> {{.i18n.Tr "new_repo"}}</a>
+  			          <a class="item" href="{{AppSubUrl}}/repo/migrate"><i class="octicon octicon-repo-clone"></i> {{.i18n.Tr "new_migrate"}}</a>
+  			          <a class="item" href="{{AppSubUrl}}/org/create"><i class="octicon octicon-organization"></i> {{.i18n.Tr "new_org"}}</a>
+  							</div>
+  						</div>
+  						{{if .IsAdmin}}
+  						<a class="view-ui item poping up {{if .PageIsAdmin}}active{{end}}" href="{{AppSubUrl}}/admin" data-content="{{.i18n.Tr "admin_panel"}}" data-variation="inverted"><i class="octicon icon settings"></i><span class="sr-only">{{.i18n.Tr "admin_panel"}}</span></a>
+  						{{end}}
+  						<a class="view-ui item poping up {{if .PageIsSettings}}active{{end}}" href="{{AppSubUrl}}/user/settings" data-content="{{.i18n.Tr "account_settings"}}" data-variation="inverted"><i class="octicon octicon-settings"></i><span class="sr-only">{{.i18n.Tr "account_settings"}}</span></a>
+  						<a class="view-ui item poping up" href="{{AppSubUrl}}/user/logout" data-content="{{.i18n.Tr "sign_out"}}" data-variation="inverted"><i class="octicon octicon-sign-out"></i><span class="sr-only">{{.i18n.Tr "sign_out"}}</span></a>
+  		      </div>
+  	      	{{else}}
+  		      <div class="ui right floated secondary menu">
+  		      	{{if .ShowRegistrationButton}}
+  		      	<a class="view-ui item {{if .PageIsSignUp}}active{{end}}" href="{{AppSubUrl}}/user/sign_up"><i class="octicon octicon-person-add"></i> {{.i18n.Tr "register"}}</a>
+  		      	{{end}}
+  		      	<a class="view-ui item {{if .PageIsSignIn}}active{{end}}" href="{{AppSubUrl}}/user/login"><i class="octicon octicon-sign-in"></i> {{.i18n.Tr "sign_in"}}</a>
+  		      </div>
+  		      {{end}}
 		      </div>
 		    </div>
 		  </div>
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl
index 514fef6b7b..4566c38596 100644
--- a/templates/repo/header.tmpl
+++ b/templates/repo/header.tmpl
@@ -1,16 +1,14 @@
 {{with .Repository}}
-<div class="ui middle page head grid">
-	<h2 class="ui left">
-		<div class="ui breadcrumb">
-		<i class="mega-octicon octicon-{{if .IsPrivate}}lock{{else if .IsMirror}}repo-clone{{else if .IsFork}}repo-forked{{else}}repo{{end}}"></i>
-	  <a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
-	  <div class="divider"> / </div>
-	  <a href="{{$.RepoLink}}">{{.Name}}</a>
-	  {{if .IsMirror}}<div class="ui label">{{$.i18n.Tr "mirror"}}</div>{{end}}
-	  {{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.ForkRepo.RepoLink}}">{{SubStr .ForkRepo.RepoLink 1 -1}}</a></div>{{end}}
-		</div>
-	</h2>
-	<div class="ui right floated secondary menu">
+<div class="ui head container">
+	<div class="ui huge breadcrumb">
+	<i class="mega-octicon octicon-{{if .IsPrivate}}lock{{else if .IsMirror}}repo-clone{{else if .IsFork}}repo-forked{{else}}repo{{end}}"></i>
+  <a href="{{AppSubUrl}}/{{.Owner.Name}}">{{.Owner.Name}}</a>
+  <div class="divider"> / </div>
+  <a href="{{$.RepoLink}}">{{.Name}}</a>
+  {{if .IsMirror}}<div class="ui label">{{$.i18n.Tr "mirror"}}</div>{{end}}
+  {{if .IsFork}}<div class="fork-flag">{{$.i18n.Tr "repo.forked_from"}} <a href="{{.ForkRepo.RepoLink}}">{{SubStr .ForkRepo.RepoLink 1 -1}}</a></div>{{end}}
+	</div>
+	<div class="ui right">
 		<a class="ui black basic button" href="{{$.RepoLink}}/action/{{if $.IsWatchingRepo}}un{{end}}watch?redirect_to={{$.Link}}">
 		  <i class="fa fa-eye{{if not $.IsWatchingRepo}}-slash{{end}}"></i>
 		  {{if $.IsWatchingRepo}}{{$.i18n.Tr "repo.unwatch"}}{{else}}{{$.i18n.Tr "repo.watch"}}{{end}} <span class="num">{{.NumWatches}}</span>
@@ -19,7 +17,7 @@
 		  <i class="fa fa-star{{if not $.IsStaringRepo}}-o{{end}}"></i>
 		  {{if $.IsStaringRepo}}{{$.i18n.Tr "repo.unstar"}}{{else}}{{$.i18n.Tr "repo.star"}}{{end}} <span class="num">{{.NumStars}}</span>
 		</a>
-		<a class="ui black basic button {{if $.IsRepositoryOwner}}poping up{{end}}" {{if not $.IsRepositoryOwner}}href="{{AppSubUrl}}/repo/fork/{{.Id}}"{{end}} {{if $.IsRepositoryOwner}}data-content="{{$.i18n.Tr "repo.fork_from_self"}}"{{end}}>
+		<a class="ui black basic button {{if $.IsRepositoryOwner}}poping up{{end}}" {{if not $.IsRepositoryOwner}}href="{{AppSubUrl}}/repo/fork/{{.Id}}"{{end}} {{if $.IsRepositoryOwner}}data-content="{{$.i18n.Tr "repo.fork_from_self"}}" data-position="top right"{{end}}>
 		  <i class="octicon octicon-repo-forked"></i>
 		  {{$.i18n.Tr "repo.fork"}} <span class="num">{{.NumForks}}</span>
 		</a>
diff --git a/templates/repo/issue/alert.tmpl b/templates/repo/issue/alert.tmpl
deleted file mode 100644
index bdc32ce4fc..0000000000
--- a/templates/repo/issue/alert.tmpl
+++ /dev/null
@@ -1,5 +0,0 @@
-{{if .Flash}}
-<div class="sixteen wide center aligned centered column">
-	{{template "base/alert" .}}
-</div>
-{{end}}
\ No newline at end of file
diff --git a/templates/repo/issue/labels.tmpl b/templates/repo/issue/labels.tmpl
index 4fcaec0714..1ed7408e6a 100644
--- a/templates/repo/issue/labels.tmpl
+++ b/templates/repo/issue/labels.tmpl
@@ -1,77 +1,73 @@
 {{template "base/head" .}}
 <div class="repository labels">
 	{{template "repo/header" .}}
-	<div class="ui middle page grid body">
+	<div class="ui container">
 		<div class="navbar">
 			{{template "repo/issue/navbar" .}}
 			{{if .IsRepositoryAdmin}}
-			<form class="ui right form" action="{{$.RepoLink}}/labels/new" method="post">
+			<div class="ui right">
+				<div class="ui green new-label button">{{.i18n.Tr "repo.issues.new_label"}}</div>
+			</div>
+			{{end}}
+		</div>
+		<div class="ui new-label segment hide">
+			<form class="ui form" action="{{$.RepoLink}}/labels/new" method="post">
 				{{.CsrfTokenHtml}}
-				<div class="ui right floated secondary menu">
-					<div class="input item">
-						<div class="ui large input">
-						  <input class="new-label-input" name="title" placeholder="{{.i18n.Tr "repo.issues.new_label_placeholder"}}" required>
+				<div class="ui grid">
+					<div class="five wide column">
+						<div class="ui small input">
+				  		<input class="new-label-input" name="title" placeholder="{{.i18n.Tr "repo.issues.new_label_placeholder"}}" autofocus required>
 						</div>
 					</div>
-					<div class="item">
-						<div class="ui large input">
-			        <input class="color-picker" name="color" value="#70c24a" required>
-			    	</div>
+					<div class="color picker column">
+		      	<input class="color-picker" name="color" value="#70c24a" required>
 					</div>
-					<div class="item precolors">
+					<div class="column precolors">
 						{{template "repo/issue/label_precolors"}}
 					</div>
-					<button class="ui green button">{{.i18n.Tr "repo.issues.new_label"}}</button>
+					<div class="buttons">
+						<div class="ui blue small basic cancel button">{{.i18n.Tr "repo.milestones.cancel"}}</div>
+						<button class="ui green small button">{{.i18n.Tr "repo.issues.create_label"}}</button>
+					</div>
 				</div>
 			</form>
-			{{end}}
 		</div>
 		<div class="ui divider"></div>
-		{{template "repo/issue/alert" .}}
-		<div class="ui left">
-			<div class="ui black label">{{.i18n.Tr "repo.issues.label_count" .NumLabels}}</div>
-		</div>
+		{{template "base/alert" .}}
+		<div class="ui black label">{{.i18n.Tr "repo.issues.label_count" .NumLabels}}</div>
 
-		<div class="sixteen wide column">
-			<div class="label list">
-				{{range .Labels}}
-				<li class="item">
-					<div class="ui label" style="background-color: {{.Color}}"><i class="octicon octicon-tag"></i> {{.Name}}</div>
-					{{if $.IsRepositoryAdmin}}
-					<a class="ui right delete-button" href="#" data-url="{{$.RepoLink}}/labels/delete" data-id="{{.ID}}"><i class="octicon octicon-trashcan"></i> {{$.i18n.Tr "repo.issues.label_delete"}}</a>
-					<a class="ui right edit-label-button" href="#" data-id={{.ID}} data-title={{.Name}} data-color={{.Color}}><i class="octicon octicon-pencil"></i> {{$.i18n.Tr "repo.issues.label_edit"}}</a>
-					{{end}}
-					<a class="ui right open-issues" href="{{$.RepoLink}}/issues?labels={{.ID}}"><i class="octicon octicon-issue-opened"></i> {{$.i18n.Tr "repo.issues.label_open_issues" .NumOpenIssues}}</a>
-				</li>
+		<div class="label list">
+			{{range .Labels}}
+			<li class="item">
+				<div class="ui label" style="background-color: {{.Color}}"><i class="octicon octicon-tag"></i> {{.Name}}</div>
+				{{if $.IsRepositoryAdmin}}
+				<a class="ui right delete-button" href="#" data-url="{{$.RepoLink}}/labels/delete" data-id="{{.ID}}"><i class="octicon octicon-trashcan"></i> {{$.i18n.Tr "repo.issues.label_delete"}}</a>
+				<a class="ui right edit-label-button" href="#" data-id={{.ID}} data-title={{.Name}} data-color={{.Color}}><i class="octicon octicon-pencil"></i> {{$.i18n.Tr "repo.issues.label_edit"}}</a>
 				{{end}}
-			</div>
+				<a class="ui right open-issues" href="{{$.RepoLink}}/issues?labels={{.ID}}"><i class="octicon octicon-issue-opened"></i> {{$.i18n.Tr "repo.issues.label_open_issues" .NumOpenIssues}}</a>
+			</li>
+			{{end}}
 		</div>
 	</div>
 </div>
 
 {{if .IsRepositoryAdmin}}
-<div class="ui basic delete modal">
-  <div class="header">
+<div class="ui small basic delete modal">
+  <div class="ui icon header">
+     <i class="trash icon"></i>
     {{.i18n.Tr "repo.issues.label_deletion"}}
   </div>
   <div class="content">
-    <div class="image">
-      <i class="trash icon"></i>
-    </div>
-    <div class="description">
-      <p>{{.i18n.Tr "repo.issues.label_deletion_desc"}}</p>
-    </div>
+    <p>{{.i18n.Tr "repo.issues.label_deletion_desc"}}</p>
   </div>
   <div class="actions">
-    <div class="two fluid ui inverted buttons">
-      <div class="ui red basic inverted button">
-        <i class="remove icon"></i>
-        {{.i18n.Tr "modal.no"}}
-      </div>
-      <div class="ui green basic inverted positive button">
-        <i class="checkmark icon"></i>
-        {{.i18n.Tr "modal.yes"}}
-      </div>
+    <div class="ui red basic inverted cancel button">
+      <i class="remove icon"></i>
+      {{.i18n.Tr "modal.no"}}
+    </div>
+    <div class="ui green basic inverted ok button">
+      <i class="checkmark icon"></i>
+      {{.i18n.Tr "modal.yes"}}
     </div>
   </div>
 </div>
@@ -84,14 +80,16 @@
 		<form class="ui edit-label form" action="{{$.RepoLink}}/labels/edit" method="post">
 			{{.CsrfTokenHtml}}
 			<input id="label-modal-id" name="id" type="hidden">
-			<div class="inline fields">
-				<div class="field">
-					<input id="label-modal-title" name="title" placeholder="{{.i18n.Tr "repo.issues.new_label_placeholder"}}" required>
+			<div class="ui grid">
+				<div class="five wide column">
+					<div class="ui small input">
+			  		<input class="new-label-input" name="title" placeholder="{{.i18n.Tr "repo.issues.new_label_placeholder"}}" autofocus required>
+					</div>
 				</div>
-				<div class="field">
-		      <input id="label-modal-color" class="color-picker" name="color" value="#70c24a" required>
+				<div class="color picker column">
+	      	<input class="color-picker" name="color" value="#70c24a" required>
 				</div>
-				<div class="field precolors">
+				<div class="column precolors">
 					{{template "repo/issue/label_precolors"}}
 				</div>
 			</div>
diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl
index 128b3c0ba6..fa3f660fa8 100644
--- a/templates/repo/issue/list.tmpl
+++ b/templates/repo/issue/list.tmpl
@@ -1,28 +1,26 @@
 {{template "base/head" .}}
 <div class="repository">
 	{{template "repo/header" .}}
-	<div class="ui middle page grid body">
+	<div class="ui container">
 		<div class="navbar">
 			{{template "repo/issue/navbar" .}}
-			<div class="ui right floated secondary menu">
+			<div class="ui right">
 				<a class="ui green button" href="{{$.RepoLink}}/issues/new">{{.i18n.Tr "repo.issues.new"}}</a>
 			</div>
 		</div>
 		<div class="ui divider"></div>
-		<div class="ui left">
-			<div class="ui tiny buttons">
-			  <a class="ui green basic button {{if not .IsShowClosed}}active{{end}}" href="{{.RepoLink}}/issues?type={{$.ViewType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}">
-			  	<i class="octicon octicon-issue-opened"></i>
-			  	{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
-			  </a>
-			  <a class="ui red basic button {{if .IsShowClosed}}active{{end}}" href="{{.RepoLink}}/issues?type={{.ViewType}}&state=closed&labels={{.SelectLabels}}&milestone={{.MilestoneID}}">
-			  	<i class="octicon octicon-issue-closed"></i>
-			  	{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
-			  </a>
-			</div>
+		<div class="ui tiny buttons">
+		  <a class="ui green basic button {{if not .IsShowClosed}}active{{end}}" href="{{.RepoLink}}/issues?type={{$.ViewType}}&state=open&labels={{.SelectLabels}}&milestone={{.MilestoneID}}">
+		  	<i class="octicon octicon-issue-opened"></i>
+		  	{{.i18n.Tr "repo.issues.open_tab" .IssueStats.OpenCount}}
+		  </a>
+		  <a class="ui red basic button {{if .IsShowClosed}}active{{end}}" href="{{.RepoLink}}/issues?type={{.ViewType}}&state=closed&labels={{.SelectLabels}}&milestone={{.MilestoneID}}">
+		  	<i class="octicon octicon-issue-closed"></i>
+		  	{{.i18n.Tr "repo.issues.close_tab" .IssueStats.ClosedCount}}
+		  </a>
 		</div>
 		<div class="ui right floated secondary filter menu">
-			<div class="ui {{if not .Labels}}disabled{{end}} pointing dropdown jump item">
+			<div class="ui {{if not .Labels}}disabled{{end}} dropdown jump item">
 				<span class="text">
 					{{.i18n.Tr "repo.issues.filter_label"}}
 					<i class="dropdown icon"></i>
@@ -34,7 +32,7 @@
           {{end}}
 				</div>
 			</div>
-			<div class="ui {{if not .Milestones}}disabled{{end}} pointing dropdown jump item">
+			<div class="ui {{if not .Milestones}}disabled{{end}} dropdown jump item">
 				<span class="text">
 					{{.i18n.Tr "repo.issues.filter_milestone"}}
 					<i class="dropdown icon"></i>
@@ -46,7 +44,7 @@
           {{end}}
 				</div>
 			</div>
-			<!-- <div class="ui {{if not .Assignees}}disabled{{end}} pointing dropdown jump item">
+			<!-- <div class="ui {{if not .Assignees}}disabled{{end}} dropdown jump item">
 				<span class="text">
 					{{.i18n.Tr "repo.issues.filter_assignee"}}
 					<i class="dropdown icon"></i>
@@ -57,7 +55,7 @@
           {{end}}
 				</div>
 			</div> -->
-			<div class="ui pointing dropdown type jump item">
+			<div class="ui dropdown type jump item">
 				<span class="text">
 					{{.i18n.Tr "repo.issues.filter_type"}}
 					<i class="dropdown icon"></i>
@@ -71,57 +69,55 @@
 			</div>
 		</div>
 
-		<div class="sixteen wide column">
-			<div class="issue list">
-				{{range .Issues}}
-				{{ $timeStr:= TimeSince .Created $.Lang }}
-	      <li class="item">
-	      	<div class="ui {{if .IsRead}}black{{else}}green{{end}} label">#{{.Index}}</div>
-	      	<a class="title" href="{{$.RepoLink}}/issues/{{.Index}}">{{.Name}}</a>
+		<div class="issue list">
+			{{range .Issues}}
+			{{ $timeStr:= TimeSince .Created $.Lang }}
+      <li class="item">
+      	<div class="ui {{if .IsRead}}black{{else}}green{{end}} label">#{{.Index}}</div>
+      	<a class="title" href="{{$.RepoLink}}/issues/{{.Index}}">{{.Name}}</a>
 
-	      	{{range .Labels}}
-					<a class="ui label" href="{{$.RepoLink}}/issues?type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}&milestone={{$.MilestoneID}}" style="background-color: {{.Color}}">{{.Name}}</a>
-	      	{{end}}
+      	{{range .Labels}}
+				<a class="ui label" href="{{$.RepoLink}}/issues?type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}&milestone={{$.MilestoneID}}" style="background-color: {{.Color}}">{{.Name}}</a>
+      	{{end}}
 
-	      	{{if .NumComments}}
-	      	<span class="comment ui right"><i class="octicon octicon-comment"></i> {{.NumComments}}</span>
-	      	{{end}}
+      	{{if .NumComments}}
+      	<span class="comment ui right"><i class="octicon octicon-comment"></i> {{.NumComments}}</span>
+      	{{end}}
 
-	        <p class="desc">
-	        	{{$.i18n.Tr "repo.issues.opened_by" $timeStr .Poster.Name|Str2html}}
-		        {{if .Milestone}}
-						{{with .Milestone}}
-						<a class="milestone" href="{{$.RepoLink}}/issues?type={{$.ViewType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{.ID}}">
-							<span class="octicon octicon-milestone"></span> {{.Name}}
-						</a>
-						{{end}}
-		        {{end}}
-	        </p>
-	      </li>
-	      {{end}}
-				
-				{{with .Page}}
-				{{if gt .TotalPages 1}}
-				<div class="center page buttons">
-					<div class="ui borderless pagination menu">
-					  <a class="{{if not .HasPrevious}}disabled{{end}} item" {{if .HasPrevious}}href="{{$.Link}}?type={{$.ViewType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&page={{.Previous}}"{{end}}>
-					    <i class="left arrow icon"></i> {{$.i18n.Tr "repo.issues.previous"}}
-					  </a>
-						{{range .Pages}}
-						{{if eq .Num -1}}
-						<a class="disabled item">...</a>
-						{{else}}
-						<a class="{{if .IsCurrent}}active{{end}} item" {{if not .IsCurrent}}href="{{$.Link}}?type={{$.ViewType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&page={{.Num}}"{{end}}>{{.Num}}</a>
-						{{end}}
-						{{end}}
-					  <a class="{{if not .HasNext}}disabled{{end}} item" {{if .HasNext}}href="{{$.Link}}?type={{$.ViewType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&page={{.Next}}"{{end}}>
-					    {{$.i18n.Tr "repo.issues.next"}} <i class="icon right arrow"></i>
-					  </a>
-					</div>
+        <p class="desc">
+        	{{$.i18n.Tr "repo.issues.opened_by" $timeStr .Poster.Name|Str2html}}
+	        {{if .Milestone}}
+					{{with .Milestone}}
+					<a class="milestone" href="{{$.RepoLink}}/issues?type={{$.ViewType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{.ID}}">
+						<span class="octicon octicon-milestone"></span> {{.Name}}
+					</a>
+					{{end}}
+	        {{end}}
+        </p>
+      </li>
+      {{end}}
+			
+			{{with .Page}}
+			{{if gt .TotalPages 1}}
+			<div class="center page buttons">
+				<div class="ui borderless pagination menu">
+				  <a class="{{if not .HasPrevious}}disabled{{end}} item" {{if .HasPrevious}}href="{{$.Link}}?type={{$.ViewType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&page={{.Previous}}"{{end}}>
+				    <i class="left arrow icon"></i> {{$.i18n.Tr "repo.issues.previous"}}
+				  </a>
+					{{range .Pages}}
+					{{if eq .Num -1}}
+					<a class="disabled item">...</a>
+					{{else}}
+					<a class="{{if .IsCurrent}}active{{end}} item" {{if not .IsCurrent}}href="{{$.Link}}?type={{$.ViewType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&page={{.Num}}"{{end}}>{{.Num}}</a>
+					{{end}}
+					{{end}}
+				  <a class="{{if not .HasNext}}disabled{{end}} item" {{if .HasNext}}href="{{$.Link}}?type={{$.ViewType}}&state={{$.State}}&labels={{$.SelectLabels}}&milestone={{$.MilestoneID}}&page={{.Next}}"{{end}}>
+				    {{$.i18n.Tr "repo.issues.next"}} <i class="icon right arrow"></i>
+				  </a>
 				</div>
-				{{end}}
-				{{end}}
 			</div>
+			{{end}}
+			{{end}}
 		</div>
 	</div>
 </div>
diff --git a/templates/repo/issue/milestones.tmpl b/templates/repo/issue/milestones.tmpl
index b9b159ea57..8bbc2c3666 100644
--- a/templates/repo/issue/milestones.tmpl
+++ b/templates/repo/issue/milestones.tmpl
@@ -1,125 +1,115 @@
 {{template "base/head" .}}
 <div class="repository milestones">
 	{{template "repo/header" .}}
-	<div class="ui middle page grid body">
+	<div class="ui container">
 		<div class="navbar">
 			{{template "repo/issue/navbar" .}}
 			{{if .IsRepositoryAdmin}}
-			<div class="ui right floated secondary menu">
+			<div class="ui right">
 				<a class="ui green button" href="{{$.Link}}/new">{{.i18n.Tr "repo.milestones.new"}}</a>
 			</div>
 			{{end}}
 		</div>
 		<div class="ui divider"></div>
-		{{template "repo/issue/alert" .}}
-		<div class="ui left">
-			<div class="ui tiny buttons">
-			  <a class="ui green basic button {{if not .IsShowClosed}}active{{end}}" href="{{.RepoLink}}/milestones?state=open">
-			  	<i class="octicon octicon-milestone"></i>
-			  	{{.i18n.Tr "repo.milestones.open_tab" .OpenCount}}
-			  </a>
-			  <a class="ui red basic button {{if .IsShowClosed}}active{{end}}" href="{{.RepoLink}}/milestones?state=closed">
-			  	<i class="octicon octicon-milestone"></i>
-			  	{{.i18n.Tr "repo.milestones.close_tab" .ClosedCount}}
-			  </a>
-			</div>
+		{{template "base/alert" .}}
+		<div class="ui tiny buttons">
+		  <a class="ui green basic button {{if not .IsShowClosed}}active{{end}}" href="{{.RepoLink}}/milestones?state=open">
+		  	<i class="octicon octicon-milestone"></i>
+		  	{{.i18n.Tr "repo.milestones.open_tab" .OpenCount}}
+		  </a>
+		  <a class="ui red basic button {{if .IsShowClosed}}active{{end}}" href="{{.RepoLink}}/milestones?state=closed">
+		  	<i class="octicon octicon-milestone"></i>
+		  	{{.i18n.Tr "repo.milestones.close_tab" .ClosedCount}}
+		  </a>
 		</div>
 		
-		<div class="sixteen wide column">
-			<div class="milestone list">
-				{{range .Milestones}}
-				<li class="item">
-					<i class="octicon octicon-milestone"></i> <a href="{{$.RepoLink}}/issues?state={{$.State}}&milestone={{.ID}}">{{.Name}}</a>
-					<div class="ui right blue progress" data-percent="{{.Completeness}}">
-				    <div class="bar" {{if not .Completeness}}style="background-color: transparent"{{end}}>
-				      <div class="progress"></div>
-				    </div>
-					</div>
-					<div class="meta">
-						{{ $closedDate:= TimeSince .ClosedDate $.Lang }}
-						{{if .IsClosed}}
-							<span class="octicon octicon-clock"></span> {{$.i18n.Tr "repo.milestones.closed" $closedDate|Str2html}}
-						{{else}}
-							<span class="octicon octicon-calendar"></span> 
-							{{if .DeadlineString}}
-							<span {{if .IsOverDue}}class="overdue"{{end}}>{{.DeadlineString}}</span>
-							{{else}}
-							{{$.i18n.Tr "repo.milestones.no_due_date"}}
-							{{end}}
-						{{end}}
-						<span class="issue-stats">
-							<i class="octicon octicon-issue-opened"></i> {{$.i18n.Tr "repo.issues.open_tab" .NumOpenIssues}}
-							<i class="octicon octicon-issue-closed"></i> {{$.i18n.Tr "repo.issues.close_tab" .NumClosedIssues}}
-						</span>
-					</div>
-					{{if $.IsRepositoryAdmin}}
-					<div class="ui right operate">
-						<a href="{{$.Link}}/{{.ID}}/edit" data-id={{.ID}} data-title={{.Name}}><i class="octicon octicon-pencil"></i> {{$.i18n.Tr "repo.issues.label_edit"}}</a>
-						{{if .IsClosed}}
-						<a href="{{$.Link}}/{{.ID}}/open" data-id={{.ID}} data-title={{.Name}}><i class="octicon octicon-check"></i> {{$.i18n.Tr "repo.milestones.open"}}</a>
+		<div class="milestone list">
+			{{range .Milestones}}
+			<li class="item">
+				<i class="octicon octicon-milestone"></i> <a href="{{$.RepoLink}}/issues?state={{$.State}}&milestone={{.ID}}">{{.Name}}</a>
+				<div class="ui right green progress" data-percent="{{.Completeness}}">
+			    <div class="bar" {{if not .Completeness}}style="background-color: transparent"{{end}}>
+			      <div class="progress"></div>
+			    </div>
+				</div>
+				<div class="meta">
+					{{ $closedDate:= TimeSince .ClosedDate $.Lang }}
+					{{if .IsClosed}}
+						<span class="octicon octicon-clock"></span> {{$.i18n.Tr "repo.milestones.closed" $closedDate|Str2html}}
+					{{else}}
+						<span class="octicon octicon-calendar"></span> 
+						{{if .DeadlineString}}
+						<span {{if .IsOverDue}}class="overdue"{{end}}>{{.DeadlineString}}</span>
 						{{else}}
-						<a href="{{$.Link}}/{{.ID}}/close" data-id={{.ID}} data-title={{.Name}}><i class="octicon octicon-x"></i> {{$.i18n.Tr "repo.milestones.close"}}</a>
+						{{$.i18n.Tr "repo.milestones.no_due_date"}}
 						{{end}}
-						<a class="delete-button" href="#" data-url="{{$.RepoLink}}/milestones/delete" data-id="{{.ID}}"><i class="octicon octicon-trashcan"></i> {{$.i18n.Tr "repo.issues.label_delete"}}</a>
-					</div>
-					{{if .Content}}
-					<div class="content">
-						{{.RenderedContent|Str2html}}
-					</div>
 					{{end}}
+					<span class="issue-stats">
+						<i class="octicon octicon-issue-opened"></i> {{$.i18n.Tr "repo.issues.open_tab" .NumOpenIssues}}
+						<i class="octicon octicon-issue-closed"></i> {{$.i18n.Tr "repo.issues.close_tab" .NumClosedIssues}}
+					</span>
+				</div>
+				{{if $.IsRepositoryAdmin}}
+				<div class="ui right operate">
+					<a href="{{$.Link}}/{{.ID}}/edit" data-id={{.ID}} data-title={{.Name}}><i class="octicon octicon-pencil"></i> {{$.i18n.Tr "repo.issues.label_edit"}}</a>
+					{{if .IsClosed}}
+					<a href="{{$.Link}}/{{.ID}}/open" data-id={{.ID}} data-title={{.Name}}><i class="octicon octicon-check"></i> {{$.i18n.Tr "repo.milestones.open"}}</a>
+					{{else}}
+					<a href="{{$.Link}}/{{.ID}}/close" data-id={{.ID}} data-title={{.Name}}><i class="octicon octicon-x"></i> {{$.i18n.Tr "repo.milestones.close"}}</a>
 					{{end}}
-				</li>
-				{{end}}
-				
-				{{with .Page}}
-				{{if gt .TotalPages 1}}
-				<div class="center page buttons">
-					<div class="ui borderless pagination menu">
-					  <a class="{{if not .HasPrevious}}disabled{{end}} item" {{if .HasPrevious}}href="{{$.Link}}?state={{$.State}}&page={{.Previous}}"{{end}}>
-					    <i class="left arrow icon"></i> {{$.i18n.Tr "repo.issues.previous"}}
-					  </a>
-						{{range .Pages}}
-						{{if eq .Num -1}}
-						<a class="disabled item">...</a>
-						{{else}}
-						<a class="{{if .IsCurrent}}active{{end}} item" {{if not .IsCurrent}}href="{{$.Link}}?state={{$.State}}&page={{.Num}}"{{end}}>{{.Num}}</a>
-						{{end}}
-						{{end}}
-					  <a class="{{if not .HasNext}}disabled{{end}} item" {{if .HasNext}}href="{{$.Link}}?state={{$.State}}&page={{.Next}}"{{end}}>
-					    {{$.i18n.Tr "repo.issues.next"}} <i class="icon right arrow"></i>
-					  </a>
-					</div>
+					<a class="delete-button" href="#" data-url="{{$.RepoLink}}/milestones/delete" data-id="{{.ID}}"><i class="octicon octicon-trashcan"></i> {{$.i18n.Tr "repo.issues.label_delete"}}</a>
+				</div>
+				{{if .Content}}
+				<div class="content">
+					{{.RenderedContent|Str2html}}
 				</div>
 				{{end}}
 				{{end}}
+			</li>
+			{{end}}
+			
+			{{with .Page}}
+			{{if gt .TotalPages 1}}
+			<div class="center page buttons">
+				<div class="ui borderless pagination menu">
+				  <a class="{{if not .HasPrevious}}disabled{{end}} item" {{if .HasPrevious}}href="{{$.Link}}?state={{$.State}}&page={{.Previous}}"{{end}}>
+				    <i class="left arrow icon"></i> {{$.i18n.Tr "repo.issues.previous"}}
+				  </a>
+					{{range .Pages}}
+					{{if eq .Num -1}}
+					<a class="disabled item">...</a>
+					{{else}}
+					<a class="{{if .IsCurrent}}active{{end}} item" {{if not .IsCurrent}}href="{{$.Link}}?state={{$.State}}&page={{.Num}}"{{end}}>{{.Num}}</a>
+					{{end}}
+					{{end}}
+				  <a class="{{if not .HasNext}}disabled{{end}} item" {{if .HasNext}}href="{{$.Link}}?state={{$.State}}&page={{.Next}}"{{end}}>
+				    {{$.i18n.Tr "repo.issues.next"}} <i class="icon right arrow"></i>
+				  </a>
+				</div>
 			</div>
+			{{end}}
+			{{end}}
 		</div>
 	</div>
 </div>
 
 {{if .IsRepositoryAdmin}}
-<div class="ui basic delete modal">
-  <div class="header">
+<div class="ui small basic delete modal">
+  <div class="ui icon header">
+     <i class="trash icon"></i>
     {{.i18n.Tr "repo.milestones.deletion"}}
   </div>
   <div class="content">
-    <div class="image">
-      <i class="trash icon"></i>
-    </div>
-    <div class="description">
-      <p>{{.i18n.Tr "repo.milestones.deletion_desc"}}</p>
-    </div>
+    <p>{{.i18n.Tr "repo.milestones.deletion_desc"}}</p>
   </div>
   <div class="actions">
-    <div class="two fluid ui inverted buttons">
-      <div class="ui red basic inverted button">
-        <i class="remove icon"></i>
-        {{.i18n.Tr "modal.no"}}
-      </div>
-      <div class="ui green basic inverted positive button">
-        <i class="checkmark icon"></i>
-        {{.i18n.Tr "modal.yes"}}
-      </div>
+    <div class="ui red basic inverted cancel button">
+      <i class="remove icon"></i>
+      {{.i18n.Tr "modal.no"}}
+    </div>
+    <div class="ui green basic inverted ok button">
+      <i class="checkmark icon"></i>
+      {{.i18n.Tr "modal.yes"}}
     </div>
   </div>
 </div>
diff --git a/templates/repo/issue/navbar.tmpl b/templates/repo/issue/navbar.tmpl
index 509ee5f66e..4c11a8e75a 100644
--- a/templates/repo/issue/navbar.tmpl
+++ b/templates/repo/issue/navbar.tmpl
@@ -1,7 +1,5 @@
-<div class="ui left">
-	<div class="ui compact menu">
-	  <a class="{{if .PageIsIssueList}}active{{end}} item" href="{{.RepoLink}}/issues">{{.i18n.Tr "repo.issues"}}</a>
-	  <a class="{{if .PageIsLabels}}active{{end}} item" href="{{.RepoLink}}/labels">{{.i18n.Tr "repo.labels"}}</a>
-	  <a class="{{if .PageIsMilestones}}active{{end}} item" href="{{.RepoLink}}/milestones">{{.i18n.Tr "repo.milestones"}}</a>
-	</div>
+<div class="ui compact small menu">
+  <a class="{{if .PageIsIssueList}}active{{end}} item" href="{{.RepoLink}}/issues">{{.i18n.Tr "repo.issues"}}</a>
+  <a class="{{if .PageIsLabels}}active{{end}} item" href="{{.RepoLink}}/labels">{{.i18n.Tr "repo.labels"}}</a>
+  <a class="{{if .PageIsMilestones}}active{{end}} item" href="{{.RepoLink}}/milestones">{{.i18n.Tr "repo.milestones"}}</a>
 </div>
\ No newline at end of file
diff --git a/templates/repo/issue/view.tmpl b/templates/repo/issue/view.tmpl
index 2889856f3a..6b1d48ff5d 100644
--- a/templates/repo/issue/view.tmpl
+++ b/templates/repo/issue/view.tmpl
@@ -253,7 +253,7 @@
                     <h4>Milestone</h4>
                     {{if .Milestone}}
                     <p class="completion{{if eq .Milestone.Completeness 0}} hidden{{end}}"><span style="width:{{.Milestone.Completeness}}%">&nbsp;</span></p>
-                    <p class="name"><strong><a href="{{$.RepoLink}}/issues?milestone={{.Milestone.Index}}{{if $.Issue.IsClosed}}&state=closed{{end}}">{{.Milestone.Name}}</a></strong></p>
+                    <p class="name"><strong><a href="{{$.RepoLink}}/issues?milestone={{.Milestone.ID}}{{if $.Issue.IsClosed}}&state=closed{{end}}">{{.Milestone.Name}}</a></strong></p>
                     {{else}}
                     <p class="name">No milestone</p>
                     {{end}}