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/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 @@ + 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 3845edac..9527ad45 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -1,3 +1,50 @@ +.task-order-get-started { + text-align: center; + padding: 4rem 6rem; + + .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-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; + + .icon-link { + position: absolute; + left: 50%; + top: 2.5rem; + margin-left: -23rem; + } + } + + p { + max-width: 27rem; + } + } +} + .task-order-summary { @include media($medium-screen) { @@ -101,5 +148,4 @@ padding: 0 0.5rem; } } - } 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'), ) }} diff --git a/templates/task_orders/new/get_started.html b/templates/task_orders/new/get_started.html new file mode 100644 index 00000000..15418505 --- /dev/null +++ b/templates/task_orders/new/get_started.html @@ -0,0 +1,69 @@ +{% 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") }} +
    +
    + +
    +
    + + {{ Icon("caret_left") }} + Cancel + + Let's do cloud! +
    +
    +

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

    +
    +
    +
    +{% endblock %}