finish issue list ui draft
This commit is contained in:
		
							parent
							
								
									743b55b9b0
								
							
						
					
					
						commit
						b866dc92d7
					
				
					 7 changed files with 245 additions and 2 deletions
				
			
		|  | @ -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; | ||||
| } | ||||
|  |  | |||
|  | @ -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; | ||||
| } | ||||
|  |  | |||
|  | @ -250,4 +250,73 @@ textarea#issue-add-content { | |||
|       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/bread"; | ||||
| @import "ui/alert"; | ||||
| @import "ui/table"; | ||||
| @import "ui/table"; | ||||
| @import "ui/pager"; | ||||
							
								
								
									
										28
									
								
								public/ng/less/ui/pager.less
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										28
									
								
								public/ng/less/ui/pager.less
									
									
									
									
									
										Normal 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; | ||||
|   } | ||||
| } | ||||
|  | @ -81,3 +81,12 @@ | |||
| 
 | ||||
| @preBgColor:#444; | ||||
| @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"><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" .}} | ||||
		Loading…
	
		Reference in a new issue