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
+10 -8
View File
@@ -1,4 +1,5 @@
<form class="center big-frame background-border" #accountForm="ngForm" (ngSubmit)="onSubmit()"> <div class="center">
<form class="big-frame background-border" style="width: 520px;" #accountForm="ngForm" (ngSubmit)="onSubmit()">
<h3>Edit Item</h3> <h3>Edit Item</h3>
<div class="frame-item"> <div class="frame-item">
@@ -22,25 +23,26 @@
</div> </div>
<div class="frame-item"> <div class="frame-item">
<!-- Need to fix for image file upload -->
<div id="FileUploadPlaceholder" ></div> <div id="FileUploadPlaceholder" ></div>
<input type="file" (change)="onFileSelected($event)" accept="image/*" multiple /> <input #FileUpload type="file" (change)="onFileSelected($event)" accept="image/*" multiple />
</div> </div>
<div class="flex-row"> <div class="flex-row">
<div class="frame-button"> <div class="frame-button">
<input class="submit" type="submit" value="Create Item" /> <input class="submit" type="submit" value="Update Item" />
</div> </div>
</div> </div>
<ul *ngIf="errorMsgs.length > 0" > <ul *ngIf="errorMsgs.length > 0" >
<li *ngFor="let msg of errorMsgs" >{{ msg }}</li> <li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
</ul> </ul>
</form> </form>
<!-- Finish file preview for uploads --> <!-- Finish file preview for uploads -->
<div class="center big-frame background-border"> <div class="img-frame">
<div *ngFor="let cur of imagePreviews" id="imageHolder"> <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;"/> <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
+7 -5
View File
@@ -1,4 +1,5 @@
<form class="center big-frame background-border" #accountForm="ngForm" (ngSubmit)="onSubmit()"> <div class="center">
<form class="big-frame background-border" style="width: 520px;" #accountForm="ngForm" (ngSubmit)="onSubmit()">
<h3>Create New Item</h3> <h3>Create New Item</h3>
<div class="frame-item"> <div class="frame-item">
@@ -36,11 +37,12 @@
<ul *ngIf="errorMsgs.length > 0" > <ul *ngIf="errorMsgs.length > 0" >
<li *ngFor="let msg of errorMsgs" >{{ msg }}</li> <li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
</ul> </ul>
</form> </form>
<!-- Finish file preview for uploads --> <!-- Finish file preview for uploads -->
<div class="center big-frame background-border"> <div class="img-frame">
<div *ngFor="let cur of imagePreviews" id="imageHolder"> <div *ngFor="let cur of imagePreviews" class="image-holder">
<img [src]="cur" alt="Image Preview" style="max-width: 200px;"/> <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;