From abf1c0d9224b78aad1de410cb959e6b153606fd8 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Fri, 11 Jan 2019 15:49:07 -0500 Subject: [PATCH 1/6] Add icons for computer and dollar-sign --- static/icons/computer.svg | 1 + static/icons/dollar-sign.svg | 1 + 2 files changed, 2 insertions(+) create mode 100644 static/icons/computer.svg create mode 100644 static/icons/dollar-sign.svg diff --git a/static/icons/computer.svg b/static/icons/computer.svg new file mode 100644 index 00000000..0dc362c0 --- /dev/null +++ b/static/icons/computer.svg @@ -0,0 +1 @@ + diff --git a/static/icons/dollar-sign.svg b/static/icons/dollar-sign.svg new file mode 100644 index 00000000..d08180eb --- /dev/null +++ b/static/icons/dollar-sign.svg @@ -0,0 +1 @@ + From e3ec50ab2d1a0e3898f768522d8c480c7373ed04 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Fri, 11 Jan 2019 15:49:38 -0500 Subject: [PATCH 2/6] add initial version of get started page --- styles/sections/_task_order.scss | 29 ++++++++++- templates/task_orders/new/get_started.html | 60 ++++++++++++++++++++++ 2 files changed, 88 insertions(+), 1 deletion(-) create mode 100644 templates/task_orders/new/get_started.html diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index 3845edac..c75986c5 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -1,3 +1,31 @@ +.task-order-get-started { + text-align: center; + padding: 4rem 6rem; + + .task-order-get-started__panel { + p { + margin: 2rem auto; + } + } + + .task-order-get-started__list { + ul { + list-style: none; + margin-top: 0; + padding: 0; + + li { + font-weight: bold; + line-height: 2rem; + } + } + } + + .task-order-help__icon { + @include icon-size(48); + } +} + .task-order-summary { @include media($medium-screen) { @@ -101,5 +129,4 @@ padding: 0 0.5rem; } } - } diff --git a/templates/task_orders/new/get_started.html b/templates/task_orders/new/get_started.html new file mode 100644 index 00000000..aa5dab2b --- /dev/null +++ b/templates/task_orders/new/get_started.html @@ -0,0 +1,60 @@ +{% from "components/icon.html" import Icon %} + +{% extends "base.html" %} + +{% macro Help(icon_name="", name="", description="", link_text="") %} +
+ {{ Icon(icon_name, classes="task-order-help__icon") }} +

{{ name }}

+

{{ description }}

+ {{ link_text }} +
+{% endmacro %} + +{% block content %} + +
+
+

Let's get started

+

+ To create a portfolio of JEDI cloud applications, you'll complete and submit a task order in your organization's system of record. We'll help you complete the necessary pieces of that task order, including your: +

+ +
    +
  • Statement of work
    • +
  • Market research
    • +
  • Security documentation
    • +
  • Various approvals
    • +
+ + +
+ +
+

You'll need help getting a task order

+
+ {{ Help( + name="Development Lead", + icon_name="computer", + description="Your development lead will decide and estimate what types of cloud offerings your group needs.", + link_text="Share cloud estimate link") }} + {{ Help( + name="Security Lead", + icon_name="shield", + description="Your security lead will review and approve your security classification needs, as well as a standardized DD-254.", + link_text="You'll need their DOD ID number") }} + {{ Help( + name="Contracting Officer", + icon_name="dollar-sign", + description="Your contracting officer will review your funding needs and ultimately approve your task order.", + link_text="You'll need their DOD ID number") }} +
+
+ +
+ Let's do cloud! +
Create a JEDI cloud application portfolio & start building a task order
+ Cancel +
+
+{% endblock %} From 94b89917ef8926e18990120bb1feab2e0fc6a4ab Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Fri, 11 Jan 2019 15:50:57 -0500 Subject: [PATCH 3/6] Link to TO get started page --- atst/routes/task_orders/new.py | 5 +++++ templates/navigation/global_navigation.html | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/atst/routes/task_orders/new.py b/atst/routes/task_orders/new.py index 266bcf57..25a63998 100644 --- a/atst/routes/task_orders/new.py +++ b/atst/routes/task_orders/new.py @@ -187,6 +187,11 @@ class UpdateTaskOrderWorkflow(ShowTaskOrderWorkflow): return self.task_order +@task_orders_bp.route("/task_orders/new/get_started") +def get_started(): + return render_template("task_orders/new/get_started.html") # pragma: no cover + + @task_orders_bp.route("/task_orders/new/") @task_orders_bp.route("/task_orders/new//") def new(screen, task_order_id=None): diff --git a/templates/navigation/global_navigation.html b/templates/navigation/global_navigation.html index c0c43cf2..8155bc99 100644 --- a/templates/navigation/global_navigation.html +++ b/templates/navigation/global_navigation.html @@ -3,7 +3,7 @@
    {{ SidenavItem("New Task Order", - href=url_for("task_orders.new", screen=1), + href=url_for("task_orders.get_started"), icon="plus", active=g.matchesPath('/task_orders/new'), ) }} From 5c7f3fa29422d0a888d420580865fd67ef470c00 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Sat, 12 Jan 2019 10:48:21 -0500 Subject: [PATCH 4/6] Add `centered` class for paragraphs --- styles/elements/_typography.scss | 5 +++++ styles/sections/_task_order.scss | 6 ------ templates/task_orders/new/get_started.html | 8 +++++--- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/styles/elements/_typography.scss b/styles/elements/_typography.scss index 8626dd13..5f768f52 100644 --- a/styles/elements/_typography.scss +++ b/styles/elements/_typography.scss @@ -12,6 +12,11 @@ p { margin: 0 0 ($gap * 2) 0; @include line-max; + + &.centered { + margin-left: auto; + margin-right: auto; + } } h1, h2, h3, h4, h5, h6 { diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index c75986c5..951b93c0 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -2,12 +2,6 @@ text-align: center; padding: 4rem 6rem; - .task-order-get-started__panel { - p { - margin: 2rem auto; - } - } - .task-order-get-started__list { ul { list-style: none; diff --git a/templates/task_orders/new/get_started.html b/templates/task_orders/new/get_started.html index aa5dab2b..55faf0d4 100644 --- a/templates/task_orders/new/get_started.html +++ b/templates/task_orders/new/get_started.html @@ -16,9 +16,11 @@

    Let's get started

    -

    - To create a portfolio of JEDI cloud applications, you'll complete and submit a task order in your organization's system of record. We'll help you complete the necessary pieces of that task order, including your: -

    +
    +

    + To create a portfolio of JEDI cloud applications, you'll complete and submit a task order in your organization's system of record. We'll help you complete the necessary pieces of that task order, including your: +

    +
    • Statement of work
      • From 8a7147756473bbb3c16fdc335ca1f19af134cf37 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Sat, 12 Jan 2019 10:54:05 -0500 Subject: [PATCH 5/6] Fix up buttons on TO get started page --- styles/sections/_task_order.scss | 17 +++++++++++++++++ templates/task_orders/new/get_started.html | 15 +++++++++++---- 2 files changed, 28 insertions(+), 4 deletions(-) diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index 951b93c0..f4d3141c 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -18,6 +18,23 @@ .task-order-help__icon { @include icon-size(48); } + + .task-order-get-started__actions { + .task-order-get-started__button-row { + position: relative; + + .icon-link { + position: absolute; + left: 50%; + top: 2.5rem; + margin-left: -23rem; + } + } + + p { + max-width: 27rem; + } + } } .task-order-summary { diff --git a/templates/task_orders/new/get_started.html b/templates/task_orders/new/get_started.html index 55faf0d4..46be8a89 100644 --- a/templates/task_orders/new/get_started.html +++ b/templates/task_orders/new/get_started.html @@ -53,10 +53,17 @@
    -
    - Let's do cloud! -
    Create a JEDI cloud application portfolio & start building a task order
    - Cancel +
    +
    + + {{ Icon("caret_left") }} + Cancel + + Let's do cloud! +
    +
    +

    Create a JEDI cloud application portfolio & start building a task order

    +
    {% endblock %} From 117fe7313362a3688637700fabe2982d6ab2bf59 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Sun, 13 Jan 2019 15:20:05 -0500 Subject: [PATCH 6/6] Add a bit of responsiveness --- styles/sections/_task_order.scss | 8 ++++++++ templates/task_orders/new/get_started.html | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index f4d3141c..9527ad45 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -19,6 +19,14 @@ @include icon-size(48); } + .task-order-needs { + .task-order-needs__list { + @include media($large-screen) { + @include grid-row; + } + } + } + .task-order-get-started__actions { .task-order-get-started__button-row { position: relative; diff --git a/templates/task_orders/new/get_started.html b/templates/task_orders/new/get_started.html index 46be8a89..15418505 100644 --- a/templates/task_orders/new/get_started.html +++ b/templates/task_orders/new/get_started.html @@ -34,7 +34,7 @@

    You'll need help getting a task order

    -
    +
    {{ Help( name="Development Lead", icon_name="computer",