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