Merge pull request #876 from dod-ccpo/home-page

Home page

styles/components/_global_layout.scss

@@ -23,7 +23,6 @@ body {
 
   .global-panel-container {
     margin: $gap;
-    max-width: $site-max-width;
     flex-grow: 1;
     -ms-flex-negative: 1;
 

styles/components/_sticky_cta.scss

@@ -1,4 +1,6 @@
 .sticky-cta {
+  z-index: 100;
+
   @include media($small-screen) {
     margin-left: -$gap * 4;
   }

styles/elements/_typography.scss

@@ -12,8 +12,6 @@
 p {
   margin: 0 0 ($gap * 2) 0;
 
-  @include line-max;
-
   &.centered {
     margin-left: auto;
     margin-right: auto;

styles/sections/_home.scss

@@ -1,3 +1,54 @@
+.home {
+  .sticky-cta {
+    margin: -1.6rem -1.6rem 0 -1.6rem;
+  }
+}
+
+.about-cloud {
+  margin-top: 4rem;
+  margin-left: 2rem;
+
+  max-width: 900px;
+}
+
+.your-project {
+  margin-top: 3rem;
+  padding: 3rem;
+  background-color: $color-gray-lightest;
+
+  h2 {
+    margin-top: 0;
+  }
+
+  hr {
+    border: 0;
+    border-bottom: 1px solid $color-gray-light;
+    margin-top: $gap * 4;
+    margin-bottom: $gap * 4;
+  }
+
+  .links {
+    justify-content: normal;
+
+    .icon-link:first-child {
+      padding-left: 0;
+    }
+
+    .icon-link:hover {
+      background-color: transparent;
+      color: $color-gray-dark;
+
+      .svg * {
+        fill: $color-gray-dark;
+      }
+    }
+
+    .icon-link.active:hover {
+      color: $color-blue;
+    }
+  }
+}
+
 .home-layout {
   display: block;
   background-color: $color-white;

templates/base.html

@@ -21,9 +21,9 @@
     {% include 'navigation/topbar.html' %}
 
     <div class='global-layout'>
-      {% block global_sidenav %}
+      {% if portfolios %}
         {% include 'navigation/global_sidenav.html' %}
-      {% endblock %}
+      {% endif %}
 
       <div class='global-panel-container'>
         {% block sidenav %}{% endblock %}

templates/home.html

@@ -1,13 +1,106 @@
 {% extends "base.html" %}
 
+{% from "components/sticky_cta.html" import StickyCTA %}
+{% from "components/icon.html" import Icon %}
+
 {% block content %}
 
-<main class="usa-section usa-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">
+    <h1>{{ "home.head" | translate }}</h1>
+
+    <semi-collapsible-text inline-template>
+      <div>
+        <p v-bind:class="{ 'semi-collapsed' : !open }">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        </p>
+        <a v-on:click='toggle' v-show="!open" class="right more">More{{ Icon('caret_down') }}</a>
+        <a v-on:click='toggle' v-show="open" class="right more">Less{{ Icon('caret_up') }}</a>
+      </div>
+    </semi-collapsible-text>
+
+    <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 %}

translations.yaml

@@ -19,6 +19,15 @@ base_public:
   title_tag: JEDI Cloud
 home:
   add_portfolio_button_text: Add New Portfolio
+  new_portfolio: New Portfolio
+  get_started: Get Started
+  head: About Cloud Services
+  your_project: Your Project
+  your_project_descrip: Your portfolio is where all task orders pertaining to a specific project or set of related projects live. In JEDI, every task order in your portfolio has four components.
+  funding_descrip: is information about all approved task orders associated to your portfolio.
+  applications_descrip: ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+  reports_descrip: enim ad minim veniam, quis nostrud exercitation ullamco
+  admin_descrip: aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
 common:
   back: Back
   cancel: Cancel