pull request ui review, change sidebar

This commit is contained in:
fuxiaohei 2014-09-23 23:36:09 +08:00
parent 60c65415dd
commit 8d5a4cc9eb
5 changed files with 92 additions and 68 deletions

View File

@ -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;

View File

@ -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;

View File

@ -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 {

View File

@ -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>

View File

@ -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>