Skip to content
Snippets Groups Projects
Unverified Commit acaacedb authored by Saurabh Kumar's avatar Saurabh Kumar Committed by GitHub
Browse files

Fix project section header button's layout (#4324) 

1. [Fix project section header button's
layout](https://github.com/HyphaApp/hypha/commit/5b77ac08914f9d661759fac79c1d5cb3ffb00440)
2. [Update and fix the layout of supporting document
display](https://github.com/HyphaApp/hypha/commit/d5d5cf9360504d8491d3c2dec59ee407374a9377)
	- add a bg to easily separate two document category
	- handle long filenames
	- add hover state to links / buttons

Fixes https://github.com/HyphaApp/hypha/issues/4321




Co-authored-by: default avatarFredrik Jonsson <frjo@xdeb.org>
parent 1c660637
No related branches found
No related tags found
1 merge request!110v5.23.0 upstream merge!
Hide whitespace changes
Inline Side-by-side
hypha/apply/projects/templates/application_projects/includes/project_documents.html
+ 54
− 54
View file @ acaacedb
...@@ -3,73 +3,73 @@ ...@@ -3,73 +3,73 @@
<div class="docs-block wrapper--outer-space-large" {% if collapsible_header %} x-data="{ collapsed: true }" {% endif %}> <div class="docs-block wrapper--outer-space-large" {% if collapsible_header %} x-data="{ collapsed: true }" {% endif %}>
<div class="docs-block__header" id="project-documents-section" {% if collapsible_header %} x-on:click="collapsed = ! collapsed" role="button" aria-label="Toggle Project documents visibility" aria-controls="project-documents-elements" {% endif %}> <div class="docs-block__header" id="project-documents-section" {% if collapsible_header %} x-on:click="collapsed = ! collapsed" role="button" aria-label="Toggle Project documents visibility" aria-controls="project-documents-elements" {% endif %}>
<div class="flex justify-between w-full" > <div class="flex justify-between gap-2 w-full items-center">
<h2 class="text-lg font-semibold m-0"> <h2 class="text-lg font-semibold m-0">
{% trans "Project documents" %} {% trans "Project documents" %}
</h2> </h2>
{% if collapsible_header %} <div class="flex gap-2 flex-wrap">
<button class="align-middle ms-1 transform transition-transform" x-bind:class="collapsed ? '': '-rotate-90' "> {% user_can_send_for_approval object user as can_send_to_approve %}
{% heroicon_outline 'chevron-left' size=20 stroke_width=2 aria_hidden=true %} {% if can_send_to_approve %}
<span class="sr-only" x-text="collapsed ? 'expand' : 'collapse'">{% trans "expand" %}</span> <a class="button button--project-action"
</button> href="{% url 'apply:projects:submit_project_for_approval' object.id %}"
{% endif %} hx-get="{% url 'apply:projects:submit_project_for_approval' object.id %}"
</div>
<div>
{% user_can_send_for_approval object user as can_send_to_approve %}
{% if can_send_to_approve %}
<a class="button button--project-action"
href="{% url 'apply:projects:submit_project_for_approval' object.id %}"
hx-get="{% url 'apply:projects:submit_project_for_approval' object.id %}"
hx-target="#htmx-modal"
>
{% if object.paf_approvals.exists %}
{% trans "Resubmit for approval" %}
{% else %}
{% trans "Submit for approval" %}
{% endif %}
</a>
{% endif %}
{% user_can_update_paf_approvers object user request as can_update_paf_approvers %}
{% user_can_assign_approvers_to_project object user request as can_assign_paf_approvers %}
{% if can_update_paf_approvers %}
{% if user == project.lead %}
<a class="button button--project-action button--project-action--white ms-2"
href="{% url 'apply:projects:update_pafapprovers' object.id %}"
hx-get="{% url 'apply:projects:update_pafapprovers' object.id %}"
hx-target="#htmx-modal" hx-target="#htmx-modal"
> >
{% trans "View/Update Approvers" %} {% if object.paf_approvals.exists %}
{% trans "Resubmit for approval" %}
{% else %}
{% trans "Submit for approval" %}
{% endif %}
</a> </a>
{% else %} {% endif %}
<a class="button button--project-action button--project-action--white ms-2" {% user_can_update_paf_approvers object user request as can_update_paf_approvers %}
{% user_can_assign_approvers_to_project object user request as can_assign_paf_approvers %}
{% if can_update_paf_approvers %}
{% if user == project.lead %}
<a class="button button--project-action button--project-action--white ms-2"
href="{% url 'apply:projects:update_pafapprovers' object.id %}"
hx-get="{% url 'apply:projects:update_pafapprovers' object.id %}"
hx-target="#htmx-modal"
>
{% trans "View/Update Approvers" %}
</a>
{% else %}
<a class="button button--project-action button--project-action--white ms-2"
href="{% url 'apply:projects:assign_pafapprovers' object.id %}"
hx-get="{% url 'apply:projects:assign_pafapprovers' object.id %}"
hx-target="#htmx-modal"
>
{% trans "Change approver" %}
</a>
{% endif %}
{% endif %}
{% if can_assign_paf_approvers %}
<a class="button button--project-action"
href="{% url 'apply:projects:assign_pafapprovers' object.id %}" href="{% url 'apply:projects:assign_pafapprovers' object.id %}"
hx-get="{% url 'apply:projects:assign_pafapprovers' object.id %}" hx-get="{% url 'apply:projects:assign_pafapprovers' object.id %}"
hx-target="#htmx-modal" hx-target="#htmx-modal"
> >
{% trans "Change approver" %} {% trans "Assign approver" %}
</a> </a>
{% endif %} {% endif %}
{% endif %} {% user_can_update_paf_status object user request=request as can_update_paf_status %}
{% if can_assign_paf_approvers %} {% if object.can_make_approval and can_update_paf_status %}
<a class="button button--project-action" <a class="button button--project-action ms-2"
href="{% url 'apply:projects:assign_pafapprovers' object.id %}" href="{% url 'apply:projects:update_pafstatus' object.id %}"
hx-get="{% url 'apply:projects:assign_pafapprovers' object.id %}" hx-get="{% url 'apply:projects:update_pafstatus' object.id %}"
hx-target="#htmx-modal" hx-target="#htmx-modal"
> >
{% trans "Assign approver" %} {% trans "Update Status" %}
</a> </a>
{% endif %} {% endif %}
{% user_can_update_paf_status object user request=request as can_update_paf_status %} {% if collapsible_header %}
{% if object.can_make_approval and can_update_paf_status %} <button class="align-middle ms-1 transform transition-transform" x-bind:class="collapsed ? '': '-rotate-90' ">
<a class="button button--project-action ms-2" {% heroicon_outline 'chevron-left' size=20 stroke_width=2 aria_hidden=true %}
href="{% url 'apply:projects:update_pafstatus' object.id %}" <span class="sr-only" x-text="collapsed ? 'expand' : 'collapse'">{% trans "expand" %}</span>
hx-get="{% url 'apply:projects:update_pafstatus' object.id %}" </button>
hx-target="#htmx-modal" {% endif %}
> </div>
{% trans "Update Status" %}
</a>
{% endif %}
</div> </div>
</div> </div>
<ul class="docs-block__inner" id="project-documents-elements" {% if collapsible_header %} x-show="!collapsed" role="region" <ul class="docs-block__inner" id="project-documents-elements" {% if collapsible_header %} x-show="!collapsed" role="region"
......
hypha/apply/projects/templates/application_projects/partials/contracting_category_documents.html
+ 11
− 12
View file @ acaacedb
{% load i18n contract_tools project_tags heroicons %} {% load i18n apply_tags contract_tools project_tags heroicons %}
<li class="docs-block__row"> <li class="docs-block__row">
<div class="docs-block__row-inner"> <div class="docs-block__row-inner">
...@@ -12,14 +12,12 @@ ...@@ -12,14 +12,12 @@
{% can_update_contracting_documents object user as can_update_documents %} {% can_update_contracting_documents object user as can_update_documents %}
{% if all_contract_document_categories %} {% if all_contract_document_categories %}
<div class="w-full ps-7">
<div class="w-full ps-9"> <ul class="space-y-2 pt-3">
<p></p>
<ul>
{% for document_category in all_contract_document_categories %} {% for document_category in all_contract_document_categories %}
<li class="docs-block__document"> <li class="flex justify-between bg-gray-100 px-3 py-2 rounded">
<div class="docs-block__document-inner"> <div class="docs-block__document-inner">
<p class="docs-block__document-info"> <span>
{% if document_category in remaining_contract_document_categories %} {% if document_category in remaining_contract_document_categories %}
{% trans "Pending " %} {% trans "Pending " %}
{{ document_category.name|lower }} {{ document_category.name|lower }}
...@@ -29,12 +27,14 @@ ...@@ -29,12 +27,14 @@
{% if document_category.required %}<span class="text-red-700">*</span>{% endif %} {% if document_category.required %}<span class="text-red-700">*</span>{% endif %}
{% if document_category.template %} {% if document_category.template %}
{% heroicon_mini "information-circle" class="fill-light-blue inline align-middle" aria_hidden=true %} {% heroicon_mini "information-circle" class="fill-light-blue inline align-middle" aria_hidden=true %}
<a class="font-bold border-b-2 border-dashed" href="{% url 'apply:projects:category_template' pk=object.pk type='contract_document' category_pk=document_category.pk %}" target="_blank">{% trans "View template" %}</a> <a class="font-semibold border-b-2 border-dashed" href="{% url 'apply:projects:category_template' pk=object.pk type='contract_document' category_pk=document_category.pk %}" target="_blank">{% trans "View template" %}</a>
{% endif %} {% endif %}
</p> </span>
{% if document_category not in remaining_contract_document_categories %} {% if document_category not in remaining_contract_document_categories %}
{% contract_category_latest_file object document_category as latest_file %} {% contract_category_latest_file object document_category as latest_file %}
<p class="docs-block__document-info"><b>{{ latest_file.title }}</b> - {{ latest_file.created_at }}</p> <div class="text-sm">
<span>{{ latest_file.title|truncatechars_middle:45 }}</span> - <span class="text-fg-muted">{{ latest_file.created_at }}</span>
</div>
{% endif %} {% endif %}
</div> </div>
{% if document_category in remaining_contract_document_categories and can_update_documents %} {% if document_category in remaining_contract_document_categories and can_update_documents %}
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
{% else %} {% else %}
{% contract_category_latest_file object document_category as latest_file %} {% contract_category_latest_file object document_category as latest_file %}
{% if latest_file %} {% if latest_file %}
<div class="docs-block__row-inner"> <div class="docs-block__document-inner__actions">
<a class="docs-block__icon-link" href="{% url 'apply:projects:contract_document' pk=object.pk file_pk=latest_file.pk %}" target="_blank"> <a class="docs-block__icon-link" href="{% url 'apply:projects:contract_document' pk=object.pk file_pk=latest_file.pk %}" target="_blank">
{% heroicon_micro "eye" class="inline me-1 w-4 h-4" aria_hidden=true %} {% heroicon_micro "eye" class="inline me-1 w-4 h-4" aria_hidden=true %}
{% trans "View" %} {% trans "View" %}
...@@ -92,4 +92,3 @@ ...@@ -92,4 +92,3 @@
{% trans "Submit contract documents" %} {% trans "Submit contract documents" %}
</a> </a>
{% endif %} {% endif %}
hypha/apply/projects/templates/application_projects/partials/supporting_documents.html
+ 11
− 10
View file @ acaacedb
{% load i18n approval_tools project_tags heroicons %} {% load i18n approval_tools apply_tags project_tags heroicons %}
{% load can from permission_tags %} {% load can from permission_tags %}
<li class="docs-block__row"> <li class="docs-block__row">
...@@ -13,16 +13,15 @@ ...@@ -13,16 +13,15 @@
{% if all_document_categories %} {% if all_document_categories %}
<div class="w-full ps-9"> <div class="w-full ps-7">
<p></p> <ul class="space-y-2 pt-3">
<ul>
{% for document_category in all_document_categories %} {% for document_category in all_document_categories %}
<li class="docs-block__document"> <li class="flex justify-between bg-gray-100 px-3 py-2 rounded">
<div class="docs-block__document-inner"> <div class="docs-block__document-inner">
<p class="docs-block__document-info">{{ document_category.name }} <span>{{ document_category.name }}
{% if document_category.required %}<span class="text-red-700">*</span>{% endif %} {% if document_category.required %}<span class="text-red-700">*</span>{% endif %}
{% if document_category.template %} {% if document_category.template %}
<a class="font-bold hover:opacity-70 transition-opacity" <a class="font-semibold hover:opacity-70 transition-opacity"
href="{% url 'apply:projects:category_template' pk=object.pk type='project_document' category_pk=document_category.pk %}" href="{% url 'apply:projects:category_template' pk=object.pk type='project_document' category_pk=document_category.pk %}"
target="_blank" target="_blank"
> >
...@@ -31,10 +30,12 @@ ...@@ -31,10 +30,12 @@
</span>{% heroicon_mini "information-circle" class="fill-light-blue inline align-middle me-1" aria_hidden=true %} </span>{% heroicon_mini "information-circle" class="fill-light-blue inline align-middle me-1" aria_hidden=true %}
</a> </a>
{% endif %} {% endif %}
</p> </span>
{% if document_category not in remaining_document_categories %} {% if document_category not in remaining_document_categories %}
{% category_latest_file object document_category as latest_file %} {% category_latest_file object document_category as latest_file %}
<p class="docs-block__document-info"><b>{{ latest_file.title }}</b> - {{ latest_file.created_at }}</p> <div class="text-sm">
<span>{{ latest_file.title|truncatechars_middle:45 }}</span> - <span class="text-fg-muted">{{ latest_file.created_at }}</span>
</div>
{% endif %} {% endif %}
</div> </div>
{% can "upload_project_documents" object as can_upload_documents %} {% can "upload_project_documents" object as can_upload_documents %}
...@@ -54,7 +55,7 @@ ...@@ -54,7 +55,7 @@
{% else %} {% else %}
{% category_latest_file object document_category as latest_file %} {% category_latest_file object document_category as latest_file %}
{% if latest_file %} {% if latest_file %}
<div class="docs-block__row-inner"> <div class="docs-block__document-inner__actions">
<a class="docs-block__icon-link" href="{% url 'apply:projects:document' pk=object.pk file_pk=latest_file.pk %}" target="_blank"> <a class="docs-block__icon-link" href="{% url 'apply:projects:document' pk=object.pk file_pk=latest_file.pk %}" target="_blank">
{% heroicon_micro "eye" class="inline me-1" aria_hidden=true %} {% heroicon_micro "eye" class="inline me-1" aria_hidden=true %}
{% trans "View" %} {% trans "View" %}
......
hypha/static_src/sass/components/_docs-block.scss
+ 8
− 0
View file @ acaacedb
...@@ -95,6 +95,10 @@ ...@@ -95,6 +95,10 @@
&:last-child { &:last-child {
margin-inline-end: 0; margin-inline-end: 0;
} }
&:hover {
opacity: 0.8;
}
} }
&__icon-link { &__icon-link {
...@@ -112,6 +116,10 @@ ...@@ -112,6 +116,10 @@
&:last-child { &:last-child {
margin-inline-end: 0; margin-inline-end: 0;
} }
&:hover {
opacity: 0.8;
}
} }
&__info-text { &__info-text {
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment