pcp-template.html.twig in Profile Complete Percent 8

Default theme implementation for PCP block

Available variables:

• uid: Current user ID.
• total: Total number of fields in profile.
• completed: How many fields the user has filled.
• incomplete: The inverse of $completed, how many empty fields left.
• next_percent: The percent if the user filled the next field.
• nextfield_name: The name of the suggested next field to fill (machine name).
• nextfield_title: The name of the suggested next field to fill (human readable name).
• current_percent: From 0 to 100% of how much the profile is complete.

1 theme call to pcp-template.html.twig

PCPBlock::build in src/Plugin/Block/PCPBlock.php

Builds and returns the renderable array for this block plugin.

File

templates/pcp-template.html.twig

{#
/**
 * @file
 * Default theme implementation for PCP block
 *
 * Available variables:
 * - uid: Current user ID.
 * - total: Total number of fields in profile.
 * - completed: How many fields the user has filled.
 * - incomplete: The inverse of $completed, how many empty fields left.
 * - next_percent: The percent if the user filled the next field.
 * - nextfield_name: The name of the suggested next field to fill (machine name).
 * - nextfield_title: The name of the suggested next field to fill (human readable name).
 * - current_percent: From 0 to 100% of how much the profile is complete.
 *
 */
#}
{% spaceless %}
<style type="text/css">
  .pcp-percent-bar { width: 0{{ current_percent }}%; }
</style>

<div class="pcp-wrapper pcp-user">
  {% trans %}
	<span class="profile-completed"> {{ current_percent }}% Complete</span>
  {% endtrans %}
	<div class="pcp-percent-bar-wrapper">
    <div class="pcp-percent-bar user-user"></div>
	</div>
  <div class="pcp-next-field">
  {% if nextfield_title %}
  {% trans %}
    Filling out <em><a href="/user/{{ uid }}/edit#edit-{{ nextfield_name }}-wrapper" target={{ open_link }} >{{ nextfield_title }}</a></em> will bring your profile to {{ next_percent }}% complete
  {% endtrans %}
  {% endif %}
  </div>
</div>
{% endspaceless %}