Skip to content

Commit

Permalink
fix: inline visual hierarchy (#632)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lukasvinclav
lukasvinclav committed Jul 26, 2024
1 parent acef20b commit cb39ca3
Show file tree
Hide file tree
Showing 2 changed files with 66 additions and 60 deletions.
122 changes: 64 additions & 58 deletions src/unfold/templates/admin/edit_inline/stacked.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,74 +13,80 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro
{{ inline_admin_formset.formset.management_form }}
{% include "unfold/helpers/messages/error.html" with errors=inline_admin_formset.formset.non_form_errors %}

<div class="border border-gray-200 mb-6 overflow-hidden rounded-md shadow-sm text-gray-700 w-full dark:border-gray-800">
{% for inline_admin_form in inline_admin_formset %}
<div class="inline-related group inline-stacked {% if inline_admin_form.original or inline_admin_form.show_url %} has_original{% endif %}{% if forloop.last and inline_admin_formset.has_add_permission %} empty-form last-related{% endif %}" id="{{ inline_admin_formset.formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">
{% if not inline_admin_formset.opts.hide_title or inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}
<h3 class="bg-gray-50 border-b {% if not forloop.first %}border-t{% endif %} border-gray-200 flex font-medium items-center mb-3 px-3 py-2 text-gray-400 text-sm dark:bg-white/[.02] dark:border-gray-800">
<span class="mr-2">
{{ inline_admin_formset.opts.verbose_name|capfirst }}:
</span>

<span class="inline_label font-semibold text-gray-900 dark:text-gray-200">
{% if inline_admin_form.original and inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}
<a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}" class="{% if inline_admin_formset.has_change_permission %}inlinechangelink{% else %}inlineviewlink{% endif %} font-medium text-primary-600 dark:text-primary-500">
{{ inline_admin_form.original }}
</a>
{% else %}
{% if inline_admin_form.original %}
{% with inline_title=inline_admin_form.original.get_inline_title %}
{% if inline_title %}
{{ inline_title }}
{% else %}
{{ inline_admin_form.original }}
{% endif %}
{% endwith %}
{% if inline_admin_formset.forms|length == 0 %}
<p class="mb-6 text-gray-500 text-sm dark:text-gray-300">
{% trans "No records found." %}
</p>
{% else %}
<div class="border border-gray-200 mb-6 overflow-hidden rounded-md shadow-sm text-gray-700 w-full dark:border-gray-800">
{% for inline_admin_form in inline_admin_formset %}
<div class="inline-related group inline-stacked {% if inline_admin_form.original or inline_admin_form.show_url %} has_original{% endif %}{% if forloop.last and inline_admin_formset.has_add_permission %} empty-form last-related{% endif %}" id="{{ inline_admin_formset.formset.prefix }}-{% if not forloop.last %}{{ forloop.counter0 }}{% else %}empty{% endif %}">
{% if not inline_admin_formset.opts.hide_title or inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission %}
<h3 class="bg-gray-50 border-b {% if not forloop.first %}border-t{% endif %} border-gray-200 flex font-medium items-center mb-3 px-3 py-2 text-gray-400 text-sm dark:bg-white/[.02] dark:border-gray-800">
<span class="mr-2">
{{ inline_admin_formset.opts.verbose_name|capfirst }}:
</span>

{% if inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}
<a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}" class="{{ inline_admin_formset.has_change_permission|yesno:'inlinechangelink,inlineviewlink' }} font-medium ml-2 text-primary-600 dark:text-primary-500">
{% if inline_admin_formset.has_change_permission %}
{% translate "Change" %}
<span class="inline_label font-semibold text-gray-900 dark:text-gray-200">
{% if inline_admin_form.original and inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}
<a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}" class="{% if inline_admin_formset.has_change_permission %}inlinechangelink{% else %}inlineviewlink{% endif %} font-medium text-primary-600 dark:text-primary-500">
{{ inline_admin_form.original }}
</a>
{% else %}
{% if inline_admin_form.original %}
{% with inline_title=inline_admin_form.original.get_inline_title %}
{% if inline_title %}
{{ inline_title }}
{% else %}
{% translate "View" %}
{{ inline_admin_form.original }}
{% endif %}
</a>
{% endwith %}

{% if inline_admin_form.model_admin.show_change_link and inline_admin_form.model_admin.has_registered_model %}
<a href="{% url inline_admin_form.model_admin.opts|admin_urlname:'change' inline_admin_form.original.pk|admin_urlquote %}" class="{{ inline_admin_formset.has_change_permission|yesno:'inlinechangelink,inlineviewlink' }} font-medium ml-2 text-primary-600 dark:text-primary-500">
{% if inline_admin_formset.has_change_permission %}
{% translate "Change" %}
{% else %}
{% translate "View" %}
{% endif %}
</a>
{% endif %}
{% else %}
#{{ forloop.counter }}
{% endif %}
{% else %}
#{{ forloop.counter }}
{% endif %}
{% endif %}
</span>
</span>

{% if inline_admin_form.show_url %}
<a href="{{ inline_admin_form.absolute_url }}" class="font-medium ml-2 text-primary-600 dark:text-primary-500">
{% trans "View on site" %}
</a>
{% endif %}
{% if inline_admin_form.show_url %}
<a href="{{ inline_admin_form.absolute_url }}" class="font-medium ml-2 text-primary-600 dark:text-primary-500">
{% trans "View on site" %}
</a>
{% endif %}

{% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission and inline_admin_form.original %}
<span class="delete flex gap-2 items-center ml-auto text-gray-500">
{{ inline_admin_form.deletion_field.field|add_css_class:form_classes.checkbox }} {{ inline_admin_form.deletion_field.label_tag }}
</span>
{% endif %}
</h3>
{% endif %}
{% if inline_admin_formset.formset.can_delete and inline_admin_formset.has_delete_permission and inline_admin_form.original %}
<span class="delete flex gap-2 items-center ml-auto text-gray-500">
{{ inline_admin_form.deletion_field.field|add_css_class:form_classes.checkbox }} {{ inline_admin_form.deletion_field.label_tag }}
</span>
{% endif %}
</h3>
{% endif %}

{% include "unfold/helpers/messages/error.html" with errors=inline_admin_form.form.non_field_errors %}
{% include "unfold/helpers/messages/error.html" with errors=inline_admin_form.form.non_field_errors %}

{% for fieldset in inline_admin_form %}
<div class="px-3 -mb-5 {% if inline_admin_formset.opts.hide_title %}{% if not inline_admin_formset.formset.can_delete or not inline_admin_formset.has_delete_permission %}pt-3{% endif %}{% endif %}">
{% include 'admin/includes/fieldset.html' with stacked=1 %}
</div>
{% endfor %}
{% for fieldset in inline_admin_form %}
<div class="px-3 -mb-5 {% if inline_admin_formset.opts.hide_title %}{% if not inline_admin_formset.formset.can_delete or not inline_admin_formset.has_delete_permission %}pt-3{% endif %}{% endif %}">
{% include 'admin/includes/fieldset.html' with stacked=1 %}
</div>
{% endfor %}

{% if inline_admin_form.needs_explicit_pk_field %}
{{ inline_admin_form.pk_field.field }}
{% endif %}
{% if inline_admin_form.needs_explicit_pk_field %}
{{ inline_admin_form.pk_field.field }}
{% endif %}

{% if inline_admin_form.fk_field %}{{ inline_admin_form.fk_field.field }}{% endif %}
</div>
{% endfor %}
</div>
{% if inline_admin_form.fk_field %}{{ inline_admin_form.fk_field.field }}{% endif %}
</div>
{% endfor %}
</div>
{% endif %}
</fieldset>
</div>
4 changes: 2 additions & 2 deletions src/unfold/templates/admin/edit_inline/tabular.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,10 @@ <h2 class="bg-gray-100 border border-transparent font-semibold mb-6 px-4 py-3 ro

{% if inline_admin_form.original or inline_admin_form.show_url %}
<tr>
<td class="original {% if not inline_admin_formset.opts.hide_title %}{% if inline_admin_form.original or inline_admin_form.show_url %}border-b border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-white/[.02]{% endif %}{% endif %}" colspan="{{ inline_admin_form|cell_count }}">
<td class="original" colspan="{{ inline_admin_form|cell_count }}">
{% if not inline_admin_formset.opts.hide_title %}
{% if inline_admin_form.original or inline_admin_form.show_url %}
<p class="bg-gray-50 flex font-medium items-center px-3 py-2 text-gray-400 text-sm dark:bg-white/[.02] ">
<p class="flex font-medium items-center px-3 pt-2 text-gray-400 text-xs">
{% if inline_admin_form.original %}
<span class="font-semibold text-gray-900 dark:text-gray-200">
{% with inline_title=inline_admin_form.original.get_inline_title %}
Expand Down

0 comments on commit cb39ca3

Please sign in to comment.