Standardize the block visualization grid
This commit is contained in:
		
							parent
							
								
									44cf63458f
								
							
						
					
					
						commit
						82e115c009
					
				| @ -1,5 +1,5 @@ | ||||
| 
 | ||||
| <div class="grid-align" [style.gridTemplateColumns]="'repeat(auto-fit, ' + resolution + 'px)'"> | ||||
| <div class="graph-alignment" [class.grid-align]="!autofit" [style.gridTemplateColumns]="'repeat(auto-fit, ' + resolution + 'px)'"> | ||||
|   <div class="block-overview-graph"> | ||||
|     <canvas *browserOnly class="block-overview-canvas" [class.clickable]="!!hoverTx" #blockCanvas></canvas> | ||||
|     <div class="loader-wrapper" [class.hidden]="(!isLoading || disableSpinner) && !unavailable"> | ||||
|  | ||||
| @ -22,9 +22,12 @@ | ||||
|   } | ||||
| } | ||||
| 
 | ||||
| .grid-align { | ||||
| .graph-alignment { | ||||
|   position: relative; | ||||
|   width: 100%; | ||||
| } | ||||
| 
 | ||||
| .grid-align { | ||||
|   display: grid; | ||||
|   grid-template-columns: repeat(auto-fit, 75px); | ||||
|   justify-content: center; | ||||
|  | ||||
| @ -32,6 +32,7 @@ const unmatchedAuditColors = { | ||||
| export class BlockOverviewGraphComponent implements AfterViewInit, OnDestroy, OnChanges { | ||||
|   @Input() isLoading: boolean; | ||||
|   @Input() resolution: number; | ||||
|   @Input() autofit: boolean = false; | ||||
|   @Input() blockLimit: number; | ||||
|   @Input() orientation = 'left'; | ||||
|   @Input() flip = true; | ||||
|  | ||||
| @ -70,8 +70,9 @@ | ||||
|     <div class="col-sm chart-container"> | ||||
|       <app-block-overview-graph | ||||
|         #blockGraph | ||||
|         [autofit]="true" | ||||
|         [isLoading]="false" | ||||
|         [resolution]="80" | ||||
|         [resolution]="86" | ||||
|         [blockLimit]="stateService.blockVSize" | ||||
|         [orientation]="'top'" | ||||
|         [flip]="false" | ||||
|  | ||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user