pull request ui review, change sidebar

public/ng/css/gogs.css

@@ -1076,6 +1076,35 @@ The register and sign-in page style
 #repo-sidebar-nav i {
   margin-right: 6px;
 }
+#repo-sidebar-mini {
+  margin-top: 6px;
+  width: 60px;
+}
+#repo-sidebar-mini li {
+  margin-bottom: 4px;
+}
+#repo-sidebar-mini li > a {
+  position: relative;
+}
+#repo-sidebar-mini li > a > i.octicon {
+  font-size: 21px;
+}
+#repo-sidebar-mini .num {
+  position: absolute;
+  font-size: 12px;
+  top: 0;
+  left: 40px;
+  width: 20px;
+  height: 20px;
+  padding-left: 0;
+  padding-right: 0;
+  text-align: center;
+  line-height: 20px;
+  border-radius: 4px;
+  opacity: 0.7;
+  -webkit-transform: scale(0.85);
+  font-weight: bold;
+}
 #repo-file-nav {
   padding: .6em 0 1em 0;
 }
@@ -1575,37 +1604,17 @@ The register and sign-in page style
 }
 .repo-issue-wrapper {
   padding: 18px 0;
+  position: relative;
 }
 .pr-main {
-  padding-right: 40px;
-  box-sizing: border-box;
+  margin-right: 100px;
 }
 .pr-sidebar {
   border-left: 1px solid #DDD;
   box-sizing: border-box;
-}
-#pr-sidebar-nav {
-  margin-top: 6px;
-}
-#pr-sidebar-nav li {
-  margin-bottom: 4px;
-}
-#pr-sidebar-nav li > a {
-  border: 1px solid transparent;
-  border-left: none;
-}
-#pr-sidebar-nav li > a:hover {
-  background-color: #FFF;
-  border-color: #DDD;
-}
-#pr-sidebar-nav .label {
-  font-size: 12px;
-  line-height: 1.4em;
-  margin-top: 1px;
-}
-#pr-sidebar-nav li.current a {
-  background-color: #FFF;
-  border-color: #DDD;
+  position: absolute;
+  right: 0;
+  top: 12px;
 }
 .pr-title {
   padding: 4px 0;

public/ng/less/gogs/issue.less

@@ -1,40 +1,23 @@
 @import "../ui/var";
 .repo-issue-wrapper {
   padding: 18px 0;
+  position: relative;
 }
+
+// pull request main content
 .pr-main {
-  padding-right: 40px;
-  box-sizing: border-box;
+  margin-right: 100px;
 }
+
+// right bar in pull request page
 .pr-sidebar {
   border-left: 1px solid #DDD;
   box-sizing: border-box;
+  position: absolute;
+  right:0;
+  top:12px;
 }
-#pr-sidebar-nav {
-  margin-top: 6px;
-  li {
-    margin-bottom: 4px;
-  }
-  li > a {
-    border: 1px solid transparent;
-    border-left: none;
-    &:hover {
-      background-color: #FFF;
-      border-color: #DDD;
-    }
-  }
-  .label {
-    font-size: 12px;
-    line-height: 1.4em;
-    margin-top: 1px;
-  }
-  li.current {
-    a {
-      background-color: #FFF;
-      border-color: #DDD;
-    }
-  }
-}
+
 .pr-title {
   .pr-num {
     font-weight: normal;

public/ng/less/gogs/repository.less

@@ -126,6 +126,35 @@
     margin-right: 6px;
   }
 }
+#repo-sidebar-mini {
+  margin-top: 6px;
+  width: 60px;
+  li {
+    margin-bottom: 4px;
+  }
+  li > a {
+    position: relative;
+    > i.octicon{
+      font-size: 21px;
+    }
+  }
+  .num{
+    position: absolute;
+    font-size: 12px;
+    top:0;
+    left: 40px;
+    width: 20px;
+    height: 20px;
+    padding-left: 0;
+    padding-right: 0;
+    text-align: center;
+    line-height: 20px;
+    border-radius: 4px;
+    opacity: 0.7;
+    -webkit-transform: scale(0.85);
+    font-weight: bold;
+  }
+}
 #repo-file-nav {
   padding: .6em 0 1em 0;
   > li > a {

templates/repo/pulls.tmpl

@@ -3,7 +3,7 @@
 <div id="repo-wrapper">
     {{template "repo/header" .}}
     <div class="clear container repo-issue-wrapper repo-pr">
-        <div class="pr-main grid-11-12 left">
+        <div class="pr-main">
             <div class="pr-title clear">
                 <h2 class="pr-title grid-5-6 left">Fix: Repo Name can not be converted to lower in some cases <span class="pr-num">#256</span></h2>
                 <div class="pr-title-btn grid-1-6 right text-right">
@@ -16,7 +16,10 @@
                     <i class="octicon octicon-git-pull-request"></i> Open
                 </button>
             <span class="msg">
-                <a href="#" class="text-bold pr-author">eryx</a>wants to merge 2 commits into <span class="pr-branch label label-gray radius">gogits:master</span> from <span class="pr-branch label label-gray radius">unknown repository</span>
+                <a href="#" class="text-bold pr-author">eryx</a> <span class="label radius label-blue">2</span> commits
+                <span class="pr-branch label label-gray radius">gogits:master</span>
+                <i class="octicon octicon-arrow-right"></i>
+                <span class="pr-branch label label-gray radius">unknown repository</span>
             </span>
             </div>
             <div class="pr-nav clear">
@@ -109,20 +112,8 @@
             <div id="pr-commit">commit</div>
             <div id="pr-file-diff">file diff</div>
         </div>
-        <div class="pr-sidebar grid-1-12 right">
-            <ul class="menu menu-vertical" id="pr-sidebar-nav">
-                <li><a href="#" class="btn-right-radius"><i class="octicon octicon-code"></i>
-                    <span class="right">code</span></a></li>
-                <li class="border-bottom"></li>
-                <li><a href="#" class="btn-right-radius"><i class="octicon octicon-issue-opened"></i>
-                    <span class="num right label label-blue label-radius">12</span>
-                </a></li>
-                <li class="current"><a href="#" class="btn-right-radius"><i class="octicon octicon-git-pull-request"></i>
-                    <span class="num right label label-black label-radius">12</span>
-                </a></li>
-                <li class="border-bottom"></li>
-                <li><a href="#" class="btn-right-radius"><i class="octicon octicon-tools"></i></a></li>
-            </ul>
+        <div class="pr-sidebar">
+            {{template "repo/sidebar_mini" .}}
         </div>
     </div>
 </div>

templates/repo/sidebar_mini.tmpl

@@ -0,0 +1,12 @@
+<ul class="menu menu-vertical" id="repo-sidebar-mini">
+    <li><a href="#" class="btn-right-radius"><i class="octicon octicon-code"></i></a></li>
+    <li class="border-bottom"></li>
+    <li><a href="#" class="btn-right-radius"><i class="octicon octicon-issue-opened"></i>
+        <span class="num label label-blue">6</span>
+    </a></li>
+    <li class="current"><a href="#" class="btn-right-radius"><i class="octicon octicon-git-pull-request"></i>
+        <span class="num label label-black">12</span>
+    </a></li>
+    <li class="border-bottom"></li>
+    <li><a href="#" class="btn-right-radius"><i class="octicon octicon-tools"></i></a></li>
+</ul>