Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix the layout of the action buttons on the invoice listing table #3662

Merged
merged 2 commits into from
Dec 1, 2023
Merged

Fix the layout of the action buttons on the invoice listing table #3662

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
77c9b21
Fix the layout of the action buttons on the invoice listing table
theskumar Nov 23, 2023
5e5794e
Remove target=“_blank” to the view, edit and delete buttons
theskumar Nov 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 65 additions & 65 deletions hypha/apply/projects/templates/application_projects/includes/invoices.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% load i18n invoice_tools humanize %}
{% load i18n invoice_tools humanize heroicons %}

<div id="invoices" class="data-block">
<div class="data-block__header">
Expand All @@ -12,71 +12,71 @@
{% endif %}
</div>
<div class="data-block__body">
<table class="data-block__table">
<thead>
<tr>
<th class="data-block__table-date">{% trans "Date submitted" %}</th>
<th class="data-block__table-amount">{% trans "Invoice number" %}</th>
<th class="data-block__table-status">{% trans "Status" %}</th>
<th class="data-block__table-update"></th>
</tr>
</thead>
<tbody>
{% for invoice in object.invoices.not_rejected %}
{% display_invoice_status_for_user user invoice as invoice_status %}
{% if object.invoices.not_rejected %}
<table class="data-block__table">
<thead>
<tr>
<td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Date submitted" %}: </span>{{ invoice.requested_at.date }}</td>
<td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Invoice number" %}: </span>{{ invoice.invoice_number }}</td>
<td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Status" %}: </span>{{ invoice_status }}</td>
<td class="flex flex-wrap justify-end py-4 px-0">
<a class="data-block__action-icon-link" href="{{ invoice.get_absolute_url }}" target="_blank">
<svg class="icon icon--project-eye"><use xlink:href="#eye"></use></svg>
{% trans "View" %}
</a>
{% can_edit invoice user as user_can_edit_request %}
{% if user_can_edit_request %}
<a class="data-block__action-icon-link" target="_blank" href="{% url "apply:projects:invoice-edit" pk=invoice.project.pk invoice_pk=invoice.pk %}">
<svg class="icon icon--project-pen"><use xlink:href="#pen"></use></svg>
{% trans "Edit" %}
<th class="data-block__table-date">{% trans "Date submitted" %}</th>
<th class="data-block__table-amount">{% trans "Invoice No." %}</th>
<th class="data-block__table-status">{% trans "Status" %}</th>
<th class="data-block__table-update"></th>
</tr>
</thead>
<tbody>
{% for invoice in object.invoices.not_rejected %}
{% display_invoice_status_for_user user invoice as invoice_status %}
<tr>
<td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Date submitted" %}: </span>{{ invoice.requested_at.date }}</td>
<td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Invoice number" %}: </span>{{ invoice.invoice_number }}</td>
<td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Status" %}: </span>{{ invoice_status }}</td>
<td class="flex flex-wrap justify-center py-4 px-0 gap-2 xl:flex-nowrap">
<a class="data-block__action-icon-link " href="{{ invoice.get_absolute_url }}" >
{% heroicon_mini "eye" size=16 aria_hidden=true class="mr-1" %}
{% trans "View" %}
</a>
{% endif %}
{% can_edit invoice user as user_can_edit_request %}
{% if user_can_edit_request %}
<a class="data-block__action-icon-link" href="{% url "apply:projects:invoice-edit" pk=invoice.project.pk invoice_pk=invoice.pk %}">
{% heroicon_mini "pencil-square" size=16 aria_hidden=true class="mr-1" %}
{% trans "Edit" %}
</a>
{% endif %}

{% can_delete invoice user as user_can_delete_request %}
{% if user.is_applicant and user_can_delete_request %}
<a class="data-block__action-icon-link data-block__action-icon-link--remove" target="_blank" href="{% url 'apply:projects:invoice-delete' pk=invoice.project.pk invoice_pk=invoice.pk %}">
<svg class="icon icon--delete" style="margin-left:0; margin-right:2px"><use xlink:href="#delete"></use></svg>
{% trans "Delete" %}
</a>
{% endif %}
{% can_change_status invoice user as can_change_invoice_status %}
{% if can_change_invoice_status %}
<a
data-fancybox
data-src="#change-invoice-status-{{ invoice.id }}"
id="update_invoice_status-{{ invoice.id }}"
class="data-block__button button button--primary"
href="#"
>
{% trans "Update Status" %}
</a>
<div class="modal" id="change-invoice-status-{{ invoice.id }}">
{% get_invoice_form invoice user as invoice_form %}
{% get_invoice_form_id invoice_form invoice as invoice_form_id %}
<h4 class="modal__project-header-bar">{% trans "Update Invoice status" %}</h4>
<p>{% trans "Current status" %}: {{ invoice_status }}</p>
{% trans "Update Status" as update %}
{% include 'funds/includes/delegated_form_base.html' with form=invoice_form value=update action=invoice.get_absolute_url form_id=invoice_form_id %}
</div>
{% endif %}
</td>
</tr>
{% empty %}
<tr>
<td colspan="5">{% trans "No active Invoices." %}</td>
</tr>
{% endfor %}
</tbody>
</table>
{% can_delete invoice user as user_can_delete_request %}
{% if user.is_applicant and user_can_delete_request %}
<a class="data-block__action-icon-link text-red-500" href="{% url 'apply:projects:invoice-delete' pk=invoice.project.pk invoice_pk=invoice.pk %}">
{% heroicon_mini "trash" size=16 aria_hidden=true class="mr-1" %}
{% trans "Delete" %}
</a>
{% endif %}
{% can_change_status invoice user as can_change_invoice_status %}
{% if can_change_invoice_status %}
<a
data-fancybox
data-src="#change-invoice-status-{{ invoice.id }}"
id="update_invoice_status-{{ invoice.id }}"
class="data-block__button button button--primary"
href="#"
>
{% trans "Update Status" %}
</a>
<div class="modal" id="change-invoice-status-{{ invoice.id }}">
{% get_invoice_form invoice user as invoice_form %}
{% get_invoice_form_id invoice_form invoice as invoice_form_id %}
<h4 class="modal__project-header-bar">{% trans "Update Invoice status" %}</h4>
<p>{% trans "Current status" %}: {{ invoice_status }}</p>
{% trans "Update Status" as update %}
{% include 'funds/includes/delegated_form_base.html' with form=invoice_form value=update action=invoice.get_absolute_url form_id=invoice_form_id %}
</div>
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table>
{% else %}
<p>{% trans "No active invoices yet." %}</p>
{% endif %}

{% if object.invoices.rejected %}
<p class="data-block__rejected">
Expand All @@ -100,8 +100,8 @@ <h4 class="modal__project-header-bar">{% trans "Update Invoice status" %}</h4>
<td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Invoice number" %}: </span>{{ invoice.invoice_number }}</td>
<td class="py-4 px-2.5"><span class="data-block__mobile-label">{% trans "Status" %}: </span>{{ invoice_status }}</td>
<td class="flex justify-end py-4 px-0">
<a class="data-block__action-icon-link" href="{{ invoice.get_absolute_url }}" target="_blank">
<svg class="icon icon--project-eye"><use xlink:href="#eye"></use></svg>
<a class="data-block__action-icon-link" href="{{ invoice.get_absolute_url }}" >
{% heroicon_mini "eye" size=16 aria_hidden=true class="mr-1" %}
{% trans "View" %}
</a>
</td>
Expand Down
14 changes: 13 additions & 1 deletion hypha/static_src/src/sass/apply/components/_data-block.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,6 +156,12 @@
text-decoration: underline;
color: $color--primary;
word-break: normal;
transition-property: opacity;
transition-duration: 150ms;

&:hover {
opacity: 0.75;
}

&:last-child {
margin: 0;
Expand All @@ -168,9 +174,15 @@
display: flex;
align-items: center;
margin-right: 1rem;
color: $color--primary;
word-break: normal;

transition-property: opacity;
transition-duration: 150ms;

&:hover {
opacity: 0.75;
}

&:last-child {
margin: 0;
}
Expand Down