diff --git a/opentech/apply/funds/templates/funds/applicationsubmission_detail.html b/opentech/apply/funds/templates/funds/applicationsubmission_detail.html
index c3885e19b8c7e0c98f2edfa9921ba99bf5adbbe8..7974a3578c021bc58dd10783664dbc0d82efbc80 100644
--- a/opentech/apply/funds/templates/funds/applicationsubmission_detail.html
+++ b/opentech/apply/funds/templates/funds/applicationsubmission_detail.html
@@ -17,6 +17,7 @@
<div class="wrapper wrapper--medium wrapper--inner-space-medium">
<div class="wrapper wrapper--sidebar">
+ {% include "funds/includes/actions.html" with mobile="true" %}
<section class="section section--has-sidebar">
<h6 class="heading heading--submission-meta">
<span>Submitted: </span>{{ object.submit_time.date }} by {{ object.user.get_full_name }}
@@ -52,6 +53,8 @@
<aside class="sidebar">
{% include "funds/includes/progress_form.html" %}
{% include "funds/includes/update_lead_form.html" %}
+ {% include "funds/includes/actions.html" %}
+
{% if other_submissions %}
<div class="sidebar__inner">
<h6 class="heading heading--light-grey heading--small heading--uppercase">Past Submissions</h6>
diff --git a/opentech/apply/funds/templates/funds/includes/actions.html b/opentech/apply/funds/templates/funds/includes/actions.html
new file mode 100644
index 0000000000000000000000000000000000000000..f7de3326d3968ded774f4e72af6ed90a96e22e3c
--- /dev/null
+++ b/opentech/apply/funds/templates/funds/includes/actions.html
@@ -0,0 +1,16 @@
+{% if mobile %}
+ <a class="js-actions-toggle button button--white button--full-width button--actions">Actions to take</a>
+{% endif %}
+
+<div class="js-actions-sidebar sidebar__inner sidebar__inner--light-blue sidebar__inner--actions {% if mobile %}sidebar__inner--mobile{% endif %}">
+ <h5>Actions to take</h5>
+ <a class="button button--primary button--full-width" href="#">Update status</a>
+ <p class="sidebar__separator">Assign</p>
+
+ <div class="wrapper wrapper--button-container">
+ <a class="button button--half-width button--white" href="#">Placeholder</a>
+ <a class="button button--half-width button--white" href="#">Lead</a>
+ </div>
+
+ <a class="button button--white button--full-width button--bottom-space" href="#">Placeholder</a>
+</div>
diff --git a/opentech/static_src/src/sass/apply/abstracts/_variables.scss b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
index f5333446e742e87bb7d2e8d14019e4375abb4c7a..bb0d5610d1168c368e8804aefd100eea2c546098 100755
--- a/opentech/static_src/src/sass/apply/abstracts/_variables.scss
+++ b/opentech/static_src/src/sass/apply/abstracts/_variables.scss
@@ -32,6 +32,8 @@ $color--black-40: rgba(0, 0, 0, 0.4);
$color--black-20: rgba(0, 0, 0, 0.2);
$color--black-10: rgba(0, 0, 0, 0.1);
+$color--light-blue-90: transparentize($color--light-blue, 0.9);
+
// Assignment
$color--default: $color--dark-grey;
$color--primary: $color--light-blue;
diff --git a/opentech/static_src/src/sass/apply/components/_button.scss b/opentech/static_src/src/sass/apply/components/_button.scss
index f549a29030529237ee72181feca27e2d8843f622..0ba31060bde4b913597218d6c3b01c5e4925e649 100644
--- a/opentech/static_src/src/sass/apply/components/_button.scss
+++ b/opentech/static_src/src/sass/apply/components/_button.scss
@@ -111,5 +111,37 @@
margin-bottom: 0;
}
}
+
+ &--actions {
+ position: relative;
+ display: block;
+ background-color: $color--white;
+
+ &:active {
+ background: $color--light-blue-90;
+ }
+
+ &::after {
+ position: absolute;
+ top: 0;
+ right: 15px;
+ font-size: 30px;
+ content: '+';
+ }
+
+ &.is-active {
+ color: $color--dark-blue;
+ background: $color--light-blue-90;
+
+ &::after {
+ top: -12px;
+ content: '_';
+ }
+ }
+
+ @include media-query(tablet-portrait) {
+ display: none;
+ }
+ }
}
diff --git a/opentech/static_src/src/sass/apply/components/_sidebar.scss b/opentech/static_src/src/sass/apply/components/_sidebar.scss
index 29b553b26b401ffebc1eb897ff4bccbf39b94045..3b95801fd2222642a52a2aafff55ae8e1c38c503 100644
--- a/opentech/static_src/src/sass/apply/components/_sidebar.scss
+++ b/opentech/static_src/src/sass/apply/components/_sidebar.scss
@@ -1,13 +1,51 @@
.sidebar {
- margin-top: 20px;
-
@include media-query(tablet-portrait) {
- flex-basis: 345px;
- margin: 0 20px 0 0;
+ width: 345px;
+ margin: 20px 0 0;
}
&__inner {
padding: 20px;
+ margin-bottom: 20px;
border: 1px solid $color--mid-grey;
+
+ &--light-blue {
+ background-color: $color--light-blue-90;
+ }
+
+ &--actions {
+ display: none;
+
+ @include media-query(tablet-portrait) {
+ display: block;
+ }
+ }
+
+ &--mobile {
+ display: none;
+
+ &.is-visible {
+ display: block;
+ border-top: 0;
+ }
+ }
+ }
+
+ &__separator {
+ position: relative;
+ font-size: 12px;
+ font-weight: $weight--bold;
+ color: $color--black-40;
+ text-transform: uppercase;
+
+ &::after {
+ position: absolute;
+ top: 50%;
+ right: 0;
+ width: calc(100% - 60px);
+ height: 1px;
+ background-color: $color--black-20;
+ content: '';
+ }
}
}
diff --git a/opentech/static_src/src/sass/apply/components/_wrapper.scss b/opentech/static_src/src/sass/apply/components/_wrapper.scss
index 68e4a2b4e1e02742a9ded37ee97708b2d6996903..bec7f413234b8d77207b241103e3a82a449d8423 100644
--- a/opentech/static_src/src/sass/apply/components/_wrapper.scss
+++ b/opentech/static_src/src/sass/apply/components/_wrapper.scss
@@ -232,4 +232,10 @@
flex-direction: row;
}
}
+
+ &--button-container {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 20px;
+ }
}