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 @@
<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="flex justify-between w-full" >
<div class="flex justify-between gap-2 w-full items-center">
<h2 class="text-lg font-semibold m-0">
{% trans "Project documents" %}
</h2>
{% if collapsible_header %}
<button class="align-middle ms-1 transform transition-transform" x-bind:class="collapsed ? '': '-rotate-90' ">
{% heroicon_outline 'chevron-left' size=20 stroke_width=2 aria_hidden=true %}
<span class="sr-only" x-text="collapsed ? 'expand' : 'collapse'">{% trans "expand" %}</span>
</button>
{% endif %}
</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 %}"
<div class="flex gap-2 flex-wrap">
{% 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"
>
{% trans "View/Update Approvers" %}
{% if object.paf_approvals.exists %}
{% trans "Resubmit for approval" %}
{% else %}
{% trans "Submit for approval" %}
{% endif %}
</a>
{% else %}
<a class="button button--project-action button--project-action--white ms-2"
{% 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"
>
{% 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 %}"
hx-get="{% url 'apply:projects:assign_pafapprovers' object.id %}"
hx-target="#htmx-modal"
>
{% trans "Change approver" %}
{% trans "Assign approver" %}
</a>
{% endif %}
{% endif %}
{% if can_assign_paf_approvers %}
<a class="button button--project-action"
href="{% url 'apply:projects:assign_pafapprovers' object.id %}"
hx-get="{% url 'apply:projects:assign_pafapprovers' object.id %}"
hx-target="#htmx-modal"
>
{% trans "Assign approver" %}
</a>
{% endif %}
{% user_can_update_paf_status object user request=request as can_update_paf_status %}
{% if object.can_make_approval and can_update_paf_status %}
<a class="button button--project-action ms-2"
href="{% url 'apply:projects:update_pafstatus' object.id %}"
hx-get="{% url 'apply:projects:update_pafstatus' object.id %}"
hx-target="#htmx-modal"
>
{% trans "Update Status" %}
</a>
{% endif %}
{% user_can_update_paf_status object user request=request as can_update_paf_status %}
{% if object.can_make_approval and can_update_paf_status %}
<a class="button button--project-action ms-2"
href="{% url 'apply:projects:update_pafstatus' object.id %}"
hx-get="{% url 'apply:projects:update_pafstatus' object.id %}"
hx-target="#htmx-modal"
>
{% trans "Update Status" %}
</a>
{% endif %}
{% if collapsible_header %}
<button class="align-middle ms-1 transform transition-transform" x-bind:class="collapsed ? '': '-rotate-90' ">
{% heroicon_outline 'chevron-left' size=20 stroke_width=2 aria_hidden=true %}
<span class="sr-only" x-text="collapsed ? 'expand' : 'collapse'">{% trans "expand" %}</span>
</button>
{% endif %}
</div>
</div>
</div>
<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">
<div class="docs-block__row-inner">
......@@ -12,14 +12,12 @@
{% can_update_contracting_documents object user as can_update_documents %}
{% if all_contract_document_categories %}
<div class="w-full ps-9">
<p></p>
<ul>
<div class="w-full ps-7">
<ul class="space-y-2 pt-3">
{% 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">
<p class="docs-block__document-info">
<span>
{% if document_category in remaining_contract_document_categories %}
{% trans "Pending " %}
{{ document_category.name|lower }}
......@@ -29,12 +27,14 @@
{% if document_category.required %}<span class="text-red-700">*</span>{% endif %}
{% if document_category.template %}
{% 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 %}
</p>
</span>
{% if document_category not in remaining_contract_document_categories %}
{% 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 %}
</div>
{% if document_category in remaining_contract_document_categories and can_update_documents %}
......@@ -52,7 +52,7 @@
{% else %}
{% contract_category_latest_file object document_category as 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">
{% heroicon_micro "eye" class="inline me-1 w-4 h-4" aria_hidden=true %}
{% trans "View" %}
......@@ -92,4 +92,3 @@
{% trans "Submit contract documents" %}
</a>
{% 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 %}
<li class="docs-block__row">
......@@ -13,16 +13,15 @@
{% if all_document_categories %}
<div class="w-full ps-9">
<p></p>
<ul>
<div class="w-full ps-7">
<ul class="space-y-2 pt-3">
{% 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">
<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.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 %}"
target="_blank"
>
......@@ -31,10 +30,12 @@
</span>{% heroicon_mini "information-circle" class="fill-light-blue inline align-middle me-1" aria_hidden=true %}
</a>
{% endif %}
</p>
</span>
{% if document_category not in remaining_document_categories %}
{% 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 %}
</div>
{% can "upload_project_documents" object as can_upload_documents %}
......@@ -54,7 +55,7 @@
{% else %}
{% category_latest_file object document_category as 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">
{% heroicon_micro "eye" class="inline me-1" aria_hidden=true %}
{% trans "View" %}
......
hypha/static_src/sass/components/_docs-block.scss
+ 8
− 0
View file @ acaacedb
......@@ -95,6 +95,10 @@
&:last-child {
margin-inline-end: 0;
}
&:hover {
opacity: 0.8;
}
}
&__icon-link {
......@@ -112,6 +116,10 @@
&:last-child {
margin-inline-end: 0;
}
&:hover {
opacity: 0.8;
}
}
&__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