Sticky styling
This commit is contained in:
parent
f3821f8d61
commit
f89424b217
@ -373,7 +373,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.portfolio-funding {
|
.portfolio-funding {
|
||||||
padding: (2 * $gap) 0;
|
padding: 2 * $gap;
|
||||||
|
padding-top: 0;
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
@include shadow-panel;
|
@include shadow-panel;
|
||||||
@ -385,10 +386,6 @@
|
|||||||
margin-bottom: 2 * $gap;
|
margin-bottom: 2 * $gap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.portfolio-funding__header {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pending-task-order {
|
.pending-task-order {
|
||||||
background-color: $color-gold-lightest;
|
background-color: $color-gold-lightest;
|
||||||
|
|
||||||
|
@ -1,12 +1,9 @@
|
|||||||
.sticky-cta {
|
.sticky-cta {
|
||||||
z-index: 100;
|
|
||||||
|
|
||||||
@include media($small-screen) {
|
|
||||||
margin-left: -$gap * 4;
|
margin-left: -$gap * 4;
|
||||||
}
|
|
||||||
|
|
||||||
@include media($medium-screen) {
|
@include media($medium-screen) {
|
||||||
margin-left: -$gap * 5;
|
margin-left: -$gap * 5;
|
||||||
|
margin-right: -$gap * 3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -23,7 +20,6 @@
|
|||||||
border-bottom: 1px solid $color-gray-lighter;
|
border-bottom: 1px solid $color-gray-lighter;
|
||||||
padding: 0 40px 0 40px;
|
padding: 0 40px 0 40px;
|
||||||
box-shadow: $box-shadow;
|
box-shadow: $box-shadow;
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sticky-cta-text {
|
.sticky-cta-text {
|
||||||
|
@ -80,7 +80,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.task-order-summary {
|
.task-order-summary {
|
||||||
margin: $gap * 4;
|
margin-top: $gap * 4;
|
||||||
|
|
||||||
hr {
|
hr {
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@ -7,6 +7,7 @@
|
|||||||
{% block portfolio_header %}
|
{% block portfolio_header %}
|
||||||
{% include "portfolios/header.html" %}
|
{% include "portfolios/header.html" %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
<div class='portfolio-content'>
|
<div class='portfolio-content'>
|
||||||
{% block portfolio_content %}{% endblock %}
|
{% block portfolio_content %}{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
|
@ -63,14 +63,13 @@
|
|||||||
</div>
|
</div>
|
||||||
{% endmacro %}
|
{% endmacro %}
|
||||||
|
|
||||||
<div class="portfolio-funding">
|
|
||||||
|
|
||||||
{% call StickyCTA(text="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 usa-button-primary">Start a new task order</a>
|
||||||
<a href="{{ url_for("task_orders.edit", portfolio_id=portfolio.id) }}" class="usa-button">Add a new task order</a>
|
|
||||||
</div>
|
|
||||||
{% endcall %}
|
{% endcall %}
|
||||||
|
|
||||||
|
<div class="portfolio-funding">
|
||||||
|
|
||||||
{% if not active_task_orders and not pending_task_orders %}
|
{% if not active_task_orders and not pending_task_orders %}
|
||||||
{{ EmptyState(
|
{{ EmptyState(
|
||||||
'This portfolio doesn’t have any active or pending task orders.',
|
'This portfolio doesn’t have any active or pending task orders.',
|
||||||
|
@ -1,12 +1,16 @@
|
|||||||
{% extends 'portfolios/base.html' %}
|
|
||||||
|
|
||||||
{% from "components/icon.html" import Icon %}
|
{% from "components/icon.html" import Icon %}
|
||||||
{% from "components/totals_box.html" import TotalsBox %}
|
{% 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="task-order-summary">
|
||||||
<div class="h2">Portfolio Name</div>
|
|
||||||
|
|
||||||
<semi-collapsible-text inline-template>
|
<semi-collapsible-text inline-template>
|
||||||
<div>
|
<div>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user