Merge pull request #1351 from dod-ccpo/grid-styling
Spacing & Layout, Content Max-Width, Nav/Footer refinements, Portfolio Header alignment
This commit is contained in:
commit
717517072b
1
static/icons/user.svg
Normal file
1
static/icons/user.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg height='100px' width='100px' fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" enable-background="new 0 0 16 16" x="0px" y="0px"><path d="M16 16h-2v-3.225l-3.919-.781c-.626-.125-1.081-.68-1.081-1.319v-1.433c0-.477.236-.921.631-1.187.288-.195 1.369-1.46 1.369-3.055 0-1.853-1.558-3-3-3-1.449 0-3 1.206-3 3 0 1.596 1.081 2.859 1.371 3.056.395.268.629.711.629 1.186v1.433c0 .64-.455 1.194-1.083 1.319l-3.916.783-.001 3.223h-2v-3.221c0-.951.677-1.776 1.609-1.963l3.391-.677v-.623c-.765-.677-2-2.38-2-4.516 0-3.088 2.595-5 5-5 2.757 0 5 2.243 5 5 0 2.134-1.234 3.837-2 4.516v.623l3.396.679c.929.187 1.604 1.01 1.604 1.957v3.225z"></path></svg>
|
After Width: | Height: | Size: 664 B |
@ -1,8 +1,6 @@
|
||||
.empty-state {
|
||||
padding: $gap * 3;
|
||||
max-width: 100%;
|
||||
max-width: $max-panel-width;
|
||||
background-color: $color-gray-lightest;
|
||||
margin-top: $gap * 5;
|
||||
|
||||
&--white {
|
||||
background-color: $color-white;
|
||||
@ -18,17 +16,28 @@
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0 0 1rem;
|
||||
padding: 3.2rem 2.4rem 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0 $gap * 3;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin-left: -$gap * 3;
|
||||
margin-right: -$gap * 3;
|
||||
margin: $gap * 4 0 0;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
text-align: center;
|
||||
background-color: $color-gray-lightest;
|
||||
padding: $gap * 3;
|
||||
|
||||
a.usa-button {
|
||||
width: 60%;
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -3,9 +3,7 @@
|
||||
background-color: $color-white;
|
||||
border-top: 1px solid $color-gray-lightest;
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: center;
|
||||
padding: $gap * 1.5;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
@ -13,8 +11,11 @@
|
||||
height: $footer-height;
|
||||
color: $color-gray-dark;
|
||||
font-size: 1.5rem;
|
||||
padding: 0 $gap * 1.5;
|
||||
|
||||
&__login {
|
||||
padding-left: 0.8rem;
|
||||
width: 100%;
|
||||
max-width: 1175px;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
@ -22,15 +22,18 @@ body {
|
||||
padding-bottom: $footer-height * 2.5;
|
||||
|
||||
.global-panel-container {
|
||||
margin: $gap;
|
||||
flex-grow: 1;
|
||||
-ms-flex-negative: 1;
|
||||
top: $usa-banner-height + $topbar-height;
|
||||
position: relative;
|
||||
padding: 0 $large-spacing;
|
||||
|
||||
@include media($medium-screen) {
|
||||
margin: $gap * 2;
|
||||
top: $usa-banner-height + $topbar-height;
|
||||
}
|
||||
|
||||
.user-edit {
|
||||
max-width: $max-panel-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -3,26 +3,34 @@
|
||||
@include grid-row;
|
||||
min-height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
margin-left: 2 * $gap;
|
||||
.portfolio-header-new .portfolio-header__name {
|
||||
padding: 1.6rem 0;
|
||||
}
|
||||
|
||||
.portfolio-header {
|
||||
flex-direction: column;
|
||||
margin: $gap * 2 0;
|
||||
max-width: $max-panel-width;
|
||||
|
||||
@include media($small-screen) {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
margin-bottom: $gap * 1;
|
||||
|
||||
.col--grow {
|
||||
overflow: inherit;
|
||||
display: table;
|
||||
min-height: 10rem;
|
||||
}
|
||||
|
||||
&__name {
|
||||
@include h1;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
|
||||
h1 {
|
||||
margin: 0 $gap ($gap * 2) 0;
|
||||
margin: 0;
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
|
||||
@ -30,6 +38,7 @@
|
||||
font-size: $small-font-size;
|
||||
margin: 0 0 (-$gap * 0.5);
|
||||
color: $color-gray-medium;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -38,9 +47,15 @@
|
||||
font-size: $small-font-size;
|
||||
|
||||
.icon-link {
|
||||
padding: $gap;
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
color: $color-blue-darkest;
|
||||
min-width: 10rem;
|
||||
min-height: 10rem;
|
||||
|
||||
.col {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $color-aqua-lightest;
|
||||
@ -53,6 +68,7 @@
|
||||
&.active {
|
||||
color: $color-blue;
|
||||
background-color: $color-gray-lightest;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-aqua-lightest;
|
||||
@ -82,11 +98,19 @@
|
||||
margin-bottom: 3 * $gap;
|
||||
}
|
||||
|
||||
.portfolio-content {
|
||||
margin: (4 * $gap) $gap 0 $gap;
|
||||
.portfolio-admin {
|
||||
margin: $large-spacing 0;
|
||||
max-width: $max-panel-width;
|
||||
}
|
||||
|
||||
.portfolio-content {
|
||||
.panel {
|
||||
padding-bottom: 2rem;
|
||||
max-width: $max-panel-width;
|
||||
}
|
||||
|
||||
hr {
|
||||
max-width: $max-panel-width;
|
||||
}
|
||||
|
||||
a.add-new-button {
|
||||
@ -251,6 +275,7 @@
|
||||
|
||||
.portfolio-applications {
|
||||
margin-top: $gap * 5;
|
||||
max-width: $max-panel-width;
|
||||
|
||||
&__header {
|
||||
&--title {
|
||||
@ -296,8 +321,8 @@
|
||||
}
|
||||
|
||||
.portfolio-funding {
|
||||
padding: 2 * $gap;
|
||||
padding-top: 0;
|
||||
max-width: $max-panel-width;
|
||||
margin: $large-spacing 0;
|
||||
|
||||
.panel {
|
||||
@include shadow-panel;
|
||||
@ -366,6 +391,8 @@
|
||||
}
|
||||
|
||||
.portfolio-reports {
|
||||
max-width: $max-panel-width;
|
||||
|
||||
&__header {
|
||||
margin-bottom: 4 * $gap;
|
||||
|
||||
|
@ -20,12 +20,10 @@
|
||||
.sticky-cta-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: 90rem;
|
||||
|
||||
.usa-button {
|
||||
margin: $gap $gap * 1.5 $gap 0;
|
||||
width: 20rem;
|
||||
height: 3.2rem;
|
||||
font-size: $small-font-size;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -42,6 +40,10 @@
|
||||
&-buttons {
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.action-group {
|
||||
margin: 0;
|
||||
|
||||
|
@ -4,14 +4,15 @@
|
||||
height: $topbar-height;
|
||||
position: fixed;
|
||||
top: $usa-banner-height;
|
||||
width: 100%;
|
||||
z-index: 10;
|
||||
width: 100%;
|
||||
|
||||
&__navigation {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: stretch;
|
||||
justify-content: space-between;
|
||||
max-width: 1190px;
|
||||
|
||||
a {
|
||||
color: $color-white;
|
||||
@ -64,3 +65,11 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.login-topbar .topbar__navigation {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.login-topbar .topbar__context .topbar__link-icon {
|
||||
margin: 0 0 0 0.8rem;
|
||||
}
|
||||
|
@ -41,7 +41,6 @@
|
||||
|
||||
&.col--grow {
|
||||
flex: 1 auto;
|
||||
padding-right: $spacing-small;
|
||||
}
|
||||
|
||||
&.col--half {
|
||||
|
@ -94,3 +94,7 @@ hr {
|
||||
margin: ($gap * 3) ($site-margins * -4);
|
||||
}
|
||||
}
|
||||
|
||||
.usa-section {
|
||||
padding: 0;
|
||||
}
|
||||
|
@ -16,8 +16,9 @@ $footer-height: 5rem;
|
||||
$usa-banner-height: 2.8rem;
|
||||
$sidenav-expanded-width: 25rem;
|
||||
$sidenav-collapsed-width: 10rem;
|
||||
$max-panel-width: 80rem;
|
||||
$max-panel-width: 90rem;
|
||||
$home-pg-icon-width: 6rem;
|
||||
$large-spacing: 4rem;
|
||||
|
||||
/*
|
||||
* USWDS Variables
|
||||
@ -189,4 +190,4 @@ $spacing-x-small: 0.5rem;
|
||||
$spacing-small: 1rem;
|
||||
$spacing-md-small: 1.5rem;
|
||||
$spacing-medium: 2rem;
|
||||
$spacing-large: 3rem;
|
||||
$spacing-large: 4rem;
|
||||
|
@ -19,10 +19,7 @@
|
||||
}
|
||||
|
||||
@mixin panel-margin {
|
||||
margin-top: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
margin-bottom: $site-margins-mobile * 6;
|
||||
margin: $spacing-large 0;
|
||||
|
||||
@include media($medium-screen) {
|
||||
margin-bottom: $site-margins * 8;
|
||||
@ -56,9 +53,10 @@
|
||||
@include panel-theme-default;
|
||||
@include panel-margin;
|
||||
@include shadow-panel;
|
||||
max-width: $max-panel-width;
|
||||
|
||||
&__content {
|
||||
padding: $gap * 2;
|
||||
padding: 3.2rem 2.4rem;
|
||||
}
|
||||
|
||||
&__body {
|
||||
@ -66,7 +64,7 @@
|
||||
}
|
||||
|
||||
&__heading {
|
||||
padding: $gap * 2;
|
||||
padding: 3.2rem 2.4rem;
|
||||
|
||||
@include media($medium-screen) {
|
||||
padding: $gap * 4;
|
||||
|
@ -113,8 +113,8 @@
|
||||
text-overflow: ellipsis;
|
||||
|
||||
&--active {
|
||||
@include h4;
|
||||
|
||||
font-size: $base-font-size;
|
||||
font-weight: $font-bold;
|
||||
background-color: $color-aqua-lightest !important;
|
||||
color: $color-primary-darker !important;
|
||||
box-shadow: inset ($gap / 2) 0 0 0 $color-primary-darker;
|
||||
|
@ -1,12 +1,11 @@
|
||||
.home {
|
||||
margin: $gap * 3;
|
||||
.sticky-cta {
|
||||
margin: -1.6rem -1.6rem 0 -1.6rem;
|
||||
}
|
||||
|
||||
&__content {
|
||||
margin: 4rem;
|
||||
max-width: 900px;
|
||||
margin: $large-spacing 0;
|
||||
max-width: $max-panel-width;
|
||||
|
||||
&--descriptions {
|
||||
.col {
|
||||
@ -29,7 +28,7 @@
|
||||
background-color: $color-white;
|
||||
|
||||
.home-container {
|
||||
max-width: 90rem;
|
||||
max-width: $max-panel-width;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 8rem;
|
||||
|
@ -17,7 +17,7 @@
|
||||
<div id='app-root'>
|
||||
{% include 'components/usa_header.html' %}
|
||||
|
||||
{% include 'navigation/topbar.html' %}
|
||||
<div class='login-topbar'>{% include 'navigation/topbar.html' %}</div>
|
||||
|
||||
{% block content %}{% endblock %}
|
||||
|
||||
|
@ -11,7 +11,7 @@
|
||||
<div class="topbar__context">
|
||||
{% if g.current_user %}
|
||||
<a href="{{ url_for('users.user') }}" class="topbar__link">
|
||||
{{ Icon('avatar', classes='topbar__link-icon') }}
|
||||
{{ Icon('user', classes='topbar__link-icon') }}
|
||||
<span class="topbar__link-label">{{ g.current_user.first_name + " " + g.current_user.last_name }}</span>
|
||||
</a>
|
||||
<a href="#" class="topbar__link">
|
||||
|
@ -22,7 +22,7 @@
|
||||
{{ TextInput(portfolio_form.name, validation="portfolioName", optional=False) }}
|
||||
{{ TextInput(portfolio_form.description, validation="defaultTextAreaField", paragraph=True) }}
|
||||
<div class='edit-portfolio-name action-group'>
|
||||
{{ SaveButton(text='Save Changes', additional_classes='usa-button-big') }}
|
||||
{{ SaveButton(text='Save Changes') }}
|
||||
</div>
|
||||
</form>
|
||||
</base-form>
|
||||
|
@ -10,10 +10,11 @@
|
||||
|
||||
<main class="usa-section usa-content">
|
||||
{% include "fragments/flash.html" %}
|
||||
<div class='portfolio-header__name'>
|
||||
<p>{{ "portfolios.header" | translate }}</p>
|
||||
<h1>{{ "portfolios.new.title" | translate }}</h1>
|
||||
</div>
|
||||
<div class="portfolio-header-new">
|
||||
<div class='portfolio-header__name'>
|
||||
<p>{{ "portfolios.header" | translate }}</p>
|
||||
<h1>{{ 'portfolios.new.title' | translate }}</h1>
|
||||
</div>
|
||||
{{ StickyCTA(text="portfolios.new.cta_step_1"|translate, context=("portfolios.new.sticky_header_context"|translate({"step": "1"}) )) }}
|
||||
<base-form inline-template>
|
||||
<div class="row">
|
||||
|
@ -1,7 +1,7 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<div class='col'>
|
||||
<div class='col user-edit'>
|
||||
|
||||
{% include "fragments/flash.html" %}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user