improve responsive tab size
This commit is contained in:
		
							parent
							
								
									ea2fe3eff0
								
							
						
					
					
						commit
						7b06dab4ee
					
				| @ -26,7 +26,7 @@ class SearchBar: Reactor.Component { | |||||||
|         var value = searchPatterns[this.type] || ""; |         var value = searchPatterns[this.type] || ""; | ||||||
|         var me = this; |         var me = this; | ||||||
|         self.timer(1ms, function() { me.search_id.value = value; }); |         self.timer(1ms, function() { me.search_id.value = value; }); | ||||||
|         return <div .search-id> |         return <div .search-id style="margin-left: 12px"> | ||||||
|             <span .search-icon>{search_icon}</span> |             <span .search-icon>{search_icon}</span> | ||||||
|             <input|text @{this.search_id} novalue={translate("Search ID")} /> |             <input|text @{this.search_id} novalue={translate("Search ID")} /> | ||||||
|             {value && <span .clear-input>{clear_icon}</span>} |             {value && <span .clear-input>{clear_icon}</span>} | ||||||
| @ -297,10 +297,22 @@ class MultipleSessions: Reactor.Component { | |||||||
|     } |     } | ||||||
| 
 | 
 | ||||||
|     function onSize() { |     function onSize() { | ||||||
|         var w = this.$(.sessions-bar).box(#width) - 220; |         var w = this.$(.sessions-bar .sessions-tab).box(#width); | ||||||
|         this.$(#sessions-type span).style.set{ |         var len = translate('Recent Sessions').length; | ||||||
|             "max-width": (w / (handler.is_installed() ? 2 : 3)) + "px", |         var totalChars = 0; | ||||||
|         }; |         for (var el in this.$$(#sessions-type span)) { | ||||||
|  |            totalChars += el.text.length; | ||||||
|  |         } | ||||||
|  |         for (var el in this.$$(#sessions-type span)) { | ||||||
|  | 	    var n = el.text.length; | ||||||
|  |             var padding = n > 8 ? 8 : 12; | ||||||
|  |             var maxWidth = w * n / totalChars - 2 * padding; | ||||||
|  |             if (maxWidth < 0) maxWidth = 36; | ||||||
|  |             el.style.set{ | ||||||
|  |                 "max-width": maxWidth + "px", | ||||||
|  |                 "padding": '6px ' + padding + 'px', | ||||||
|  |             }; | ||||||
|  |         } | ||||||
|     } |     } | ||||||
| } | } | ||||||
| 
 | 
 | ||||||
|  | |||||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user