Merge pull request #638 from dod-ccpo/reskin-updates

Reskin updates
2019-02-13 10:10:24 -05:00 · 2019-02-13 10:10:24 -05:00 · 98091dffea
commit 98091dffea
parent 9a326b58b9 982c928faf
19 changed files with 115 additions and 70 deletions
--- a/atst/routes/portfolios/index.py
+++ b/atst/routes/portfolios/index.py
@ -23,7 +23,7 @@ def portfolios():


@portfolios_bp.route("/portfolios/<portfolio_id>/admin")
-def portfolio(portfolio_id):
+def portfolio_admin(portfolio_id):
    portfolio = Portfolios.get_for_update_information(g.current_user, portfolio_id)
    form = PortfolioForm(data={"name": portfolio.name})
    pagination_opts = Paginator.get_pagination_opts(http_request)
--- a/styles/components/_global_layout.scss
+++ b/styles/components/_global_layout.scss
@ -1,5 +1,5 @@
 #app-root {
-  background-color: $color-white;
+  background-color: $color-offwhite;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
--- a/styles/components/_portfolio_layout.scss
+++ b/styles/components/_portfolio_layout.scss
@ -3,6 +3,8 @@
    @include grid-row;
  }

+  margin-left: 2 * $gap;
+
  .line {
    box-sizing: border-box;
    height: 2px;
@ -47,6 +49,9 @@
    .icon-link {
      color: $color-gray-medium;
      pointer-events: none;
+      &.icon-link--disabled {
+        opacity: 1;
+      }
    }
  }
 }
@ -57,7 +62,7 @@
    flex-direction: row;
  }

-  margin: 2 * $gap 0;
+  margin: 2 * $gap;

  .portfolio-header__name {
    @include h1;
@ -67,6 +72,10 @@
    font-size: $small-font-size;
    align-items: center;

+    .icon-tooltip {
+      margin-left: -$gap / 2;
+    }
+
    button {
      margin: 0;
      padding: 0;
@ -95,7 +104,7 @@
      }

      .icon {
-        @include icon-size(20);
+        @include icon-size(30);
      }
    }
  }
@ -109,7 +118,11 @@
    margin-left: -.4rem;
  }

-  .cents {
+  .portfolio-header__budget--amount {
+    white-space: nowrap;
+  }
+
+  .portfolio-header__budget--cents {
    font-size: 2rem;
    margin-top: .75rem;
    margin-left: -.7rem;
@ -122,13 +135,6 @@
    font-weight: bold;
  }

-  .funded {
-    color: $color-blue;
-    .icon {
-      @include icon-color($color-blue);
-    }
-  }
-
  .unfunded {
    color: $color-red;
    .icon {
@ -144,6 +150,7 @@
  opacity: 0.54;
  font-size: $small-font-size;
  font-weight: bold;
+  margin-bottom: 3 * $gap;
 }

 .portfolio-content {
@ -173,6 +180,10 @@
      td {
        border-bottom: 1px solid $color-gray-lightest;
      }
+
+      .add-member-link {
+        text-align: right;
+      }
    }
  }

@ -215,7 +226,6 @@

 .portfolio-applications {
  .portfolio-applications__header {
-    margin-bottom: 4 * $gap;

    .portfolio-applications__header--title {
      @include subheading;
@ -242,6 +252,7 @@
    .application-list-item {
      border-radius: 5px;
      box-shadow: 0 4px 8px 1px rgba(230,230,230,0.5), -4px 4px 8px 1px rgba(230,230,230,0.5);
+      margin-bottom: 6 * $gap;

      .col {
        max-width: 95%;
@ -269,7 +280,7 @@
  .subheading {
    @include subheading;
    margin-top: 6 * $gap;
-    margin-bottom: $gap;
+    margin-bottom: 2 * $gap;
  }

  .portfolio-funding__header {
@ -369,7 +380,6 @@
        &.funded .to-expiration-alert {
          color: $color-blue;

-
          .icon {
            @include icon-color($color-blue);
          }
@ -403,9 +413,8 @@
  }

  .panel {
-    box-shadow: 0 6px 18px 0 rgba(144,164,183,0.3);
-    border-top: none;
-    border-bottom: none;
+    @include shadow-panel;
+    margin-bottom: 4 * $gap;
  }
 }

@ -418,9 +427,12 @@
    margin-bottom: 0;

    .form-col {
-      .usa-input {
+      .usa-input--validation--portfolioName {
        input {
-          max-width: 45em;
+          max-width: 30em;
+        }
+        .icon-validation {
+          left: 30em;
        }
      }
    }
--- a/styles/core/_variables.scss
+++ b/styles/core/_variables.scss
@ -58,6 +58,7 @@ $color-red-light:            #e59393;
 $color-red-lightest:         #f9dede;

 $color-white:                #ffffff;
+$color-offwhite:             #fbfbfd;
 $color-black:                #000000;
 $color-black-light:          #212121;

--- a/styles/elements/_accordians.scss
+++ b/styles/elements/_accordians.scss
@ -2,6 +2,7 @@
  @include block-list;

  box-shadow: 0 4px 10px 0 rgba(193,193,193,0.5);
+  margin-bottom: 6 * $gap;

  .icon-link {
    margin: -$gap 0;
@ -40,6 +41,7 @@
    margin: 0;
    display: block;
    padding: 0 $gap;
+    text-decoration: none;
  }
 }

@ -70,6 +72,7 @@
  .separator {
    border: 1px solid $color-gray-medium;
    opacity: 0.75;
+    margin: 0 .5 * $gap;
  }
 }

--- a/styles/elements/_icon_link.scss
+++ b/styles/elements/_icon_link.scss
@ -47,6 +47,7 @@
 .icon-link {
  @include icon-link;
  @include icon-link-color($color-primary);
+  text-decoration: underline;

  &.icon-link--vertical {
    @include icon-link-vertical;
@ -67,6 +68,7 @@
  &.icon-link--disabled {
    opacity: 0.3;
    pointer-events: none;
+    text-decoration: none;
  }

  &.icon-link--left {
--- a/styles/elements/_icons.scss
+++ b/styles/elements/_icons.scss
@ -78,4 +78,13 @@
  &.icon--gold {
    @include icon-color($color-gold-dark);
  }
+
+  &.icon--circle {
+    svg {
+      border-radius: 100%;
+      border-style: solid;
+      border-width: 1px;
+      padding: 2px;
+    }
+  }
 }
--- a/styles/elements/_sidenav.scss
+++ b/styles/elements/_sidenav.scss
@ -60,11 +60,17 @@
      margin-bottom: $gap;
    }

+    .sidenav__text {
+      margin: 2 * $gap;
+      color: $color-gray;
+      font-style: italic;
+    }
+
    .sidenav__link {
      display: block;
      padding: $gap ($gap * 2);
      color: $color-black;
-      text-decoration: none;
+      text-decoration: underline;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
@ -131,7 +137,6 @@
      }

      + ul {
-        // padding-bottom: $gap / 2;

        li {
          .sidenav__link {
--- a/styles/sections/_reports.scss
+++ b/styles/sections/_reports.scss
@ -64,7 +64,6 @@
        }

        .spend-summary__budget {
-          margin: 0 0 0 $gap;

          @include ie-only {
            margin: $gap 0 0 0;
@ -162,6 +161,7 @@

          dl {
            text-align: right;
+            margin-top: -2 * $gap;

            dd, dt {
              display: inline;
@ -175,13 +175,11 @@
            }

            dd.ending-soon {
-              color: $color-red-dark;
              font-size: $h2-font-size;
              white-space: nowrap;

              .icon {
                @include icon-size(28);
-                @include icon-color($color-red-dark);
              }
            }
          }
--- a/styles/sections/_task_order.scss
+++ b/styles/sections/_task_order.scss
@ -2,6 +2,11 @@
  text-align: center;
  padding: 4rem 6rem;

+  .panel {
+    @include shadow-panel;
+    margin-bottom: 6 * $gap;
+  }
+
  .task-order-get-started__list {
    ul {
      list-style: none;
--- a/templates/navigation/global_sidenav.html
+++ b/templates/navigation/global_sidenav.html
@ -18,17 +18,21 @@
      <div v-if="props.isVisible">
        <div class="sidenav__title">Portfolios</div>
        <ul class="sidenav__list--padded">
-          {% for other_portfolio in portfolios|sort(attribute='name') %}
-            {{ SidenavItem(other_portfolio.name,
-              href=url_for("portfolios.show_portfolio", portfolio_id=other_portfolio.id),
-              active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
-              ) }}
-          {% endfor %}
+          {% if portfolios %}
+            {% for other_portfolio in portfolios|sort(attribute='name') %}
+              {{ SidenavItem(other_portfolio.name,
+                href=url_for("portfolios.show_portfolio", portfolio_id=other_portfolio.id),
+                active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
+                ) }}
+            {% endfor %}
+          {% else %}
+            <li><span class="sidenav__text">You have no portfolios yet</span></li>
+          {% endif %}
        </ul>
        <div class="sidenav__divider--small"></div>
        <a class="sidenav__link sidenav__link--add" href="{{ url_for("task_orders.get_started") }}" title="Fund a New Portfolio">
          <span class="sidenav__link-label">Fund a New Portfolio</span>
-          {{ Icon("plus", classes="sidenav__link-icon") }}
+          {{ Icon("plus", classes="sidenav__link-icon icon--circle") }}
        </a>
      </div>
    </div>
--- a/templates/portfolios/admin.html
+++ b/templates/portfolios/admin.html
@ -28,6 +28,6 @@

    {% include "fragments/audit_events_log.html" %}

-    {{ Pagination(audit_events, 'portfolios.portfolio_activity', portfolio_id=portfolio_id) }}
+    {{ Pagination(audit_events, 'portfolios.portfolio_admin', portfolio_id=portfolio.id) }}
  </div>
 {% endblock %}
--- a/templates/portfolios/applications/index.html
+++ b/templates/portfolios/applications/index.html
@ -14,7 +14,7 @@
      {% if can_create_applications %}
        <a class='icon-link' href='{{ url_for('portfolios.new_application', portfolio_id=portfolio.id) }}'>
          {{ 'portfolios.applications.add_application_text' | translate }}
-          {{ Icon("plus", classes="sidenav__link-icon") }}
+          {{ Icon("plus", classes="sidenav__link-icon icon--circle") }}
        </a>
      {% endif %}
    </div>
--- a/templates/portfolios/applications/members.html
+++ b/templates/portfolios/applications/members.html
@ -62,10 +62,10 @@
          <td v-html="member.role"></td>
        </tr>
        <tr>
-          <td colspan=4>
+          <td class="add-member-link" colspan=4>
            <a class="icon-link" href="{{ url_for('portfolios.new_member', portfolio_id=portfolio.id) }}">
              Add A New Member
-              {{ Icon('plus') }}
+              {{ Icon('plus', classes='icon--circle') }}
            </a>
          </td>
        </tr>
--- a/templates/portfolios/blank_slate.html
+++ b/templates/portfolios/blank_slate.html
@ -9,7 +9,7 @@
 {% block content %}
  {{
    EmptyState(
-      action_href=url_for("task_orders.new", screen=1),
+      action_href=url_for("task_orders.get_started"),
      action_label=("portfolios.index.empty.start_button" | translate),
      icon="cloud",
      message=("portfolios.index.empty.title" | translate),
--- a/templates/portfolios/breadcrumbs.html
+++ b/templates/portfolios/breadcrumbs.html
@ -10,7 +10,7 @@
  <div class="portfolio-breadcrumbs__crumb">
    {% if secondary_breadcrumb %}
      {{ Icon("caret_right", classes="icon--tiny") }}
-      <div class="icon-link">
+      <div class="icon-link icon-link--disabled">
        {{ secondary_breadcrumb }}
      </div>
    {% endif %}
--- a/templates/portfolios/header.html
+++ b/templates/portfolios/header.html
@ -21,11 +21,11 @@
          {{ Icon('info') }}
        </button>
      </div>
-      <div>
+      <div class='portfolio-header__budget--amount'>
        <span class='portfolio-header__budget--dollars'>
          {{ portfolio.task_orders | selectattr('is_active') | sum(attribute='budget') | justDollars }}
        </span>
-        <span class='cents'>
+        <span class='portfolio-header__budget--cents'>
          .{{ portfolio.task_orders | selectattr('is_active') | sum(attribute='budget') | justCents }}
        </span>
      </div>
@ -70,8 +70,8 @@
      {{ Link(
        icon='cog',
        text='navigation.portfolio_navigation.breadcrumbs.admin' | translate,
-        url=url_for("portfolios.portfolio", portfolio_id=portfolio.id),
-        active=request.url_rule.endpoint == "portfolios.portfolio",
+        url=url_for("portfolios.portfolio_admin", portfolio_id=portfolio.id),
+        active=request.url_rule.endpoint == "portfolios.portfolio_admin",
      ) }}
    {% endif %}
  </div>
--- a/templates/portfolios/members/index.html
+++ b/templates/portfolios/members/index.html
@ -95,10 +95,10 @@
          <td v-html="member.role"></td>
        </tr>
        <tr>
-          <td colspan=4>
+          <td class="add-member-link" colspan=4>
            <a class="icon-link" href="{{ url_for('portfolios.new_member', portfolio_id=portfolio.id) }}">
              Add A New Member
-              {{ Icon('plus') }}
+              {{ Icon('plus', classes='icon--circle') }}
            </a>
          </td>
        </tr>
--- a/templates/portfolios/reports/index.html
+++ b/templates/portfolios/reports/index.html
@ -59,36 +59,42 @@

          <hr></hr>

-          <div class='to-summary__expiration row'>
-            <div class='col col--grow'>
+          <div class='to-summary__expiration'>
+            <div class='row'>
              <h4 class='subheading'>Expiration Date</h4>
-              <div>
-                {% if expiration_date %}
-                  <local-datetime
-                    timestamp='{{ expiration_date }}'
-                    format='MMMM D, YYYY'>
-                    </local-datetime>
-                {% else %}
-                    -
-                {% endif %}
-              </div>
-              <a href='{{ url_for("portfolios.portfolio_funding", portfolio_id=portfolio.id) }}' class='icon-link'>
-                {{ Icon('cog') }}
-                Manage Task Order
-              </a>
            </div>
-            <div class='col col--grow'>
-              <dl>
-                <dt>Remaining Days</dt>
-                <dd class='{{ 'ending-soon' if remaining_days is not none and remaining_days < 190 }}'>
-                  {% if remaining_days is not none %}
-                    {{ Icon('arrow-down') }}
-                    <span>{{ remaining_days }}</span>
+            <div class='row'>
+
+              <div class='col col--grow'>
+                <div>
+                  {% if expiration_date %}
+                    <local-datetime
+                      timestamp='{{ expiration_date }}'
+                      format='MMMM D, YYYY'>
+                      </local-datetime>
                  {% else %}
-                    -
+                      -
                  {% endif %}
-                </dd>
-              </dl>
+                </div>
+                <a href='{{ url_for("portfolios.view_task_order", portfolio_id=portfolio.id, task_order_id=task_order.id) }}' class='icon-link'>
+                  {{ Icon('cog') }}
+                  Manage Task Order
+                </a>
+              </div>
+              <div class='col col--grow'>
+                <dl>
+                  <dt>Remaining Days</dt>
+                  <dd class='{{ 'ending-soon' if remaining_days is not none }}'>
+                    {% if remaining_days is not none %}
+                      {{ Icon('arrow-down') }}
+                      <span>{{ remaining_days }}</span>
+                    {% else %}
+                      -
+                    {% endif %}
+                  </dd>
+                </dl>
+              </div>
+
            </div>
          </div>
        </div>