derek/MistoxCom-Angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Fix UI wrapping on mobile

Browse Source
This commit is contained in:
Derek Holloway
2025-06-29 11:11:01 -07:00
parent 1402d5b4c1
commit b51b2236d5
3 changed files with 89 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/MistoxWebsite.Client/src/app/pages/store/admin/edititem/edit.component.html
+39 -37
View File
@@ -1,48 +1,50 @@
<div class="center">
<form class="big-frame background-border" style="width: 520px;" #accountForm="ngForm" (ngSubmit)="onSubmit()">
<h3>Edit Item</h3>
<div class="frame-item">
<input type="text" [(ngModel)]="newItem.name" name="ItemName" placeholder=" " />
<label>Item Name</label>
</div>
<div class="frame-item">
<input type="number" [(ngModel)]="newItem.cost" name="ItemCost" placeholder=" " />
<label>Cost</label>
</div>
<div class="frame-item">
<input type="text" [(ngModel)]="newItem.url" name="itemURL" placeholder=" " />
<label>URL</label>
</div>
<div class="column-content">
<form class="big-frame background-border" style="width: 520px;" #accountForm="ngForm" (ngSubmit)="onSubmit()">
<h3>Edit Item</h3>
<div class="frame-item">
<textarea [(ngModel)]="newItem.description" name="ItemDesc" cols="40" placeholder=" " ></textarea>
<label>Description</label>
<input type="text" [(ngModel)]="newItem.name" name="ItemName" placeholder=" " />
<label>Item Name</label>
</div>
<div class="frame-item">
<div id="FileUploadPlaceholder" ></div>
<input #FileUpload type="file" (change)="onFileSelected($event)" accept="image/*" multiple />
</div>
<div class="flex-row">
<div class="frame-button">
<input class="submit" type="submit" value="Update Item" />
<div class="frame-item">
<input type="number" [(ngModel)]="newItem.cost" name="ItemCost" placeholder=" " />
<label>Cost</label>
</div>
</div>
<ul *ngIf="errorMsgs.length > 0" >
<li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
</ul>
</form>
<div class="frame-item">
<input type="text" [(ngModel)]="newItem.url" name="itemURL" placeholder=" " />
<label>URL</label>
</div>
<!-- Finish file preview for uploads -->
<div class="img-frame">
<div *ngFor="let cur of imagePreviews" class="image-holder">
<input class="delete-button" type="button" value="X" (click)="RemovePhoto(cur)" />
<img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
<div class="frame-item">
<textarea [(ngModel)]="newItem.description" name="ItemDesc" cols="40" placeholder=" " ></textarea>
<label>Description</label>
</div>
<div class="frame-item">
<div id="FileUploadPlaceholder" ></div>
<input #FileUpload type="file" (change)="onFileSelected($event)" accept="image/*" multiple />
</div>
<div class="flex-row">
<div class="frame-button">
<input class="submit" type="submit" value="Update Item" />
</div>
</div>
<ul *ngIf="errorMsgs.length > 0" >
<li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
</ul>
</form>
<!-- Finish file preview for uploads -->
<div class="img-frame">
<div *ngFor="let cur of imagePreviews" class="image-holder">
<input class="delete-button" type="button" value="X" (click)="RemovePhoto(cur)" />
<img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
</div>
</div>
</div>
</div>
src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.html
+39 -37
View File
@@ -1,48 +1,50 @@
<div class="center">
<form class="big-frame background-border" style="width: 520px;" #accountForm="ngForm" (ngSubmit)="onSubmit()">
<h3>Create New Item</h3>
<div class="frame-item">
<input type="text" [(ngModel)]="newItem.name" name="ItemName" placeholder=" " />
<label>Item Name</label>
</div>
<div class="frame-item">
<input type="number" [(ngModel)]="newItem.cost" name="ItemCost" placeholder=" " />
<label>Cost</label>
</div>
<div class="frame-item">
<input type="text" [(ngModel)]="newItem.url" name="itemURL" placeholder=" " />
<label>URL</label>
</div>
<div class="column-content">
<form class="big-frame background-border" style="width: 520px;" #accountForm="ngForm" (ngSubmit)="onSubmit()">
<h3>Create New Item</h3>
<div class="frame-item">
<textarea [(ngModel)]="newItem.description" name="ItemDesc" cols="40" placeholder=" " ></textarea>
<label>Description</label>
<input type="text" [(ngModel)]="newItem.name" name="ItemName" placeholder=" " />
<label>Item Name</label>
</div>
<div class="frame-item">
<!-- Need to fix for image file upload -->
<div id="FileUploadPlaceholder" ></div>
<input type="file" (change)="onFileSelected($event)" accept="image/*" multiple />
</div>
<div class="flex-row">
<div class="frame-button">
<input class="submit" type="submit" value="Create Item" />
<div class="frame-item">
<input type="number" [(ngModel)]="newItem.cost" name="ItemCost" placeholder=" " />
<label>Cost</label>
</div>
</div>
<ul *ngIf="errorMsgs.length > 0" >
<li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
</ul>
</form>
<div class="frame-item">
<input type="text" [(ngModel)]="newItem.url" name="itemURL" placeholder=" " />
<label>URL</label>
</div>
<!-- Finish file preview for uploads -->
<div class="img-frame">
<div *ngFor="let cur of imagePreviews" class="image-holder">
<img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
<div class="frame-item">
<textarea [(ngModel)]="newItem.description" name="ItemDesc" cols="40" placeholder=" " ></textarea>
<label>Description</label>
</div>
<div class="frame-item">
<!-- Need to fix for image file upload -->
<div id="FileUploadPlaceholder" ></div>
<input type="file" (change)="onFileSelected($event)" accept="image/*" multiple />
</div>
<div class="flex-row">
<div class="frame-button">
<input class="submit" type="submit" value="Create Item" />
</div>
</div>
<ul *ngIf="errorMsgs.length > 0" >
<li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
</ul>
</form>
<!-- Finish file preview for uploads -->
<div class="img-frame">
<div *ngFor="let cur of imagePreviews" class="image-holder">
<img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
</div>
</div>
</div>
</div>
src/MistoxWebsite.Client/src/styles.css
+11
View File
@@ -29,6 +29,16 @@ main {
min-height: 100vh;
}
.column-content {
columns: 2;
}
@media (max-width: 1620px) {
.column-content {
columns: 1;
}
}
.text-frame {
margin: 50px !important;
max-width: 2200px !important;
@@ -47,6 +57,7 @@ main {
width: 400px;
color: var(--Mistox-White);
margin: 40px;
break-inside: avoid;
}
.big-frame h3{