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 { .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;

View File

@ -1,12 +1,9 @@
.sticky-cta { .sticky-cta {
z-index: 100; margin-left: -$gap * 4;
@include media($small-screen) {
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 {

View File

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

View File

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

View File

@ -63,13 +63,12 @@
</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> {% endcall %}
</div>
{% 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(

View File

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