[NFDIV-4331] Add mobile styles for hub progress bar

src/main/assets/scss/main.scss

@@ -13,6 +13,7 @@
 @import './webchat';
 @import './review-pages';
 @import './timeout-modal';
+@import './progress-bar';
 
 .hmcts-button-link,
 .uppy-FileInput-btn {
@@ -45,55 +46,6 @@ section {
   color: govuk-colour('red');
 }
 
-.hmcts-progress-bar__icon {
-  position: relative;
-  background-color: govuk-colour('white');
-  border: 4px solid govuk-colour('mid-grey');
-  border-radius: 50%;
-  box-sizing: border-box;
-  display: block;
-  height: 44px;
-  margin-left: auto;
-  margin-right: auto;
-  width: 44px; }
-
-.hmcts-progress-bar__icon--complete {
-  background-color: govuk-colour('blue');
-  border: 4px solid govuk-colour('blue');
-  background-image: url(/hmcts-assets/images/icon-progress-tick.svg);
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: 23px;
-}
-
-.hmcts-progress-bar__list {
-  font-size: 0;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  position: relative;
-  text-align: justify;
-  vertical-align: top; }
-
-.hmcts-progress-bar__list::after {
-  content: "";
-  display: inline-block;
-  width: 100%; }
-
-.hmcts-progress-bar__list::before {
-  border-top: 4px solid govuk-colour('mid-grey');
-  content: "";
-  left: 30px;
-  position: absolute;
-  top: 20px;
-  bottom: 0;
-  width: 90%; }
-
-.hmcts-progress-bar__icon--active {
-  background-color: govuk-colour('blue');
-  border: 4px solid govuk-colour('blue');
-  font-weight: 700; }
-
 .govuk-panel--confirmation {
   background-color: #00703C; }
 

src/main/assets/scss/progress-bar.scss

@@ -0,0 +1,150 @@
+.hmcts-progress-bar-vertical {
+  margin: 40px 0;
+}
+
+.hmcts-progress-bar__icon {
+  position: relative;
+  background-color: govuk-colour('white');
+  border: 4px solid govuk-colour('mid-grey');
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: block;
+  height: 44px;
+  margin-bottom: auto auto govuk-spacing(7);
+  width: 44px;
+
+  &--complete {
+    background-color: govuk-colour('blue');
+    border: 4px solid govuk-colour('blue');
+    background-image: url('/hmcts-assets/images/icon-progress-tick.svg');
+    background-position: 50% 50%;
+    background-repeat: no-repeat;
+    background-size: 23px;
+
+    @include govuk-if-ie8 {
+      background-image: url(#{$hmcts-images-path}icon-progress-tick.png);
+    }
+  }
+
+  &--active {
+    background-color: govuk-colour('blue');
+    border: 4px solid govuk-colour('blue');
+    font-weight: 700;
+  }
+}
+
+.hmcts-progress-bar__label {
+  @include govuk-font(16);
+  word-wrap: normal;
+  display: block;
+  font-weight: inherit;
+  margin-top: 10px;
+  position: relative;
+}
+
+.hmcts-progress-bar__list {
+  font-size: 0;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  text-align: justify;
+  vertical-align: top;
+
+  @include govuk-if-ie8 {
+    display: table;
+    table-layout: fixed;
+    width: 100%;
+  }
+
+  &::after {
+    content: "";
+    display: inline-block;
+    width: 100%;
+  }
+
+  &::before {
+    border-top: 4px solid govuk-colour('mid-grey');
+    content: "";
+    left: 30px;
+    position: absolute;
+    top: 20px;
+    bottom: 0;
+    width: 90%;
+  }
+}
+
+.hmcts-progress-bar__list-item {
+  @include govuk-font(19);
+  display: inline-block;
+  max-width: 20%;
+  position: relative;
+  text-align: center;
+  vertical-align: top;
+  width:100px;
+
+  // IE8 does not support the text justify approach for spacing
+  @include govuk-if-ie8 {
+    display: table-cell;
+  }
+
+  &:first-child, &:last-child {
+    &::before {
+      border-top: 6px solid govuk-colour("white");
+      content: "";
+      position: absolute;
+      top: 13px; left: 0;
+      width: 50%;
+    }
+  }
+
+  &:first-child::before {
+    left: 0;
+  }
+
+  &:last-child::before {
+    left: auto;
+    right: 0;
+  }
+}
+
+@media screen and (max-width: map-get($govuk-breakpoints, desktop)) {
+  .hmcts-progress-bar-vertical {
+    margin: 21px 0;
+
+    .hmcts-progress-bar {
+      &__list-item {
+        max-width:45px; display:block; margin-top: 10px;
+        margin-top: 19px;
+      }
+
+      &__icon {
+        height: 37px;
+        width: 37px;
+
+        &--complete {
+          background-size: 19px;
+        }
+      }
+
+      &__list::before {
+        border-top:none;
+        position:absolute;
+        top: 0px;
+        border-left: 6px solid govuk-colour('mid-grey');
+        height: 100%;
+        position:absolute;
+        left:20px;
+        top:0;
+      }
+
+      &__label {
+        margin-top:-29px;
+        margin-left:50px;
+        width:350px;
+        text-align:left;
+        font-size: 1.1rem;
+      }
+    }
+  }
+}

src/main/steps/applicant1/hub-page/template.njk

@@ -14,7 +14,6 @@
       </div>
 
       <hr class="govuk-section-break govuk-section-break--l govuk-section-break--additional">
-      <div class="govuk-!-padding-bottom-8"></div>
 
       {% include "../../common/progress-bar.njk" %}
 

src/main/steps/common/hmcts-progress-bar/template.njk

@@ -1,4 +1,4 @@
-<div class="hmcts-progress-bar {{- ' ' + params.classes if params.classes}}">
+<div class="hmcts-progress-bar-vertical {{- ' ' + params.classes if params.classes}}">
   <ol class="hmcts-progress-bar__list">
     {% for item in params.items %}
     <li class="hmcts-progress-bar__list-item" {{ 'aria-current="step"' | safe if item.active }}>