mirror of
https://github.com/torproject/community.git
synced 2024-11-26 19:20:25 +00:00
135 lines
7.3 KiB
Django/Jinja
135 lines
7.3 KiB
Django/Jinja
{# resource list widget for the community training page #}
|
|
|
|
{#
|
|
Args:
|
|
resource_dict: a dictionary mapping a resource name to a resource
|
|
visible_resource_list: resources will be rendered (but not displayed) unless the resource's key is in this list
|
|
this: `this`
|
|
training_guide_this: the `this` to use for resolving training guides. defaults to `this`
|
|
#}
|
|
{% macro resource_list(resource_dict, visible_resource_list, this, training_guide_this) %}
|
|
{% set training_guide_this = training_guide_this or this %}
|
|
{% include 'resource_filter.jinja2' %}
|
|
<div id="resource-list">
|
|
{% if not resource_dict %}
|
|
{# TODO: change this placeholder text #}
|
|
<h1>We couldn't find any resources that fit those criteria :(</h1>
|
|
{% endif %}
|
|
{% for resource_name, resource in resource_dict.items() %}
|
|
<div
|
|
class="border container-fluid p-3 px-0 my-3 resource-list-entry {% if resource_name not in visible_resource_list %}d-none{% endif %}"
|
|
data-topics=":{% for topic in resource['topics']%}{{ slugify(topic) }}:{% endfor %}"
|
|
data-langs=":{% for lang in resource['languages']%}{{ lang }}:{% endfor %}"
|
|
data-author="{{ slugify(resource['author']) }}"
|
|
>
|
|
{# couldn't get the desktop and mobile layouts to coexist, so each card has two layouts at different breakpoints #}
|
|
{# this is the desktop layout, at `large` breakpoint #}
|
|
<div class="row d-none d-lg-flex">
|
|
<a href="{{ resource['link'] }}" class="d-block col-sm-3">
|
|
<img src="{{ resource['cover']|url }}" class="img-fluid" alt="{{ resource['name'] }}">
|
|
</a>
|
|
<div class="col-sm pl-lg-1">
|
|
<div class="row">
|
|
<div class="col-sm row">
|
|
<h3 class="col-sm card-title font-weight-600 m-0 pr-0" style="max-width: fit-content">{{ resource['name'] }}</h3>
|
|
<div class="row gap-10px pl-3 m-0">
|
|
<div class="dropdown">
|
|
<a href="{{ resource['link'] }}" title="{{ resource['name'] }}" class="btn btn-md btn-primary font-weight-600 dropdown-rounded {% if resource['formats'] %}dropdown-toggle{% endif %}" type="button" id="resource-view-{{ resource_name }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{ _('View') }}
|
|
</a>
|
|
{% if resource['formats'] %}
|
|
<div class="dropdown-menu pl-2" aria-labelledby="resource-view-{{ resource_name }}">
|
|
<a href="{{ resource['link'] }}" title="{{ resource['name'] }}" class="d-block">
|
|
{{ _('View') }}
|
|
</a>
|
|
{% for format_name, format_link in resource['formats'].items() %}
|
|
<a href="{{ format_link }}" title="{{ resource['name'] }}" class="d-block">
|
|
{{ _('View ' + format_name) }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div>
|
|
{% set training_guide = site.get(training_guide_this._path + '/' + resource_name + '-guide') %}
|
|
{% if training_guide %}
|
|
<a href="{{ training_guide|url }}" title="{{ resource['name'] }}" class="btn btn-outline-primary font-weight-600">{{ _("Trainer's guide") }}</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-none d-md-inline col-sm-auto text-right">
|
|
<span class="text-muted font-weight-600 font-size-18-px">{{ _('Updated: {}').format(resource.get('date', 'not provided')) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<span class="text-primary font-weight-600 my-2 font-size-18-px col">{{ _('By {}').format(resource['author']) }}</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="m-0 font-size-18-px flex-grow-1 col">{{ resource['description'] }}</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="text-muted font-weight-600 m-0 font-size-18-px col">{{ _('Available in: {}').format(resource['languages'].values()|join(', ')) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{# end of desktop layout #}
|
|
{# mobile layout #}
|
|
<div class="col d-lg-none px-0">
|
|
<a href="{{ resource['link'] }}" class="d-block pb-4">
|
|
<img src="{{ resource['cover']|url }}" class="img-fluid" alt="{{ resource['name'] }}">
|
|
</a>
|
|
<div class="col-sm pl-lg-1">
|
|
<div class="row">
|
|
<div class="col-sm row">
|
|
<h3 class="card-title font-weight-600 m-0 pr-0" style="max-width: fit-content">{{ resource['name'] }}</h3>
|
|
<div class="row gap-10px pl-3 m-0">
|
|
<div class="dropdown">
|
|
<a href="{{ resource['link'] }}" title="{{ resource['name'] }}" class="btn btn-md btn-primary font-weight-600 dropdown-rounded {% if resource['formats'] %}dropdown-toggle{% endif %}" type="button" id="resource-view-{{ resource_name }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
|
|
{{ _('View') }}
|
|
</a>
|
|
{% if resource['formats'] %}
|
|
<div class="dropdown-menu pl-2" aria-labelledby="resource-view-{{ resource_name }}">
|
|
<a href="{{ resource['link'] }}" title="{{ resource['name'] }}" class="d-block">
|
|
{{ _('View') }}
|
|
</a>
|
|
{% for format_name, format_link in resource['formats'].items() %}
|
|
<a href="{{ format_link }}" title="{{ resource['name'] }}" class="d-block">
|
|
{{ _('View ' + format_name) }}
|
|
</a>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6"></div>
|
|
</div>
|
|
<div class="d-none d-md-inline col-sm-auto text-right">
|
|
<span class="text-muted font-weight-600 font-size-18-px">{{ _('Updated: {}').format(resource.get('date', 'not provided')) }}</span>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<span class="text-primary font-weight-600 my-2 font-size-18-px">{{ _('By {}').format(resource['author']) }}</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="m-0 font-size-18-px flex-grow-1">{{ resource['description'] }}</span>
|
|
</div>
|
|
<div class="row">
|
|
<span class="text-muted font-weight-600 m-0 font-size-18-px mt-2">{{ _('Available in: {}').format(resource['languages']|join(', ')) }}</span>
|
|
</div>
|
|
<div class="row">
|
|
<div>
|
|
{% set training_guide = site.get(this._path + '/' + resource_name + '-guide') %}
|
|
{% if training_guide %}
|
|
<a href="{{ training_guide|url }}" title="{{ resource['name'] }}" class="btn btn-outline-primary font-weight-600 mt-2">{{ _("Trainer's guide") }}</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{# end of mobile layout #}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endmacro %}
|