Style folder hierarchy in headings

This makes the display of folders in the `<h1>` look like the prototype.

It alters the behaviour we’ve initially built here by only ever showing
a maximum of two levels of hierarchy (the current folders and its
parent).
This commit is contained in:
Chris Hill-Scott
2018-11-16 13:41:55 +00:00
parent 754ae743ca
commit d49622c5dc
5 changed files with 176 additions and 34 deletions

View File

@@ -0,0 +1,50 @@
{% macro folder_path(
folders,
service_id,
template_type,
fallback_page_title=None,
show_fallback_page_title=False
) %}
{% if show_fallback_page_title %}
<h1 class="heading-large">
{{ fallback_page_title }}
</h1>
{% else %}
<h1 class="heading-medium folder-heading">
{% for folder in folders %}
{% if loop.last %}
<span class="folder-heading-folder">{{ folder.name }}</span>
{% else %}
{% if folder.id %}
<a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type, template_folder_id=folder.id) }}">{{ folder.name }}</a> {{ folder_path_separator() }}
{% else %}
<a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type) }}">Templates</a> {{ folder_path_separator() }}
{% endif %}
{% endif %}
{% endfor %}
</h1>
{% endif %}
{% endmacro %}
{% macro page_title_folder_path(
folders,
fallback_page_title=None,
show_fallback_page_title=False
) %}
{% if show_fallback_page_title %}
{{ fallback_page_title }}
{% else %}
{% for folder in folders|reverse %}
{{ folder.name }}
{% if not loop.last %}
{% endif %}
{% endfor %}
{% endif %}
{% endmacro %}
{% macro folder_path_separator() %}
<span class="folder-heading-separator">/</span>
{% endmacro %}

View File

@@ -1,3 +1,4 @@
{% from "components/folder-path.html" import folder_path, page_title_folder_path %}
{% from "components/pill.html" import pill %}
{% from "components/message-count-label.html" import message_count_label %}
{% from "components/textbox.html" import textbox %}
@@ -8,10 +9,11 @@
{% set page_title = 'Templates' %}
{% block service_page_title %}
{{ page_title }}
{% for folder in template_folder_path %}
/ {{ folder.name }}
{% endfor %}
{{ page_title_folder_path(
template_folder_path,
fallback_page_title=page_title,
show_fallback_page_title=not current_service.all_template_folders
) }}
{% endblock %}
{% block maincolumn_content %}
@@ -46,27 +48,19 @@
<div class="grid-row bottom-gutter-2-3">
<div class="column-two-thirds">
<h1 class="heading-large">
{% if template_folder_path %}
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type) }}">{{ page_title }}</a>
{% else %}
{{ page_title }}
{% endif %}
{% for folder in template_folder_path %}
/
{% if loop.last %}
{{ folder.name }}
{% else %}
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=folder.id) }}">{{ folder.name }}</a>
{% endif %}
{% endfor %}
</h1>
{{ folder_path(
folders=template_folder_path,
service_id=current_service.id,
template_type=template_type,
fallback_page_title=page_title,
show_fallback_page_title=not current_service.all_template_folders
) }}
</div>
{% if current_user.has_permissions('manage_templates') %}
<div class="column-one-third">
<a href="{{ url_for('.add_template_by_type', service_id=current_service.id, template_folder_id=current_template_folder_id) }}" class="button align-with-heading">Add new template</a>
{% if can_manage_folders and template_folder_path %}
{% if can_manage_folders and current_template_folder_id %}
<a href="{{ url_for('.manage_template_folder', service_id=current_service.id, template_folder_id=current_template_folder_id) }}" class="align-with-heading">Manage</a>
{% endif %}
</div>