WIP

src/iss-components/site-header/progress-bar/progress-bar.vue

@@ -1,113 +1,103 @@
 <template>
-    <div id="progress-bar-container">
+    <div
+        v-if="progress > 0"
+        class="progress-bar-container">
+        <div class="progress-bar-header">
+            <span aria-hidden="true">{{ progress }}%</span>
+        </div>
         <progress
-            v-if="progress > 0"
+            class="progress-bar progress-bar-success"
             :value="progress"
             max="100"
-            v-html="progress + '%' " />
+            aria-label="Scheduling progress">
+                <div class="progress-bar-middle"></div>
+        </progress>
     </div>
 </template>
 
 <script>
 import { getProgressBarPercentage } from '@/constants/progress-bar-mapper';
-
-// Module-level variable to persist progress across component lifecycles
-let lastProgress = 0;
+import { useMainStore } from '@/store';
 
 export default {
     name: 'progress-bar',
-    props: {
-        page: {
-            type: String,
-            required: true
-        },
-        vertical: {
-            type: Boolean,
-            default: false
-        }
-    },
     data() {
         return {
-            displayedProgress: lastProgress,
-            timeoutId: null
+            progress: this.getProgress()
         };
     },
-    computed: {
-        progressStyle() {
-            if (this.vertical) {
-                return {
-                    height: `${this.displayedProgress}%`,
-                    width: '100%'
-                };
-            }
-            return {
-                width: `${this.displayedProgress}%`,
-                height: '100%'
-            };
-        },
-        barClass() {
-            return this.vertical ? 'progress-bar-outer-vertical' : 'progress-bar-outer';
+    methods: {
+        getProgress() {
+            const pageName = useMainStore().applicationUser.lastPageVisited;
+            return getProgressBarPercentage(pageName);
         }
-    },
-    watch: {
-        page: {
-            immediate: true,
-            handler(newPage) {
-                const target = getProgressBarPercentage(newPage);
-                if (this.timeoutId) clearTimeout(this.timeoutId);
-
-                // Animate from current value to new value
-                this.timeoutId = setTimeout(() => {
-                    this.displayedProgress = target;
-                    lastProgress = target; // Update the module-level variable
-                }, 150);
-            }
-        }
-    },
-    beforeUnmount() {
-        if (this.timeoutId) clearTimeout(this.timeoutId);
     }
 };
 </script>
 <style lang="scss">
-.progress-bar-outer {
-    background: $blue-100;
-    height: 5px;
-    position: relative;
-    border-radius: 0;
-    width: 100%;
-    margin-top: 0;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
-    .progress-bar-inner {
-        transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
-        will-change: width;
-        height: 100%;
-        background-color: $red;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border-radius: 0;
-    }
-}
+    .progress-bar-container {
+        padding: .75rem 0;
+        width: 55%;
+        display: block;
 
-.progress-bar-outer-vertical {
-    background: $blue-100;
-    width: 24px;
-    height: 356px;
-    position: relative;
-    margin-top: 0;
-    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
-    overflow: hidden;
-    border-radius: 50rem;
-    .progress-bar-inner {
-        transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
-        will-change: height !important;
-        width: 100%;
-        background-color: $red;
-        position: absolute;
-        left: 0;
-        top: 0;
-        border-radius: 50rem;
+        .progress-bar-header {
+            width: 38px;
+            height: 15px;
+            float: left;
+            padding-right: 5px;
+            // color: @color-progress-bar;
+            // font-weight: @font-weight-bold;
+            font-style: normal;
+            font-stretch: normal;
+            font-size: 14px;
+            line-height: 15px;
+            text-align: right;
+        }
+
+        .progress {
+            height: 10px;
+            width: 100%;
+            box-shadow: none;
+            border-top-left-radius: 7.5px;
+            border-bottom-left-radius: 7.5px;
+            line-height: inherit;
+
+            /* Firefox */
+            appearance: none;
+            background-color: $blue-100;
+            border: 0;
+            border-radius: $border-radius-pill;
+            box-shadow: $box-shadow-inset;
+
+            &::-moz-progress-bar {
+                background-color: $blue;
+                border-radius: $border-radius-pill;
+            }
+
+            /* Webkit */
+            -webkit-appearance: none;
+            &::-webkit-progress-bar {
+                background-color: $blue-100;
+                border-radius: $border-radius-pill;
+                box-shadow: $box-shadow-inset;
+            }
+            &::-webkit-progress-value {
+                background-color: $blue;
+                border-radius: $border-radius-pill;
+            }
+        }
+
+        .progress-bar-middle {
+            position: relative;
+            float: right;
+            margin-right: -8.5px;
+            width: 17px;
+            height: 17px;
+            margin-top: -1px;
+            border: solid 2px; //@progress-bar-outer-color;
+            border-radius: 50%;
+            //background-color: @color-progress-bar;
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+        }
     }
-}
 </style>

src/iss-components/site-header/site-header.vue

@@ -2,12 +2,17 @@
     <div
         class="site-header-container"
         :style="logoBackgroundStyle">
-        <div class="site-header iss-heritage-container-width">
-            <img
-                id="siteHeaderImage"
-                class="img-fluid"
-                :src="imageSrc"
-                :alt="altText" />
+        <div class="site-header iss-heritage-container-width row">
+            <div class="col">
+                <img
+                    id="siteHeaderImage"
+                    class="img-fluid"
+                    :src="imageSrc"
+                    :alt="altText" />
+            </div>
+            <div class="col">
+                <progress-bar />
+            </div>
         </div>
         <alert
             v-if="displayGlobalAlert"
@@ -25,11 +30,12 @@ import alert from '@/ux-components/alert/alert.vue';
 import { useMainStore } from '@/store';
 import eventBus from '@/helpers/event-bus/event-bus';
 import { globalEvents } from '@/constants/events';
+import progressBar from '@/iss-components/site-header/progress-bar/progress-bar.vue';
 
 export default {
     name: 'site-header',
     components: {
-        alert
+        alert, progressBar
     },
     props: {
         cmsWidgetName: String