new dashboard ui

8 files changed, 353 insertions, 267 deletions

diff --git a/public/css/gogs.css b/public/css/gogs.css
index 8c66cdb3f3..145f38aded 100755
--- a/public/css/gogs.css
+++ b/public/css/gogs.css
@@ -759,7 +759,7 @@ pre.raw {
   z-index: 900;
 }
 .following.bar .head.link.item {
-  padding-right: 0!important;
+  padding-right: 0 !important;
 }
 .following.bar .head.link.item .dropdown.icon,
 .following.bar .head.link.item .menu .octicon {
@@ -792,50 +792,59 @@ pre.raw {
   float: right;
 }
 .ui .text.red {
-  color: #d95c5c!important;
+  color: #d95c5c !important;
 }
 .ui .text.red a {
-  color: #d95c5c!important;
+  color: #d95c5c !important;
 }
 .ui .text.red a:hover {
-  color: #E67777!important;
+  color: #E67777 !important;
 }
 .ui .text.blue {
-  color: #428bca!important;
+  color: #428bca !important;
 }
 .ui .text.blue a {
-  color: #15c!important;
+  color: #15c !important;
 }
 .ui .text.blue a:hover {
-  color: #428bca!important;
+  color: #428bca !important;
 }
 .ui .text.grey {
-  color: #767676!important;
+  color: #767676 !important;
 }
 .ui .text.grey a {
-  color: #444!important;
+  color: #444 !important;
 }
 .ui .text.grey a:hover {
-  color: #000!important;
+  color: #000 !important;
+}
+.ui .text.light.grey {
+  color: #888 !important;
 }
 .ui .text.green {
-  color: #6cc644!important;
+  color: #6cc644 !important;
 }
 .ui .text.purple {
-  color: #6e5494!important;
+  color: #6e5494 !important;
 }
 .ui .text.yellow {
-  color: #FBBD08!important;
+  color: #FBBD08 !important;
 }
 .ui .text.left {
-  text-align: left!important;
+  text-align: left !important;
 }
 .ui .text.right {
-  text-align: right!important;
+  text-align: right !important;
 }
 .ui .text.small {
   font-size: 0.75em;
 }
+.ui .text.bold {
+  font-weight: bold;
+}
+.ui .text.italic {
+  font-style: italic;
+}
 .ui .text.truncate {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -856,14 +865,14 @@ pre.raw {
   vertical-align: middle;
 }
 .ui .warning.header {
-  background-color: #F9EDBE!important;
+  background-color: #F9EDBE !important;
   border-color: #F0C36D;
 }
 .ui .warning.segment {
   border-color: #F0C36D;
 }
 .ui .info.header {
-  background-color: #d9edf7!important;
+  background-color: #d9edf7 !important;
   border-color: #85c5e5;
 }
 .ui .info.segment {
@@ -876,7 +885,7 @@ pre.raw {
   border-radius: 3px;
 }
 .ui .form .fake {
-  display: none!important;
+  display: none !important;
 }
 .ui.status.buttons .octicon {
   margin-right: 4px;
@@ -894,7 +903,7 @@ pre.raw {
   border-top: none;
   line-height: 1em;
   color: rgba(0, 0, 0, 0.8);
-  padding: .71428571em 1.14285714em!important;
+  padding: .71428571em 1.14285714em !important;
   font-size: 1rem;
   text-transform: none;
   font-weight: 400;
@@ -910,7 +919,7 @@ pre.raw {
   z-index: 13;
 }
 .scrolling.menu .item.selected {
-  font-weight: 700!important;
+  font-weight: 700 !important;
 }
 footer {
   margin-top: 54px !important;
@@ -1010,7 +1019,7 @@ footer .container .links > *:first-child {
 .octicon.icon,
 .mega-octicon.icon {
   font-family: octicons;
-  opacity: 1!important;
+  opacity: 1 !important;
 }
 .sr-only {
   position: absolute;
@@ -2539,48 +2548,107 @@ ol.linenums {
   padding-top: 15px;
   padding-bottom: 80px;
 }
+.dashboard.feeds .context.user.menu,
 .dashboard.issues .context.user.menu {
   z-index: 101;
   min-width: 200px;
 }
+.dashboard.feeds .context.user.menu .ui.header,
 .dashboard.issues .context.user.menu .ui.header {
   font-size: 1rem;
   text-transform: none;
 }
+.dashboard.feeds .filter.menu .item,
 .dashboard.issues .filter.menu .item {
   text-align: left;
 }
+.dashboard.feeds .filter.menu .item .text,
 .dashboard.issues .filter.menu .item .text {
   height: 16px;
   vertical-align: middle;
 }
+.dashboard.feeds .filter.menu .item .text.truncate,
 .dashboard.issues .filter.menu .item .text.truncate {
   width: 85%;
 }
+.dashboard.feeds .filter.menu .item .floating.label,
 .dashboard.issues .filter.menu .item .floating.label {
   top: 7px;
   left: 90%;
   width: 15%;
 }
+.dashboard.feeds .filter.menu .jump.item,
 .dashboard.issues .filter.menu .jump.item {
   margin: 1px;
   padding-right: 0;
 }
+.dashboard.feeds .filter.menu .menu,
 .dashboard.issues .filter.menu .menu {
   max-height: 300px;
   overflow-x: auto;
   right: 0!important;
   left: auto!important;
 }
+.dashboard.feeds .ui.right .head.menu,
 .dashboard.issues .ui.right .head.menu {
   margin-top: -5px;
 }
+.dashboard.feeds .ui.right .head.menu .item.active,
 .dashboard.issues .ui.right .head.menu .item.active {
   color: #d9453d;
 }
+.dashboard.feeds .head.menu .octicon,
 .dashboard.issues .head.menu .octicon {
   margin-right: 5px;
 }
+.feeds .news .ui.avatar {
+  margin-top: 13px;
+}
+.feeds .news p {
+  line-height: 1em;
+}
+.feeds .news .time-since {
+  font-size: 13px;
+}
+.feeds .news .issue.title {
+  line-height: 1em;
+  width: 80%;
+}
+.feeds .news .push.news .content ul {
+  font-size: 13px;
+  list-style: none;
+  padding-left: 10px;
+}
+.feeds .news .push.news .content ul img {
+  margin-bottom: -2px;
+}
+.feeds .news .push.news .content ul .text.truncate {
+  width: 80%;
+  margin-bottom: -5px;
+}
+.feeds .list .header {
+  padding-top: 10px;
+  padding-bottom: 5px;
+}
+.feeds .list ul {
+  list-style: none;
+  margin: 0;
+  padding-left: 0;
+}
+.feeds .list ul li:not(:last-child) {
+  border-bottom: 1px solid #EAEAEA;
+}
+.feeds .list ul li.private {
+  background-color: #fcf8e9;
+}
+.feeds .list ul li a {
+  padding: 6px 1.2em;
+  display: block;
+}
+.feeds .list ul li a .octicon {
+  margin-right: 6px;
+  color: #888;
+}
 .admin {
   padding-top: 15px;
   padding-bottom: 80px;
diff --git a/public/js/gogs.js b/public/js/gogs.js
index f3aed276de..81a9c1f443 100644
--- a/public/js/gogs.js
+++ b/public/js/gogs.js
@@ -583,6 +583,7 @@ $(document).ready(function () {
         }
     });
     $('.tabular.menu .item').tab();
+    $('.tabable.menu .item').tab();
 
     $('.toggle.button').click(function () {
         $($(this).data('target')).slideToggle(100);
diff --git a/public/less/_base.less b/public/less/_base.less
index 99cb736c6e..21591cb14c 100644
--- a/public/less/_base.less
+++ b/public/less/_base.less
@@ -55,7 +55,7 @@ pre {
 		z-index: 900;
 	}
 	.head.link.item {
-		padding-right: 0!important;
+		padding-right: 0 !important;
 		.dropdown.icon,
 		.menu .octicon {
 			margin-right: 5px;
@@ -65,9 +65,9 @@ pre {
 		margin-right: 0;
 	}
 	.searchbox {
-  	background-color: rgb(244, 244, 244)!important;
+  	background-color: rgb(244, 244, 244) !important;
   	&:focus {
-  		background-color: rgb(233, 233, 233)!important;
+  		background-color: rgb(233, 233, 233) !important;
   	}
 	}
 	.text .octicon {
@@ -84,6 +84,7 @@ pre {
 		}
   }
 }
+
 .ui {
 	&.left {
 		float: left;
@@ -94,51 +95,60 @@ pre {
 
 	.text {
 		&.red {
-			color: #d95c5c!important;
+			color: #d95c5c !important;
 	    a {
-	    	color: #d95c5c!important;
+	    	color: #d95c5c !important;
 	    	&:hover {
-	    		color: #E67777!important;
+	    		color: #E67777 !important;
 	    	}
 	    }
 		}
 		&.blue {
-			color: #428bca!important;
+			color: #428bca !important;
 	    a {
-	    	color: #15c!important;
+	    	color: #15c !important;
 	    	&:hover {
-	    		color: #428bca!important;
+	    		color: #428bca !important;
 	    	}
 	    }
 		}
 		&.grey {
-	    color: #767676!important;
+	    color: #767676 !important;
 	    a {
-	    	color: #444!important;
+	    	color: #444 !important;
 	    	&:hover {
-	    		color: #000!important;
+	    		color: #000 !important;
 	    	}
 	    }
 		}
+		&.light.grey {
+			color: #888 !important;
+		}
 		&.green {
-			color: #6cc644!important;
+			color: #6cc644 !important;
 		}
 		&.purple {
-			color: #6e5494!important;
+			color: #6e5494 !important;
 		}
 		&.yellow {
-			color: #FBBD08!important;
+			color: #FBBD08 !important;
 		}
 
 		&.left {
-			text-align: left!important;
+			text-align: left !important;
 		}
 		&.right {
-			text-align: right!important;
+			text-align: right !important;
 		}
 		&.small {
 			font-size: 0.75em;
 		}
+		&.bold {
+			font-weight: bold;
+		}
+		&.italic {
+			font-style: italic;
+		}
 
 		&.truncate {
 			overflow: hidden;
@@ -166,7 +176,7 @@ pre {
 	}
 	.warning {
 		&.header {
-			background-color: #F9EDBE!important;
+			background-color: #F9EDBE !important;
 	    border-color: #F0C36D;
 		}
 		&.segment {
@@ -175,7 +185,7 @@ pre {
 	}
 	.info {
 		&.header {
-			background-color: #d9edf7!important;
+			background-color: #d9edf7 !important;
     	border-color: #85c5e5;
 		}
 		&.segment {
@@ -193,7 +203,7 @@ pre {
 
 	.form {
 		.fake {
-			display: none!important;
+			display: none !important;
 		}
 	}
 
@@ -217,7 +227,7 @@ pre {
 			border-top: none;
 			line-height: 1em;
 			color: rgba(0,0,0,.8);
-			padding: .71428571em 1.14285714em!important;
+			padding: .71428571em 1.14285714em !important;
 			font-size: 1rem;
 			text-transform: none;
 			font-weight: 400;
@@ -237,12 +247,12 @@ pre {
 
 .scrolling.menu {
 	.item.selected {
-	  font-weight: 700!important;
+	  font-weight: 700 !important;
 	}
 }
 
 footer {
-	margin-top: @footer-margin+14px!important;
+	margin-top: @footer-margin+14px !important;
 	height: @footer-margin;
 	background-color: white;
 	border-top: 1px solid #d6d6d6;
@@ -277,8 +287,8 @@ footer {
 .generate-img(16);
 .generate-img(@n, @i: 1) when (@i =< @n) {
   .img-@{i} {
-    width: (2px * @i)!important;
-    height: (2px * @i)!important;
+    width: (2px * @i) !important;
+    height: (2px * @i) !important;
   }
   .generate-img(@n, (@i + 1));
 }
@@ -286,7 +296,7 @@ footer {
 .octicon.icon,
 .mega-octicon.icon {
 	font-family: octicons;
-	opacity: 1!important;
+	opacity: 1 !important;
 }
 
 // Accessibility
diff --git a/public/less/_dashboard.less b/public/less/_dashboard.less
index 19264b0953..2a3d973427 100644
--- a/public/less/_dashboard.less
+++ b/public/less/_dashboard.less
@@ -2,6 +2,7 @@
 	padding-top: 15px;
 	padding-bottom: @footer-margin * 2;
 
+	&.feeds,
 	&.issues {
 		.context.user.menu {
 			z-index: 101;
@@ -52,4 +53,67 @@
 			}
 		}
 	}
+}
+
+&.feeds {
+	.news {
+		.ui.avatar {
+			margin-top: 13px;
+		}
+		p {
+			line-height: 1em;
+		}
+		.time-since {
+			font-size: 13px;
+		}
+		.issue.title {
+			line-height: 1em;
+			width: 80%;
+		}
+		.push.news .content ul {
+			font-size: 13px;
+			list-style: none;
+			padding-left: 10px;
+
+			img {
+				margin-bottom: -2px;
+			}
+			.text.truncate {
+				width: 80%;
+				margin-bottom: -5px;
+			}
+		}
+	}
+
+	.list {
+		.header {
+			padding-top: 10px;
+			padding-bottom: 5px;
+		}
+		ul {
+			list-style: none;
+			margin: 0;
+			padding-left: 0;
+
+			li {
+		    &:not(:last-child) {
+		    	border-bottom: 1px solid #EAEAEA;
+		    }
+
+				&.private {
+					background-color: #fcf8e9;
+				}
+				
+		    a {
+		    	padding: 6px 1.2em;
+    	    display: block;
+
+    	    .octicon {
+    	    	margin-right: 6px;
+    	    	color: #888;
+    	    }
+		    }
+			}
+		}
+	}
 }
\ No newline at end of file
diff --git a/templates/user/dashboard/dashboard.tmpl b/templates/user/dashboard/dashboard.tmpl
index e530b6f735..d8791241e9 100644
--- a/templates/user/dashboard/dashboard.tmpl
+++ b/templates/user/dashboard/dashboard.tmpl
@@ -1,131 +1,112 @@
-{{template "ng/base/head" .}}
-{{template "ng/base/header" .}}
-{{template "user/dashboard/nav" .}}
-<div id="dashboard-wrapper">
-    <div id="dashboard" class="container">
-        {{template "ng/base/alert" .}}
-        <div id="dashboard-news" class="left grid-2-3">
-            {{template "user/dashboard/feeds" .}}
+{{template "base/head" .}}
+<div class="dashboard feeds">
+  {{template "user/dashboard/navbar" .}}
+  <div class="ui container">
+    <div class="ui grid">
+      <div class="ten wide column">
+        {{template "user/dashboard/feeds" .}}
+      </div>
+      <div class="six wide column">
+        <div class="ui {{if not .ContextUser.IsOrganization}}three{{else}}two{{end}} item tabable menu">
+          <a class="item active" data-tab="repos">{{.i18n.Tr "repository"}}</a>
+          {{if not .ContextUser.IsOrganization}}
+          <a class="item" data-tab="orgs">{{.i18n.Tr "organization"}}</a>
+          {{end}}
+          <a class="item" data-tab="mirrors">{{.i18n.Tr "mirror"}}</a>
         </div>
-        <div class="right grid-1-3" id="dashboard-sidebar">
-            <ul id="dashboard-sidebar-menu" class="menu menu-line">
-                <li class="js-tab-nav js-tab-nav-show first" data-tab-target="#dashboard-my-repo"><a href="#">{{.i18n.Tr "repository"}}</a></li>
-                {{if not .ContextUser.IsOrganization}}
-                <li class="js-tab-nav" data-tab-target="#dashboard-my-org"><a href="#">{{.i18n.Tr "organization"}}</a></li>
-                {{end}}
-                <li class="js-tab-nav last" data-tab-target="#dashboard-my-mirror"><a href="#">{{.i18n.Tr "mirror"}}</a></li>
-                <li class="drop right">
-                    <button class="btn btn-green text-bold" id="dashboard-new-repo">
-                        <i class="octicon octicon-plus"></i>
-                    </button>
-                    <ul class="menu menu-vertical drop-down" id="dashboard-new-repo-menu">
-                        <li><a href="{{AppSubUrl}}/repo/create"><i class="octicon octicon-repo-create"></i>{{.i18n.Tr "new_repo"}}</a></li>
-                        <li><a href="{{AppSubUrl}}/repo/migrate"><i class="octicon octicon-repo-clone"></i>{{.i18n.Tr "new_migrate"}}</a></li>
-                        <li><a href="{{AppSubUrl}}/org/create"><i class="octicon octicon-organization"></i>{{.i18n.Tr "new_org"}}</a></li>
-                    </ul>
-                </li>
-            </ul>
-            <div class="panel" id="dashboard-my-repo">
-                <div class="panel-header">
-                    <h4 class="left">{{.i18n.Tr "home.my_repos"}}
-                        <span class="repo-count label label-gray label-radius">{{.ContextUser.NumRepos}}</span>
-                    </h4>
-                    &nbsp;
-                </div>
-                <div class="panel-body">
-                    <ul class="list-no-style">
-                        {{range .Repos}}
-                        <li {{if .IsPrivate}}class="private"{{end}}>
-                            <a href="{{AppSubUrl}}/{{$.ContextUser.Name}}/{{.Name}}">
-                                <i class="octicon octicon-{{if .IsPrivate}}lock{{else if .IsFork}}repo-forked{{else if .IsMirror}}repo-clone{{else}}repo{{end}}"></i>
-                                <span class="repo-name">
-                                    <strong class="repo">{{.Name}}</strong>
-                                </span>
-                                <span class="right repo-star">
-                                    <i class="octicon octicon-star"></i>{{.NumStars}}
-                                </span>
-                            </a>
-                        </li>
-                        {{end}}
-                    </ul>
-                </div>
-                {{if not .ContextUser.IsOrganization}}
-                <div class="panel-header repo-contrib-header">
-                    <h4 class="text-bold">{{.i18n.Tr "home.collaborative_repos"}}
-                        <span class="repo-count label label-gray label-radius">{{.CollaborateCount}}</span>
-                    </h4>
-                </div>
-                <div class="panel-body">
-                    <ul class="list-no-style">
-                        {{range .CollaborativeRepos}}
-                        <li {{if .IsPrivate}}class="private"{{end}}>
-                            <a href="{{AppSubUrl}}/{{.Owner.Name}}/{{.Name}}">
-                                <i class="octicon octicon-{{if .IsPrivate}}lock{{else if .IsFork}}repo-forked{{else if .IsMirror}}repo-clone{{else}}repo{{end}}"></i>
-                                <span class="repo-name">
-                                    <span class="repo-name-prefix">{{.Owner.Name}} / </span>
-                                    <strong class="repo">{{.Name}}</strong>
-                                </span>
-                                <span class="right repo-star">
-                                    <i class="octicon octicon-star"></i>{{.NumStars}}
-                                </span>
-                            </a>
-                        </li>
-                        {{end}}
-                    </ul>
-                </div>
-                {{end}}
-            </div>
-            {{if not .ContextUser.IsOrganization}}
-            <div class="panel" id="dashboard-my-org">
-                <div class="panel-header">
-                    <h4 class="text-bold">{{.i18n.Tr "home.my_orgs"}}
-                        <span class="repo-count label label-gray label-radius">{{.ContextUser.GetOrganizationCount}}</span>
-                    </h4>
-                </div>
-                <div class="panel-body">
-                    <ul class="list-no-style">
-                        {{range .ContextUser.Orgs}}
-                        <li>
-                            <a href="{{AppSubUrl}}/{{.Name}}">
-                                <i class="octicon octicon-organization"></i>
-                                <span class="repo-name">
-                                    <strong class="repo">{{.Name}}</strong>
-                                </span>
-                                <span class="right repo-star">
-                                    <i class="octicon octicon-repo"></i>{{.NumRepos}}
-                                </span>
-                            </a>
-                        </li>
-                        {{end}}
-                    </ul>
-                </div>
+        <div class="ui tab active list" data-tab="repos">
+          <h4 class="ui top attached header">
+            {{.i18n.Tr "home.my_repos"}} <span class="ui grey label">{{.ContextUser.NumRepos}}</span>
+            <div class="ui right">
+              <a class="ui blue tiny show-panel button" href="{{AppSubUrl}}/repo/create">{{.i18n.Tr "new_repo"}}</a>
             </div>
-            {{end}}
-            <div class="panel" id="dashboard-my-mirror">
-                <div class="panel-header">
-                    <h4 class="text-bold">{{.i18n.Tr "home.my_mirrors"}}
-                        <span class="repo-count label label-gray label-radius">{{.MirrorCount}}</span>
-                    </h4>
-                </div>
-                <div class="panel-body">
-                    <ul class="list-no-style">
-                        {{range .Mirrors}}
-                        <li {{if .IsPrivate}}class="private"{{end}}>
-                            <a href="{{AppSubUrl}}/{{$.ContextUser.Name}}/{{.Name}}">
-                                <i class="octicon octicon-repo-clone"></i>
-                                <span class="repo-name">
-                                    <strong class="repo">{{.Name}}</strong>
-                                </span>
-                                <span class="right repo-star">
-                                    <i class="octicon octicon-sync"></i>{{.Interval}}H
-                                </span>
-                            </a>
-                        </li>
-                        {{end}}
-                    </ul>
-                </div>
+          </h4>
+          <div class="ui attached table segment">
+            <ul>
+              {{range .Repos}}
+              <li {{if .IsPrivate}}class="private"{{end}}>
+                <a href="{{AppSubUrl}}/{{$.ContextUser.Name}}/{{.Name}}">
+                  <i class="octicon octicon-{{if .IsPrivate}}lock{{else if .IsFork}}repo-forked{{else if .IsMirror}}repo-clone{{else}}repo{{end}}"></i>
+                  <strong>{{.Name}}</strong>
+                  <span class="ui right text light grey">
+                    <i class="octicon octicon-star"></i>{{.NumStars}}
+                  </span>
+                </a>
+              </li>
+              {{end}}
+            </ul>
+          </div>
+
+          {{if not .ContextUser.IsOrganization}}
+          <h4 class="ui top attached header">
+            {{.i18n.Tr "home.collaborative_repos"}} <span class="ui grey label">{{.CollaborateCount}}</span>
+          </h4>
+          <div class="ui attached table segment">
+            <ul>
+              {{range .CollaborativeRepos}}
+              <li {{if .IsPrivate}}class="private"{{end}}>
+                <a href="{{AppSubUrl}}/{{.Owner.Name}}/{{.Name}}">
+                  <i class="octicon octicon-{{if .IsPrivate}}lock{{else if .IsFork}}repo-forked{{else if .IsMirror}}repo-clone{{else}}repo{{end}}"></i>
+                  {{.Owner.Name}} / <strong>{{.Name}}</strong>
+                  <span class="ui right text light grey">
+                    <i class="octicon octicon-star"></i>{{.NumStars}}
+                  </span>
+                </a>
+              </li>
+              {{end}}
+            </ul>
+          </div>
+          {{end}}
+        </div>
+
+        {{if not .ContextUser.IsOrganization}}
+        <div class="ui tab list" data-tab="orgs">
+          <h4 class="ui top attached header">
+            {{.i18n.Tr "home.my_orgs"}} <span class="ui grey label">{{.ContextUser.GetOrganizationCount}}</span>
+            <div class="ui right">
+              <a class="ui blue tiny show-panel button" href="{{AppSubUrl}}/org/create">{{.i18n.Tr "new_org"}}</a>
             </div>
+          </h4>
+          <div class="ui attached table segment">
+            <ul>
+              {{range .ContextUser.Orgs}}
+              <li>
+                <a href="{{AppSubUrl}}/{{.Name}}">
+                  <i class="octicon octicon-organization"></i>
+                  <strong>{{.Name}}</strong>
+                  <span class="ui right text light grey">
+                    <i class="octicon octicon-repo"></i>{{.NumRepos}}
+                  </span>
+                </a>
+              </li>
+              {{end}}
+            </ul>
+          </div>
+        </div>
+        {{end}}
+
+        <div class="ui tab list" data-tab="mirrors">
+          <h4 class="ui top attached header">
+            {{.i18n.Tr "home.my_mirrors"}} <span class="ui grey label">{{.MirrorCount}}</span>
+          </h4>
+          <div class="ui attached table segment">
+            <ul>
+              {{range .Mirrors}}
+              <li {{if .IsPrivate}}class="private"{{end}}>
+                <a href="{{AppSubUrl}}/{{$.ContextUser.Name}}/{{.Name}}">
+                  <i class="octicon octicon-repo-clone"></i>
+                  <strong>{{.Name}}</strong>
+                  <span class="ui right text light grey">
+                    <i class="octicon octicon-sync"></i>{{.Interval}}H
+                  </span>
+                </a>
+              </li>
+              {{end}}
+              </ul>
+          </div>
         </div>
+      </div>
     </div>
+  </div>
 </div>
-{{template "ng/base/footer" .}}
+{{template "base/footer" .}}
\ No newline at end of file
diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl
index bff44f06bb..57c2e85982 100644
--- a/templates/user/dashboard/feeds.tmpl
+++ b/templates/user/dashboard/feeds.tmpl
@@ -1,59 +1,67 @@
 {{range .Feeds}}
-<div class="news clear">
-    <div class="avatar left">
-        <img class="avatar-30" src="{{.ActAvatar}}" alt="">
-    </div>
-    <div class="content left {{if eq .GetOpType 5}}push-news{{end}} grid-4-5">
-        <p class="text-bold">
-            <a href="{{AppSubUrl}}/{{.GetActUserName}}">{{.GetActUserName}}</a>
-            {{if eq .GetOpType 1}}
-            {{$.i18n.Tr "action.create_repo" .GetRepoLink .GetRepoPath | Str2html}}
-            {{else if eq .GetOpType 2}}
-            {{$.i18n.Tr "action.rename_repo" .GetContent .GetRepoLink .GetRepoPath | Str2html}}
-            {{else if eq .GetOpType 5}}
-            {{$.i18n.Tr "action.commit_repo" .GetRepoLink .GetBranch .GetRepoPath | Str2html}}
-            {{else if eq .GetOpType 6}}
-            {{ $index := index .GetIssueInfos 0}}
-            {{$.i18n.Tr "action.create_issue" .GetRepoLink $index .GetRepoPath | Str2html}}
-            {{else if eq .GetOpType 7}}
-            {{ $index := index .GetIssueInfos 0}}
-            {{$.i18n.Tr "action.create_pull_request" .GetRepoLink $index .GetRepoPath | Str2html}}
-            {{else if eq .GetOpType 8}}
-            {{$.i18n.Tr "action.transfer_repo" .GetContent .GetRepoLink .GetRepoPath | Str2html}}
-            {{else if eq .GetOpType 9}}
-            {{$.i18n.Tr "action.push_tag" .GetRepoLink .GetBranch .GetRepoPath | Str2html}}
-            {{else if eq .GetOpType 10}}
-            {{ $index := index .GetIssueInfos 0}}
-            {{$.i18n.Tr "action.comment_issue" .GetRepoLink $index .GetRepoPath | Str2html}} – {{.GetIssueTitle}}
-            {{else if eq .GetOpType 11}}
-            {{ $index := index .GetIssueInfos 0}}
-            {{$.i18n.Tr "action.merge_pull_request" .GetRepoLink $index .GetRepoPath | Str2html}}
-            {{end}}
+<div class="news">
+  <div class="ui left">
+    <img class="ui avatar image" src="{{.ActAvatar}}" alt="">
+  </div>
+  <div class="ui grid">
+    <div class="ui fifteen wide column">
+      <div class="{{if eq .GetOpType 5}}push news{{end}}">
+        <p>
+          <a href="{{AppSubUrl}}/{{.GetActUserName}}">{{.GetActUserName}}</a>
+          {{if eq .GetOpType 1}}
+          {{$.i18n.Tr "action.create_repo" .GetRepoLink .GetRepoPath | Str2html}}
+          {{else if eq .GetOpType 2}}
+          {{$.i18n.Tr "action.rename_repo" .GetContent .GetRepoLink .GetRepoPath | Str2html}}
+          {{else if eq .GetOpType 5}}
+          {{$.i18n.Tr "action.commit_repo" .GetRepoLink .GetBranch .GetRepoPath | Str2html}}
+          {{else if eq .GetOpType 6}}
+          {{ $index := index .GetIssueInfos 0}}
+          {{$.i18n.Tr "action.create_issue" .GetRepoLink $index .GetRepoPath | Str2html}}
+          {{else if eq .GetOpType 7}}
+          {{ $index := index .GetIssueInfos 0}}
+          {{$.i18n.Tr "action.create_pull_request" .GetRepoLink $index .GetRepoPath | Str2html}}
+          {{else if eq .GetOpType 8}}
+          {{$.i18n.Tr "action.transfer_repo" .GetContent .GetRepoLink .GetRepoPath | Str2html}}
+          {{else if eq .GetOpType 9}}
+          {{$.i18n.Tr "action.push_tag" .GetRepoLink .GetBranch .GetRepoPath | Str2html}}
+          {{else if eq .GetOpType 10}}
+          {{ $index := index .GetIssueInfos 0}}
+          {{$.i18n.Tr "action.comment_issue" .GetRepoLink $index .GetRepoPath | Str2html}}
+          {{else if eq .GetOpType 11}}
+          {{ $index := index .GetIssueInfos 0}}
+          {{$.i18n.Tr "action.merge_pull_request" .GetRepoLink $index .GetRepoPath | Str2html}}
+          {{end}}
         </p>
         {{if eq .GetOpType 5}}
-        <div class="news-content content">
-            <ul class="list-no-style">
-                {{ $push := ActionContent2Commits .}}
-                {{ $repoLink := .GetRepoLink}}
-                {{if $push.Commits}}
-                {{range $push.Commits}}
-                <li><img class="avatar-16" src="{{AvatarLink .AuthorEmail}}?s=16"> <a href="{{$repoLink}}/commit/{{.Sha1}}">{{ShortSha .Sha1}}</a> <span class="text-truncate grid-4-5">{{.Message}}</span></li>
-                {{end}}
-                {{end}}
-                {{if $push.CompareUrl}}<li><a href="{{AppSubUrl}}/{{$push.CompareUrl}}">{{$.i18n.Tr "action.compare_2_commits"}} »</a></li>{{end}}
-            </ul>
+        <div class="content">
+          <ul>
+            {{ $push := ActionContent2Commits .}}
+            {{ $repoLink := .GetRepoLink}}
+            {{if $push.Commits}}
+            {{range $push.Commits}}
+            <li><img class="img-8" src="{{AvatarLink .AuthorEmail}}"> <a href="{{$repoLink}}/commit/{{.Sha1}}">{{ShortSha .Sha1}}</a> <span class="text truncate light grey">{{.Message}}</span></li>
+            {{end}}
+            {{end}}
+            {{if $push.CompareUrl}}<li><a href="{{AppSubUrl}}/{{$push.CompareUrl}}">{{$.i18n.Tr "action.compare_2_commits"}} »</a></li>{{end}}
+          </ul>
         </div>
         {{else if eq .GetOpType 6}}
-        <p class="news-content comment-news">{{index .GetIssueInfos 1}}</p>
+        <p class="text light grey">{{index .GetIssueInfos 1}}</p>
         {{else if eq .GetOpType 7}}
-        <p class="news-content comment-news">{{index .GetIssueInfos 1}}</p>
+        <p class="text light grey">{{index .GetIssueInfos 1}}</p>
         {{else if eq .GetOpType 10}}
-        <p class="news-content comment-news">{{index .GetIssueInfos 1}}</p>
+        <span class="text truncate issue title">{{.GetIssueTitle}}</span>
+        <p class="text light grey">{{index .GetIssueInfos 1}}</p>
         {{else if eq .GetOpType 11}}
-        <p class="news-content comment-news">{{index .GetIssueInfos 1}}</p>
+        <p class="text light grey">{{index .GetIssueInfos 1}}</p>
         {{end}}
-        <p class="news-time text-italic">{{TimeSince .GetCreate $.i18n.Lang}}</p>
+        <p class="text italic light grey">{{TimeSince .GetCreate $.i18n.Lang}}</p>
+      </div>
+    </div>
+    <div class="ui one wide column">
+      <i class="text grey mega-octicon octicon-{{ActionIcon .GetOpType}}"></i>
     </div>
-    <i class="mega-octicon octicon-{{ActionIcon .GetOpType}} right"></i>
+  </div>
+  <div class="ui divider"></div>
 </div>
 {{end}}
\ No newline at end of file
diff --git a/templates/user/dashboard/nav.tmpl b/templates/user/dashboard/nav.tmpl
deleted file mode 100644
index 0549bbe949..0000000000
--- a/templates/user/dashboard/nav.tmpl
+++ /dev/null
@@ -1,46 +0,0 @@
-<div id="dashboard-header">
-    <ul class="menu menu-line container">
-        <li id="dashboard-selection-menu" class="down drop">
-            <a href="#" class="text-bold radius">
-                <img class="avatar-30" src="{{.ContextUser.AvatarLink}}" alt="user-avatar" />
-                {{.ContextUser.Name}}
-            </a>
-            <div class="drop-down panel panel-radius">
-                <p class="panel-header"><strong>{{.i18n.Tr "home.switch_dashboard_context"}}</strong></p>
-                <ul class="menu menu-vertical switching-list" id="dashboard-switch-menu">
-                    <li class="org {{if eq .ContextUser.Id .SignedUser.Id}}checked{{end}}">
-                        <a href="{{AppSubUrl}}/">
-                            <i class="octicon octicon-check"></i>
-                            <img class="avatar-24" src="{{.SignedUser.AvatarLink}}" alt="user-avatar" />
-                            {{.SignedUser.Name}}
-                        </a>
-                    </li>
-                    {{range .Orgs}}
-                    <li class="org {{if eq $.ContextUser.Id .Id}}checked{{end}}">
-                        <a href="{{.DashboardLink}}">
-                            <i class="octicon octicon-check"></i>
-                            <img class="avatar-24" src="{{.AvatarLink}}" alt="user-avatar" />
-                            {{.Name}}
-                        </a>
-                    </li>
-                    {{end}}
-                    <!-- <li>
-                        <a href="{{AppSubUrl}}/user/settings/orgs"><i class="octicon octicon-organization"></i>{{.i18n.Tr "manage_org"}}</a>
-                    </li> -->
-                    <li>
-                        <a href="{{AppSubUrl}}/org/create"><i class="octicon octicon-plus"></i>{{.i18n.Tr "new_org"}}</a>
-                    </li>
-                </ul>
-            </div>
-        </li>
-        <li class="right">
-            <a {{if $.PageIsIssues}}class="current"{{end}} href="{{AppSubUrl}}/{{if .ContextUser.IsOrganization}}org/{{.ContextUser.Name}}/{{end}}issues"><i class="octicon octicon-issue-opened"></i>{{.i18n.Tr "issues"}}</a>
-        </li>
-        <!-- <li class="right">
-            <a {{if .PageIsPulls}}class="current"{{end}} href="{{.ContextUser.DashboardLink}}pulls"><i class="octicon octicon-git-pull-request"></i>{{.i18n.Tr "pull_requests"}}</a>
-        </li> -->
-        <li class="right">
-            <a {{if $.PageIsNews}}class="current"{{end}} href="{{.ContextUser.DashboardLink}}"><i class="octicon octicon-rss"></i>{{.i18n.Tr "news_feed"}}</a>
-        </li>
-    </ul>
-</div>
\ No newline at end of file
diff --git a/templates/user/dashboard/navbar.tmpl b/templates/user/dashboard/navbar.tmpl
index 5a7fbf7b54..8469e23bc3 100644
--- a/templates/user/dashboard/navbar.tmpl
+++ b/templates/user/dashboard/navbar.tmpl
@@ -10,12 +10,12 @@
 				{{.i18n.Tr "home.switch_dashboard_context"}}
 			</div>
       <div class="items">
-      	<a class="{{if eq .ContextUser.Id .SignedUser.Id}}active selected{{end}} item" href="{{AppSubUrl}}/{{if .PageIsIssues}}issues{{else}}pulls{{end}}">
+      	<a class="{{if eq .ContextUser.Id .SignedUser.Id}}active selected{{end}} item" href="{{AppSubUrl}}/{{if .PageIsIssues}}issues{{else if .PageIsPulls}}pulls{{end}}">
         	<img class="ui avatar image" src="{{.SignedUser.AvatarLink}}">
       		{{.SignedUser.Name}}
       	</a>
         {{range .Orgs}}
-        <a class="{{if eq $.ContextUser.Id .Id}}active selected{{end}} item" href="{{AppSubUrl}}/org/{{.Name}}/{{if $.PageIsIssues}}issues{{else}}pulls{{end}}">
+        <a class="{{if eq $.ContextUser.Id .Id}}active selected{{end}} item" href="{{AppSubUrl}}/org/{{.Name}}/{{if $.PageIsIssues}}issues{{else if $.PageIsPulls}}pulls{{else}}dashboard{{end}}">
           <img class="ui avatar image" src="{{.AvatarLink}}">
           {{.Name}}
         </a>