work references ui completed

frontend/angular/src/app/components/my-career-web/career-history/career-history/career-history.component.html

@@ -29,22 +29,22 @@
 
             <div class="assessment-body-tabs mc-card career-builder">
                 <p-tabView>
-                    <p-tabPanel header="1. Personal Data">
+                    <p-tabPanel header="1{{isMobileView ? '' : '. Personal Data'}}">
                         <app-personal-data></app-personal-data>
                     </p-tabPanel>
-                    <p-tabPanel header="2. Work History">
+                    <p-tabPanel header="2{{isMobileView ? '' : '. Work History'}}">
                         <app-work-history></app-work-history>
                     </p-tabPanel>
-                    <p-tabPanel header="3. Education">
+                    <p-tabPanel header="3{{isMobileView ? '' : '. Education'}}">
                         <app-education></app-education>
                     </p-tabPanel>
-                    <p-tabPanel header="4. Skills" [selected]="true">
+                    <p-tabPanel header="4{{isMobileView ? '' : '. Skills'}}">
                         <app-skills></app-skills>
                     </p-tabPanel>
-                    <p-tabPanel header="5. References">
+                    <p-tabPanel header="5{{isMobileView ? '' : '. References'}}">
                         <app-references></app-references>
                     </p-tabPanel>
-                    <p-tabPanel header="6. Templates">
+                    <p-tabPanel header="6{{isMobileView ? '' : '. Templates'}}">
                         <app-templates></app-templates>
                     </p-tabPanel>
                 </p-tabView>

frontend/angular/src/app/components/my-career-web/career-history/career-history/education/education.component.html

@@ -10,39 +10,39 @@
 <div class="row education-wrapper">
 
     <div class="col-md-9">
-        <div class="row form-group">
-            <div class="col-md-6">
+        <div class="row">
+            <div class="col-md-6 form-group">
                 <label>Course or Certification</label>
                 <input type="text" class="form-control" placeholder="Employeer name" name="Skype">
             </div>
         </div>
 
-        <div class="row form-group">
-            <div class="col-md-6">
+        <div class="row">
+            <div class="col-md-6 form-group">
                 <label>Where Studied</label>
                 <input type="text" class="form-control" placeholder="Where studied" name="Skype">
             </div>
 
-            <div class="col-md-6">
+            <div class="col-md-6 form-group">
                 <label>Where Issued</label>
                 <input type="text" class="form-control" placeholder="Where issued" name="Skype">
             </div>
         </div>
 
-        <div class="row form-group">
-            <div class="col-md-3">
+        <div class="row">
+            <div class="col-md-3 form-group">
                 <label>GPA or Outcome</label>
                 <input type="text" class="form-control" placeholder="Where studied" name="Skype">
             </div>
 
-            <div class="col-md-6 col-md-offset-3">
+            <div class="col-md-6 col-md-offset-3 form-group">
                 <label>When Completed</label>
                 <p-calendar></p-calendar>
             </div>
         </div>
 
-        <div class="row form-group">
-            <div class="col-md-4">
+        <div class="row">
+            <div class="col-md-4 form-group">
                 <label>Upload Certificate</label>
                 <p-fileUpload mode="basic" name="Upload your Cover Letter" withCredentials="true" auto="true" chooseLabel="Browse"></p-fileUpload>
             </div>

frontend/angular/src/app/components/my-career-web/career-history/career-history/education/education.component.scss

+@media only screen and (max-width: 768px) {
+    p-checkbox {
+        display: flex;
+        margin-bottom: 30px;
+    }
+}

frontend/angular/src/app/components/my-career-web/career-history/career-history/references/references.component.html

-<p>
-  references works!
-</p>
+<h4 class="tab-heading">Tell us about your referees</h4>
+
+<div class="row" style="margin-top: 24px;">
+    <div class="col-md-12 form-group">
+        <p-checkbox label="I don't have any referees to record"></p-checkbox>
+    </div>
+</div>
+
+
+<div class="row reference-wrapper">
+
+    <div class="col-md-9">
+        <div class="row">
+            <div class="col-md-6 form-group">
+                <label>Referee Name</label>
+                <input type="text" class="form-control" placeholder="Employeer name" name="Skype">
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-6 form-group">
+                <label>Email</label>
+                <input type="text" class="form-control" placeholder="Email address" name="Skype">
+            </div>
+
+            <div class="col-md-6 form-group">
+                <label>Phone</label>
+                <input type="text" class="form-control" placeholder="Phone" name="Skype">
+            </div>
+        </div>
+
+        <div class="row">
+            <div class="col-md-6 form-group">
+                <label>Role</label>
+                <input type="text" class="form-control" placeholder="Role" name="Skype">
+            </div>
+
+            <div class="col-md-3 col-md-offset-3 form-group">
+                <label>Written Reference</label>
+                <p-fileUpload mode="basic" name="Upload your Cover Letter" withCredentials="true" auto="true" chooseLabel="Browse"></p-fileUpload>
+            </div>
+        </div>
+
+    </div>
+
+
+</div>
+
+
+<div class="row">
+    <div class="col-md-12">
+        <button pButton class="btn btn-info-outline add-more" label="Add Reference +"></button>
+    </div>
+</div>
+
+
+
+<div class="d-flex justify-content-center" style="margin-top: 48px;">
+    <button pButton label="Next Section" class="ui-button-info next-section"></button>
+</div>
+

frontend/angular/src/app/components/my-career-web/career-history/career-history/skills/skills.component.scss

 .skill-wrapper {
-    margin-top: 24px;
+    margin: 24px 0 32px;
 }

frontend/angular/src/app/components/my-career-web/career-history/career-history/work-history/work-history.component.html

@@ -9,20 +9,20 @@
 
 <div class="row experience-wrapper">
 
-    <div class="col-md-9 form-group">
+    <div class="col-md-9">
         <div class="row">
-            <div class="col-md-6">
+            <div class="col-md-6 form-group">
                 <label>Employer</label>
                 <input type="text" class="form-control" placeholder="Employeer name" name="Skype">
             </div>
             <div class="col-md-4">
                 <div class="row">
-                    <div class="col-md-6">
+                    <div class="col-md-6 form-group">
                         <label>Start</label>
                         <p-calendar></p-calendar>
                     </div>
 
-                    <div class="col-md-6">
+                    <div class="col-md-6 form-group">
                         <label>End</label>
                         <p-calendar></p-calendar>
                     </div>

frontend/angular/src/app/components/my-career-web/career-history/career-history/work-history/work-history.component.scss

+.currently-work-checkbox {
+    margin-top: 40px;
+    white-space: nowrap;
+}
+
+@media only screen and (max-width: 768px) {
+    .currently-work-checkbox {
+        margin: 0 0 40px;
+        white-space: nowrap;
+    }
+}

frontend/angular/src/app/components/my-career-web/dashboard/profile-tasks/profile-tasks.component.ts

@@ -21,7 +21,7 @@ export class ProfileTasksComponent extends BaseComponent {
         {label: 'Personal Details', link: '/my-career-web/dashboard/personal-details', key: 'CompletedPercentage', active: false},
         {label: 'Work Strengths', link: '/my-career-web/assessments/work-style', key: 'CompletedPercentageWS', active: false},
         {label: 'Career Values', link: '/my-career-web/assessments/work-preference', key: 'CompletedPercentageWP', active: false},
-        {label: 'Career History', link: '', key: '', active: false},
+        {label: 'Career History', link: '/my-career-web/work-history/personal-data', key: '', active: false},
         {label: 'Diversity', link: '', key: '', active: false}
     ];
 

frontend/angular/src/styles/my-career-styles/_profile-builder.scss

@@ -23,12 +23,7 @@
     }
 
 
-    .currently-work-checkbox {
-        margin-top: 40px;
-        white-space: nowrap;
-    }
-
-    .experience-wrapper, .education-wrapper, .skill-wrapper {
+    .experience-wrapper, .education-wrapper, .skill-wrapper, .reference-wrapper {
         margin-bottom: 32px;
     }
 

frontend/angular/src/styles/my-career-styles/primeng/_tab-view.scss

@@ -12,3 +12,8 @@
         }
     }
 }
+
+
+@media only screen and (max-width: 768px) {
+
+}