atst/templates/home.html
2019-11-21 16:42:42 -05:00

102 lines
3.6 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(first_half=("home.about_cloud.part1"|translate), second_half=("home.about_cloud.part2"|translate)) }}
<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>
<img id='jedi-heirarchy' src="{{ url_for("static", filename="img/JEDIhierarchyDiagram.png")}}" alt="JEDI heirarchy diagram">
</div>
</main>
{% endblock %}