finish issue list ui draft
This commit is contained in:
fuxiaohei
parent
743b55b9b0
commit
b866dc92d7
|
|
@ -1067,7 +1067,7 @@ The register and sign-in page style
|
||||||
padding: 18px 0;
|
padding: 18px 0;
|
||||||
}
|
}
|
||||||
.repo-wide-wrapper {
|
.repo-wide-wrapper {
|
||||||
padding: 18px 0;
|
padding: 18px;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
#repo-clone-url {
|
#repo-clone-url {
|
||||||
|
|
@ -1992,6 +1992,60 @@ textarea#issue-add-content {
|
||||||
#issue-new > a button {
|
#issue-new > a button {
|
||||||
height: 34px;
|
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 {
|
.org-header-alert .alert {
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -881,3 +881,30 @@ table td {
|
||||||
.table-radius tbody tr:last-child > td:last-child {
|
.table-radius tbody tr:last-child > td:last-child {
|
||||||
border-bottom-right-radius: .3em;
|
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;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -250,4 +250,73 @@ textarea#issue-add-content {
|
||||||
height: 34px;
|
height: 34px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
// 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;
|
||||||
}
|
}
|
||||||
|
|
@ -7,4 +7,5 @@
|
||||||
@import "ui/label";
|
@import "ui/label";
|
||||||
@import "ui/bread";
|
@import "ui/bread";
|
||||||
@import "ui/alert";
|
@import "ui/alert";
|
||||||
@import "ui/table";
|
@import "ui/table";
|
||||||
|
@import "ui/pager";
|
||||||
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -81,3 +81,12 @@
|
||||||
|
|
||||||
@preBgColor:#444;
|
@preBgColor:#444;
|
||||||
@preFontColor:#FFF;
|
@preFontColor:#FFF;
|
||||||
|
|
||||||
|
@pagerPageColor:#444;
|
||||||
|
@pagerPageBgColor:#CCC;
|
||||||
|
@pagerHoverBgColor:#428BCA;
|
||||||
|
@pagerHoverColor:#FFF;
|
||||||
|
@pagerInvalidColor:#AAA;
|
||||||
|
@pagerInvalidBgColor:#EEE;
|
||||||
|
@pagerDirectionBgColor:#505050;
|
||||||
|
@pagerDirectionColor:#FAFAFA;
|
||||||
|
|
|
||||||
|
|
@ -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" 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>
|
<li class="right"><a href="#">Filter</a></li>
|
||||||
</ul>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
{{template "ng/base/footer" .}}
|
{{template "ng/base/footer" .}}
|
||||||
Loading…
Reference in New Issue