jessebrault/meals-made-easy-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MME-17 Spacing between ingredients table and add ingredient button.

Browse Source
This commit is contained in:
Jesse Brault 2026-02-08 12:57:23 -06:00
parent 64b3cf92f7
commit e05ebf5b62
2 changed files with 62 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.css
View File

@ -21,6 +21,12 @@ textarea {
padding: 0;
}
.ingredients-container {
display: flex;
flex-direction: column;
row-gap: 10px;
}
.mat-column-reorder {
width: 32px;
text-align: center;

109
src/app/pages/recipe-upload-page/steps/enter-recipe-data/enter-recipe-data.html
View File

@ -24,65 +24,68 @@
<input matInput [formControl]="recipeFormGroup.controls.slug" />
</mat-form-field>
<h3>Ingredients</h3>
<div class="ingredients-container">
<h3>Ingredients</h3>
<table
#ingredientsTable
mat-table
[dataSource]="ingredientModels()"
cdkDropList
(cdkDropListDropped)="onIngredientDrop($event)"
>
<ng-container matColumnDef="reorder">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let model">
<fa-icon [icon]="faBars"></fa-icon>
</td>
</ng-container>
<table
#ingredientsTable
mat-table
[dataSource]="ingredientModels()"
cdkDropList
(cdkDropListDropped)="onIngredientDrop($event)"
>
<ng-container matColumnDef="reorder">
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let model">
<fa-icon [icon]="faBars"></fa-icon>
</td>
</ng-container>
<ng-container matColumnDef="amount">
<th mat-header-cell *matHeaderCellDef>Amount</th>
<td mat-cell *matCellDef="let model">
{{ model.draft.amount }}
</td>
</ng-container>
<ng-container matColumnDef="amount">
<th mat-header-cell *matHeaderCellDef>Amount</th>
<td mat-cell *matCellDef="let model">
{{ model.draft.amount }}
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let model">
{{ model.draft.name }}
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef>Name</th>
<td mat-cell *matCellDef="let model">
{{ model.draft.name }}
</td>
</ng-container>
<ng-container matColumnDef="notes">
<th mat-header-cell *matHeaderCellDef>Notes</th>
<td mat-cell *matCellDef="let model">
{{ model.draft.notes }}
</td>
</ng-container>
<ng-container matColumnDef="notes">
<th mat-header-cell *matHeaderCellDef>Notes</th>
<td mat-cell *matCellDef="let model">
{{ model.draft.notes }}
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell *matCellDef="let model">
<button matButton="text" [matMenuTriggerFor]="ingredientActionsMenu" type="button">
<fa-icon [icon]="faEllipsis" size="2x"></fa-icon>
</button>
<mat-menu #ingredientActionsMenu="matMenu">
<button mat-menu-item (click)="editIngredient(model)" type="button">Edit</button>
<button mat-menu-item (click)="onIngredientDelete(model)" type="button">Delete</button>
</mat-menu>
</td>
</ng-container>
<ng-container matColumnDef="actions">
<th mat-header-cell *matHeaderCellDef>Actions</th>
<td mat-cell *matCellDef="let model">
<button matButton="text" [matMenuTriggerFor]="ingredientActionsMenu" type="button">
<fa-icon [icon]="faEllipsis" size="2x"></fa-icon>
</button>
<mat-menu #ingredientActionsMenu="matMenu">
<button mat-menu-item (click)="editIngredient(model)" type="button">Edit</button>
<button mat-menu-item (click)="onIngredientDelete(model)" type="button">Delete</button>
</mat-menu>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['reorder', 'amount', 'name', 'notes', 'actions']"></tr>
<tr
mat-row
*matRowDef="let row; columns: ['reorder', 'amount', 'name', 'notes', 'actions']"
cdkDrag
[cdkDragData]="row"
></tr>
</table>
<button matButton="outlined" (click)="addIngredient()" type="button">Add Ingredient</button>
<tr mat-header-row *matHeaderRowDef="['reorder', 'amount', 'name', 'notes', 'actions']"></tr>
<tr
mat-row
*matRowDef="let row; columns: ['reorder', 'amount', 'name', 'notes', 'actions']"
cdkDrag
[cdkDragData]="row"
></tr>
</table>
<button matButton="outlined" (click)="addIngredient()" type="button">Add Ingredient</button>
</div>
<h3>Images</h3>
<button matButton="outlined" (click)="openImageUploadDialog()" type="button">Upload Image</button>