skillset_inview-8.x-1.x-dev/templates/skillset-inview.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:
 * - header:  (string) Section Header.
 * - 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="container">
    <div class="row">
      <div class="column 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 %}
{% if header is not empty %}        <h3 class="skill-label">{{ '@header'|t({ '@header': header })|unescape }}</h3>{% endif %}
        <dl>
{% if items is not empty %}
{% for key,skill in items %}
            <div class="skill-row row" data-item="{{ skill.id }}">
              <dt class="column col-xs-12 col-sm-12 col-md-3 skill-label">{{ '@skill'|t({ '@skill': skill.name })|unescape }}</dt>
{% set skill_position = ((skill.percent >= 25) ? 'inside' : 'outside')  %}
{% set percent = '<span class="percent ' ~ skill_position ~ '">' ~ skill.percent ~ '%</span>' %}
              <dd class="column col-xs-12 col-sm-12 col-md-8 item-{{ skill.id }} skill-line"><span data-percent="{{ skill.percent }}" style="width:{{ skill.percent }}%;" class="skill-bar">{% if skill.percent >= 25 %}{{ percent|raw }}{% endif %}</span>{% if skill.percent < 25 %}{{ percent|raw }}{% endif %}</dd>
            </div>
{% endfor %}
{% endif %}
        </dl>
      </div>
    </div>
  </div>
</section>