work styles ui completed

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

@@ -2,7 +2,7 @@
 
     <div class="col-12" style="padding: 0;">
         <div class="assessment-header">
-            <div class="header-logo">
+            <div class="header-logo" *ngIf="!isMobileView">
                 <img src="assets/my-career-web/images/MATCHD_LOGO.jpg" alt="">
             </div>
 
@@ -12,16 +12,46 @@
                 <button pButton label="Save & exit" class="ui-button-info"></button>
             </div>
         </div>
-        <div class="assessment-progress">
-
-        </div>
+        <p-progressBar [value]="20"></p-progressBar>
 
         <div class="assessment-body container">
+
             <div class="assessment-body-header">
                 <div class="assessment-heading">Work Style</div>
 
                 <span class="assessment-estimation"> <i class="fa fa-clock-o"></i> <strong>Estimated time to complete</strong>: 20 mins</span>
             </div>
+
+            <div class="assessment-body-description">
+                Using the scale given, indicate how important to you are the following aspects in your work life.
+            </div>
+
+
+            <div class="assessment-body-question-wrapper mc-card">
+
+                <div class="question-title">How important to you is the following in your work life?</div>
+                <div class="question-completed">0%</div>
+
+
+                <div class="question-tag">FLEXIBILITY AT WORK</div>
+
+                <div class="answer-wrapper">
+                    <span class="extreme-label-left">Not very important</span>
+
+                    <div class="answer-options">
+                        <span class="option-value">1</span>
+                        <span class="option-value">2</span>
+                        <span class="option-value">3</span>
+                        <span class="option-value">4</span>
+                        <span class="option-value">5</span>
+                        <span class="option-value">6</span>
+                        <span class="option-value">7</span>
+                    </div>
+
+
+                    <span class="extreme-label-right">Very important</span>
+                </div>
+            </div>
         </div>
     </div>
 

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

@@ -8,7 +8,7 @@
 
         &-header {
             height: 76px;
-            background: #58595B;
+            background: $darkColor;
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -43,13 +43,6 @@
             }
         }
 
-        &-progress {
-            height: 8px;
-            background: #E0E0E0;
-            width: 100%;
-            position: relative;
-        }
-
         &-body {
             margin-top: 32px;
 
@@ -57,16 +50,17 @@
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
+                margin-bottom: 8px;
 
                 .assessment-heading {
-                    color: #58595B;
+                    color: $darkColor;
                     font-family: $headingFont;
                     font-size: 24px;
                     font-weight: bold;
                 }
 
                 .assessment-estimation {
-                    color: #58595B;
+                    color: $darkColor;
                     font-family: $bodyFont;
                     font-size: 14px;
 
@@ -77,6 +71,185 @@
                     }
                 }
             }
+
+
+            &-description {
+                color: $darkColor;
+                font-family: $bodyFont;
+                font-size: 18px;
+            }
+
+
+            &-question-wrapper {
+                margin-top: 32px;
+                position: relative;
+
+
+                .question {
+
+                    &-title, &-completed, &-tag {
+                        color: $darkColor;
+                        font-family: $bodyFont;
+                        font-size: 18px;
+                    }
+
+                    &-title {
+                        margin-bottom: 32px;
+                    }
+
+                    &-tag {
+                        color: $white;
+                        text-align: center;
+                        font-weight: 600;
+                        background: $primaryColor;
+                        padding: 12px;
+                        margin-bottom: 56px;
+                    }
+
+                    &-completed {
+                        position: absolute;
+                        right: 24px;
+                        top: 24px;
+                    }
+                }
+
+                .answer-wrapper {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+
+                    span {
+                        color: $darkColor;
+                        font-family: $bodyFont;
+                        font-size: 18px;
+                    }
+
+                    .answer-options {
+                        display: flex;
+                        align-items: center;
+
+                        .option-value {
+                            width: 40px;
+                            height: 40px;
+                            border: 1px solid $primaryColor;
+                            border-radius: 3px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: center;
+                            transition: .3s;
+                            font-weight: 600;
+                            color: $darkColor;
+                            cursor: pointer;
+
+                            &:not(:last-child) {
+                                margin-right: 23px;
+                            }
+
+                            &:hover, &.selected {
+                                background: $primaryColor;
+                                color: $white;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+
+
+
+@media only screen and (max-width: 600px) {
+
+    .header-actions {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 12px;
+        width: 100%;
+    }
+
+
+    .assessment-body {
+        margin-top: 16px !important;
+
+        &-header {
+            padding: 0 4px;
+            margin-bottom: 16px !important;
+
+            .assessment-heading {
+                white-space: nowrap;
+            }
+
+            .assessment-estimation {
+                margin-left: 32px;
+                text-align: center;
+                position: relative;
+
+                .fa {
+                    position: absolute;
+                    left: -16px;
+                }
+            }
         }
+
+        &-description {
+            text-align: center;
         }
+
+
+        &-question-wrapper {
+            margin-top: 24px !important;
+
+            .question-title {
+                margin-bottom: 16px !important;
+                width: 80% !important;
+            }
+
+            .question-completed {
+                position: absolute;
+                right: 0 !important;
+                top: 6px !important;
+                font-weight: bold;
+            }
+
+            .question-tag {
+                margin-bottom: 24px !important;
+            }
+
+            .answer-wrapper {
+                position: relative;
+
+                .extreme-label-right, .extreme-label-left {
+                    font-size: 12px !important;
+                    font-family: $bodyFont;
+                    position: absolute;
+                    bottom: -24px;
+                }
+
+                .extreme-label-right {
+                    right: 0;
+                }
+
+                .extreme-label-left {
+                    left: 0;
+                }
+
+                .answer-options {
+                    justify-content: space-between;
+                    width: 100%;
+
+                    .option-value {
+                        width: unset;
+                        height: unset;
+                        border: none !important;
+                        margin: 0 !important;
+                    }
+                }
+            }
+        }
+    }
+
 }

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

 import { Component, OnInit } from '@angular/core';
+import { BaseComponent } from '../../base/base.component';
 
 @Component({
   selector: 'app-work-style',
   templateUrl: './work-style.component.html',
   styleUrls: ['./work-style.component.scss']
 })
-export class WorkStyleComponent implements OnInit {
+export class WorkStyleComponent extends BaseComponent implements OnInit {
 
-  constructor() { }
+  constructor() {
+      super();
+  }
 
   ngOnInit() {
   }

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

@@ -15,6 +15,7 @@ import { InputSwitchModule } from 'primeng/inputswitch';
 import { ButtonModule } from 'primeng/button';
 import { GooglePlacesAutocompleteDirective } from './google-places-autocomplete.directive';
 import { InputMaskModule } from 'primeng/inputmask';
+import { ProgressBarModule } from 'primeng/progressbar';
 
 const MODULES = [
     ReactiveFormsModule,
@@ -26,7 +27,8 @@ const MODULES = [
     ToastModule,
     InputSwitchModule,
     ButtonModule,
-    InputMaskModule
+    InputMaskModule,
+    ProgressBarModule
 ];
 
 const COMPONENTS = [

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

 .mc-nav-link {
-    color: #12A8DE;
+    color: $primaryColor;
     border-bottom: 1px solid transparent;
     transition: .3s;
     cursor: pointer;
 
     &:hover {
-        border-bottom-color: #12A8DE;
+        border-bottom-color: $primaryColor;
     }
 }
 
 
 .mc-page-header {
-    background: #58595B;
+    background: $darkColor;
     padding: 3% 8%;
     position: relative;
-    color: #FFFFFF;
+    color: $white;
     font-family: $headingFont;
     font-size: 24px;
     font-weight: bold;
 }
+
+
+.mc-card {
+    padding: 24px;
+    background: $white;
+    border-radius: 4px;
+    box-shadow: 0 0 20px 0 rgba(128,130,133,0.13);
+}
+
+
+@media only screen and (max-width: 600px) {
+
+    .mc-card {
+        padding: 2px;
+        background: transparent !important;
+        border-radius: 0;
+        box-shadow: none;
+    }
+}

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

@@ -16,5 +16,6 @@
     @import "primeng/switch";
     @import "primeng/button";
     @import "primeng/mask";
+    @import "primeng/progressbar";
 
 }

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

 $headingFont: 'Montserrat', sans-serif;
 $bodyFont: 'Catamaran', sans-serif;
 
+$white: #FFFFFF;
 $primaryColor: #12A8DE;
+$darkColor: #58595B;

frontend/angular/src/styles/my-career-styles/primeng/_progressbar.scss

+p-progressBar {
+    .ui-progressbar {
+        height: 8px;
+        background-color: #E0E0E0 !important;
+        border-radius: 0;
+
+        &-value {
+            border-radius: 0;
+            background: linear-gradient(90deg, #12A8DE 0%, #1469A2 100%);
+        }
+    }
+}