Update: display padlock for locked items (fixes #209) (#210)

adaptlearning · Mar 21, 2024 · cee2782 · cee2782
1 parent 3575a4e
commit cee2782
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/less/pageLevelProgress.less b/less/pageLevelProgress.less
@@ -14,15 +14,27 @@
   &__item-btn {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
   }
 
   &__item-title {
     width: 75%;
   }
 
   &__indicator {
-    margin: 0 calc(~'12.5% - 1rem');
+    margin-inline-start: calc(~'25% - 1rem');
+  }
+
+  &__item-btn:not(.is-locked) .pagelevelprogress__item-icon {
+    display: none;
+  }
+
+  &__item-btn.is-locked .pagelevelprogress__item-icon .icon {
+    .icon-padlock-locked;
+  }
+
+  &__item-btn.is-locked .pagelevelprogress__indicator {
+    display: none;
   }
 
   &__item-optional {

diff --git a/templates/pageLevelProgressItem.jsx b/templates/pageLevelProgressItem.jsx
@@ -72,6 +72,10 @@ export default function PageLevelProgressItem(props) {
         </span>
         }
 
+        <span className='pagelevelprogress__item-icon'>
+          <span className='icon' aria-hidden="true"></span>
+        </span>
+
       </button>
       <div className='pagelevelprogress__item-children'>
         <div role="list" className="js-children">