Skills module doesn't respect selected styles.

[RogerAntonio]

The selected styles don't get printed as classes.
Therefore it becomes difficult to apply styling to it.
The image below has 3 skills each with a different style selected.

The module also doesn't include default CSS which can make it seem broken.
Could bootstrap classes get implemented by default so they at least look good straight out of the box?

[peter-mw]

Hi, we will fix them, the module is in this repo https://github.com/microweber-modules/skills

Seems the CSS disappeared

[RogerAntonio]

Found out, that it's just "print" which is missing for the styles.
<?php print $skill['style'] ?>

[RogerAntonio]

I rewrote a bit of the module to overwrite in my template.
Feel free to use/alter this code.

This uses Bootstrap 5.

Also, I used another Script for the animating of the progress bar because the original one had issues where it would bounce instead of animate and stop.

My default.php

<?php

/*

type: layout

name: Default

description: Default

*/
?>
<div class="skills">
  <script>
    $(document).ready(function() {
      var isInViewport = function(elem) {
        var distance = elem.getBoundingClientRect();
        return (
          distance.top >= 0 &&
          distance.left >= 0 &&
          distance.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
          distance.right <= (window.innerWidth || document.documentElement.clientWidth)
        );
      };
      var findMe = document.querySelectorAll('.progress');

      // add event on scroll
      window.addEventListener('scroll', function(event) {
        findMe.forEach(element => {
          //if in Viewport
          if (isInViewport(element)) {
            element.classList.remove("initial-progress");
          }
        });
      }, false);
    });
  </script>
  <?php

  $file = get_option('file', $params['id']);
  if (!!$file) {
    $skills = json_decode($file, true);

    foreach ($skills as $skill) { ?>
      <div class="progress-header d-flex align-items-center">
        <h6>
          <?php print $skill['skill']; ?>
        </h6>
        <div class="ms-auto count"><?php print $skill['percent'] . "%"; ?></div>
      </div>
      <div class="progress initial-progress" data-percent="<?php print isset($skill['percent']) ? $skill['percent'] : 50; ?>%">
        <div class="progress-bar count-bar bg-<?php print $skill['style'] ?>" style="width: <?php print $skill['percent'] . "%"; ?>" aria-valuenow="<?php print $skill['percent']; ?>" aria-valuemin="0" aria-valuemax="100">
          <div class="count"><?php print $skill['percent'] . "%"; ?></div>
        </div>
      </div>
  <?php }
  } else {
    print lnotif('Click to insert skills');
  }
  ?>
</div>

My SCSS:

/* Skills */
.progress {
  border-radius: var(--ui-border-radius);
  .progress-bar {
    @include transition(width);
    transition-duration: 1s;
    &.bg-,
    &.bg-primary {
      background-color: rgba(var(--primary-color), 1);
    }
    &.bg-secondary {
      background-color: rgba(var(--secondary-color), 1);
    }
    &.bg-tertiary {
      background-color: rgba(var(--tertiary-color), 1);
    }
    &.bg-dark {
      background-color: $bgcolor-black;
    }
    &.bg-light {
      background-color: $bgcolor-light;
    }
  }
  &.initial-progress .progress-bar {
    width: 0% !important;
  }
}
.progress-header > * {
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

[peter-mw]

Here are also other examples https://www.bestjquery.com/lab/progress-bar/

[RogerAntonio]

Here are also other examples https://www.bestjquery.com/lab/progress-bar/

We could implement those if the module were updated to allow for skin changes (for the entire module, not per progress bar)