skillset_inview-8.x-1.x-dev/templates/skillset-inview-meter.html.twig

{#
/**
 * @file
 * Javascript & CSS behaviour expects the following classes and relative nesting.
 *
 * CLASS LIST:
 *   skillset-inview-wrapper
 *   percent
 *   inside
 *   outside
 *   skill-line
 *   skill-bar
 *   skill-row
 * END OF LIST.
 *
 *
 * Otherwise, Bootstrap Grids based classes and html should be
 * able to bechanged per your need.
 *
 * 'data-percent' and 'data-item' attributes are required
 * for javascript as well as the class 'item-[count]' from
 * the skill.id variable.
 *
 * Twig Translation refer to:
 *   https://www.drupal.org/node/1927584
 *     Add support for the Twig {% trans %} tag extension
 *   https://www.drupal.org/node/2357633
 *     Filters-Modifying Variables In Twig Templates
 *
 * Available variables in this template:
 * - items:  (group)  Containing skills for each skillset row.
 *            Is pre-sorted by weight.
 *              (int) skill.id -- used as item-count in behaviour
 *              (int) skill.weight  -- natural sort weight
 *              (string) skill.name
 *              (int) skill.percent
 */
#}
<section>
  <div class="row">
    <div class="col col-xs-9 col-xs-push-1 col-sm-10 col-sm-push-1 skillset-inview-wrapper">
{% if color_active==1 %}
{% set bar = color.bar|hexToRGB ~ ',' ~ color.bar_opacity|rangeToPercent %}
{% set skillbar = '.skill-bar {background: rgba(' ~ bar ~') !important;} ' %}
{% set back = color.back|hexToRGB ~ ',' ~ color.back_opacity|rangeToPercent %}
{% set skillline = '.skill-line {background: rgba(' ~ back ~') !important; border: 1px solid ' ~ color.border ~ ' !important;} ' %}
{% set labels = '.skill-label {color: ' ~ color.labels ~ ' !important;} ' %}
{% set percent_inside = '.skill-line .percent.inside {color: ' ~ color.percent_inside ~ ' !important;} ' %}
{% set percent_outside = '.skill-line .percent.outside {color: ' ~ color.percent_outside ~ ' !important;} ' %}
{% set style = '
<style type="text/css" scoped>
' ~ skillbar ~ '
' ~ skillline ~ '
' ~ labels ~ '
' ~ percent_inside ~ '
' ~ percent_outside ~ '
' ~ '</style>' %}
{{ style|raw }}
{% endif %}
      <dl>
{% if items is not empty %}
{% for key,skill in items %}
{% set id = 'skill-lin-' ~  skill.id|clean_unique_id %}
        <dd class="skill-row row" data-item="{{ skill.id }}">
          <label id="{{ id }}" class="col col-3">{{ '@skill'|t({ '@skill': skill.name })|unescape }}</label>
          <meter class="col col-9" for="{{ id }}" value="{{ skill.percent / 100}}" class="skill-bar">{{ percent|raw }}</meter>
        </dd>
{% endfor %}
{% endif %}
      </dl>
    </div>
  </div>
</section>