skillset_inview-8.x-1.x-dev/templates/skillset-inview-dl.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
 */
#}

    <div class="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 class="container">
{% if items is not empty %}
{% for key,skill in items %}
          <div class="skill-row row" data-item="{{ skill.id }}">
            <dt class="col col-xs-12 col-sm-12 col-md-4 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="col 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>