add pull-request and labels page design

This commit is contained in:
fuxiaohei 2014-11-17 23:07:34 +08:00
parent a0f9197b45
commit d1a60e3643
10 changed files with 226 additions and 38 deletions

View file

@ -387,6 +387,8 @@ func runWeb(*cli.Context) {
m.Get("/branches", repo.Branches) m.Get("/branches", repo.Branches)
m.Get("/archive/*", repo.Download) m.Get("/archive/*", repo.Download)
m.Get("/issues2/", repo.Issues2) m.Get("/issues2/", repo.Issues2)
m.Get("/pulls2/", repo.PullRequest2)
m.Get("/labels2/",repo.Labels2)
m.Group("", func() { m.Group("", func() {
m.Get("/src/*", repo.Home) m.Get("/src/*", repo.Home)

View file

@ -2002,16 +2002,18 @@ textarea#issue-add-content {
height: 120px; height: 120px;
resize: vertical; resize: vertical;
} }
#issue-list-nav {
border-bottom: 1px solid #DDD;
padding-bottom: 12px;
}
#issue-list-nav li > a { #issue-list-nav li > a {
font-size: 13px; font-size: 13px;
font-weight: bold; font-weight: bold;
padding: .4em .9em; padding: .2em .8em;
border-radius: .3em;
} }
#issue-list-nav li.current > a { #issue-list-nav li.current > a {
background-color: #0079bc; background-color: #0079bc;
color: #FAFAFA; color: #FAFAFA;
border-radius: .3em;
} }
#issue-list-nav li.right { #issue-list-nav li.right {
margin-left: 4px; margin-left: 4px;
@ -2020,7 +2022,7 @@ textarea#issue-add-content {
padding: 0 !important; padding: 0 !important;
} }
#issue-new > a button { #issue-new > a button {
height: 34px; height: 29px;
} }
#issue-list-menu { #issue-list-menu {
padding: 16px 0 12px 0; padding: 16px 0 12px 0;
@ -2043,38 +2045,86 @@ textarea#issue-add-content {
#issue-list-menu > .right .mark { #issue-list-menu > .right .mark {
margin-left: 12px; margin-left: 12px;
} }
#issue-list .item { #issue-list .item,
#pull-list .item {
position: relative; position: relative;
padding-bottom: 12px; padding-bottom: 12px;
margin-bottom: 12px; margin-bottom: 12px;
border-bottom: 1px dashed #AAA; border-bottom: 1px dashed #AAA;
} }
#issue-list .item .title > .title-text { #issue-list .item .title > .title-text,
#pull-list .item .title > .title-text {
color: #444; color: #444;
font-size: 15px; font-size: 15px;
margin: 0 6px; margin: 0 6px;
} }
#issue-list .comment { #issue-list .item .index-num,
#pull-list .item .index-num {
padding: .25em .6em;
}
#issue-list .comment,
#pull-list .comment {
color: #666; color: #666;
position: absolute; position: absolute;
top: 6px; top: 6px;
right: 0; right: 0;
} }
#issue-list .issue-label a { #issue-list .issue-label,
#pull-list .issue-label {
padding: .25em .6em;
}
#issue-list .issue-label a,
#pull-list .issue-label a {
color: #FFF; color: #FFF;
} }
#issue-list .desc { #issue-list .desc,
#pull-list .desc {
color: #999; color: #999;
} }
#issue-list .desc a { #issue-list .desc a,
#pull-list .desc a {
color: #999; color: #999;
} }
#issue-list .desc a:hover { #issue-list .desc a:hover,
#pull-list .desc a:hover {
color: #03a2ef; color: #03a2ef;
} }
#issue-list-pager { #issue-list-pager {
margin: 18px 0 24px 0; margin: 18px 0 24px 0;
font-size: 14px; font-size: 14px;
line-height: 24px;
}
#labels-num {
margin-right: 1em;
}
#label-list .right {
margin-left: 1em;
color: #999;
line-height: 30px;
}
#label-list .right i {
margin-right: 3px;
}
#label-list .right:hover {
color: #444444;
}
#label-list .num {
margin-right: 3px;
}
#label-list .issue-num {
margin-right: 4em;
}
#label-list .label:hover {
color: #FFF;
}
#label-list .label i {
margin-right: 6px;
}
#label-list .item {
height: 30px;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px dashed #AAA;
} }
.org-header-alert .alert { .org-header-alert .alert {
margin-top: 10px; margin-top: 10px;

View file

@ -735,7 +735,7 @@ ul.menu-radius > li:last-child > a {
border-color: #F0C36D; border-color: #F0C36D;
} }
.label { .label {
padding: 2px 6px; padding: .3em .6em .2em .6em;
color: #ffffff; color: #ffffff;
} }
.label-red { .label-red {
@ -882,8 +882,8 @@ table td {
border-bottom-right-radius: .3em; border-bottom-right-radius: .3em;
} }
.pager .page { .pager .page {
padding: 2px 6px; padding: .3em .5em .2em .5em;
margin: 0 3px; margin: 0 .3em;
background-color: #cccccc; background-color: #cccccc;
color: #444444; color: #444444;
} }
@ -894,8 +894,8 @@ table td {
} }
.pager .prev, .pager .prev,
.pager .next { .pager .next {
padding: 2px 8px; padding: .4em .6em;
margin: 0 4px; margin: 0 .3em;
background-color: #505050; background-color: #505050;
color: #fafafa; color: #fafafa;
} }

View file

@ -223,19 +223,19 @@ textarea#issue-add-content {
} }
// #issue list navigator // #issue list navigator
#issue-list-nav { #issue-list-nav {
border-bottom: 1px solid #DDD;
padding-bottom: 12px;
li { li {
> a { > a {
font-size: 13px; font-size: 13px;
font-weight: bold; font-weight: bold;
padding: .4em .9em; padding: .2em .8em;
border-radius: .3em;
} }
} }
li.current { li.current {
> a { > a {
background-color: #0079bc; background-color: #0079bc;
color: #FAFAFA; color: #FAFAFA;
border-radius: .3em;
} }
} }
li.right { li.right {
@ -247,7 +247,7 @@ textarea#issue-add-content {
> a { > a {
padding: 0 !important; padding: 0 !important;
button { button {
height: 34px; height: 29px;
} }
} }
} }
@ -282,7 +282,8 @@ textarea#issue-add-content {
} }
} }
// each issue list item // each issue list item
#issue-list { #issue-list,
#pull-list {
.item { .item {
position: relative; position: relative;
padding-bottom: 12px; padding-bottom: 12px;
@ -293,6 +294,9 @@ textarea#issue-add-content {
font-size: 15px; font-size: 15px;
margin: 0 6px; margin: 0 6px;
} }
.index-num {
padding: .25em .6em;
}
} }
.comment { .comment {
color: #666; color: #666;
@ -301,6 +305,7 @@ textarea#issue-add-content {
right: 0; right: 0;
} }
.issue-label { .issue-label {
padding: .25em .6em;
a { a {
color: #FFF; color: #FFF;
} }
@ -319,4 +324,43 @@ textarea#issue-add-content {
#issue-list-pager { #issue-list-pager {
margin: 18px 0 24px 0; margin: 18px 0 24px 0;
font-size: 14px; font-size: 14px;
line-height: 24px;
}
// labels numbers
#labels-num {
margin-right: 1em;
}
// labels list
#label-list {
.right {
margin-left: 1em;
color: #999;
i {
margin-right: 3px;
}
line-height: 30px;
&:hover {
color: #444444;
}
}
.num {
margin-right: 3px;
}
.issue-num {
margin-right: 4em;
}
.label {
&:hover {
color: #FFF;
}
i {
margin-right: 6px;
}
}
.item {
height: 30px;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px dashed #AAA;
}
} }

View file

@ -1,7 +1,7 @@
@import "var"; @import "var";
.label { .label {
padding: 2px 6px; padding: .3em .6em .2em .6em;
color: @labelFontColor; color: @labelFontColor;
} }

View file

@ -2,8 +2,8 @@
.pager{ .pager{
.page{ .page{
padding: 2px 6px; padding: .3em .5em .2em .5em;
margin: 0 3px; margin: 0 .3em;
background-color: @pagerPageBgColor; background-color: @pagerPageBgColor;
color: @pagerPageColor; color: @pagerPageColor;
&:hover,&.hover{ &:hover,&.hover{
@ -12,8 +12,8 @@
} }
} }
.prev,.next{ .prev,.next{
padding: 2px 8px; padding: .4em .6em;
margin: 0 4px; margin: 0 .3em;
background-color: @pagerDirectionBgColor; background-color: @pagerDirectionBgColor;
color: @pagerDirectionColor; color: @pagerDirectionColor;
&.invalid{ &.invalid{

View file

@ -1125,3 +1125,11 @@ func IssueGetAttachment(ctx *middleware.Context) {
func Issues2(ctx *middleware.Context){ func Issues2(ctx *middleware.Context){
ctx.HTML(200,"repo/issue2/list") ctx.HTML(200,"repo/issue2/list")
} }
func PullRequest2(ctx *middleware.Context){
ctx.HTML(200,"repo/pr2/list")
}
func Labels2(ctx *middleware.Context){
ctx.HTML(200,"repo/issue2/labels")
}

View file

@ -0,0 +1,36 @@
{{template "ng/base/head" .}}
{{template "ng/base/header" .}}
<div id="repo-wrapper">
{{template "repo/header" .}}
<div class="issue-main container repo-wide-wrapper">
<ul id="issue-list-nav" class="menu menu-line">
<li><a href="#">Issue</a></li>
<li><a href="#">Pull Request</a></li>
<li class="current"><a href="#">Labels</a></li>
<li><a href="#">Milestones</a></li>
<li class="right" id="issue-new"><a href="#"><button id="issue-new-btn" class="btn btn-green text-bold">New Issue</button></a></li>
<li class="right"><a href="#">Filter</a></li>
</ul>
<div id="issue-list-container">
<div id="issue-list-menu">
<div class="left"><span class="label label-black" id="labels-num">6</span><strong>Labels</strong></div>
<div class="clear"></div>
</div>
<ul id="label-list" class="list-no-style">
<li class="item" id="label-id">
<a class="right" href="#"><i class="octicon octicon-x"></i>Delete</a>
<a class="right" href="#"><i class="octicon octicon-pencil"></i>Edit</a>
<a class="right issue-num" href="#"><i class="octicon octicon-issue-opened"></i><strong class="num">12</strong>Issues</a>
<a class="left label clear" href="#" style="background-color: red"><i class="octicon octicon-tag"></i><strong>bug</strong></a>
</li>
<li class="item" id="label-id">
<a class="right" href="#"><i class="octicon octicon-x"></i>Delete</a>
<a class="right" href="#"><i class="octicon octicon-pencil"></i>Edit</a>
<a class="right issue-num" href="#"><i class="octicon octicon-issue-opened"></i><strong class="num">12</strong>Issues</a>
<a class="left label clear" href="#" style="background-color: red"><i class="octicon octicon-tag"></i><strong>bug</strong></a>
</li>
</ul>
</div>
</div>
</div>
{{template "ng/base/footer" .}}

View file

@ -8,7 +8,7 @@
<li><a href="#">Pull Request</a></li> <li><a href="#">Pull Request</a></li>
<li><a href="#">Labels</a></li> <li><a href="#">Labels</a></li>
<li><a href="#">Milestones</a></li> <li><a href="#">Milestones</a></li>
<li class="right" id="issue-new"><a href="#"><button id="issue-new-btn" class="btn btn-green btn-radius text-bold">New Issue</button></a></li> <li class="right" id="issue-new"><a href="#"><button id="issue-new-btn" class="btn btn-green text-bold">New Issue</button></a></li>
<li class="right"><a href="#">Filter</a></li> <li class="right"><a href="#">Filter</a></li>
</ul> </ul>
<div id="issue-list-container"> <div id="issue-list-container">
@ -29,9 +29,9 @@
<i class="octicon octicon-comment"></i> 7 <i class="octicon octicon-comment"></i> 7
</a> </a>
<p class="title text-bold"> <p class="title text-bold">
<span class="label label-black label-radius index-num">#588</span> <span class="label label-black index-num">#588</span>
<a href="#" class="title-text">Delete account text and/or translations missing</a> <a href="#" class="title-text">Delete account text and/or translations missing</a>
<span class="label label-radius label-red issue-label"><a href="#">bug</a></span> <span class="label label-red issue-label"><a href="#">bug</a></span>
</p> </p>
<p class="desc">opened 7 days ago by <a href="#">marcuspoehls</a></p> <p class="desc">opened 7 days ago by <a href="#">marcuspoehls</a></p>
</li> </li>
@ -40,9 +40,9 @@
<i class="octicon octicon-comment"></i> 7 <i class="octicon octicon-comment"></i> 7
</a> </a>
<p class="title text-bold"> <p class="title text-bold">
<span class="label label-black label-radius index-num">#588</span> <span class="label label-black index-num">#588</span>
<a href="#" class="title-text">Delete account text and/or translations missing</a> <a href="#" class="title-text">Delete account text and/or translations missing</a>
<span class="label label-radius label-red issue-label"><a href="#">bug</a></span> <span class="label label-red issue-label"><a href="#">bug</a></span>
</p> </p>
<p class="desc">opened 7 days ago by <a href="#">marcuspoehls</a></p> <p class="desc">opened 7 days ago by <a href="#">marcuspoehls</a></p>
</li> </li>
@ -51,19 +51,19 @@
<i class="octicon octicon-comment"></i> 7 <i class="octicon octicon-comment"></i> 7
</a> </a>
<p class="title text-bold"> <p class="title text-bold">
<span class="label label-black label-radius index-num">#588</span> <span class="label label-black index-num">#588</span>
<a href="#" class="title-text">Disabling attachments breaks issues and comments ajax submit</a> <a href="#" class="title-text">Disabling attachments breaks issues and comments ajax submit</a>
<span class="label label-radius label-red issue-label"><a href="#">bug</a></span> <span class="label label-red issue-label"><a href="#">bug</a></span>
</p> </p>
<p class="desc">opened 7 days ago by <a href="#">marcuspoehls</a></p> <p class="desc">opened 7 days ago by <a href="#">marcuspoehls</a></p>
</li> </li>
</ul> </ul>
<div id="issue-list-pager" class="pager text-center"> <div id="issue-list-pager" class="pager text-center">
<a class="prev page-radius invalid" href="#">Prev</a> <a class="prev invalid" href="#">Prev</a>
<a class="page page-radius" href="#">1</a> <a class="page" href="#">1</a>
<a class="page page-radius hover" href="#">2</a> <a class="page hover" href="#">2</a>
<a class="page page-radius" href="#">3</a> <a class="page" href="#">3</a>
<a class="next page-radius" href="#">Next</a> <a class="next" href="#">Next</a>
</div> </div>
</div> </div>
</div> </div>

View file

@ -0,0 +1,48 @@
{{template "ng/base/head" .}}
{{template "ng/base/header" .}}
<div id="repo-wrapper">
{{template "repo/header" .}}
<div class="issue-main container repo-wide-wrapper">
<ul id="issue-list-nav" class="menu menu-line">
<li><a href="#">Issue</a></li>
<li class="current"><a href="#">Pull Request</a></li>
<li><a href="#">Labels</a></li>
<li><a href="#">Milestones</a></li>
<li class="right" id="issue-new"><a href="#"><button id="issue-new-btn" class="btn btn-green text-bold">New Pull Request</button></a></li>
<li class="right"><a href="#">Filter</a></li>
</ul>
<div id="issue-list-container">
<div id="issue-list-menu">
<div class="left">
<span class="mark open hover"><a href="#">
<i class="octicon octicon-git-pull-request"></i> 88 Open
</a></span>
<span class="mark close"><a href="">
<i class="octicon octicon-issue-closed"></i> 12 Close
</a></span>
</div>
<div class="clear"></div>
</div>
<ul id="pull-list" class="list-no-style">
<li class="item" id="pr-id">
<a class="comment" href="#">
<i class="octicon octicon-comment"></i> 7
</a>
<p class="title text-bold">
<i class="octicon octicon-git-pull-request"></i>
<a href="#" class="title-text">Delete account text and/or translations missing</a>
</p>
<p class="desc">opened 7 days ago by <a href="#">marcuspoehls</a></p>
</li>
</ul>
<div id="issue-list-pager" class="pager text-center">
<a class="prev invalid" href="#">Prev</a>
<a class="page" href="#">1</a>
<a class="page hover" href="#">2</a>
<a class="page" href="#">3</a>
<a class="next" href="#">Next</a>
</div>
</div>
</div>
</div>
{{template "ng/base/footer" .}}