wip

client/stillbox/src/app/calls/calls.component.html

@@ -1,5 +1,4 @@
 <div class="toolbar">
-  <div class="tbLeft">
     <mat-form-field subscriptSizing="dynamic" class="timeFilterBox">
       <mat-label>Start</mat-label>
       <input
@@ -21,7 +20,7 @@
       />
     </mat-form-field>
     <mat-form-field subscriptSizing="dynamic" class="durationFilter">
-      <mat-label>At Least Seconds</mat-label>
+      <mat-label>Dur (s) &gt;</mat-label>
       <input
         matInput
         type="number"
@@ -30,8 +29,6 @@
         [formControl]="duration"
       />
     </mat-form-field>
-  </div>
-  <div class="tbCenter">
     <mat-form-field class="filterBox" subscriptSizing="dynamic">
       <mat-label>Filter</mat-label>
       <input
@@ -51,11 +48,8 @@
         <mat-icon>close</mat-icon>
       </button>
     </mat-form-field>
-  </div>
-  <div class="tbRight">
     <button class="sbButton" (click)="resetFilter()">Reset</button>
   </div>
-</div>
 <div class="tabContainer">
   <table class="callsTable" mat-table [dataSource]="callsResult">
     <ng-container matColumnDef="select">
@@ -93,7 +87,7 @@
     <ng-container matColumnDef="date">
       <th mat-header-cell *matHeaderCellDef>Date</th>
       <td mat-cell *matCellDef="let call">
-        {{ call.call_date | date }}
+        {{ call.call_date | grabDate }}
       </td>
     </ng-container>
     <ng-container matColumnDef="time">

client/stillbox/src/app/calls/calls.component.scss

@@ -1,5 +1,5 @@
 .timeFilterBox {
-  width: 240px;
+  flex: 0 0 240px;
 }
 
 table,
@@ -40,7 +40,8 @@ tr.mat-mdc-row {
 .mat-column-play,
 .mat-column-download,
 .mat-column-duration {
-  width: 2%;
+  width: 10px;
+  padding: 0 2px;
 }
 
 .mat-column-system {
@@ -52,7 +53,7 @@ tr.mat-mdc-row {
 }
 
 @media screen and (max-width: 768px) {
-  .mat-column-group {
+  .mat-column-group, .mat-column-system {
     display: none;
   }
 
@@ -63,6 +64,7 @@ tr.mat-mdc-row {
 
 .toolbar {
   display: flex;
+  flex-flow: row wrap;
 }
 
 .tbRight {
@@ -73,9 +75,9 @@ tr.mat-mdc-row {
 }
 
 .filterBox {
-  width: 300px;
+  flex: 1 1 300px;
 }
 
 .durationFilter {
-  width: 150px;
+  flex: 0 0 80px;
 }

client/stillbox/src/app/calls/calls.component.ts

@@ -43,15 +43,16 @@ import { MatTimepickerModule } from '@angular/material/timepicker';
 import { MatDatepickerModule } from '@angular/material/datepicker';
 import { debounceTime } from 'rxjs/operators';
 
+
 @Pipe({
-  name: 'date',
+  name: 'grabDate',
   standalone: true,
   pure: true,
 })
 export class DatePipe implements PipeTransform {
   transform(ts: string, args?: any): string {
     const timestamp = new Date(ts);
-    return timestamp.getMonth() + 1 + '/' + timestamp.getDate();
+    return (timestamp.getMonth() + 1) + '/' + timestamp.getDate();
   }
 }