src/CoreBundle/Resources/views/Macros/box.html.twig
{% macro collapse(name, title, content, list = false, expanded = 'true', title_right = '', title_icons = '') %}
{% autoescape false %}
<div class="panel-group" id="{{ name }}" role="tablist" aria-multiselectable="true">
<div class="panel panel-default" id="{{ name }}_block">
<div class="panel-heading" role="tab">
{% if title_icons %}
{{ title_icons }}
{% endif %}
<h4 class="panel-title">
<a role="button"
data-toggle="collapse"
data-parent="#{{ name }}"
href="#{{ name }}Collapse"
aria-expanded="{{ expanded }}"
aria-controls="{{ name }}Collapse">
{{ title }}
</a>
</h4>
{% if title_right %}
<div class="pull-right">
{{ title_right }}
</div>
{% endif %}
</div>
<div
aria-expanded="{{ expanded }}"
id="{{ name }}Collapse"
class="panel-collapse collapse {{ expanded == 'true' ? 'in' : '' }}"
role="tabpanel">
<div class="panel-body">
{% if list %}
<ul class="nav nav-pills nav-stacked">
{{ content }}
</ul>
{% else %}
{{ content }}
{% endif %}
</div>
</div>
</div>
</div>
{% endautoescape %}
{% endmacro %}
{% macro panel(header, content, title, footer, subtitle, top_image) %}
{% autoescape false %}
<div class="card">
{% if header %}
<div class="text-h6 p-4 flex flex-row justify-between"> {{ header }} </div>
{% endif %}
{% if top_image %}
{{ top_image }}
{% endif %}
<div class="p-4">
{% if title %}
<h5 class="card-title">{{ title }}</h5>
{% endif %}
{% if subtitle %}
<h5 class="card-subtitle mb-2 text-muted">{{ subtitle }}</h5>
{% endif %}
{{ content }}
</div>
{% if footer %}
<div class="card-footer">
{{ footer }}
</div>
{% endif %}
</div>
{% endautoescape %}
{% endmacro %}
{% macro avatar(image, size) %}
<div class="q-avatar" style="font-size: {{ size }}px;">
<div class="q-avatar__content row flex-center overflow-hidden">
{{ image }}
</div>
</div>
{% endmacro %}
{% macro box_widget(name, content, icon) %}
<div class="card">
<div class="card-body">
<div class="stat-widget-five">
<i class="fa fa-{{ icon }}" aria-hidden="true"></i>
{{ content }}
<div class="box-name">
{{ name }}
</div>
</div>
</div>
</div>
{% endmacro %}
{% macro card_widget(name, content, icon, extra) %}
{% autoescape false %}
<div class="card card-first-date">
<div class="card-body">
<div class="stat-widget-five">
<div class="stat-icon">
<i class="fa fa-{{ icon }}" aria-hidden="true"></i>
{% if extra %}
<span class="active-icon">{{ extra }}</span>
{% endif %}
</div>
<div class="stat-content">
<div class="text-left">
<div class="stat-heading">
{{ name }}
</div>
<div class="stat-text">
{{ content }}
</div>
</div>
</div>
</div>
</div>
</div>
{% endautoescape %}
{% endmacro %}
{% macro reporting_user_details(user) %}
{% autoescape false %}
<div class="parameters mt-4 mb-4">
<dl class="dl-horizontal mb-4">
{% if user.status %}
<div class="flex mb-2">
<dt class="w-1/3 font-semibold">{{ 'Status'|trans }}</dt>
<dd class="w-2/3">
{% if user.status == 1 %}
{{ 'Trainer' | trans }}
{% else %}
{{ 'Learner' | trans }}
{% endif %}
</dd>
</div>
{% endif %}
<div class="flex mb-2">
<dt class="w-1/3 font-semibold">{{ 'Official code'|trans }}</dt>
<dd class="w-2/3">
{% if user.officialCode is defined %}
{{ user.officialCode }}
{% else %}
{{ 'No official code'|trans }}
{% endif %}
</dd>
</div>
<div class="flex mb-2">
<dt class="w-1/3 font-semibold">{{ 'Online'|trans }}</dt>
<dd class="w-2/3">
{# {{ user.user_is_online }}#}
{# {{ user.online }}#}
</dd>
</div>
<div class="flex mb-2">
<dt class="w-1/3 font-semibold">{{ 'Tel'|trans }}</dt>
<dd class="w-2/3">{{ user.phone == '' ? 'No tel'|trans : user.phone }}</dd>
</div>
{% if user.timezone is defined %}
<div class="flex mb-2">
<dt class="w-1/3 font-semibold">{{ 'Timezone'|trans }}</dt>
<dd class="w-2/3">{{ user.timezone }}</dd>
</div>
{% endif %}
{% if user.legal is defined %}
<div class="flex mb-2">
<dt class="w-1/3 font-semibold">{{ 'Legal'|trans }}</dt>
<dd class="w-2/3">{{ user.legal.url_send }}</dd>
</div>
{% endif %}
</dl>
</div>
{% endautoescape %}
{% endmacro %}
{% macro reporting_user_box(user) %}
{% autoescape false %}
{% import _self as display %}
<div class="user">
<div class="avatar">
<img width="128px" src="{{ user | illustration }}" class="img-responsive">
</div>
<div class="name">
<h3>
{% if user.complete_name_link is defined %}
{{ user.complete_name_link }}
{% else %}
{{ user | user_complete_name }}
{% endif %}
</h3>
<p class="email">{{ user.email }}</p>
</div>
{{ display.reporting_user_details(user) }}
</div>
{% endautoescape %}
{% endmacro %}
{% macro customCollapse(name, title, content, list = false, expanded = 'true', title_right = '', title_icons = '') %}
{% autoescape false %}
<style>
.custom-panel-heading {
cursor: pointer;
}
.custom-panel-collapse {
display: none;
}
.custom-panel-collapse.expanded {
display: block;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
window.customToggleCollapse = function (elementId) {
var content = document.getElementById(elementId);
if (content.classList.contains('expanded')) {
content.classList.remove('expanded');
content.setAttribute('aria-expanded', 'false');
} else {
content.classList.add('expanded');
content.setAttribute('aria-expanded', 'true');
}
}
var initiallyExpanded = document.querySelectorAll('.custom-panel-collapse[aria-expanded="true"]');
initiallyExpanded.forEach(function (element) {
element.classList.add('expanded');
});
});
</script>
<div class="custom-panel-group" id="{{ name }}" role="tablist" aria-multiselectable="true">
<div class="custom-panel panel-default" id="{{ name }}_block">
<div class="custom-panel-heading" role="tab" onclick="customToggleCollapse('{{ name }}Collapse')">
{% if title_icons %}
{{ title_icons }}
{% endif %}
<h4 class="custom-panel-title">
<span>
{{ title }}
</span>
</h4>
{% if title_right %}
<div class="pull-right">
{{ title_right }}
</div>
{% endif %}
</div>
<div id="{{ name }}Collapse" class="custom-panel-collapse {{ expanded == 'true' ? 'expanded' : '' }}" role="tabpanel" aria-expanded="{{ expanded }}">
<div class="custom-panel-body">
{% if list %}
<ul class="nav nav-pills nav-stacked">
{{ content }}
</ul>
{% else %}
{{ content }}
{% endif %}
</div>
</div>
</div>
</div>
{% endautoescape %}
{% endmacro %}