Adapt block filter UI for small screens

frontend/src/app/components/block-filters/block-filters.component.html

@@ -1,4 +1,4 @@
-<div class="block-filters" [class.filters-active]="activeFilters.length > 0" [class.menu-open]="menuOpen">
+<div class="block-filters" [class.filters-active]="activeFilters.length > 0" [class.menu-open]="menuOpen" [class.small]="cssWidth < 500" [class.vsmall]="cssWidth < 400" [class.tiny]="cssWidth < 200">
   <div class="filter-bar">
     <button class="menu-toggle" (click)="menuOpen = !menuOpen">
       <fa-icon [icon]="['fas', 'filter']"></fa-icon>
@@ -9,7 +9,7 @@
       </ng-container>
     </div>
   </div>
-  <div class="filter-menu" *ngIf="menuOpen">
+  <div class="filter-menu" *ngIf="menuOpen && cssWidth > 280">
     <ng-container *ngFor="let group of filterGroups;">
       <h5>{{ group.label }}</h5>
       <div class="filter-group">
@@ -19,4 +19,11 @@
       </div>
     </ng-container>
   </div>
+  <div class="filter-menu" *ngIf="menuOpen && cssWidth <= 280">
+    <ng-container *ngFor="let group of filterGroups;">
+      <ng-container *ngFor="let filter of group.filters;">
+        <button *ngIf="filter.important" class="btn filter-tag" [class.selected]="filterFlags[filter.key]" (click)="toggleFilter(filter.key)">{{ filter.label }}</button>
+      </ng-container>
+    </ng-container>
+  </div>
 </div>

frontend/src/app/components/block-filters/block-filters.component.scss

@@ -101,4 +101,28 @@
     pointer-events: all;
     background: #181b2d7f;
   }
+
+  &.small {
+    .filter-tag {
+      font-size: 0.8em;
+    }
+  }
+
+  &.vsmall {
+    .filter-menu {
+      margin-top: 0.25em;
+      h5 {
+        display: none;
+      }
+    }
+    .filter-tag {
+      font-size: 0.7em;
+    }
+  }
+
+  &.tiny {
+    .filter-tag {
+      font-size: 0.5em;
+    }
+  }
 }

frontend/src/app/components/block-filters/block-filters.component.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Output, HostListener } from '@angular/core';
+import { Component, EventEmitter, Output, HostListener, Input, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
 import { FilterGroups, TransactionFilters } from '../../shared/filters.utils';
 
 
@@ -7,7 +7,8 @@ import { FilterGroups, TransactionFilters } from '../../shared/filters.utils';
   templateUrl: './block-filters.component.html',
   styleUrls: ['./block-filters.component.scss'],
 })
-export class BlockFiltersComponent {
+export class BlockFiltersComponent implements OnChanges {
+  @Input() cssWidth: number = 800;
   @Output() onFilterChanged: EventEmitter<bigint | null> = new EventEmitter();
 
   filters = TransactionFilters;
@@ -16,6 +17,16 @@ export class BlockFiltersComponent {
   filterFlags: { [key: string]: boolean } = {};
   menuOpen: boolean = false;
 
+  constructor(
+    private cd: ChangeDetectorRef,
+  ) {}
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.cssWidth) {
+      this.cd.markForCheck();
+    }
+  }
+
   toggleFilter(key): void {
     const filter = this.filters[key];
     this.filterFlags[key] = !this.filterFlags[key];

frontend/src/app/components/block-overview-graph/block-overview-graph.component.html

@@ -13,6 +13,6 @@
       [auditEnabled]="auditHighlighting"
       [blockConversion]="blockConversion"
     ></app-block-overview-tooltip>
-    <app-block-filters (onFilterChanged)="setFilterFlags($event)"></app-block-filters>
+    <app-block-filters [cssWidth]="cssWidth" (onFilterChanged)="setFilterFlags($event)"></app-block-filters>
   </div>
 </div>