From 425aecf7e93e0c6c77e4c5b55c31f3384fc31967 Mon Sep 17 00:00:00 2001
From: Chris Lawton <chris.lawton@torchbox.com>
Date: Tue, 27 Feb 2018 16:44:07 +0000
Subject: [PATCH] adding actions partial and related styles
---
.../funds/applicationsubmission_detail.html | 3 ++
.../templates/funds/includes/actions.html | 16 +++++++
.../src/sass/apply/abstracts/_variables.scss | 2 +
.../src/sass/apply/components/_button.scss | 32 +++++++++++++
.../src/sass/apply/components/_sidebar.scss | 46 +++++++++++++++++--
.../src/sass/apply/components/_wrapper.scss | 6 +++
6 files changed, 101 insertions(+), 4 deletions(-)
create mode 100644 opentech/apply/funds/templates/funds/includes/actions.html
diff --git a/opentech/apply/funds/templates/funds/applicationsubmission_detail.html b/opentech/apply/funds/templates/funds/applicationsubmission_detail.html
index c3885e19b..7974a3578 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 000000000..f7de3326d
--- /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 f5333446e..bb0d5610d 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 f549a2903..0ba31060b 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 29b553b26..3b95801fd 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 68e4a2b4e..bec7f4132 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;
+ }
}
--
GitLab