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