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

Make admin panel look nicer

Browse Source
This commit is contained in:
Derek Holloway
2025-06-28 21:06:37 -07:00
parent 3da0ab2f56
commit e48b3e1d5f
3 changed files with 116 additions and 89 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,46 +1,48 @@
<form class="center big-frame background-border" #accountForm="ngForm" (ngSubmit)="onSubmit()"> <div class="center">
<h3>Edit Item</h3> <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="frame-item"> <div class="frame-item">
<textarea [(ngModel)]="newItem.description" name="ItemDesc" cols="40" placeholder=" " ></textarea> <input type="text" [(ngModel)]="newItem.name" name="ItemName" placeholder=" " />
<label>Description</label> <label>Item Name</label>
</div> </div>
<div class="frame-item"> <div class="frame-item">
<!-- Need to fix for image file upload --> <input type="number" [(ngModel)]="newItem.cost" name="ItemCost" placeholder=" " />
<div id="FileUploadPlaceholder" ></div> <label>Cost</label>
<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>
</div>
<ul *ngIf="errorMsgs.length > 0" > <div class="frame-item">
<li *ngFor="let msg of errorMsgs" >{{ msg }}</li> <input type="text" [(ngModel)]="newItem.url" name="itemURL" placeholder=" " />
</ul> <label>URL</label>
</form> </div>
<!-- Finish file preview for uploads --> <div class="frame-item">
<div class="center big-frame background-border"> <textarea [(ngModel)]="newItem.description" name="ItemDesc" cols="40" placeholder=" " ></textarea>
<div *ngFor="let cur of imagePreviews" id="imageHolder"> <label>Description</label>
<img [src]="cur" alt="Image Preview" style="max-width: 200px;"/> </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> </div>
src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.html
+39 -37
View File
@@ -1,46 +1,48 @@
<form class="center big-frame background-border" #accountForm="ngForm" (ngSubmit)="onSubmit()"> <div class="center">
<h3>Create New Item</h3> <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="frame-item"> <div class="frame-item">
<textarea [(ngModel)]="newItem.description" name="ItemDesc" cols="40" placeholder=" " ></textarea> <input type="text" [(ngModel)]="newItem.name" name="ItemName" placeholder=" " />
<label>Description</label> <label>Item Name</label>
</div> </div>
<div class="frame-item"> <div class="frame-item">
<!-- Need to fix for image file upload --> <input type="number" [(ngModel)]="newItem.cost" name="ItemCost" placeholder=" " />
<div id="FileUploadPlaceholder" ></div> <label>Cost</label>
<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>
</div>
<ul *ngIf="errorMsgs.length > 0" > <div class="frame-item">
<li *ngFor="let msg of errorMsgs" >{{ msg }}</li> <input type="text" [(ngModel)]="newItem.url" name="itemURL" placeholder=" " />
</ul> <label>URL</label>
</form> </div>
<!-- Finish file preview for uploads --> <div class="frame-item">
<div class="center big-frame background-border"> <textarea [(ngModel)]="newItem.description" name="ItemDesc" cols="40" placeholder=" " ></textarea>
<div *ngFor="let cur of imagePreviews" id="imageHolder"> <label>Description</label>
<img [src]="cur" alt="Image Preview" style="max-width: 200px;"/> </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> </div>
src/MistoxWebsite.Client/src/styles.css
+38 -15
View File
@@ -23,22 +23,17 @@ main {
/* CSS used for the Account Activity Pages */ /* CSS used for the Account Activity Pages */
.center { .center {
position: relative; display: flex;
left: 50%; justify-content: center;
top: 50vh; align-items: center;
transform: translateY(-50%) translateX(-50%); min-height: 100vh;
} }
.horizontal-center { .text-frame {
position: relative; margin: 50px !important;
left: 50%; max-width: 2200px !important;
transform: translateX(-50%); padding: 10px !important;
} width: auto !important;
.vertical-center {
position: relative;
top: 50vh;
transform: translateY(-50%);
} }
.background-border { .background-border {
@@ -49,8 +44,9 @@ main {
.big-frame { .big-frame {
background-color: var(--Mistox-Black); background-color: var(--Mistox-Black);
padding: 4px; padding: 4px;
max-width: 400px; width: 400px;
color: var(--Mistox-White); color: var(--Mistox-White);
margin: 40px;
} }
.big-frame h3{ .big-frame h3{
@@ -149,6 +145,33 @@ main {
color: var(--Mistox-Bright); color: var(--Mistox-Bright);
} }
.img-frame {
width: 610px;
}
.image-holder{
float: left;
border: 1px solid white;
width: fit-content;
border-radius: 6px;
}
.delete-button {
position: absolute;
width: 20px;
height: 20px;
text-align: center;
color: #000;
background-color: red;
border: none;
border-radius: 4px;
transform: translate(180px, 0);
}
.delete-button:hover{
background-color: #890620;
}
.submit{ .submit{
position: relative; position: relative;
padding: 10px 20px; padding: 10px 20px;