4ab0975b13
The more/less toggles should be inline with the text. The caller should pass in the first and second halves of the content to be displayed.
102 lines
3.4 KiB
HTML
102 lines
3.4 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% from "components/sticky_cta.html" import StickyCTA %}
|
|
{% from "components/icon.html" import Icon %}
|
|
{% from "components/semi_collapsible_text.html" import SemiCollapsibleText %}
|
|
|
|
{% block content %}
|
|
|
|
<main class="home">
|
|
{% if portfolios %}
|
|
{% set sticky_header = "home.new_portfolio" | translate %}
|
|
{% else %}
|
|
{% set sticky_header = "home.get_started" | translate %}
|
|
{% endif %}
|
|
|
|
{% call StickyCTA(sticky_header) %}
|
|
<a href="{{ url_for("portfolios.new_portfolio") }}" class="usa-button-primary">
|
|
{{ "home.add_portfolio_button_text" | translate }}
|
|
</a>
|
|
{% endcall %}
|
|
|
|
<div class="about-cloud">
|
|
{% include "fragments/flash.html" %}
|
|
|
|
<h1>{{ "home.head" | translate }}</h1>
|
|
|
|
{{ SemiCollapsibleText() }}
|
|
|
|
<div class="your-project">
|
|
<h2 class="h3">{{ "home.your_project" | translate }}</h2>
|
|
<p>{{ "home.your_project_descrip" | translate }}</p>
|
|
|
|
<hr>
|
|
|
|
{% macro Link(icon, text, section, default=False) %}
|
|
{% if default %}
|
|
<div v-bind:class='{"icon-link": true, active: selectedSection === "{{ section }}" || selectedSection === null}' v-on:click="toggleSection('{{ section }}')">
|
|
{% else %}
|
|
<div v-bind:class='{"icon-link": true, active: selectedSection === "{{ section }}"}' v-on:click="toggleSection('{{ section }}')">
|
|
{% endif %}
|
|
<div class="col">
|
|
<div class='icon-link--icon'>{{ Icon(icon) }}</div>
|
|
<div class='icon-link--name'>{{ text }}</div>
|
|
</div>
|
|
</div>
|
|
{% endmacro %}
|
|
|
|
<toggler inline-template v-bind:initial-selected-section="'funding'">
|
|
<div>
|
|
<div class="portfolio-header">
|
|
<div class="links row">
|
|
{{ Link(
|
|
icon='funding',
|
|
section='funding',
|
|
text='navigation.portfolio_navigation.breadcrumbs.funding' | translate,
|
|
default=True
|
|
) }}
|
|
{{ Link(
|
|
icon='applications',
|
|
section='applications',
|
|
text='navigation.portfolio_navigation.breadcrumbs.applications' | translate,
|
|
) }}
|
|
{{ Link(
|
|
icon='chart-pie',
|
|
section='reports',
|
|
text='navigation.portfolio_navigation.breadcrumbs.reports' | translate,
|
|
) }}
|
|
{{ Link(
|
|
icon='cog',
|
|
section='admin',
|
|
text='navigation.portfolio_navigation.breadcrumbs.admin' | translate,
|
|
) }}
|
|
</div>
|
|
</div>
|
|
{% macro Description(section, default=False) %}
|
|
{% if default %}
|
|
<p v-show="selectedSection === '{{ section }}' || selectedSection === null">
|
|
{% else %}
|
|
<p v-show="selectedSection === '{{ section }}'">
|
|
{% endif %}
|
|
<strong>
|
|
{{ "navigation.portfolio_navigation.breadcrumbs.%s" | format(section) | translate }}
|
|
</strong>
|
|
{{ "home.%s_descrip" | format(section) | translate }}
|
|
</p>
|
|
{% endmacro %}
|
|
<div class="project-section-descriptions">
|
|
{{ Description('funding', default=True) }}
|
|
{{ Description('applications') }}
|
|
{{ Description('reports') }}
|
|
{{ Description('admin') }}
|
|
</div>
|
|
</div>
|
|
</toggler>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{% endblock %}
|
|
|