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

Reskin updates

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)

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;

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);
+    @include shadow-panel;
-    border-top: none;
+    margin-bottom: 4 * $gap;
-    border-bottom: none;
   }
 }
 
@@ -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;
         }
       }
     }

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;
 

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;
   }
 }
 

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 {

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;
+    }
+  }
 }

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 {

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);
               }
             }
           }

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;

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') %}
+          {% if portfolios %}
-            {{ SidenavItem(other_portfolio.name,
+            {% for other_portfolio in portfolios|sort(attribute='name') %}
-              href=url_for("portfolios.show_portfolio", portfolio_id=other_portfolio.id),
+              {{ SidenavItem(other_portfolio.name,
-              active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
+                href=url_for("portfolios.show_portfolio", portfolio_id=other_portfolio.id),
-              ) }}
+                active=(other_portfolio.id | string) == request.view_args.get('portfolio_id')
-          {% endfor %}
+                ) }}
+            {% 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>

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 %}

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>

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>

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),

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 %}

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),
+        url=url_for("portfolios.portfolio_admin", portfolio_id=portfolio.id),
-        active=request.url_rule.endpoint == "portfolios.portfolio",
+        active=request.url_rule.endpoint == "portfolios.portfolio_admin",
       ) }}
     {% endif %}
   </div>

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>

templates/portfolios/reports/index.html

@@ -59,36 +59,42 @@
 
           <hr></hr>
 
-          <div class='to-summary__expiration row'>
+          <div class='to-summary__expiration'>
-            <div class='col col--grow'>
+            <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'>
+            <div class='row'>
-              <dl>
+
-                <dt>Remaining Days</dt>
+              <div class='col col--grow'>
-                <dd class='{{ 'ending-soon' if remaining_days is not none and remaining_days < 190 }}'>
+                <div>
-                  {% if remaining_days is not none %}
+                  {% if expiration_date %}
-                    {{ Icon('arrow-down') }}
+                    <local-datetime
-                    <span>{{ remaining_days }}</span>
+                      timestamp='{{ expiration_date }}'
+                      format='MMMM D, YYYY'>
+                      </local-datetime>
                   {% else %}
-                    -
+                      -
                   {% endif %}
-                </dd>
+                </div>
-              </dl>
+                <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>