Revise My Tickets layout and styling

James Moger

2014-04-24 4062e46eb07c4202d8872ecc02eb246304dda01e

 src/main/java/com/gitblit/wicket/pages/MyTicketsPage.html

@@ -8,94 +8,123 @@
   <wicket:extend>
      <div class="container">
      
         <!-- search tickets form -->
         <div class="hidden-phone pull-right">
            <form class="form-search" style="margin: 0px;" wicket:id="ticketSearchForm">
               <div class="input-append">
                  <input type="text" class="search-query" style="width: 170px;border-radius: 14px 0 0 14px; padding-left: 14px;" id="ticketSearchBox" wicket:id="ticketSearchBox" value=""/>
                  <button class="btn" style="border-radius: 0 14px 14px 0px;margin-left:-5px;" type="submit"><i class="icon-search"></i></button>
         <div class="row" style="padding-top:15px;min-height:500px;" >
            <div class="tab-pane active" id="tickets">
               <!-- query controls -->
               <div class="span3">
                  <div class="hidden-phone">
                     <div>
                        <div style="display:inline-block;vertical-align:top;padding-right:2px;"><img wicket:id="userGravatar"></img></div>
                        <div style="display:inline-block;">
                           <div style="font-size:1.5em;" wicket:id="userDisplayName"></div>
                           <div style="color:#888;font-size:1.2em;"><wicket:message key="gb.mytickets"></wicket:message></div>
                        </div>
                     </div>
							
                     <!--  query list -->						
                     <ul class="nav nav-list">
                        <li class="nav-header"><wicket:message key="gb.queries"></wicket:message></li>
                        <li><a wicket:id="changesQuery"><i class="fa fa-code-fork"></i> <wicket:message key="gb.proposalTickets"></wicket:message></a></li>
                        <li><a wicket:id="bugsQuery"><i class="fa fa-bug"></i> <wicket:message key="gb.bugTickets"></wicket:message></a></li>
                        <li><a wicket:id="enhancementsQuery"><i class="fa fa-magic"></i> <wicket:message key="gb.enhancementTickets"></wicket:message></a></li>
                        <li><a wicket:id="tasksQuery"><i class="fa fa-ticket"></i> <wicket:message key="gb.taskTickets"></wicket:message></a></li>
                        <li><a wicket:id="questionsQuery"><i class="fa fa-question"></i> <wicket:message key="gb.questionTickets"></wicket:message></a></li>
                        <li wicket:id="userDivider" class="divider"></li>
                        <li><a wicket:id="createdQuery"><i class="fa fa-user"></i> <wicket:message key="gb.yourCreatedTickets"></wicket:message></a></li>
                        <li><a wicket:id="watchedQuery"><i class="fa fa-eye"></i> <wicket:message key="gb.yourWatchedTickets"></wicket:message></a></li>
                        <li><a wicket:id="mentionsQuery"><i class="fa fa-comment"></i> <wicket:message key="gb.mentionsMeTickets"></wicket:message></a></li>
                        <li class="divider"></li>
                        <li><a wicket:id="resetQuery"><i class="fa fa-bolt"></i> <wicket:message key="gb.reset"></wicket:message></a></li>
                     </ul>

                     <!-- search tickets form -->
                     <form class="form-search" style="margin: 0px;" wicket:id="ticketSearchForm">
                        <div class="input-append">
                           <input type="text" class="search-query" style="width: 170px;border-radius: 14px 0 0 14px; padding-left: 14px;" id="ticketSearchBox" wicket:id="ticketSearchBox" value=""/>
                           <button class="btn" style="border-radius: 0 14px 14px 0px;margin-left:-5px;" type="submit"><i class="icon-search"></i></button>
                        </div>
                     </form>
                  </div>
               </div>
            </form>
         </div>
         <ul class="nav nav-tabs"></ul>
			
         <div class="tab-content">
            <div class="row" style="min-height:400px;" >
               <div class="tab-pane active" id="tickets">
                  <!-- query controls -->
                  <div class="span3">
                     <div class="hidden-phone">
                        <ul class="nav nav-list">
                           <li class="nav-header"><wicket:message key="gb.queries"></wicket:message></li>
                           <li><a wicket:id="changesQuery"><i class="fa fa-code-fork"></i> <wicket:message key="gb.proposalTickets"></wicket:message></a></li>
                           <li><a wicket:id="bugsQuery"><i class="fa fa-bug"></i> <wicket:message key="gb.bugTickets"></wicket:message></a></li>
                           <li><a wicket:id="enhancementsQuery"><i class="fa fa-magic"></i> <wicket:message key="gb.enhancementTickets"></wicket:message></a></li>
                           <li><a wicket:id="tasksQuery"><i class="fa fa-ticket"></i> <wicket:message key="gb.taskTickets"></wicket:message></a></li>
                           <li><a wicket:id="questionsQuery"><i class="fa fa-question"></i> <wicket:message key="gb.questionTickets"></wicket:message></a></li>
                           <li wicket:id="userDivider" class="divider"></li>
                           <li><a wicket:id="createdQuery"><i class="fa fa-user"></i> <wicket:message key="gb.yourCreatedTickets"></wicket:message></a></li>
                           <li><a wicket:id="watchedQuery"><i class="fa fa-eye"></i> <wicket:message key="gb.yourWatchedTickets"></wicket:message></a></li>
                           <li><a wicket:id="mentionsQuery"><i class="fa fa-comment"></i> <wicket:message key="gb.mentionsMeTickets"></wicket:message></a></li>
					
               <!-- tickets -->
               <div class="span9">					
                  <div class="btn-toolbar" style="margin-top: 0px;">
                     <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><wicket:message key="gb.status"></wicket:message>: <span style="font-weight:bold;" wicket:id="selectedStatii"></span> <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                           <li><a wicket:id="openTickets"><wicket:message key="gb.open"></wicket:message></a></li>
                           <li><a wicket:id="closedTickets"><wicket:message key="gb.closed"></wicket:message></a></li>
                           <li><a wicket:id="allTickets"><wicket:message key="gb.all"></wicket:message></a></li>
                           <li class="divider"></li>
                           <li><a wicket:id="resetQuery"><i class="fa fa-bolt"></i> <wicket:message key="gb.reset"></wicket:message></a></li>
                           <li wicket:id="statii"><span wicket:id="statusLink"></span></li>
                        </ul>
                     </div>
                  </div>
						
                  <!-- tickets -->
                  <div class="span9">
                     <div class="btn-toolbar" style="margin-top: 0px;">
                        <div class="btn-group">
                           <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><wicket:message key="gb.status"></wicket:message>: <span style="font-weight:bold;" wicket:id="selectedStatii"></span> <span class="caret"></span></a>
                           <ul class="dropdown-menu">
                              <li><a wicket:id="openTickets"><wicket:message key="gb.open"></wicket:message></a></li>
                              <li><a wicket:id="closedTickets"><wicket:message key="gb.closed"></wicket:message></a></li>
                              <li><a wicket:id="allTickets"><wicket:message key="gb.all"></wicket:message></a></li>
                              <li class="divider"></li>
                              <li wicket:id="statii"><span wicket:id="statusLink"></span></li>
                           </ul>
                        </div>

                        <div class="btn-group">
                           <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-sort"></i> <wicket:message key="gb.sort"></wicket:message>: <span style="font-weight:bold;" wicket:id="currentSort"></span> <span class="caret"></span></a>
                           <ul class="dropdown-menu">
                              <li wicket:id="sort"><span wicket:id="sortLink"></span></li>
                           </ul>
                        </div>
                     <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="fa fa-sort"></i> <wicket:message key="gb.sort"></wicket:message>: <span style="font-weight:bold;" wicket:id="currentSort"></span> <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                           <li wicket:id="sort"><span wicket:id="sortLink"></span></li>
                        </ul>
                     </div>
                     
                        <div class="btn-group pull-right">
                           <div class="pagination pagination-right pagination-small">
                              <ul>
                                 <li><a wicket:id="prevLink"><i class="fa fa-angle-double-left"></i></a></li>
                                 <li wicket:id="pageLink"><span wicket:id="page"></span></li>
                                 <li><a wicket:id="nextLink"><i class="fa fa-angle-double-right"></i></a></li>
                              </ul>
                           </div>
                     <div class="btn-group pull-right">
                        <div class="pagination pagination-right pagination-small">
                           <ul>
                              <li><a wicket:id="prevLink"><i class="fa fa-angle-double-left"></i></a></li>
                              <li wicket:id="pageLink"><span wicket:id="page"></span></li>
                              <li><a wicket:id="nextLink"><i class="fa fa-angle-double-right"></i></a></li>
                           </ul>
                        </div>
                     </div>
                     <table class="table tickets">
                        <tbody>
                           <tr wicket:id="row">
                              <td class="left" style="padding-left:3px;">
                                 <b><span class="repositorySwatch" wicket:id="repositorySwatch"></span></b>
                                 <span style="padding-left:3px;" wicket:id="repositoryName">[repository name]</span>
                              </td>
                              <td class="hidden-phone">
                                 <span wicket:id="ticketIcon">[ticket icon]</span>
                                 <span class="list" wicket:id="ticketTitle">[ticket title]</span>
                                 <span style="color:#888;"> (#<span wicket:id="ticketNumber">[ticket number]</span>)</span>
                              </td>
                              <td><span class="badge badge-info" wicket:id="ticketVotes"></span></td>
                              <td><span wicket:id="ticketStatus"></span></td>
                              <td class="hidden-tablet hidden-phone author right"><span wicket:id="ticketResponsibleImg"></span><span wicket:id="ticketResponsible">[ticket responsible]</span></td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
                  <table class="table tickets">	
                     <tbody>
                            <tr wicket:id="row">
                               <td class="ticket-list-icon">
                                  <i wicket:id="state"></i>
                               </td>
                             <td>
                                <span wicket:id="title">[title]</span> <span wicket:id="labels" style="font-weight: normal;color:white;"><span class="label" wicket:id="label"></span></span>
                                <div class="ticket-list-details">
                                   <span style="padding-right: 10px;" class="hidden-phone">
                                      <wicket:message key="gb.createdBy"></wicket:message>
                                      <span style="padding: 0px 2px" wicket:id="createdBy">[createdBy]</span> <span class="date" wicket:id="createDate">[create date]</span>
                                   </span>
                                   <span wicket:id="indicators" style="white-space:nowrap;"><i wicket:id="icon"></i> <span style="padding-right:10px;" wicket:id="count"></span></span>
                                </div>
                                <div class="hidden-phone" wicket:id="updated"></div>
                                <div class="ticket-list-details" wicket:id="repositoryLink">[repository link]</div>
                             </td>
                             <td class="ticket-list-state">
                                  <span class="badge badge-info" wicket:id="votes"></span>
                             </td>
                             <td class="hidden-phone ticket-list-state">
                                  <i wicket:message="title:gb.watching" style="color:#888;" class="fa fa-eye" wicket:id="watching"></i>
                             </td>
                             <td class="ticket-list-state">
                                  <div wicket:id="status"></div>
                             </td>
                             <td class="indicators">
                                <div>        	 		        	 		
                                    <b>#<span wicket:id="id">[id]</span></b>
                                 </div>
                                <div wicket:id="responsible"></div>
                             </td>
                            </tr>
                      </tbody>
                  </table>						
               </div>
            </div>
         </div>
      </div>
   </wicket:extend>
		
<wicket:fragment wicket:id="updatedFragment">
   <div class="ticket-list-details">
      <wicket:message key="gb.updatedBy"></wicket:message>
      <span style="padding: 0px 2px" wicket:id="updatedBy">[updatedBy]</span> <span class="date" wicket:id="updateDate">[update date]</span>
   </div>
</wicket:fragment>
		
</wicket:extend>
</body>
</html>