From 52d16017c3280dd1824b776225905bc963b241aa Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 2 Oct 2019 13:13:38 -0400 Subject: [PATCH 01/16] Update styling for modal macro and add notes about what classes to use to maintain styling --- styles/components/_modal.scss | 18 ++++++++++++------ templates/components/modal.html | 5 +++++ 2 files changed, 17 insertions(+), 6 deletions(-) diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss index 561c5c33..d4df9845 100644 --- a/styles/components/_modal.scss +++ b/styles/components/_modal.scss @@ -50,9 +50,8 @@ body { &__body { background-color: $color-white; - padding: $gap * 2; + padding: $gap * 1.5; width: 100%; - border-radius: 5px; overflow-y: auto; -ms-overflow-style: scrollbar; @@ -60,10 +59,6 @@ body { max-height: calc(100vh - #{$gap * 8}); } - @include media($medium-screen) { - padding: $gap * 2.5 $gap * 5; - } - h1, h2 { @include h3; @@ -121,6 +116,17 @@ body { } } } + + .action-group { + background-color: $color-gray-lightest; + padding: $gap * 2; + margin: 0 (-$gap * 1.5) (-$gap * 1.5); + } + + hr { + border-bottom: 1px solid $color-gray-lighter; + margin: 0 (-$gap * 1.5); + } } &__dismiss { diff --git a/templates/components/modal.html b/templates/components/modal.html index fee30067..6d7fd06f 100644 --- a/templates/components/modal.html +++ b/templates/components/modal.html @@ -6,6 +6,11 @@
diff --git a/templates/portfolios/fragments/delete_portfolio.html b/templates/portfolios/fragments/delete_portfolio.html index 7f6a0f30..da83b2e7 100644 --- a/templates/portfolios/fragments/delete_portfolio.html +++ b/templates/portfolios/fragments/delete_portfolio.html @@ -21,7 +21,7 @@

{{ 'fragments.delete_portfolio.title' | translate }}

- +
{{ Alert( level="warning", diff --git a/templates/portfolios/fragments/portfolio_members.html b/templates/portfolios/fragments/portfolio_members.html index ef0fb0d7..e6980126 100644 --- a/templates/portfolios/fragments/portfolio_members.html +++ b/templates/portfolios/fragments/portfolio_members.html @@ -81,6 +81,7 @@ {% set modal_id = "portfolio_id_{}_user_id_{}".format(portfolio.id, subform.member_id.data) %} {% call Modal(name=modal_id, dismissable=False) %}

{{ "portfolios.admin.alert_header" | translate }}

+
{{ Alert( title="portfolios.admin.alert_title" | translate, @@ -88,16 +89,14 @@ level="warning" ) }} -
-
-
- {{ member_perms_form.csrf_token }} - -
- {{ "common.cancel" | translate }} -
+
+
+ {{ member_perms_form.csrf_token }} + +
+ {{ "common.cancel" | translate }}
{% endcall %} {% endfor %} diff --git a/templates/styleguide.html b/templates/styleguide.html index 8c5a0591..31e028d5 100644 --- a/templates/styleguide.html +++ b/templates/styleguide.html @@ -10,7 +10,7 @@ {% call Modal(name='styleguideModal', dismissable=True) %}

A modal dialog

- +

We count thirty Rebel ships, Lord Vader. But they're so small they're evading our turbo-lasers! We'll have to destroy them ship to ship. Get the crews to their fighters. Luke, let me know when you're going in. I'm on my way in now... Watch yourself! There's a lot of fire coming from the right side of that deflection tower. I'm on it. Squad leaders, we've picked up a new group of signals. Enemy fighters coming your way.

I hope the old man got that tractor beam out if commission, or this is going to be a real short trip. Okay, hit it! We're coming up on the sentry ships. Hold 'em off! Angle the deflector shields while I charge up the main guns! I can't believe he's gone. There wasn't anything you could have done. Come on, buddy, we're not out of this yet! You in, kid? Okay, stay sharp!

diff --git a/templates/task_orders/builder_base.html b/templates/task_orders/builder_base.html index d9f778be..fb9d899a 100644 --- a/templates/task_orders/builder_base.html +++ b/templates/task_orders/builder_base.html @@ -37,7 +37,7 @@ {% call Modal(name='cancel', dismissable=True) %}

Do you want to save this draft?

-
+
From fe29b5d838053576e2b2c37577c3e075824e1ba2 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 2 Oct 2019 14:47:41 -0400 Subject: [PATCH 03/16] Low-fi update of multi-step modals to fix styling --- styles/components/_modal.scss | 4 ++ styles/components/_progress_menu.scss | 6 ++- .../fragments/new_member_modal_content.html | 6 +-- templates/applications/settings.html | 1 - .../components/multi_step_modal_form.html | 4 +- .../fragments/add_new_portfolio_member.html | 44 +++++++++---------- .../portfolios/fragments/change_ppoc.html | 42 ++++++++---------- 7 files changed, 51 insertions(+), 56 deletions(-) diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss index f2653a6f..826d37b9 100644 --- a/styles/components/_modal.scss +++ b/styles/components/_modal.scss @@ -127,6 +127,10 @@ body { border-bottom: 1px solid $color-gray-lighter; margin: 0 (-$gap * 1.5); } + + .form-row { + margin: 0; + } } &__dismiss { diff --git a/styles/components/_progress_menu.scss b/styles/components/_progress_menu.scss index 3cb2808f..90780705 100644 --- a/styles/components/_progress_menu.scss +++ b/styles/components/_progress_menu.scss @@ -3,8 +3,10 @@ ul { list-style: none; - margin: 0; + margin: auto; + width: 50%; padding: 0; + padding-top: $gap; } &--two { @@ -40,7 +42,7 @@ a { display: block; position: relative; - padding: ($gap * 4) ($gap * 2); + padding: ($gap * 4) ($gap * 2) 0; margin: 0 ($gap * 2); text-decoration: none; text-align: center; diff --git a/templates/applications/fragments/new_member_modal_content.html b/templates/applications/fragments/new_member_modal_content.html index 94bbc64e..5e835e5b 100644 --- a/templates/applications/fragments/new_member_modal_content.html +++ b/templates/applications/fragments/new_member_modal_content.html @@ -2,10 +2,8 @@ {% import "applications/fragments/member_form_fields.html" as member_fields %} {% macro MemberFormTemplate(title, next_button, previous=True) %} -
-

{{ Icon('avatar') }} {{ title }}

-
-
+
+

{{ Icon('avatar') }} {{ title }}

{{ caller() }} diff --git a/templates/applications/settings.html b/templates/applications/settings.html index 62c8eed6..362d4e7b 100644 --- a/templates/applications/settings.html +++ b/templates/applications/settings.html @@ -6,7 +6,6 @@ {% import "applications/fragments/new_member_modal_content.html" as member_steps %} {% from "fragments/members.html" import MemberManagementTemplate %} {% from "components/modal.html" import Modal %} -{% from "components/multi_step_modal_form.html" import MultiStepModalForm %} {% from "components/pagination.html" import Pagination %} {% from "components/save_button.html" import SaveButton %} {% from "components/text_input.html" import TextInput %} diff --git a/templates/components/multi_step_modal_form.html b/templates/components/multi_step_modal_form.html index 23d21ffa..a7f71edf 100644 --- a/templates/components/multi_step_modal_form.html +++ b/templates/components/multi_step_modal_form.html @@ -28,12 +28,12 @@ {% macro MultiStepModalForm(name, form, form_action, steps, dismissable=False) -%} {% set step_count = steps|length %} - {% call Modal(name=name, dismissable=dismissable, classes="wide") %} + {% call Modal(name=name, dismissable=dismissable) %}
{{ form.csrf_token }}
{% for step in steps %} -
+
{{ FormSteps(step_count, loop.index) }} {{ step }}
diff --git a/templates/portfolios/fragments/add_new_portfolio_member.html b/templates/portfolios/fragments/add_new_portfolio_member.html index 82654c01..931f3db7 100644 --- a/templates/portfolios/fragments/add_new_portfolio_member.html +++ b/templates/portfolios/fragments/add_new_portfolio_member.html @@ -16,9 +16,8 @@ {% endmacro %} {% set step_one %} -
-

Invite new portfolio member

-
+
+

Invite new portfolio member

{{ TextInput(member_form.user_data.first_name, validation='requiredField', optional=False) }} @@ -47,32 +46,29 @@ type='button' v-on:click="next()" v-bind:disabled="invalid" - class='action-group__action usa-button' + class='action-group__action usa-button usa-button-primary' value='Next'> Cancel
{% endset %} {% set step_two %} -
-
-

Assign member permissions

- - {{ Icon('info') }} - {{ "portfolios.admin.permissions_info" | translate }} - -
- {{ SimpleOptionsInput(member_form.permission_sets.perms_app_mgmt) }} - {{ SimpleOptionsInput(member_form.permission_sets.perms_funding) }} - {{ SimpleOptionsInput(member_form.permission_sets.perms_reporting) }} - {{ SimpleOptionsInput(member_form.permission_sets.perms_portfolio_mgmt) }} -
- - Cancel -
+
+

Assign member permissions

+ + {{ Icon('info') }} + {{ "portfolios.admin.permissions_info" | translate }} + + {{ SimpleOptionsInput(member_form.permission_sets.perms_app_mgmt) }} + {{ SimpleOptionsInput(member_form.permission_sets.perms_funding) }} + {{ SimpleOptionsInput(member_form.permission_sets.perms_reporting) }} + {{ SimpleOptionsInput(member_form.permission_sets.perms_portfolio_mgmt) }} +
+ + Cancel
{% endset %} {{ MultiStepModalForm( diff --git a/templates/portfolios/fragments/change_ppoc.html b/templates/portfolios/fragments/change_ppoc.html index ddd5b7d1..1204da86 100644 --- a/templates/portfolios/fragments/change_ppoc.html +++ b/templates/portfolios/fragments/change_ppoc.html @@ -6,9 +6,8 @@ {% from "components/options_input.html" import OptionsInput %} {% set step_one %} -
-

{{ "fragments.ppoc.update_ppoc_title" | translate }}

-
+
+

{{ "fragments.ppoc.update_ppoc_title" | translate }}

{{ Alert( @@ -43,28 +42,25 @@ {% endset %} {% set step_two %} -
-
-

{{ "fragments.ppoc.update_ppoc_confirmation_title" | translate }}

-
+
+

{{ "fragments.ppoc.update_ppoc_confirmation_title" | translate }}

- {{ - Alert( - level="info", - title=("fragments.ppoc.confirm_alert.title" | translate), - ) - }} + {{ + Alert( + level="info", + title=("fragments.ppoc.confirm_alert.title" | translate), + ) + }} -
- - - {{ "common.cancel" | translate }} - -
+
+ + + {{ "common.cancel" | translate }} +
{% endset %} From cf42bfbbda3a9843a227b050a4d51c87f4b4e7c1 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 2 Oct 2019 16:22:14 -0400 Subject: [PATCH 04/16] Remove text from dismiss modal button --- styles/components/_modal.scss | 7 ++++++- templates/components/modal.html | 3 --- 2 files changed, 6 insertions(+), 4 deletions(-) diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss index 826d37b9..216ddd8c 100644 --- a/styles/components/_modal.scss +++ b/styles/components/_modal.scss @@ -137,7 +137,6 @@ body { position: absolute; top: $gap; right: $gap; - width: 8rem; @include media($medium-screen) { top: $gap * 2; @@ -251,3 +250,9 @@ body { } } } + +.modal--dismissable { + .modal__body { + padding-top: $gap * 3.5; + } +} diff --git a/templates/components/modal.html b/templates/components/modal.html index 6d7fd06f..04821261 100644 --- a/templates/components/modal.html +++ b/templates/components/modal.html @@ -16,9 +16,6 @@ {% if dismissable %} {% endif %}
From 5482973fdd1504717e6389369ce04dd350e680ee Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 2 Oct 2019 16:26:04 -0400 Subject: [PATCH 05/16] Delete unused classes --- styles/components/_modal.scss | 87 -------------------------------- styles/sections/_task_order.scss | 9 ---- 2 files changed, 96 deletions(-) diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss index 216ddd8c..48feeac4 100644 --- a/styles/components/_modal.scss +++ b/styles/components/_modal.scss @@ -149,93 +149,6 @@ body { } } - &--dissmissable { - .modal__body { - > :first-child { - margin-right: 8rem; - } - } - } - - &__form { - &--header { - margin-bottom: 4rem; - text-align: left; - - h1 { - margin-bottom: 0; - } - - .icon-link { - padding-top: 0.5rem; - padding-left: 0; - margin-left: 0; - } - } - - &--padded { - padding-left: 5%; - padding-right: 5%; - - .usa-input .usa-input__choices select { - max-width: 100%; - } - } - - .progress-menu ul { - width: 40%; - margin-left: 30%; - font-size: 2rem; - - &__item::before { - width: 2.8rem; - height: 2.8rem; - margin-left: -1.25rem; - } - - &__item--complete::before { - content: url("#{$asset-path}/icons/checkmark-alt.svg"); - padding-top: 0.4rem; - } - } - - .form-row { - margin-top: 0; - margin-bottom: 0; - - .form-col { - .usa-input { - margin-bottom: 1.5rem; - } - } - } - - .icon-link--default { - font-size: 1.7rem; - } - - .usa-button { - margin-left: 2rem; - - &[type="button"]:disabled { - background-color: $color-gray-lighter; - opacity: inherit; - } - } - } - - &.wide { - .modal__dialog { - max-width: 90rem; - width: 100%; - } - - .modal__body { - padding-left: 4rem; - padding-right: 4rem; - } - } - .usa-button { min-width: 17rem; } diff --git a/styles/sections/_task_order.scss b/styles/sections/_task_order.scss index 9e0f26a8..b0582dd0 100644 --- a/styles/sections/_task_order.scss +++ b/styles/sections/_task_order.scss @@ -271,15 +271,6 @@ text-align: center; } -.task-order__modal-cancel_buttons { - display: flex; - justify-content: center; - - button { - margin-top: 0; - } -} - .clin-card { width: 62rem; position: relative; From 4c865c8c6644ee6ec3e4b3014b638c68ae680490 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 2 Oct 2019 16:32:34 -0400 Subject: [PATCH 06/16] Style cancel link in multi-step modals --- styles/components/_modal.scss | 4 ++++ .../applications/fragments/new_member_modal_content.html | 2 +- templates/portfolios/fragments/add_new_portfolio_member.html | 4 ++-- 3 files changed, 7 insertions(+), 3 deletions(-) diff --git a/styles/components/_modal.scss b/styles/components/_modal.scss index 48feeac4..a5e9cfa5 100644 --- a/styles/components/_modal.scss +++ b/styles/components/_modal.scss @@ -121,6 +121,10 @@ body { background-color: $color-gray-lightest; padding: $gap * 2; margin: ($gap * 5) (-$gap * 1.5) (-$gap * 1.5); + + a { + color: $color-blue; + } } hr { diff --git a/templates/applications/fragments/new_member_modal_content.html b/templates/applications/fragments/new_member_modal_content.html index 5e835e5b..3dd35e24 100644 --- a/templates/applications/fragments/new_member_modal_content.html +++ b/templates/applications/fragments/new_member_modal_content.html @@ -16,7 +16,7 @@ class='action-group__action usa-button usa-button-secondary' value='{{ "common.previous" | translate }}'> {% endif %} - {{ "common.cancel" | translate }} + {{ "common.cancel" | translate }}
{% endmacro %} diff --git a/templates/portfolios/fragments/add_new_portfolio_member.html b/templates/portfolios/fragments/add_new_portfolio_member.html index 931f3db7..f2e0b4be 100644 --- a/templates/portfolios/fragments/add_new_portfolio_member.html +++ b/templates/portfolios/fragments/add_new_portfolio_member.html @@ -48,7 +48,7 @@ v-bind:disabled="invalid" class='action-group__action usa-button usa-button-primary' value='Next'> - Cancel + Cancel
{% endset %} {% set step_two %} @@ -68,7 +68,7 @@ class='action-group__action usa-button usa-button-primary' form="add-port-mem" value='Invite member'> - Cancel + Cancel
{% endset %} {{ MultiStepModalForm( From b21bc5a69fb68d524e5e33deea7e7621062f6556 Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Wed, 2 Oct 2019 16:40:38 -0400 Subject: [PATCH 07/16] Update test templates --- js/test_templates/to_form.html | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/js/test_templates/to_form.html b/js/test_templates/to_form.html index 930c4d1d..af4f0e4a 100644 --- a/js/test_templates/to_form.html +++ b/js/test_templates/to_form.html @@ -23,9 +23,13 @@