From 595995cf03c9a4fd0e59952706697ad6340150ad Mon Sep 17 00:00:00 2001 From: leigh-mil Date: Mon, 14 Oct 2019 13:48:35 -0400 Subject: [PATCH] Update styling for empty state and the app environments panel --- styles/components/_empty_state.scss | 16 +-- styles/components/_portfolio_layout.scss | 2 +- styles/elements/_labels.scss | 4 +- templates/fragments/environments.html | 166 ++++++++++++----------- translations.yaml | 1 + 5 files changed, 95 insertions(+), 94 deletions(-) diff --git a/styles/components/_empty_state.scss b/styles/components/_empty_state.scss index 37630b1a..0e102a4d 100644 --- a/styles/components/_empty_state.scss +++ b/styles/components/_empty_state.scss @@ -1,30 +1,18 @@ .empty-state { text-align: center; - padding: 6rem ($gap * 2) 0; + padding: 5rem ($gap * 2) 2rem; display: flex; flex-direction: column; align-items: center; max-width: 100%; - @include media($medium-screen) { - padding: 8rem ($gap * 4) 0; - } - > .icon { @include icon-size(50); @include icon-color($color-gray-light); } &__message { - @include h2; - - line-height: 1.2; - max-width: 15em; - color: $color-gray; - - @include media($large-screen) { - @include h1; - } + font-weight: $font-bold; } &__sub-message { diff --git a/styles/components/_portfolio_layout.scss b/styles/components/_portfolio_layout.scss index 999f4e43..899359ee 100644 --- a/styles/components/_portfolio_layout.scss +++ b/styles/components/_portfolio_layout.scss @@ -239,7 +239,7 @@ .panel { @include shadow-panel; - padding-bottom: 0; + padding-bottom: 2rem; } .application-list-item { diff --git a/styles/elements/_labels.scss b/styles/elements/_labels.scss index 02347168..4dae377f 100644 --- a/styles/elements/_labels.scss +++ b/styles/elements/_labels.scss @@ -44,8 +44,6 @@ } .icon { - @include icon-color($color-white) - @include icon-size(12) - margin: 0; + @include icon-color($color-white) @include icon-size(12) margin: 0; } } diff --git a/templates/fragments/environments.html b/templates/fragments/environments.html index dcd1638c..7b39f730 100644 --- a/templates/fragments/environments.html +++ b/templates/fragments/environments.html @@ -3,85 +3,99 @@ {% from "components/text_input.html" import TextInput %} {% from "components/toggle_list.html" import ToggleButton, ToggleSection %} -{% macro EnvironmentManagementTemplate(application, environments_obj, new_env_form, user_can_create_environment) %} -

{{ 'common.resource_names.environments' | translate }}

+{% macro EnvironmentManagementTemplate( + application, + environments_obj, + new_env_form, + user_can_create_environment +) %} + +

{{ "portfolios.applications.settings.environments" | translate }}

- {% if g.matchesPath("application-environments") %} + {% if g.matchesPath("application-environments") -%} {% include "fragments/flash.html" %} - {% endif %} -
-
-
    - {% for env in environments_obj %} - {% set edit_form = env['edit_form'] %} - -
  • -
    -
    - - {{ env['name'] }} - - {% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %} - {{ - ToggleButton( - open_html=members_button, - close_html=members_button, - section_name="members", - classes="environment-list__item__members" - ) - }} - {% set edit_environment_button = "Edit" %} - {{ - ToggleButton( - open_html=edit_environment_button, - close_html=edit_environment_button, - section_name="edit" - ) - }} -
    - {% if env['pending'] -%} - {{Icon('exchange')}} CHANGES PENDING - {% else %} - - {{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }} - - {%- endif %} -
    -
    - - {% call ToggleSection(section_name="members") %} -
      - {% for member in env['members'] %} -
    • - {{ member }} -
      • - {% endfor %} -
    - {% endcall %} - - {% call ToggleSection(section_name="edit") %} -
      -
    • -
      - {{ edit_form.csrf_token }} - {{ TextInput(edit_form.name, validation='requiredField') }} - {{ - SaveButton( - text=("common.save" | translate) - ) - }} -
      -
      • -
    - {% endcall %} -
    • -     - {% endfor %} -
+ {%- endif %} + {% if 0 == environments_obj | length -%} +
+

+ This Application has no environments +

-
- {% if user_can_create_environment %} + {% else %} +
+
+
    + {% for env in environments_obj %} + {% set edit_form = env['edit_form'] %} + +
  • +
    +
    + + {{ env['name'] }} + + {% set members_button = "portfolios.applications.member_count" | translate({'count': env['member_count']}) %} + {{ + ToggleButton( + open_html=members_button, + close_html=members_button, + section_name="members", + classes="environment-list__item__members" + ) + }} + {% set edit_environment_button = "Edit" %} + {{ + ToggleButton( + open_html=edit_environment_button, + close_html=edit_environment_button, + section_name="edit" + ) + }} +
    + {% if env['pending'] -%} + {{Icon('exchange')}} CHANGES PENDING + {% else %} + + {{ "portfolios.applications.csp_link" | translate }} {{ Icon('link', classes="icon--tiny") }} + + {%- endif %} +
    +
    + + {% call ToggleSection(section_name="members") %} +
      + {% for member in env['members'] %} +
    • + {{ member }} +
      • + {% endfor %} +
    + {% endcall %} + + {% call ToggleSection(section_name="edit") %} +
      +
    • +
      + {{ edit_form.csrf_token }} + {{ TextInput(edit_form.name, validation='requiredField') }} + {{ + SaveButton( + text=("common.save" | translate) + ) + }} +
      +
      • +
    + {% endcall %} +
    • +     + {% endfor %} +
+
+
+ {%- endif %} + {% if user_can_create_environment -%} {% include "applications/fragments/add_new_environment.html" %} - {% endif %} + {%- endif %}
{% endmacro %} diff --git a/translations.yaml b/translations.yaml index 423151b8..0724f926 100644 --- a/translations.yaml +++ b/translations.yaml @@ -377,6 +377,7 @@ portfolios: settings: name_description: Application name and description team_members: Team Members + environments: Application Environments team_settings: blank_slate: action_label: Invite a new team member