pk/atst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Reskin updates
This commit is contained in:
patricksmithdds 2019-02-13 10:10:24 -05:00 committed by GitHub
commit 98091dffea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 115 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
atst/routes/portfolios/index.py
View File

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

2
styles/components/_global_layout.scss
View File

@ -1,5 +1,5 @@
#app-root {
background-color: $color-white;
background-color: $color-offwhite;
display: flex;
flex-direction: column;
justify-content: flex-start;

48
styles/components/_portfolio_layout.scss
View File

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

1
styles/core/_variables.scss
View File

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

3
styles/elements/_accordians.scss
View File

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

2
styles/elements/_icon_link.scss
View File

@ -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 {

9
styles/elements/_icons.scss
View File

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

9
styles/elements/_sidenav.scss
View File

@ -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 {

4
styles/sections/_reports.scss
View File

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

5
styles/sections/_task_order.scss
View File

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

6
templates/navigation/global_sidenav.html
View File

@ -18,17 +18,21 @@
<div v-if="props.isVisible">
<div class="sidenav__title">Portfolios</div>
<ul class="sidenav__list--padded">
{% 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>

2
templates/portfolios/admin.html
View File

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

2
templates/portfolios/applications/index.html
View File

@ -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>

4
templates/portfolios/applications/members.html
View File

@ -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>

2
templates/portfolios/blank_slate.html
View File

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

2
templates/portfolios/breadcrumbs.html
View File

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

8
templates/portfolios/header.html
View File

@ -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>

4
templates/portfolios/members/index.html
View File

@ -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>

14
templates/portfolios/reports/index.html
View File

@ -59,9 +59,13 @@
<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>
<div class='row'>
<div class='col col--grow'>
<div>
{% if expiration_date %}
<local-datetime
@ -72,7 +76,7 @@
-
{% endif %}
</div>
<a href='{{ url_for("portfolios.portfolio_funding", portfolio_id=portfolio.id) }}' class='icon-link'>
<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>
@ -80,7 +84,7 @@
<div class='col col--grow'>
<dl>
<dt>Remaining Days</dt>
<dd class='{{ 'ending-soon' if remaining_days is not none and remaining_days < 190 }}'>
<dd class='{{ 'ending-soon' if remaining_days is not none }}'>
{% if remaining_days is not none %}
{{ Icon('arrow-down') }}
<span>{{ remaining_days }}</span>
@ -90,6 +94,8 @@
</dd>
</dl>
</div>
</div>
</div>
</div>