Sticky styling

This commit is contained in:
Montana 2019-06-06 09:42:23 -04:00
parent f3821f8d61
commit f89424b217
6 changed files with 19 additions and 22 deletions

View File

@ -373,7 +373,8 @@
}
.portfolio-funding {
padding: (2 * $gap) 0;
padding: 2 * $gap;
padding-top: 0;
.panel {
@include shadow-panel;
@ -385,10 +386,6 @@
margin-bottom: 2 * $gap;
}
.portfolio-funding__header {
flex-direction: row-reverse;
}
.pending-task-order {
background-color: $color-gold-lightest;

View File

@ -1,12 +1,9 @@
.sticky-cta {
z-index: 100;
@include media($small-screen) {
margin-left: -$gap * 4;
}
margin-left: -$gap * 4;
@include media($medium-screen) {
margin-left: -$gap * 5;
margin-right: -$gap * 3;
}
}
@ -23,7 +20,6 @@
border-bottom: 1px solid $color-gray-lighter;
padding: 0 40px 0 40px;
box-shadow: $box-shadow;
margin-bottom: 20px;
}
.sticky-cta-text {

View File

@ -80,7 +80,7 @@
}
.task-order-summary {
margin: $gap * 4;
margin-top: $gap * 4;
hr {
border: 0;

View File

@ -7,6 +7,7 @@
{% block portfolio_header %}
{% include "portfolios/header.html" %}
{% endblock %}
<div class='portfolio-content'>
{% block portfolio_content %}{% endblock %}
</div>

View File

@ -63,13 +63,12 @@
</div>
{% endmacro %}
<div class="portfolio-funding">
{% call StickyCTA(text="Funding") %}
<div class='portfolio-funding__header row'>
<a href="{{ url_for("task_orders.edit", portfolio_id=portfolio.id) }}" class="usa-button">Add a new task order</a>
</div>
{% endcall %}
{% call StickyCTA(text="Funding") %}
<a href="{{ url_for("task_orders.edit", portfolio_id=portfolio.id) }}" class="usa-button usa-button-primary">Start a new task order</a>
{% endcall %}
<div class="portfolio-funding">
{% if not active_task_orders and not pending_task_orders %}
{{ EmptyState(

View File

@ -1,12 +1,16 @@
{% extends 'portfolios/base.html' %}
{% from "components/icon.html" import Icon %}
{% from "components/totals_box.html" import TotalsBox %}
{% from "components/sticky_cta.html" import StickyCTA %}
{% block content %}
{% extends 'portfolios/base.html' %}
{% block portfolio_content %}
{% call StickyCTA(text="Review Funding") %}
<a href="{{ url_for("task_orders.edit", portfolio_id=portfolio.id) }}" class="usa-button">Edit</a>
<a href="{{ url_for("task_orders.edit", portfolio_id=portfolio.id) }}" class="usa-button">Submit task order</a>
{% endcall %}
<div class="task-order-summary">
<div class="h2">Portfolio Name</div>
<semi-collapsible-text inline-template>
<div>