Improve display of folder path when deeply nested

It’s a bit rudimentary to only show the current place in the hierarchy
and the parent. You lose a sense of how deep you are.

But we can’t just show the full path, because it can be arbitrarily
long. So what this commit does is show the full path, but truncates the
display of any items. Further-up than the current folder or its parent.

This also helps disambiguate between folders and templates, because
folders are always shown with the folder icon.

This probably won’t affect many teams, because we don’t anticipate a lot
of deep nesting.
This commit is contained in:
Chris Hill-Scott
2019-01-30 10:09:04 +00:00
parent 02f7d7708a
commit 88ad982bf7
10 changed files with 125 additions and 50 deletions

View File

@@ -14,13 +14,18 @@
<h1 class="heading-medium folder-heading">
{% for folder in folders %}
{% if loop.last and not link_current_item %}
<span class="folder-heading-folder">{{ folder.name }}</span>
{% if folder.template_type or not folder.id %}
<span class="folder-heading-template">{{ folder.name }}</span>
{% else %}
<span class="folder-heading-folder">{{ folder.name }}</span>
{% endif %}
{% else %}
{% if folder.id %}
<a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type, template_folder_id=folder.id) }}" class="folder-heading-folder">{{ folder.name }}</a> {% if not loop.last %}{{ folder_path_separator() }}{% endif %}
<a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type, template_folder_id=folder.id) }}" class="folder-heading-folder {% if loop.index < (loop.length - 1) %}folder-heading-folder-truncated{% endif %}" title="{{ folder.name }}">{{ folder.name }}</a>
{% else %}
<a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type) }}">Templates</a> {% if not loop.last %}{{ folder_path_separator() }}{% endif %}
<a href="{{ url_for('.choose_template', service_id=service_id, template_type=template_type) }}" class="{% if loop.length > 2 %}folder-heading-folder-root-truncated{% endif %}">Templates</a>
{% endif %}
{% if not loop.last %}{{ folder_path_separator() }}{% endif %}
{% endif %}
{% endfor %}
</h1>