From c361b8cc2cb09ec71d5886e262bb61713cb3c4f5 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Sun, 10 Feb 2019 11:44:58 -0500 Subject: [PATCH 1/8] Update header on application settings page --- templates/fragments/edit_application_form.html | 6 ------ templates/portfolios/applications/base.html | 9 +++++++++ templates/portfolios/applications/edit.html | 4 +++- 3 files changed, 12 insertions(+), 7 deletions(-) create mode 100644 templates/portfolios/applications/base.html diff --git a/templates/fragments/edit_application_form.html b/templates/fragments/edit_application_form.html index 9b9e1bbc..c9206b1b 100644 --- a/templates/fragments/edit_application_form.html +++ b/templates/fragments/edit_application_form.html @@ -1,13 +1,7 @@ {% from "components/text_input.html" import TextInput %} -{% set title_text = ('fragments.edit_application_form.existing_application_title' | translate({ "application_name": application.name })) if application else ('fragments.edit_application_form.new_application_title' | translate) %} - {{ form.csrf_token }}
-
-

{{ title_text }}

-
-

{{ "fragments.edit_application_form.explain" | translate }} diff --git a/templates/portfolios/applications/base.html b/templates/portfolios/applications/base.html new file mode 100644 index 00000000..1d8b73bf --- /dev/null +++ b/templates/portfolios/applications/base.html @@ -0,0 +1,9 @@ +{% extends "portfolios/base.html" %} + +{% block portfolio_header %} +

+
+ {{ secondary_breadcrumb }} +
+
+{% endblock %} diff --git a/templates/portfolios/applications/edit.html b/templates/portfolios/applications/edit.html index 87a78626..d23db2ec 100644 --- a/templates/portfolios/applications/edit.html +++ b/templates/portfolios/applications/edit.html @@ -1,7 +1,9 @@ -{% extends "portfolios/base.html" %} +{% extends "portfolios/applications/base.html" %} {% from "components/text_input.html" import TextInput %} +{% set secondary_breadcrumb = application.name + ' Application Settings' %} + {% block portfolio_content %}
From 32583689fcd3180bdc4de38e425cbe13bf5eb360 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Sun, 10 Feb 2019 12:40:46 -0500 Subject: [PATCH 2/8] Update new application page to use new template --- templates/portfolios/applications/base.html | 6 ++++++ templates/portfolios/applications/edit.html | 2 +- templates/portfolios/applications/new.html | 6 ++++-- 3 files changed, 11 insertions(+), 3 deletions(-) diff --git a/templates/portfolios/applications/base.html b/templates/portfolios/applications/base.html index 1d8b73bf..2b633e70 100644 --- a/templates/portfolios/applications/base.html +++ b/templates/portfolios/applications/base.html @@ -7,3 +7,9 @@
{% endblock %} + +{% block portfolio_content %} +
+ {% block application_content %}{% endblock %} +
+{% endblock %} diff --git a/templates/portfolios/applications/edit.html b/templates/portfolios/applications/edit.html index d23db2ec..40108d3a 100644 --- a/templates/portfolios/applications/edit.html +++ b/templates/portfolios/applications/edit.html @@ -4,7 +4,7 @@ {% set secondary_breadcrumb = application.name + ' Application Settings' %} -{% block portfolio_content %} +{% block application_content %} diff --git a/templates/portfolios/applications/new.html b/templates/portfolios/applications/new.html index 43974603..5cc62197 100644 --- a/templates/portfolios/applications/new.html +++ b/templates/portfolios/applications/new.html @@ -1,11 +1,13 @@ -{% extends "portfolios/base.html" %} +{% extends "portfolios/applications/base.html" %} {% from "components/alert.html" import Alert %} {% from "components/icon.html" import Icon %} {% from "components/modal.html" import Modal %} {% from "components/text_input.html" import TextInput %} -{% block portfolio_content %} +{% set secondary_breadcrumb = 'New Application' %} + +{% block application_content %} {% set modalName = "newApplicationConfirmation" %} {% include "fragments/flash.html" %} From 7862cb9c2c6e1272fcd110899dbf9ba6956d1a9f Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Sun, 10 Feb 2019 12:54:18 -0500 Subject: [PATCH 3/8] Move application form contents to one panel --- styles/components/_portfolio_layout.scss | 21 +++- .../fragments/edit_application_form.html | 14 +-- templates/portfolios/applications/edit.html | 54 +++++---- templates/portfolios/applications/new.html | 112 +++++++++--------- translations.yaml | 4 +- 5 files changed, 113 insertions(+), 92 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 0cfca353..f7008d77 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -85,10 +85,6 @@ } } -.portfolio-content { - margin: 6 * $gap $gap 0 $gap; -} - @mixin subheading { color: $color-gray-dark; padding: $gap 0; @@ -98,6 +94,23 @@ font-weight: bold; } +.portfolio-content { + margin: 6 * $gap $gap 0 $gap; + + .application-content { + .subheading { + @include subheading; + } + + .panel { + padding: $gap / 2 0; + box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3); + border-top: none; + border-bottom: none; + } + } +} + .portfolio-applications { .portfolio-applications__header { margin-bottom: 4 * $gap; diff --git a/templates/fragments/edit_application_form.html b/templates/fragments/edit_application_form.html index c9206b1b..ef5dd455 100644 --- a/templates/fragments/edit_application_form.html +++ b/templates/fragments/edit_application_form.html @@ -1,12 +1,8 @@ {% from "components/text_input.html" import TextInput %} {{ form.csrf_token }} -
-
-

- {{ "fragments.edit_application_form.explain" | translate }} -

- {{ TextInput(form.name) }} - {{ TextInput(form.description, paragraph=True) }} -
-
+

+ {{ "fragments.edit_application_form.explain" | translate }} +

+{{ TextInput(form.name) }} +{{ TextInput(form.description, paragraph=True) }} diff --git a/templates/portfolios/applications/edit.html b/templates/portfolios/applications/edit.html index 40108d3a..9b92e443 100644 --- a/templates/portfolios/applications/edit.html +++ b/templates/portfolios/applications/edit.html @@ -6,33 +6,39 @@ {% block application_content %} - +
Application Settings
- {% include "fragments/edit_application_form.html" %} +
+
+ -
-
-

Application Environments

-

- Each environment created within an application is an enclave of cloud resources that is logically separated from each other for increased security. -

-
+ {% include "fragments/edit_application_form.html" %} -
    - {% for environment in application.environments %} -
  • -
    - - -
    -
    • - {% endfor %} -
+
+
+

Application Environments

+

+ Each environment created within an application is an enclave of cloud resources that is logically separated from each other for increased security. +

+
+ +
    + {% for environment in application.environments %} +
  • +
    + + +
    +
    • + {% endfor %} +
+
+ +
+ +
+
- -
- -
- +
{% endblock %} diff --git a/templates/portfolios/applications/new.html b/templates/portfolios/applications/new.html index 5cc62197..b3c21709 100644 --- a/templates/portfolios/applications/new.html +++ b/templates/portfolios/applications/new.html @@ -12,65 +12,71 @@ {% set modalName = "newApplicationConfirmation" %} {% include "fragments/flash.html" %} - -
+
+
- {% call Modal(name=modalName, dismissable=False) %} -

Create application !{ name }

+ + -

- When you click Create Application, the environments - - !{environment.name} - - will be created as individual cloud resource groups under !{ name } application. -

+ {% call Modal(name=modalName, dismissable=False) %} +

Create application !{ name }

-
- - -
- {% endcall %} +

+ When you click Create Application, the environments + + !{environment.name} + + will be created as individual cloud resource groups under !{ name } application. +

- {% include "fragments/edit_application_form.html" %} - -
{# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #} -
- {{ Alert(message=None, level="error", vue_template=True) }} -
-
- -
-
-

Application Environments

-

- Each environment created within an application is an enclave of cloud resources that is logically separated from each other for increased security. -

-
- -
    -
  • -
    - - - +
    + +
    - -
    • -
+ {% endcall %} -
- -
-
+ {% include "fragments/edit_application_form.html" %} -
- -
- - +
{# this extra div prevents this bug: https://www.pivotaltracker.com/story/show/160768940 #} +
+ {{ Alert(message=None, level="error", vue_template=True) }} +
+
+ +
+
+

Application Environments

+

+ Each environment created within an application is an enclave of cloud resources that is logically separated from each other for increased security. +

+
+ +
    +
  • +
    + + + +
    + +
    • +
+ +
+ +
+
+ +
+ +
+ + + +
+
{% endblock %} diff --git a/translations.yaml b/translations.yaml index dfaf1773..3353aee4 100644 --- a/translations.yaml +++ b/translations.yaml @@ -173,7 +173,7 @@ forms: environment_names_label: Environment Name environment_names_required_validation_message: Provide at least one environment name. environment_names_unique_validation_message: Environment names must be unique. - name_label: Application Name + name_label: Name task_order: portfolio_name_label: Organization Portfolio Name portfolio_name_description: The name of your office or organization. You can add multiple applications to your portfolio. Your task orders are used to pay for these applications and their environments. @@ -258,7 +258,7 @@ forms: fragments: edit_application_form: existing_application_title: 'Edit {application_name} application' - explain: 'AT-AT allows you to organize your portfolio into multiple applications, each of which may have environments.' + explain: 'AT-AT allows you to create multiple applications within a portfolio. Each application can then be broken down into its own customizable environments.' new_application_title: Add a new application edit_user_form: date_last_training_tooltip: When was the last time you completed the IA training?
Information Assurance (IA) training is an important step in cyber awareness. From aee6b47cd284fc1478ec5ae8c7e2c5652a7882ba Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Sun, 10 Feb 2019 13:06:31 -0500 Subject: [PATCH 4/8] Move strings to translations file --- templates/portfolios/applications/edit.html | 12 ++++++------ templates/portfolios/applications/new.html | 16 +++++++++------- translations.yaml | 8 +++++++- 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/templates/portfolios/applications/edit.html b/templates/portfolios/applications/edit.html index 9b92e443..357872cf 100644 --- a/templates/portfolios/applications/edit.html +++ b/templates/portfolios/applications/edit.html @@ -2,11 +2,11 @@ {% from "components/text_input.html" import TextInput %} -{% set secondary_breadcrumb = application.name + ' Application Settings' %} +{% set secondary_breadcrumb = 'portfolios.applications.existing_application_title' | translate({ "application_name": application.name }) %} {% block application_content %} -
Application Settings
+
{{ 'portfolios.applications.settings_heading' | translate }}
@@ -15,10 +15,10 @@ {% include "fragments/edit_application_form.html" %}
-
-

Application Environments

+
+

{{ 'portfolios.applications.environments_heading' | translate }}

- Each environment created within an application is an enclave of cloud resources that is logically separated from each other for increased security. + {{ 'portfolios.applications.environments_description' | translate }}

@@ -35,7 +35,7 @@
- +
diff --git a/templates/portfolios/applications/new.html b/templates/portfolios/applications/new.html index b3c21709..2b2e458b 100644 --- a/templates/portfolios/applications/new.html +++ b/templates/portfolios/applications/new.html @@ -5,13 +5,15 @@ {% from "components/modal.html" import Modal %} {% from "components/text_input.html" import TextInput %} -{% set secondary_breadcrumb = 'New Application' %} +{% set secondary_breadcrumb = 'portfolios.applications.new_application_title' | translate %} {% block application_content %} {% set modalName = "newApplicationConfirmation" %} {% include "fragments/flash.html" %} +
{{ 'portfolios.applications.settings_heading' | translate }}
+
@@ -22,7 +24,7 @@

Create application !{ name }

- When you click Create Application, the environments + When you click {{ 'portfolios.applications.create_button_text' | translate }}, the environments !{environment.name} @@ -30,7 +32,7 @@

- +
{% endcall %} @@ -44,10 +46,10 @@
-
-

Application Environments

+
+

{{ 'portfolios.applications.environments_heading' | translate }}

- Each environment created within an application is an enclave of cloud resources that is logically separated from each other for increased security. + {{ 'portfolios.applications.environments_description' | translate }}

@@ -71,7 +73,7 @@
- +
diff --git a/translations.yaml b/translations.yaml index 3353aee4..256d78fd 100644 --- a/translations.yaml +++ b/translations.yaml @@ -257,7 +257,6 @@ forms: name_length_validation_message: Portfolio names must be at least 4 and not more than 100 characters fragments: edit_application_form: - existing_application_title: 'Edit {application_name} application' explain: 'AT-AT allows you to create multiple applications within a portfolio. Each application can then be broken down into its own customizable environments.' new_application_title: Add a new application edit_user_form: @@ -487,6 +486,13 @@ portfolios: app_settings_text: App Settings team_text: Team csp_console_text: CSP Console + existing_application_title: '{application_name} Application Settings' + new_application_title: New Application + settings_heading: Application Settings + environments_heading: Environments + environments_description: Each environment created within an application is logically separated from one another for easier management and security. + update_button_text: Save Changes + create_button_text: Create Application testing: example_string: Hello World example_with_variables: 'Hello, {name}!' From aa8986d8a215452fbc69b27ff18ed818b9deabc1 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Sun, 10 Feb 2019 13:17:05 -0500 Subject: [PATCH 5/8] Update display of application environments on edit/new app page --- styles/components/_portfolio_layout.scss | 8 ++++++++ templates/portfolios/applications/edit.html | 6 +++--- templates/portfolios/applications/new.html | 6 +++--- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index f7008d77..73e554d5 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -108,6 +108,14 @@ border-top: none; border-bottom: none; } + + .application-list-item { + ul { + padding-left: 0; + } + .application-edit__env-list-item { + } + } } } diff --git a/templates/portfolios/applications/edit.html b/templates/portfolios/applications/edit.html index 357872cf..947903ab 100644 --- a/templates/portfolios/applications/edit.html +++ b/templates/portfolios/applications/edit.html @@ -14,8 +14,8 @@ {% include "fragments/edit_application_form.html" %} -
-
+
+

{{ 'portfolios.applications.environments_heading' | translate }}

{{ 'portfolios.applications.environments_description' | translate }} @@ -24,7 +24,7 @@

    {% for environment in application.environments %} -
  • +
  • diff --git a/templates/portfolios/applications/new.html b/templates/portfolios/applications/new.html index 2b2e458b..00c8dae2 100644 --- a/templates/portfolios/applications/new.html +++ b/templates/portfolios/applications/new.html @@ -45,8 +45,8 @@
-
-
+
+

{{ 'portfolios.applications.environments_heading' | translate }}

{{ 'portfolios.applications.environments_description' | translate }} @@ -54,7 +54,7 @@

    -
  • +
  • From 4e466af009ab368c065b3302165e99f95aa79d25 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Sun, 10 Feb 2019 13:25:57 -0500 Subject: [PATCH 6/8] Move form submission buttons outside of panel --- styles/components/_portfolio_layout.scss | 3 ++- templates/portfolios/applications/edit.html | 16 +++++++------- templates/portfolios/applications/new.html | 24 ++++++++++----------- 3 files changed, 22 insertions(+), 21 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 73e554d5..3640dbc1 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -113,7 +113,8 @@ ul { padding-left: 0; } - .application-edit__env-list-item { + .block-list__footer { + border-bottom: none; } } } diff --git a/templates/portfolios/applications/edit.html b/templates/portfolios/applications/edit.html index 947903ab..9d7761c2 100644 --- a/templates/portfolios/applications/edit.html +++ b/templates/portfolios/applications/edit.html @@ -8,9 +8,9 @@
    {{ 'portfolios.applications.settings_heading' | translate }}
    -
    -
    -
    + +
    +
    {% include "fragments/edit_application_form.html" %} @@ -34,11 +34,11 @@
-
- -
- +
-
+
+ +
+ {% endblock %} diff --git a/templates/portfolios/applications/new.html b/templates/portfolios/applications/new.html index 00c8dae2..343bb10a 100644 --- a/templates/portfolios/applications/new.html +++ b/templates/portfolios/applications/new.html @@ -14,11 +14,10 @@
{{ 'portfolios.applications.settings_heading' | translate }}
-
-
- - -
+ + +
+
{% call Modal(name=modalName, dismissable=False) %}

Create application !{ name }

@@ -72,13 +71,14 @@
-
- -
- -
-
-
+
+
+ +
+ +
+ + {% endblock %} From fe6a14d3cef45b368fce672a8b74a19e817fd1e3 Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Sun, 10 Feb 2019 14:07:12 -0500 Subject: [PATCH 7/8] Update disabled styles on edit app environments --- styles/components/_portfolio_layout.scss | 5 +++++ templates/portfolios/applications/edit.html | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 3640dbc1..b781accc 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -116,6 +116,11 @@ .block-list__footer { border-bottom: none; } + .application-edit__env-list-item { + label { + color: $color-black; + } + } } } } diff --git a/templates/portfolios/applications/edit.html b/templates/portfolios/applications/edit.html index 9d7761c2..c648f2f7 100644 --- a/templates/portfolios/applications/edit.html +++ b/templates/portfolios/applications/edit.html @@ -25,9 +25,9 @@
    {% for environment in application.environments %}
  • -
    +
    - +
    • {% endfor %} From 019d362a952454d44888cb82252432ad69da392c Mon Sep 17 00:00:00 2001 From: Patrick Smith Date: Sun, 10 Feb 2019 14:07:29 -0500 Subject: [PATCH 8/8] Use blue outline on input fields instead of gray --- styles/elements/_inputs.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/styles/elements/_inputs.scss b/styles/elements/_inputs.scss index f72f48ee..296b4a71 100644 --- a/styles/elements/_inputs.scss +++ b/styles/elements/_inputs.scss @@ -12,7 +12,7 @@ @mixin input-state($state) { $border-width: 1px; - $state-color: $color-gray; + $state-color: $color-blue; @if $state == 'error' { $border-width: 2px; @@ -283,6 +283,8 @@ } } + @include input-state('default'); + &.usa-input--error { @include input-state('error'); }