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>
<div class="frame-item">
@@ -22,25 +23,26 @@
</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 />
<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="Create Item" />
<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>
</form>
<!-- Finish file preview for uploads -->
<div class="center big-frame background-border">
<div *ngFor="let cur of imagePreviews" id="imageHolder">
<!-- 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>
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>
<div class="frame-item">
@@ -36,11 +37,12 @@
<ul *ngIf="errorMsgs.length > 0" >
<li *ngFor="let msg of errorMsgs" >{{ msg }}</li>
</ul>
</form>
</form>
<!-- Finish file preview for uploads -->
<div class="center big-frame background-border">
<div *ngFor="let cur of imagePreviews" id="imageHolder">
<!-- 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>
src/MistoxWebsite.Client/src/styles.css
+38 -15
View File
@@ -23,22 +23,17 @@ main {
/* CSS used for the Account Activity Pages */
.center {
position: relative;
left: 50%;
top: 50vh;
transform: translateY(-50%) translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.horizontal-center {
position: relative;
left: 50%;
transform: translateX(-50%);
}
.vertical-center {
position: relative;
top: 50vh;
transform: translateY(-50%);
.text-frame {
margin: 50px !important;
max-width: 2200px !important;
padding: 10px !important;
width: auto !important;
}
.background-border {
@@ -49,8 +44,9 @@ main {
.big-frame {
background-color: var(--Mistox-Black);
padding: 4px;
max-width: 400px;
width: 400px;
color: var(--Mistox-White);
margin: 40px;
}
.big-frame h3{
@@ -149,6 +145,33 @@ main {
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{
position: relative;
padding: 10px 20px;