Skip to content

Commit

Permalink
Custom applicant dashboard header (#3587)
Browse files Browse the repository at this point in the history 
Updated the applicant dashboard header as per the latest designs.

Used a custom code instead of admin bar component because needed custom
implementation that is different from other or common admin
bars(headers)
  • Loading branch information
@sandeepsajan0
sandeepsajan0 authored Nov 6, 2023
1 parent 5db2fe6 commit a84c939
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 77 deletions.
147 changes: 79 additions & 68 deletions hypha/apply/dashboard/templates/dashboard/applicant_dashboard.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,83 +4,94 @@

{% block title %}{% trans "Dashboard" %}{% endblock %}

{% block content %}
{% adminbar %}
{% slot header %}{% trans "Dashboard" %}{% endslot %}
{% slot sub_heading %}{% trans "An overview of active and past submissions and projects" %}{% endslot %}

<div class="wrapper wrapper--cta-box">
<h3 class="text-xl mb-0">{% trans "Submit a new application" %}</h3>
<p class="mt-0 mb-4 text-fg-muted text-sm">{% trans "Apply now for our open rounds" %}</p>
<a class="button button--primary" href="{% pageurl APPLY_SITE.root_page %}" class="button">{% trans "Apply" %}</a>
</div>
{% endadminbar %}

<div class="wrapper wrapper--large wrapper--inner-space-medium">
{% if my_active_submissions %}
<div class="mb-10">
<div class="flex">
<h2 class="font-light flex-1">{% trans "My active submissions" %}</h2>
</div>
{% for submission in my_active_submissions %}
<div class="wrapper wrapper--status-bar-outer">
<div class="wrapper wrapper--status-bar-inner">
<div class="mt-5 ml-4">
<h4 class="heading mb-2 font-bold"><a class="link link--underlined" href="{% url 'funds:submissions:detail' submission.id %}">{{ submission.title }}</a></h4>
<p class="m-0 text-gray-400">{% trans "Submitted on " %} {{ submission.submit_time.date }} {% trans "by" %} {{ submission.user.get_full_name }}</p>
</div>
{% status_bar submission.workflow submission.phase request.user css_class="status-bar--small" %}
{% block content_wrapper %}
<main class="wrapper wrapper--large wrapper--main bg-light-grey" id="main">
{% block content %}
<div class="admin-bar">
<div class="admin-bar__inner wrapper--applicant-dashboard">
<div class="my-auto">
<h1 class="heading heading--no-margin font-bold">{% trans "My dashboard" %}</h1>
<p class="m-0">{% trans "An overview of active and past submissions and projects" %}</p>
</div>
<div class="wrapper wrapper--cta-box flex items-center">
<div class="flex-1">
<h3 class="heading heading--no-margin font-bold">{% trans "Submit a new application" %}</h3>
<p class="text-base m-0">{% trans "Apply now for our open rounds" %}</p>
</div>
<div>
<a class="button button--blue-white" href="{% pageurl APPLY_SITE.root_page %}" class="button">{% trans "Apply" %}</a>
</div>
{% if request.user|has_edit_perm:submission %}
<a class="button button--primary ml-4" href="{% url 'funds:submissions:edit' submission.id %}">
{% if submission.status == 'draft_proposal' %}
{% trans "Start your" %} {{ submission.stage }} {% trans "application" %}
{% else %}
{% trans "Edit" %}
{% endif %}
</a>
{% endif %}
</div>
{% empty %}
{% trans "No active submissions" %}
{% endfor %}
</div>
</div>
{% endif %}

{% if active_projects.count %}
<div class="mb-10">
<div class="flex">
<h2 class="font-light flex-1">{% trans "My active projects" %}</h2>
</div>
{% for project in active_projects.data %}
<div class="wrapper wrapper--status-bar-outer">
<div class="wrapper wrapper--status-bar-inner">
<div class="mt-5 ml-4">
<h4 class="heading mb-2 font-bold"><a class="link link--underlined" href="{% url 'apply:projects:detail' project.id %}">{{ project.title }}</a></h4>
<p class="m-0 text-gray-400">{% trans "Project start date: " %} {{ project.created_at.date }}</p>
<div class="wrapper wrapper--large wrapper--inner-space-medium">
{% if my_active_submissions %}
<div class="mb-10">
<div class="flex">
<h2 class="font-light flex-1">{% trans "My active submissions" %}</h2>
</div>
{% for submission in my_active_submissions %}
<div class="wrapper wrapper--status-bar-outer">
<div class="wrapper wrapper--status-bar-inner">
<div class="mt-5 ml-4">
<h4 class="heading mb-2 font-bold"><a class="link link--underlined" href="{% url 'funds:submissions:detail' submission.id %}">{{ submission.title }}</a></h4>
<p class="m-0 text-gray-400">{% trans "Submitted on " %} {{ submission.submit_time.date }} {% trans "by" %} {{ submission.user.get_full_name }}</p>
</div>
{% status_bar submission.workflow submission.phase request.user css_class="status-bar--small" %}
</div>
{% if request.user|has_edit_perm:submission %}
<a class="button button--primary ml-4" href="{% url 'funds:submissions:edit' submission.id %}">
{% if submission.status == 'draft_proposal' %}
{% trans "Start your" %} {{ submission.stage }} {% trans "application" %}
{% else %}
{% trans "Edit" %}
{% endif %}
</a>
{% endif %}
</div>
{% project_status_bar project.status request.user css_class="status-bar--small" %}
{% empty %}
{% trans "No active submissions" %}
{% endfor %}
</div>
{% endif %}

{% if active_projects.count %}
<div class="mb-10">
<div class="flex">
<h2 class="font-light flex-1">{% trans "My active projects" %}</h2>
</div>
{% for project in active_projects.data %}
<div class="wrapper wrapper--status-bar-outer">
<div class="wrapper wrapper--status-bar-inner">
<div class="mt-5 ml-4">
<h4 class="heading mb-2 font-bold"><a class="link link--underlined" href="{% url 'apply:projects:detail' project.id %}">{{ project.title }}</a></h4>
<p class="m-0 text-gray-400">{% trans "Project start date: " %} {{ project.created_at.date }}</p>
</div>
{% project_status_bar project.status request.user css_class="status-bar--small" %}
</div>
</div>
{% empty %}
{% trans "No active projects" %}
{% endfor %}
</div>
{% empty %}
{% trans "No active projects" %}
{% endfor %}
{% endif %}
</div>
{% endif %}
</div>

{% if historical_submissions.count %}
<div class="wrapper wrapper--large wrapper--inner-space-medium mb-8">
<h2 class="text-xl mb-2">{% trans "Submission history" %}</h3>
{% render_table historical_submissions.table %}
</div>
{% endif %}
{% if historical_submissions.count %}
<div class="wrapper wrapper--large wrapper--inner-space-medium mb-8">
<h2 class="text-xl mb-2">{% trans "Submission history" %}</h3>
{% render_table historical_submissions.table %}
</div>
{% endif %}

{% if historical_projects.count %}
<div class="wrapper wrapper--large wrapper--inner-space-medium mb-8">
<h2 class="text-xl mb-2">{% trans "Project history" %}</h2>
{% render_table historical_projects.table %}
</div>
{% endif %}
{% if historical_projects.count %}
<div class="wrapper wrapper--large wrapper--inner-space-medium mb-8">
<h2 class="text-xl mb-2">{% trans "Project history" %}</h2>
{% render_table historical_projects.table %}
</div>
{% endif %}

{% endblock %}
</main>
{% endblock %}
15 changes: 15 additions & 0 deletions hypha/static_src/src/sass/apply/components/_button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,21 @@
}
}

&--blue-white {
@include button($color--white, $color--light-blue);
display: inline-block;
color: $color--light-blue;
border: 1px solid $color--light-blue;

&:focus {
color: $color--light-blue;
}

&:hover {
color: $color--white;
}
}

&-danger,
&--warning {
@include button($color--error, $color--error);
Expand Down
6 changes: 1 addition & 5 deletions hypha/static_src/src/sass/apply/components/_wrapper.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,7 +222,7 @@
}

&--cta-box {
width: 385px;
width: 500px;
padding: 20px;
color: $color--default;
background-color: $color--white;
Expand All @@ -232,10 +232,6 @@
display: flex;
flex-wrap: wrap;
justify-content: space-between;

@include media-query(tablet-portrait) {
padding: 20px;
}
}

&--status-bar-outer {
Expand Down
8 changes: 4 additions & 4 deletions hypha/templates/base-apply.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,11 +176,11 @@
</div>
</header>

<main class="wrapper wrapper--large wrapper--main" id="main">
{% block content_wrapper %}
{% block content_wrapper %}
<main class="wrapper wrapper--large wrapper--main" id="main">
{% block content %}{% endblock %}
{% endblock %}
</main>
</main>
{% endblock %}

<footer class="footer"></footer>

Expand Down

0 comments on commit a84c939

Please sign in to comment.