finish issue list ui draft

This commit is contained in:
fuxiaohei 2014-11-04 21:58:28 +08:00
parent 743b55b9b0
commit b866dc92d7
7 changed files with 245 additions and 2 deletions

View File

@ -1067,7 +1067,7 @@ The register and sign-in page style
padding: 18px 0;
}
.repo-wide-wrapper {
padding: 18px 0;
padding: 18px;
position: relative;
}
#repo-clone-url {
@ -1992,6 +1992,60 @@ textarea#issue-add-content {
#issue-new > a button {
height: 34px;
}
#issue-list-menu {
padding: 16px 0 12px 0;
border-bottom: 1px solid #BBB;
margin-bottom: 12px;
}
#issue-list-menu .mark a {
color: #AAA;
}
#issue-list-menu .mark a:hover {
color: #444;
}
#issue-list-menu .mark.hover a {
color: #222;
font-weight: bold;
}
#issue-list-menu > .left .mark {
margin-right: 12px;
}
#issue-list-menu > .right .mark {
margin-left: 12px;
}
#issue-list .item {
position: relative;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px dashed #AAA;
}
#issue-list .item .title > .title-text {
color: #444;
font-size: 15px;
margin: 0 6px;
}
#issue-list .comment {
color: #666;
position: absolute;
top: 6px;
right: 0;
}
#issue-list .issue-label a {
color: #FFF;
}
#issue-list .desc {
color: #999;
}
#issue-list .desc a {
color: #999;
}
#issue-list .desc a:hover {
color: #03a2ef;
}
#issue-list-pager {
margin: 18px 0 24px 0;
font-size: 14px;
}
.org-header-alert .alert {
margin-top: 10px;
}

View File

@ -881,3 +881,30 @@ table td {
.table-radius tbody tr:last-child > td:last-child {
border-bottom-right-radius: .3em;
}
.pager .page {
padding: 2px 6px;
margin: 0 3px;
background-color: #cccccc;
color: #444444;
}
.pager .page:hover,
.pager .page.hover {
background-color: #428bca;
color: #ffffff;
}
.pager .prev,
.pager .next {
padding: 2px 8px;
margin: 0 4px;
background-color: #505050;
color: #fafafa;
}
.pager .prev.invalid,
.pager .next.invalid {
background-color: #eeeeee;
color: #aaaaaa;
cursor: not-allowed;
}
.pager .page-radius {
border-radius: .2em;
}

View File

@ -251,3 +251,72 @@ textarea#issue-add-content {
}
}
}
// issue list menu
#issue-list-menu {
padding: 16px 0 12px 0;
border-bottom: 1px solid #BBB;
margin-bottom: 12px;
.mark {
a {
color: #AAA;
&:hover {
color: #444;
}
}
&.hover {
a {
color: #222;
font-weight: bold;
}
}
}
> .left {
.mark {
margin-right: 12px;
}
}
> .right {
.mark {
margin-left: 12px;
}
}
}
// each issue list item
#issue-list {
.item {
position: relative;
padding-bottom: 12px;
margin-bottom: 12px;
border-bottom: 1px dashed #AAA;
.title > .title-text {
color: #444;
font-size: 15px;
margin: 0 6px;
}
}
.comment {
color: #666;
position: absolute;
top: 6px;
right: 0;
}
.issue-label {
a {
color: #FFF;
}
}
.desc {
color: #999;
a {
color: #999;
&:hover {
color: #03a2ef;
}
}
}
}
// issue list pager
#issue-list-pager {
margin: 18px 0 24px 0;
font-size: 14px;
}

View File

@ -8,3 +8,4 @@
@import "ui/bread";
@import "ui/alert";
@import "ui/table";
@import "ui/pager";

View File

@ -0,0 +1,28 @@
@import "var";
.pager{
.page{
padding: 2px 6px;
margin: 0 3px;
background-color: @pagerPageBgColor;
color: @pagerPageColor;
&:hover,&.hover{
background-color: @pagerHoverBgColor;
color: @pagerHoverColor;
}
}
.prev,.next{
padding: 2px 8px;
margin: 0 4px;
background-color: @pagerDirectionBgColor;
color: @pagerDirectionColor;
&.invalid{
background-color: @pagerInvalidBgColor;
color: @pagerInvalidColor;
cursor: not-allowed;
}
}
.page-radius{
border-radius: .2em;
}
}

View File

@ -81,3 +81,12 @@
@preBgColor:#444;
@preFontColor:#FFF;
@pagerPageColor:#444;
@pagerPageBgColor:#CCC;
@pagerHoverBgColor:#428BCA;
@pagerHoverColor:#FFF;
@pagerInvalidColor:#AAA;
@pagerInvalidBgColor:#EEE;
@pagerDirectionBgColor:#505050;
@pagerDirectionColor:#FAFAFA;

View File

@ -11,6 +11,61 @@
<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"><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-issue-opened"></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="issue-list" class="list-no-style">
<li class="item" id="issue-id">
<a class="comment" href="#">
<i class="octicon octicon-comment"></i> 7
</a>
<p class="title text-bold">
<span class="label label-black label-radius index-num">#588</span>
<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>
</p>
<p class="desc">opened 7 days ago by <a href="#">marcuspoehls</a></p>
</li>
<li class="item" id="issue-id2">
<a class="comment" href="#">
<i class="octicon octicon-comment"></i> 7
</a>
<p class="title text-bold">
<span class="label label-black label-radius index-num">#588</span>
<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>
</p>
<p class="desc">opened 7 days ago by <a href="#">marcuspoehls</a></p>
</li>
<li class="item" id="issue-id3">
<a class="comment" href="#">
<i class="octicon octicon-comment"></i> 7
</a>
<p class="title text-bold">
<span class="label label-black label-radius index-num">#588</span>
<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>
</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 page-radius invalid" href="#">Prev</a>
<a class="page page-radius" href="#">1</a>
<a class="page page-radius hover" href="#">2</a>
<a class="page page-radius" href="#">3</a>
<a class="next page-radius" href="#">Next</a>
</div>
</div>
</div>
</div>
{{template "ng/base/footer" .}}