diff --git a/opentech/apply/funds/templates/funds/includes/batch_progress_form.html b/opentech/apply/funds/templates/funds/includes/batch_progress_form.html
index 20943a97776d577586d9301ee0d8d8d591a0516f..59d98b3f1687e66f7d0c66937cd177b83013d4cb 100644
--- a/opentech/apply/funds/templates/funds/includes/batch_progress_form.html
+++ b/opentech/apply/funds/templates/funds/includes/batch_progress_form.html
@@ -1,5 +1,5 @@
<div class="modal modal--secondary" id="batch-progress">
- <h4 class="modal__header-bar">Update Status</h4>
+ <h4 class="modal__header-bar modal__header-bar--no-bottom-space">Update Status</h4>
<div class="modal__list-item modal__list-item--meta" aria-live="polite">
<span class="js-batch-title-count"></span>
<a href="#" class="modal__hide-link js-toggle-batch-list">Show</a>
diff --git a/opentech/apply/funds/templates/funds/includes/batch_update_reviewer_form.html b/opentech/apply/funds/templates/funds/includes/batch_update_reviewer_form.html
index d74095ba0a497d3c206669684cd33608c9003813..887a7b46b902d6c59a6faa4c6f661360a1f60b54 100644
--- a/opentech/apply/funds/templates/funds/includes/batch_update_reviewer_form.html
+++ b/opentech/apply/funds/templates/funds/includes/batch_update_reviewer_form.html
@@ -1,5 +1,5 @@
-<div class="modal modal--secondary" id="batch-update-reviewers">
- <h4 class="modal__header-bar">Add Reviewers</h4>
+<div class="modal" id="batch-update-reviewers">
+ <h4 class="modal__header-bar modal__header-bar--no-bottom-space">Add Reviewers</h4>
<div class="modal__list-item modal__list-item--meta" aria-live="polite">
<span class="js-batch-title-count"></span>
<a href="#" class="modal__hide-link js-toggle-batch-list">Show</a>
diff --git a/opentech/apply/funds/templates/funds/includes/progress_form.html b/opentech/apply/funds/templates/funds/includes/progress_form.html
index 3c3a57e57cb7ae2b843686682d17644d52be8fc9..c60160d03e7900568280942d23b68915ce27e5e7 100644
--- a/opentech/apply/funds/templates/funds/includes/progress_form.html
+++ b/opentech/apply/funds/templates/funds/includes/progress_form.html
@@ -1,6 +1,6 @@
{% if progress_form.should_show %}
<div class="modal" id="update-status">
- <h4>Update status</h4>
+ <h4 class="modal__header-bar">Update status</h4>
<p>Current status: {{ object.phase }}</p>
{% include 'funds/includes/delegated_form_base.html' with form=progress_form value='Progress'%}
</div>
diff --git a/opentech/apply/funds/templates/funds/includes/screening_form.html b/opentech/apply/funds/templates/funds/includes/screening_form.html
index 87b3f9cd4a6cfdb2341f270704c9d793e1c7bec5..bb2a46df42f46c896fdac9c4b25060b2aa27edd5 100644
--- a/opentech/apply/funds/templates/funds/includes/screening_form.html
+++ b/opentech/apply/funds/templates/funds/includes/screening_form.html
@@ -1,6 +1,6 @@
{% if screening_form.should_show %}
<div class="modal" id="screen-application">
- <h4>Update status</h4>
+ <h4 class="modal__header-bar">Update status</h4>
<p>Current status: {{ object.screening_status }}</p>
{% include 'funds/includes/delegated_form_base.html' with form=screening_form value='Screen'%}
</div>
diff --git a/opentech/apply/funds/templates/funds/includes/table_filter_and_search.html b/opentech/apply/funds/templates/funds/includes/table_filter_and_search.html
index 2b4727e2b5128931ddd9b5b5621368b39901e32d..c4f6ae34922a035333479aec84408dbeee84483a 100644
--- a/opentech/apply/funds/templates/funds/includes/table_filter_and_search.html
+++ b/opentech/apply/funds/templates/funds/includes/table_filter_and_search.html
@@ -11,16 +11,28 @@
<div class="actions-bar__inner actions-bar__inner--batch-actions">
<p class="actions-bar__total"><span class="js-total-actions">0</span> Selected</p>
- <button data-fancybox data-src="#batch-progress" class="button button--action button--batch-status js-batch-button js-batch-progress" type="button">Status</button>
+ <button
+ data-fancybox
+ type="button"
+ data-src="#batch-progress"
+ class="button button--action button--change-status js-batch-button js-batch-progress"
+ data-tooltip="Status changes can't be applied to submissions with this combination of statuses"
+ >
+ <svg><use xlink:href="#arrow-split"></use></svg>
+ Status
+ </button>
- <button data-fancybox data-src="#batch-update-reviewers" class="button button--action button--reviewers js-batch-button" type="button">Reviewers</button>
+ <button data-fancybox data-src="#batch-update-reviewers" class="button button--action js-batch-button" type="button">
+ <svg><use xlink:href="#add-person"></use></svg>
+ Reviewers
+ </button>
</div>
{% endif %}
</div>
{# Right #}
<div class="actions-bar__inner actions-bar__inner--right">
- <button class="button button--filters button--contains-icons button--action js-toggle-filters">Filters</button>
+ <button class="button button--filters js-toggle-filters">Filters</button>
{% if use_search|default:False %}
<form method="get" role="search" class="form form--search-desktop js-search-form">
diff --git a/opentech/apply/funds/templates/funds/includes/update_lead_form.html b/opentech/apply/funds/templates/funds/includes/update_lead_form.html
index fa4bd2042b010f3bfcb78d711b70dbba247b57c2..246061d79b56d3da48ba2a32ee823534124d9aab 100644
--- a/opentech/apply/funds/templates/funds/includes/update_lead_form.html
+++ b/opentech/apply/funds/templates/funds/includes/update_lead_form.html
@@ -1,4 +1,4 @@
<div class="modal" id="assign-lead">
- <h4>Assign Lead</h4>
+ <h4 class="modal__header-bar">Assign Lead</h4>
{% include 'funds/includes/delegated_form_base.html' with form=lead_form value='Update'%}
</div>
diff --git a/opentech/apply/funds/templates/funds/includes/update_reviewer_form.html b/opentech/apply/funds/templates/funds/includes/update_reviewer_form.html
index 1ccf42e24b949046a6ac2707275598bc11397e33..c62d57109f9046e1647f857d00dfb6c6b19c0740 100644
--- a/opentech/apply/funds/templates/funds/includes/update_reviewer_form.html
+++ b/opentech/apply/funds/templates/funds/includes/update_reviewer_form.html
@@ -1,4 +1,4 @@
<div class="modal" id="update-reviewers">
- <h4>Update Reviewers</h4>
+ <h4 class="modal__header-bar">Update Reviewers</h4>
{% include 'funds/includes/delegated_form_base.html' with form=reviewer_form value='Update' %}
</div>
diff --git a/opentech/static_src/src/images/add-person.svg b/opentech/static_src/src/images/add-person.svg
deleted file mode 100644
index 4d2cd548b3494d17e1ba5a881de76ddd8fb753e6..0000000000000000000000000000000000000000
--- a/opentech/static_src/src/images/add-person.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#0d7db0" d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
diff --git a/opentech/static_src/src/images/arrow-split.svg b/opentech/static_src/src/images/arrow-split.svg
deleted file mode 100644
index 27ba4b500c1fd7fd6b54c479e9769ca4b4b82ef3..0000000000000000000000000000000000000000
--- a/opentech/static_src/src/images/arrow-split.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="#0d7db0" d="M14 4l2.29 2.29-2.88 2.88 1.42 1.42 2.88-2.88L20 10V4zm-4 0H4v6l2.29-2.29 4.71 4.7V20h2v-8.41l-5.29-5.3z"/></svg>
diff --git a/opentech/static_src/src/sass/apply/components/_button.scss b/opentech/static_src/src/sass/apply/components/_button.scss
index 1934b4ed2904254e1a9309941ed5dc86b6ed4f2c..0f325f618b10d90c4db42aad2b7a6f895fad6d0d 100644
--- a/opentech/static_src/src/sass/apply/components/_button.scss
+++ b/opentech/static_src/src/sass/apply/components/_button.scss
@@ -5,6 +5,15 @@
border: 0;
box-shadow: none;
+ &:hover {
+ cursor: pointer;
+ }
+
+ &.is-disabled {
+ pointer-events: none;
+ opacity: .5;
+ }
+
&--primary {
@include button($color--light-blue, $color--dark-blue);
display: inline-block;
@@ -16,10 +25,6 @@
}
}
- &:hover {
- cursor: pointer;
- }
-
&--contains-icons {
display: flex;
align-items: center;
@@ -80,10 +85,24 @@
width: 100%;
@include media-query(tablet-landscape) {
+ background: none;
+ padding: 10px;
+ border: 0;
+ justify-content: flex-start;
+ width: auto;
+ opacity: .7;
+
&::before {
content: '';
background-image: url('./../../images/filters.svg');
transform: rotate(90deg);
+ background-color: transparent;
+ background-position: left center;
+ background-size: 20px;
+ width: 20px;
+ height: 20px;
+ display: inline-block;
+ margin-right: 10px;
}
}
}
@@ -157,11 +176,6 @@
}
}
- &.is-disabled {
- pointer-events: none;
- opacity: .5;
- }
-
&--top-space {
margin-top: 20px;
}
@@ -209,49 +223,86 @@
&--action {
display: flex;
- font-weight: $weight--normal;
color: $color--default;
- transition: none;
+ align-items: center;
+ transition: opacity $transition;
+ font-weight: $weight--semibold;
+ position: relative;
- @include media-query(tablet-landscape) {
- background: none;
- padding: 10px;
- border: 0;
- align-items: center;
- justify-content: flex-start;
- width: auto;
- transition: opacity $transition;
- opacity: .7;
- font-weight: $weight--semibold;
+ &:hover {
+ opacity: 1;
+ }
+
+ &:disabled {
+ color: $color--mid-dark-grey;
+ cursor: not-allowed;
+
+ // tooltip
+ &::before {
+ content: attr(data-tooltip);
+ pointer-events: none;
+ position: absolute;
+ width: 200px;
+ padding: 12px;
+ font-size: 12px;
+ font-weight: $weight--normal;
+ white-space: normal;
+ background: $color--light-blue;
+ opacity: 0;
+ transition: opacity $transition;
+ bottom: 45px;
+ left: 50%;
+ transform: translateX(-50%);
+ color: $color--white;
+ text-align: left;
+ line-height: 1rem;
+ border: 1px solid $color--white;
+ border-radius: 3px;
+ }
+
+ &::after {
+ @include triangle(bottom, $color--primary, 7px);
+ position: absolute;
+ top: -22px;
+ left: 50%;
+ transform: translateX(-50%);
+ opacity: 0;
+ transition: opacity $transition;
+ z-index: 10;
+ }
+
+ svg {
+ fill: $color--mid-dark-grey;
+ }
&:hover {
opacity: 1;
- }
- &::before {
- content: '';
- background-image: url('./../../images/filters.svg');
- background-color: transparent;
- background-position: left center;
- background-size: 20px;
- width: 20px;
- height: 20px;
- display: inline-block;
- margin-right: 10px;
+ // show tooltip
+ &::before {
+ pointer-events: all;
+ z-index: 10;
+ opacity: 1;
+ }
+
+ &::after {
+ opacity: 1;
+ }
}
}
- }
- &--batch-status {
- &::before {
- background-image: url('./../../images/arrow-split.svg');
- transform: rotate(90deg);
+ svg {
+ fill: $color--light-blue;
+ width: 24px;
+ height: 24px;
+ margin-right: 10px;
+ pointer-events: none;
}
}
- &--reviewers {
- &::before {
- background-image: url('./../../images/add-person.svg');
+ &--change-status {
+ svg {
+ transform: rotate(90deg);
}
}
}
diff --git a/opentech/static_src/src/sass/apply/components/_modal.scss b/opentech/static_src/src/sass/apply/components/_modal.scss
index d486cca48b00a9e2f839ecf737089c43b4cef4bd..1ffd972e0f598834a06c51834066ad04f290c034 100644
--- a/opentech/static_src/src/sass/apply/components/_modal.scss
+++ b/opentech/static_src/src/sass/apply/components/_modal.scss
@@ -2,11 +2,7 @@
$root: &;
display: none;
width: calc(100% - 40px);
- padding: 20px;
-
- &--secondary {
- padding: 0;
- }
+ padding: 0;
@include media-query(small-tablet) {
width: 580px;
@@ -16,9 +12,13 @@
&__header-bar {
color: $color--white;
background-color: $color--dark-blue;
- margin: -24px -24px 0;
+ margin: -24px -24px 20px;
padding: 15px;
text-align: center;
+
+ &--no-bottom-space {
+ margin-bottom: 0;
+ }
}
&__list {
diff --git a/opentech/templates/includes/sprites.html b/opentech/templates/includes/sprites.html
index 42bf4cb3d50f9fe3d9a3ac8da8fd2091430dcb80..bc2e557b45e1756eb06551ce86540379b4e181d5 100644
--- a/opentech/templates/includes/sprites.html
+++ b/opentech/templates/includes/sprites.html
@@ -304,4 +304,16 @@
<symbol id="open-in-new-tab" viewbox="0 0 24 24">
<path d="M0 0h24v24H0z" fill="none"/><path d="M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/>
</symbol>
+
+ <symbol id="add-person" viewbox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path
+ d="M15 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm-9-2V7H4v3H1v2h3v3h2v-3h3v-2H6zm9 4c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
+ </symbol>
+
+ <symbol id="arrow-split" viewbox="0 0 24 24">
+ <path d="M0 0h24v24H0z" fill="none" />
+ <path
+ d="M14 4l2.29 2.29-2.88 2.88 1.42 1.42 2.88-2.88L20 10V4zm-4 0H4v6l2.29-2.29 4.71 4.7V20h2v-8.41l-5.29-5.3z" />
+ </symbol>
</svg>