personal details help text

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

@@ -39,6 +39,7 @@
 
                 button {
                     margin-left: 24px;
+                    white-space: nowrap;
                 }
             }
         }
@@ -106,6 +107,7 @@
                             color: $darkColor;
                             font-family: $bodyFont;
                             cursor: pointer;
+                            display: flex;
 
                             ::ng-deep {
                                 label {

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

@@ -162,7 +162,7 @@
 
 
 
-@media only screen and (max-width: 768px) {
+@media only screen and (max-width: 1024px) {
 
     .header-actions {
         display: flex;
@@ -170,6 +170,10 @@
         align-items: center;
         padding: 0 12px;
         width: 100%;
+
+        button {
+            white-space: nowrap;
+        }
     }
 
 
@@ -248,6 +252,10 @@
                         height: unset;
                         border: none !important;
                         margin: 0 !important;
+
+                        &:hover {
+                            background: transparent;
+                        }
                     }
                 }
             }

frontend/angular/src/app/components/my-career-web/assessment/work-style/work-style.component.ts

@@ -55,9 +55,11 @@ export class WorkStyleComponent extends BaseComponent implements OnInit, OnDestr
 
     setAnswerScales(): void {
         this.answerScales = [];
-        for (let i = 1; i <= (this.workStyleQuestion.Scalar || 1); i++) {
-            this.answerScales.push(i);
-        }
+        setTimeout(() => {
+            for (let i = 1; i <= (this.workStyleQuestion.Scalar || 1); i++) {
+                this.answerScales.push(i);
+            }
+        });
     }
 
     submitAnswer(scale): void {

frontend/angular/src/app/components/my-career-web/mc-shared/mc-shared.module.ts

@@ -25,6 +25,7 @@ import { FileUploadModule } from 'primeng/fileupload';
 import { SelectButtonModule } from 'primeng/selectbutton';
 import { PersonalDetailsComponent } from './personal-details/personal-details.component';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { TooltipModule } from 'primeng/tooltip';
 
 const MODULES = [
     ReactiveFormsModule,
@@ -43,7 +44,8 @@ const MODULES = [
     CalendarModule,
     FileUploadModule,
     SelectButtonModule,
-    ConfirmDialogModule
+    ConfirmDialogModule,
+    TooltipModule
 ];
 
 const COMPONENTS = [

frontend/angular/src/app/components/my-career-web/mc-shared/personal-details/personal-details.component.html

@@ -17,21 +17,23 @@
         <div class="col-md-6 form-group">
             <label>First Name</label>
             <app-form-control>
-                <input type="text" class="form-control" placeholder="First Name" required name="FirstName" [(ngModel)]="careerProfile.Candidate.User.FirstName">
+                <input type="text" class="form-control" placeholder="First Name" required name="FirstName"
+                       [(ngModel)]="careerProfile.Candidate.User.FirstName">
             </app-form-control>
         </div>
 
         <div class="col-md-6 form-group">
             <label>Last Name</label>
             <app-form-control>
-                <input type="text" class="form-control" placeholder="Last Name" required name="LastName" [(ngModel)]="careerProfile.Candidate.User.LastName">
+                <input type="text" class="form-control" placeholder="Last Name" required name="LastName"
+                       [(ngModel)]="careerProfile.Candidate.User.LastName">
             </app-form-control>
         </div>
 
         <div class="col-md-6 form-group">
             <label>Email</label>
             <app-form-control>
-                <input type="email" email=""  class="form-control" placeholder="Email Address" required name="Email"
+                <input type="email" email="" class="form-control" placeholder="Email Address" required name="Email"
                        [(ngModel)]="careerProfile.Candidate.User.Email">
             </app-form-control>
         </div>
@@ -39,8 +41,10 @@
         <div class="col-md-6 form-group">
             <label>Mobile</label>
             <app-form-control>
-                <p-inputMask (focusout)="checkMobilePattern()" slotChar="-" [unmask]="true" [autoClear]="true" mask="9999 999 9999"
-                             styleClass="form-control" placeholder="Mobile No" [(ngModel)]="careerProfile.Mobile" name="Mobile">
+                <p-inputMask (focusout)="checkMobilePattern()" slotChar="-" [unmask]="true" [autoClear]="true"
+                             mask="9999 999 9999"
+                             styleClass="form-control" placeholder="Mobile No" [(ngModel)]="careerProfile.Mobile"
+                             name="Mobile">
                 </p-inputMask>
             </app-form-control>
             <div class="mobile-no-msg" *ngIf="!careerProfile.Mobile || careerProfile.Mobile.length < 11">
@@ -51,8 +55,10 @@
         <div class="col-md-12 form-group">
             <label>Address</label>
             <app-form-control>
-                <input type="text" appGooglePlacesAutocomplete (change)="changedAddress()" (addressSelected)="updateAddress($event)"
-                       class="form-control" placeholder="Address" required [(ngModel)]="careerProfile.GoogleAddress" name="Address">
+                <input type="text" appGooglePlacesAutocomplete (change)="changedAddress()"
+                       (addressSelected)="updateAddress($event)"
+                       class="form-control" placeholder="Address" required [(ngModel)]="careerProfile.GoogleAddress"
+                       name="Address">
             </app-form-control>
         </div>
 
@@ -60,14 +66,17 @@
         <div class="col-md-6 form-group">
             <label>Skype</label>
             <app-form-control>
-                <input type="text"  class="form-control" placeholder="Skype" [(ngModel)]="careerProfile.Skype" name="Skype">
+                <input type="text" class="form-control" placeholder="Skype" [(ngModel)]="careerProfile.Skype"
+                       name="Skype">
             </app-form-control>
         </div>
 
         <div class="col-md-6 form-group" *ngIf="!asChildComponent">
             <label>Occupation Preference</label>
-            <p-autoComplete placeholder="Occupation Preference" (completeMethod)="getJobTitles($event)" [forceSelection]="true" field="JobTitle"
-                            [suggestions]="jobTitles" name="OccupationPreference" [(ngModel)]="careerProfile.Candidate.OccupationPreference" dataKey="ObjectID">
+            <p-autoComplete placeholder="Occupation Preference" (completeMethod)="getJobTitles($event)"
+                            [forceSelection]="true" field="JobTitle"
+                            [suggestions]="jobTitles" name="OccupationPreference"
+                            [(ngModel)]="careerProfile.Candidate.OccupationPreference" dataKey="ObjectID">
             </p-autoComplete>
         </div>
 
@@ -76,7 +85,8 @@
             <div class="row">
                 <div class="col-sm-12" *ngIf="isLoadingPreferences"><i class="pi pi-spin pi-spinner"></i></div>
                 <div class="col-sm-6" *ngFor="let preference of employmentPreferences; let i = index;">
-                    <p-checkbox [label]="preference.Description" [value]="preference.Value" [(ngModel)]="careerProfile.Candidate.EmploymentPreference"
+                    <p-checkbox [label]="preference.Description" [value]="preference.Value"
+                                [(ngModel)]="careerProfile.Candidate.EmploymentPreference"
                                 name="pref-{{i}}">
                     </p-checkbox>
                 </div>
@@ -88,7 +98,8 @@
             <label>Employment Status</label>
             <p-dropdown placeholder="Employment Status" [options]="employmentStatuses"
                         [dropdownIcon]="isLoadingStatuses ? 'pi pi-spin pi-spinner' : 'pi pi-chevron-down'"
-                        optionLabel="Description" name="EmploymentStatus" [(ngModel)]="careerProfile.Candidate.EmploymentStatus" dataKey="Value">
+                        optionLabel="Description" name="EmploymentStatus"
+                        [(ngModel)]="careerProfile.Candidate.EmploymentStatus" dataKey="Value">
             </p-dropdown>
         </div>
 
@@ -104,33 +115,38 @@
 
 
         <div class="col-md-12 form-group" *ngIf="asChildComponent">
-            <label>Personal Statement</label>
+            <label class="with-help-text">Personal Statement <span class="help-text"><i class="fa fa-question" pTooltip="Your Personal Statement will appear on your Career Profile. It describes the type of work you are looking for, your career plans and what makes you unique. You don’t need to add a Personal Statement now (or at all) … you can add it later via the Career Profile editor. If you want more help with creating a Personal Statement, see the article on our Knowledgebase." tooltipStyleClass="t-w300"></i></span></label>
             <app-form-control>
-                <textarea class="form-control" [(ngModel)]="careerProfile.PersonalStatement" name="PersonalStatement"></textarea>
+                <textarea class="form-control" [(ngModel)]="careerProfile.PersonalStatement"
+                          name="PersonalStatement"></textarea>
             </app-form-control>
         </div>
 
 
         <div class="col-md-12 form-group" *ngIf="asChildComponent">
-            <label>Achievements</label>
+            <label class="with-help-text">Achievements <span class="help-text"><i class="fa fa-question" tooltipStyleClass="t-w300" pTooltip="Your Achievements will appear on your Career Profile. It describes the significant events in your work career. This can include projects you worked on, awards, recognition or just activities you have performed well. You don’t need to add Achievements now (or at all) … you can add it later via the Career Profile editor. If you want more help with describing your Achievements, see the article on our Knowledgebase."></i></span></label>
+
             <app-form-control>
                 <textarea class="form-control" [(ngModel)]="careerProfile.Achievements" name="Achievements"></textarea>
             </app-form-control>
         </div>
 
         <div class="col-md-6 mt-4 d-flex justify-content-center" *ngIf="!asChildComponent">
-            <button type="button" pButton label="Connect With Google" class="ui-button-google" (click)="connectWithSocial('Google')"
+            <button type="button" pButton label="Connect With Google" class="ui-button-google"
+                    (click)="connectWithSocial('Google')"
                     *ngIf="!careerProfile.IsGoogleConnected"></button>
         </div>
 
         <div class="col-md-6 mt-4 d-flex justify-content-center" *ngIf="!asChildComponent">
-            <button type="button" pButton label="Connect With LinkedIn" class="ui-button-facebook" (click)="connectWithSocial('linkedIn')"
+            <button type="button" pButton label="Connect With LinkedIn" class="ui-button-facebook"
+                    (click)="connectWithSocial('linkedIn')"
                     *ngIf="!careerProfile.IsLinkedInConnected"></button>
         </div>
 
 
         <div class="col-md-12 d-flex justify-content-end mt-5" *ngIf="!asChildComponent">
-            <button (click)="updateProfile()" pButton [icon]="isSaving ? 'pi pi-spin pi-spinner' : 'pi pi-save'" label="Update Information"
+            <button (click)="updateProfile()" pButton [icon]="isSaving ? 'pi pi-spin pi-spinner' : 'pi pi-save'"
+                    label="Update Information"
                     class="ui-button-info update-info" [disabled]="isLoading || isSaving">
             </button>
         </div>
@@ -138,7 +154,8 @@
 
         <div class="col-md-12" style="margin-top: 48px;" *ngIf="asChildComponent">
             <div class="d-flex justify-content-center">
-                <button pButton label="Next Section" (click)="updateProfile()" class="ui-button-info next-section" [disabled]="isLoading || isSaving">
+                <button pButton label="Next Section" (click)="updateProfile()" class="ui-button-info next-section"
+                        [disabled]="isLoading || isSaving">
                 </button>
             </div>
         </div>

frontend/angular/src/styles/my-career-styles/_misc.scss

@@ -49,6 +49,29 @@
     }
 }
 
+label.with-help-text {
+    position: relative;
+
+
+    .help-text {
+        width: 16px;
+        height: 16px;
+        font-weight: bold;
+        color: $white;
+        background: $primaryColor;
+        border-radius: 50%;
+        display: flex;
+        position: absolute;
+        right: -25px;
+        top: 2px;
+        justify-content: center;
+        padding: 1px;
+        cursor: pointer;
+    }
+}
+
+
+
 
 @media only screen and (max-width: 768px) {
 

frontend/angular/src/styles/my-career-styles/_styles.scss

@@ -26,3 +26,8 @@
     @import "primeng/upload";
 
 }
+
+
+.ui-tooltip.t-w300 {
+    min-width: 300px !important;
+}