component style refactor for simpler display

3 files changed, 69 insertions, 54 deletions

diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.css b/ufund-ui/src/app/components/cupboard/cupboard.component.css
index fe4971a..4c6ac4b 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.css
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.css
@@ -1,18 +1,30 @@
 :host {
-    display: block;
+    display: flex;
+      justify-content: left;
     border: 2px solid #000;
     border-radius: 5px;
     padding: 10px 20px;
 }
+#menu {
+      display: flex;
+      justify-content: space-between;
+      margin: 10px;
+      * {
+         border: 3px solid #000;
+         
+         border-top-left-radius: 5px;
+         border-top-right-radius: 5px;
+         margin-right: 5px;
+         border-bottom: 0px;
+      }
+}
 
-#menu, #create-form, #delete-form, #update-form {
+#create-form, #delete-form, #update-form {
    background-color: #d9d9d9;
    padding: 10px 20px 20px 20px;
    border: 2px solid #000;
    border-radius: 5px;  
-   width: 20%;
    visibility: visible;
-
 }
 
 #create-button {
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.html b/ufund-ui/src/app/components/cupboard/cupboard.component.html
index 0d64475..4577844 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.html
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.html
@@ -1,50 +1,55 @@
-<h1> Cupboard </h1>
-<h2 *ngIf="isManager()" > Admin View </h2>
-<div id="menu" *ngIf="isManager()">
-    <button (click)="opencreate()">Create new Need</button>
-    <button (click)="openupdate()">Update existing Need</button>
+<div>
+    <h1> Cupboard </h1>
+    <app-need-list #needList></app-need-list>
 </div>
-<div id="create-form">
-    <h1> Create a new need </h1>
-    <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
-        <label>Name:</label><br>
-        <input type="text" name="name" ngModel><br>
-        <label>Max Goal:</label><br>
-        <input type="number" name="maxGoal" ngModel><br>
-        <label>Type</label><br>
-        <input type="radio" name="type" value="MONETARY" ngModel>
-        <label>Monetary</label><br>
-        <input type="radio" name="type" value="PHYSICAL" ngModel>
-        <label>Physical</label><br>
-        <input type="submit" value="Submit">
-    </form>
-    <button (click)="back()">Close</button>
-    <span *ngIf="statusText">‼️{{statusText | async}}</span>
-
+<div *ngIf="isManager()" >
+    <h2 > Admin View </h2>
+    <div id="menu">
+        <button (click)="opencreate()">Create new Need</button>
+        <button (click)="openupdate()">Update existing Need</button>
+    </div>
+    <div id="create-form">
+        <h1> Create a new need </h1>
+        <form #cupboardForm="ngForm" (ngSubmit)="submit(cupboardForm.value)">
+            <label>Name:</label><br>
+            <input type="text" name="name" ngModel><br>
+            <label>Max Goal:</label><br>
+            <input type="number" name="maxGoal" ngModel><br>
+            <label>Type</label><br>
+            <input type="radio" name="type" value="MONETARY" ngModel>
+            <label>Monetary</label><br>
+            <input type="radio" name="type" value="PHYSICAL" ngModel>
+            <label>Physical</label><br>
+            <input type="submit" value="Submit">
+        </form>
+        <button (click)="back()">Close</button>
+        <span *ngIf="statusText">‼️{{statusText | async}}</span>
+    
+    </div>
+    <div id="update-form">
+        <h1> Update a need </h1>
+        <label>Needs:</label><br>
+        <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
+            <div *ngFor="let need of needs">
+    
+                <input type="radio" name="id" [value]=need.id [(ngModel)]="selectedNeedId" (change)="populateForm(need)">
+                <label name="template">{{need.name}}</label><br>
+            </div>
+            <label>Name:</label><br>
+            <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
+            <label>Max Goal:</label><br>
+            <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
+            <label>Type</label><br>
+            <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type">
+            <label>Monetary</label><br>
+            <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
+            <label>Physical</label><br>
+            <input type="submit" value="Submit">
+        </form>
+        <button (click)="back()">Close</button>
+        <span *ngIf="statusText">{{statusText | async}}</span>
+    
+    </div>
+    <hr>
+    
 </div>
-<div id="update-form">
-    <h1> Update a need </h1>
-    <label>Needs:</label><br>
-    <form #updateForm="ngForm" (ngSubmit)="update(updateForm.value)">
-        <div *ngFor="let need of needs">
-
-            <input type="radio" name="id" [value]=need.id [(ngModel)]="selectedNeedId" (change)="populateForm(need)">
-            <label name="template">{{need.name}}</label><br>
-        </div>
-        <label>Name:</label><br>
-        <input type="text" name="name" [(ngModel)]="selectedNeed.name"><br>
-        <label>Max Goal:</label><br>
-        <input type="number" name="maxGoal" [(ngModel)]="selectedNeed.maxGoal"><br>
-        <label>Type</label><br>
-        <input type="radio" name="type" value="MONETARY" [(ngModel)]="selectedNeed.type">
-        <label>Monetary</label><br>
-        <input type="radio" name="type" value="PHYSICAL" [(ngModel)]="selectedNeed.type">
-        <label>Physical</label><br>
-        <input type="submit" value="Submit">
-    </form>
-    <button (click)="back()">Close</button>
-    <span *ngIf="statusText">{{statusText | async}}</span>
-
-</div>
-<hr>
-<app-need-list #needList></app-need-list>
diff --git a/ufund-ui/src/app/components/cupboard/cupboard.component.ts b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
index 24b3e2d..f8023c3 100644
--- a/ufund-ui/src/app/components/cupboard/cupboard.component.ts
+++ b/ufund-ui/src/app/components/cupboard/cupboard.component.ts
@@ -55,7 +55,6 @@ export class CupboardComponent implements OnInit {
             element.style.position = 'relative';
         }
     }
-
     openmenu() {
         const menuElement = document.getElementById('menu');
         this.showElement(menuElement);
@@ -79,7 +78,6 @@ export class CupboardComponent implements OnInit {
     close() {
         this.hideElement(document.getElementById('create-form'));
         this.hideElement(document.getElementById('destroy-form'));
-        this.hideElement(document.getElementById('menu'));
         this.hideElement(document.getElementById('update-form'));
     }