fix(ui): add background boxes for better layout

fix(ui): add background boxes for better layout--
This commit is contained in:
shubhamsharma9199
2025-09-28 16:28:26 +05:30
parent 253bd7d4aa
commit 7d122cadf3
2 changed files with 28 additions and 3 deletions
@@ -1,4 +1,4 @@
<div class="container layout-row-wrap gap-2px responsive-column">
<div class="container layout-row-wrap gap-2px responsive-column filter-container">
<mat-form-field class="flex-31">
<mat-label>{{ 'labels.inputs.Office Name' | translate }}</mat-label>
<input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete" />
@@ -85,13 +85,12 @@
</mat-option>
</mat-autocomplete>
<div class="mat-elevation-z8 container">
<div class="mat-elevation-z8 container table-container">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Entry ID' | translate }}</th>
<td mat-cell *matCellDef="let journalEntry">{{ journalEntry.id }}</td>
</ng-container>
<ng-container matColumnDef="officeName">
<th mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'labels.inputs.Office' | translate }}</th>
<td mat-cell *matCellDef="let journalEntry">{{ journalEntry.officeName }}</td>
@@ -1,7 +1,33 @@
table {
width: 100%;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
border: 1px solid var(--border-color, #ddd);
border-radius: 8px;
transition:
background-color 0.3s ease,
border-color 0.3s ease;
.select-row:hover {
cursor: pointer;
}
}
.filter-container {
margin-bottom: 1rem;
padding: 1.5rem;
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
border: 1px solid var(--border-color, #ddd);
border-radius: 8px;
transition:
background-color 0.3s ease,
border-color 0.3s ease;
}
.table-container {
box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
border: 1px solid var(--border-color, #ddd);
border-radius: 8px;
transition:
background-color 0.3s ease,
border-color 0.3s ease;
}