Moves dropdown beside search bar
- Improves responsiveness for top two items
This commit is contained in:
		
							parent
							
								
									81aeba6e92
								
							
						
					
					
						commit
						577942805b
					
				| @ -210,8 +210,8 @@ export class WorkflowsList extends LiteElement { | ||||
| 
 | ||||
|   private renderControls() { | ||||
|     return html` | ||||
|       <div class="flex flex-wrap items-center"> | ||||
|         <div class="grow mr-4 mb-4"> | ||||
|       <div class="flex flex-wrap mb-2 items-center md:gap-4 gap-2"> | ||||
|         <div class="grow"> | ||||
|           <sl-input | ||||
|             class="w-full" | ||||
|             slot="trigger" | ||||
| @ -224,6 +224,43 @@ export class WorkflowsList extends LiteElement { | ||||
|             <sl-icon name="search" slot="prefix"></sl-icon> | ||||
|           </sl-input> | ||||
|         </div> | ||||
| 
 | ||||
|         <div class="flex items-center w-full md:w-fit"> | ||||
|           <div class="whitespace-nowrap text-sm text-0-500 mr-2"> | ||||
|               ${msg("Sort by:")} | ||||
|             </div> | ||||
|             <sl-select | ||||
|               class="flex-1 md:min-w-[9.2rem]" | ||||
|               size="small" | ||||
|               pill | ||||
|               value=${this.orderBy.field} | ||||
|               @sl-select=${(e: any) => { | ||||
|                 const field = e.detail.item.value as SortField; | ||||
|                 this.orderBy = { | ||||
|                   field: field, | ||||
|                   direction: | ||||
|                     sortableFields[field].defaultDirection || | ||||
|                     this.orderBy.direction, | ||||
|                 }; | ||||
|               }} | ||||
|             > | ||||
|               ${Object.entries(sortableFields).map( | ||||
|                 ([value, { label }]) => html` | ||||
|                   <sl-menu-item value=${value}>${label}</sl-menu-item> | ||||
|                 ` | ||||
|               )} | ||||
|             </sl-select> | ||||
|             <sl-icon-button | ||||
|               name="arrow-down-up" | ||||
|               label=${msg("Reverse sort")} | ||||
|               @click=${() => { | ||||
|                 this.orderBy = { | ||||
|                   ...this.orderBy, | ||||
|                   direction: this.orderBy.direction === "asc" ? "desc" : "asc", | ||||
|                 }; | ||||
|               }} | ||||
|             ></sl-icon-button> | ||||
|           </div> | ||||
|       </div> | ||||
| 
 | ||||
|       <div class="flex flex-wrap items-center justify-between"> | ||||
| @ -268,41 +305,6 @@ export class WorkflowsList extends LiteElement { | ||||
|               ?checked=${this.filterByCurrentUser} | ||||
|             ></sl-switch> | ||||
|           </label> | ||||
| 
 | ||||
|           <div class="whitespace-nowrap text-sm text-0-500 mr-2"> | ||||
|             ${msg("Sort by:")} | ||||
|           </div> | ||||
|           <sl-select | ||||
|             class="flex-1 md:min-w-[9.2rem]" | ||||
|             size="small" | ||||
|             pill | ||||
|             value=${this.orderBy.field} | ||||
|             @sl-select=${(e: any) => { | ||||
|               const field = e.detail.item.value as SortField; | ||||
|               this.orderBy = { | ||||
|                 field: field, | ||||
|                 direction: | ||||
|                   sortableFields[field].defaultDirection || | ||||
|                   this.orderBy.direction, | ||||
|               }; | ||||
|             }} | ||||
|           > | ||||
|             ${Object.entries(sortableFields).map( | ||||
|               ([value, { label }]) => html` | ||||
|                 <sl-menu-item value=${value}>${label}</sl-menu-item> | ||||
|               ` | ||||
|             )} | ||||
|           </sl-select> | ||||
|           <sl-icon-button | ||||
|             name="arrow-down-up" | ||||
|             label=${msg("Reverse sort")} | ||||
|             @click=${() => { | ||||
|               this.orderBy = { | ||||
|                 ...this.orderBy, | ||||
|                 direction: this.orderBy.direction === "asc" ? "desc" : "asc", | ||||
|               }; | ||||
|             }} | ||||
|           ></sl-icon-button> | ||||
|         </div> | ||||
|       </div> | ||||
|     `;
 | ||||
|  | ||||
		Loading…
	
		Reference in New Issue
	
	Block a user