fixing finances alignment/display

open-learning-exchange · Nov 1, 2024 · c226686 · c226686
1 parent 3eb6f14
commit c226686
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 16 deletions.
diff --git a/src/app/teams/teams-view-finances.component.html b/src/app/teams/teams-view-finances.component.html
@@ -1,19 +1,25 @@
 <div class="action-buttons">
-  <button mat-raised-button color="primary" i18n (click)="openEditTransactionDialog()" *ngIf="editable">Add Transaction</button>
-  <mat-form-field>
-    <input matInput [matDatepicker]="dateFilterStart" [(ngModel)]="startDate" (dateInput)="transactionFilter()" i18n-placeholder placeholder="Pick Start Date">
-    <mat-datepicker-toggle matSuffix [for]="dateFilterStart"></mat-datepicker-toggle>
-    <mat-datepicker #dateFilterStart></mat-datepicker>
-  </mat-form-field>
-  <mat-form-field>
-    <input matInput [matDatepicker]="dateFilterEnd" [(ngModel)]="endDate" (dateInput)="transactionFilter()" i18n-placeholder placeholder="Pick End Date">
-    <mat-datepicker-toggle matSuffix [for]="dateFilterEnd"></mat-datepicker-toggle>
-    <mat-datepicker #dateFilterEnd></mat-datepicker>
-  </mat-form-field>
-  <button mat-raised-button color="primary" i18n (click)="resetDateFilter()" [disabled]="table.filter === ''">View All Transactions</button>
-  <button class="margin-lr-10" color="accent" mat-raised-button i18n (click)="exportTableData()">
-    Export Transactions
-  </button>
+
+  <div class="transaction-buttons">
+    <button mat-raised-button color="primary" i18n (click)="openEditTransactionDialog()" *ngIf="editable">Add Transaction</button>
+    <button mat-raised-button color="primary" i18n (click)="resetDateFilter()" [disabled]="table.filter === ''">View All Transactions</button>
+    <button class="margin-lr-10" color="accent" mat-raised-button i18n (click)="exportTableData()">
+      Export Transactions
+    </button>
+  </div>
+
+  <div class="transaction-date-fields">
+    <mat-form-field>
+      <input matInput [matDatepicker]="dateFilterStart" [(ngModel)]="startDate" (dateInput)="transactionFilter()" i18n-placeholder placeholder="Pick Start Date">
+      <mat-datepicker-toggle matSuffix [for]="dateFilterStart"></mat-datepicker-toggle>
+      <mat-datepicker #dateFilterStart></mat-datepicker>
+    </mat-form-field>
+    <mat-form-field>
+      <input matInput [matDatepicker]="dateFilterEnd" [(ngModel)]="endDate" (dateInput)="transactionFilter()" i18n-placeholder placeholder="Pick End Date">
+      <mat-datepicker-toggle matSuffix [for]="dateFilterEnd"></mat-datepicker-toggle>
+      <mat-datepicker #dateFilterEnd></mat-datepicker>
+    </mat-form-field>
+  </div>
 </div>
 <mat-card class="margin-lr" *ngIf="showBalanceWarning">
   <mat-icon color="accent">warning</mat-icon><span i18n>The current balance is negative!</span>

diff --git a/src/app/teams/teams-view-finances.scss b/src/app/teams/teams-view-finances.scss
@@ -4,7 +4,9 @@
 
 .mat-card {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
+  flex-direction: column;
+  gap: 1rem;
 }
 
 mat-row:first-of-type {
@@ -14,4 +16,10 @@ mat-row:first-of-type {
 .negative-balance {
   font-weight: bold;
   max-width: 100px;
+}
+
+.button-group, .date-fields{
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-start;
 }