Merge pull request #1429 from 18F/state-pages-design

State pages design – take 1
DOI-ONRR · May 25, 2016 · 3f90020 · 3f90020
2 parents cfdbe38 + f026807
commit 3f90020
Show file tree

Hide file tree

Showing 23 changed files with 253 additions and 140 deletions.
diff --git a/_includes/case-studies/_nav-list.html b/_includes/case-studies/_nav-list.html
@@ -1,7 +1,14 @@
+{% if layout.nav_items %}
+	{% assign selector_nav_items = layout.nav_items %}
+{% else %}
+	{% assign selector_nav_items = page.nav_items %}
+{% endif %}
+
+
 <ul>
-  {% if page.nav_items %}
-    {% for item in page.nav_items %}
-      {% if item.name == page.nav_items[0].name %}
+  {% if selector_nav_items %}
+    {% for item in selector_nav_items %}
+      {% if item.name == selector_nav_items[0].name %}
         <a href="#{{item.name}}" class="sticky_nav-nav_item" data-nav-item="{{item.name}}" data-active="true">{{item.title}}</a>
       {% else %}
         <a href="#{{item.name}}" class="sticky_nav-nav_item" data-nav-item="{{item.name}}">{{item.title}}</a>

diff --git a/_includes/location/section-all-production.html b/_includes/location/section-all-production.html
@@ -1,6 +1,6 @@
 {% assign all_products = site.data.state_all_production[state_id].products %}
 
-<section id="all-production" class="all-lands production">
+<section id="all-production" class="all-lands production" data-nav-header="all-production">
   <h2>Natural resource production in {{ state_name }}</h2>
 
   <p>The federal government collects data about what natural resources are produced each state. (For coal, there is also data about mining in each county.)</p>

diff --git a/_includes/location/section-disbursements.html b/_includes/location/section-disbursements.html
@@ -1,4 +1,4 @@
-<section id="disbursements" class="disbursements">
+<section id="disbursements" class="disbursements" data-nav-header="disbursements">
   <h2>Disbursements</h2>
   <p>{{ disbursements_summary | strip_html }}</p>
 

diff --git a/_includes/location/section-exports.html b/_includes/location/section-exports.html
@@ -1,4 +1,4 @@
-<section id="exports" class="economic exports">
+<section id="exports" class="economic exports" data-nav-header="exports">
   <h2>Exports</h2>
   <p>{{ exports_summary | strip_html }}</p>
 

diff --git a/_includes/location/section-gdp.html b/_includes/location/section-gdp.html
@@ -1,6 +1,6 @@
 {% assign gdp = site.data.state_gdp[state_id] %}
 
-<section id="gdp" class="economic gdp">
+<section id="gdp" class="economic gdp" data-nav-header="gdp">
   <h2>Gross Domestic Product (GDP)</h2>
   <p>Extractive industries accounted for
     {% if gdp[year].dollars %}

diff --git a/_includes/location/section-jobs.html b/_includes/location/section-jobs.html
@@ -1,6 +1,6 @@
 {% assign jobs = site.data.state_jobs[state_id] %}
 
-<section id="employment" class="economic employment">
+<section id="employment" class="economic employment" data-nav-header="employment">
   <h2>Employment</h2>
 
   <p>One measure of the role of extractive industries is how many people are employed in jobs related to natural resource extraction. In {{ state_name }}, in {{ year }},

diff --git a/_includes/location/section-key-facts.html b/_includes/location/section-key-facts.html
diff --git a/_includes/location/section-overview.html b/_includes/location/section-overview.html
@@ -0,0 +1,80 @@
+<section id="overview" data-nav-header="overview">
+
+  <p>This is where an introduction to this page will go with a few nice words on what a regional profile is and what to expect here. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
+
+  <section class="panel-gray container-outer">
+
+    <p>{%
+        include location/key-gdp.html
+        location_id=state_id
+        location_name=state_name
+        year=year
+      %}</p>
+
+    <hr/>
+
+    <ul class="list-bullet key-facts">
+
+      <li class="revenue">{%
+        include location/key-revenue.html
+        location_id=state_id
+        location_name=state_name
+        year=year
+        top=top_products
+      %}</li>
+
+      <li class="production all-production">{%
+        include location/key-all-production.html
+        location_id=state_id
+        location_name=state_name
+        year=year
+        top=top_products
+      %}</li>
+
+      <li class="production federal-production">{%
+        include location/key-federal-production.html
+        location_id=state_id
+        location_name=state_name
+        year=year
+        top=top_products
+      %}</li>
+
+      <li class="employment">{%
+        include location/key-jobs.html
+        location_id=state_id
+        location_name=state_name
+        year=year
+      %}</li>
+
+      <li class="gdp">{%
+        include location/key-gdp.html
+        location_id=state_id
+        location_name=state_name
+        year=year
+      %}</li>
+
+      <li class="exports">
+        {% capture exports_summary %}
+        {%
+          include location/key-exports.html
+          location_id=state_id
+          location_name=state_name
+          year=year
+        %}
+        {% endcapture %}{{ exports_summary }}
+      </li>
+
+      <li class="disbursements">
+        {% capture disbursements_summary %}
+        {%
+          include location/key-disbursements.html
+          location_id=state_id
+          location_name=state_name
+          year=year
+        %}
+        {% endcapture %}{{ disbursements_summary }}
+      </li>
+
+    </ul>
+  </section>
+</section>
diff --git a/_includes/location/section-ownership.html b/_includes/location/section-ownership.html
@@ -1,39 +1,44 @@
 {% capture states_svg %}{{ site.baseurl }}/maps/states/all.svg{% endcapture %}
 {% capture state_svg %}{{ site.baseurl }}/maps/states/{{ state_id }}.svg{% endcapture %}
-<section id="ownership">
+<section id="ownership" data-nav-header="ownership" class="container-outer">
   <h2>Land ownership</h2>
-  <p><strong>In {{ state_name }}, {{ site.data.land_stats[state_id].federal_percent | percent }} percent of land is owned by the federal government.</strong></p>
 
-  <figure>
-    {% assign _width = 50 %}
-    {% assign _viewbox = site.data.viewboxes[state_id] %}
-    <div class="svg-container county map-container"{% if _viewbox %}
-      style="width: {{ _width }}%; padding-bottom: {{ _viewbox | svg_viewbox_padding: _width }}%;"{% endif %}>
-      <svg class="county ownership map"{% if _viewbox %} viewBox="{{ _viewbox }}"{% endif %}>
-        <g class="states features">
-          <use xlink:href="{{ states_svg }}#states"></use>
-        </g>
-        <g class="states mesh">
-          <use xlink:href="{{ states_svg }}#states-mesh"></use>
-        </g>
-        <g class="counties features">
-          <use xlink:href="{{ state_svg }}#counties"></use>
-        </g>
-        {%
-          include maps/federal_land_ownership.svg
-          clip='#state-outline'
-        %}
-        <g class="counties mesh">
-          <use xlink:href="{{ state_svg }}#counties-mesh"></use>
-        </g>
-        <g class="state feature overlay">
-          <use xlink:href="{{ states_svg }}#state-{{ state_id }}"></use>
-        </g>
-      </svg>
-    </div>
 
-    <figcaption>Federally owned land (gray)</figcaption>
-  </figure>
+  <section class="container-half">
+    <h3>In {{ state_name }}, {{ site.data.land_stats[state_id].federal_percent | percent }} percent of land is owned by the federal government.</h3>
 
-  <p>When companies extract natural resources on federal land, they pay royalties, rents, bonuses, and other fees — much like they would to any landowner. They also have to report more data about their activities on government-owned land than on private land. Learn more about <a href="{{ site.baseurl }}/how-it-works/ownership/">natural resources and land ownership in the U.S.</a></p>
+    <p>When companies extract natural resources on federal land, they pay royalties, rents, bonuses, and other fees — much like they would to any landowner. They also have to report more data about their activities on government-owned land than on private land. Learn more about <a href="{{ site.baseurl }}/how-it-works/ownership/">natural resources and land ownership in the U.S.</a></p>
+  </section>
+
+  <aside class="container-half">
+    <figure>
+      {% assign _viewbox = site.data.viewboxes[state_id] %}
+      <div class="svg-container county map-container"{% if _viewbox %}
+        style="padding-bottom: {{ _viewbox | svg_viewbox_padding: _width }}%;"{% endif %}>
+        <svg class="county ownership map"{% if _viewbox %} viewBox="{{ _viewbox }}"{% endif %}>
+          <g class="states features">
+            <use xlink:href="{{ states_svg }}#states"></use>
+          </g>
+          <g class="states mesh">
+            <use xlink:href="{{ states_svg }}#states-mesh"></use>
+          </g>
+          <g class="counties features">
+            <use xlink:href="{{ state_svg }}#counties"></use>
+          </g>
+          {%
+            include maps/federal_land_ownership.svg
+            clip='#state-outline'
+          %}
+          <g class="counties mesh">
+            <use xlink:href="{{ state_svg }}#counties-mesh"></use>
+          </g>
+          <g class="state feature overlay">
+            <use xlink:href="{{ states_svg }}#state-{{ state_id }}"></use>
+          </g>
+        </svg>
+      </div>
+
+      <figcaption><icon class="icon-plus-lg"></icon> Details</figcaption>
+    </figure>
+  </aside>
 </section>
diff --git a/_includes/location/section-process.html b/_includes/location/section-process.html
@@ -1,4 +1,4 @@
-<section id="process">
+<section id="process" data-nav-header="process">
   <h2>Process</h2>
   <p>When companies extract natural resources on federal land, they follow laws or policies that govern how rights are awarded and what fees they pay to the government. The specifics of the process depend on the kind of resource, and often affect how much revenue the federal government ultimately collects.</p>
   <p>For details, read more about the different processes for awarding rights and extracting resources: <a href="{{ site.baseurl }}/how-it-works/coal/">coal</a>, <a href="{{ site.baseurl }}/how-it-works/onshore-oil-gas/">oil and gas</a>, <a href="{{ site.baseurl }}/how-it-works/onshore-renewables/">renewable resources</a>, and <a href="{{ site.baseurl }}/how-it-works/minerals/">hardrock minerals</a>.</p>

diff --git a/_includes/location/section-revenue.html b/_includes/location/section-revenue.html
@@ -1,7 +1,7 @@
 {% assign revenue_commodities = site.data.state_revenues[state_id].commodities %}
 {% assign revenue_total = revenue_commodities.All[year].revenue %}
 
-<section id="revenue" class="federal revenue">
+<section id="revenue" class="federal revenue" data-nav-header="revenue">
   <h2>Revenue</h2>
 
   <p>When companies want to extract natural resources on federal land, they pay fees depending on where they are in the process of using the land. For instance, a company might pay for the right to explore for resources, pay rent while exploring the land, and then pay a percentage of production value once they start producing resources on the land.</p>

diff --git a/_layouts/state-page.html b/_layouts/state-page.html
@@ -1,5 +1,24 @@
 ---
 layout: default
+nav_items:
+  - name: overview
+    title: Overview
+  - name: ownership
+    title: Land Ownership
+  - name: process
+    title: Process
+  - name: revenue
+    title: Revenue
+  - name: all-production
+    title: Production
+  - name: employment
+    title: Employment
+  - name: gdp
+    title: GDP
+  - name: exports
+    title: Exports
+  - name: disbursements
+    title: Disbursements
 ---
 
 {% assign state_name = page.data.name %}
@@ -9,41 +28,58 @@
 {% assign commodity_names = site.data.commodity_names %}
 {% assign top_products = 10 %}
 
-<main id="state-{{ state_id }}" class="container-outer">
-  <h1>{{ state_name }}</h1>
+<main id="state-{{ state_id }}" class="container-outer layout-state-pages">
 
-  {% include location/section-key-facts.html %}
+  <div>
+    <a class="breadcrumb" href="{{ site.baseurl }}/states/">State Profiles</a>
+    /
+  </div>
+  <h1 id="title">{{ state_name }}</h1>
 
-  {% include location/section-ownership.html %}
+  <div class="container-left-7">
 
-  {% include location/section-process.html %}
+    {% include location/section-overview.html %}
 
-  {% include location/section-revenue.html %}
+    {% include location/section-ownership.html %}
 
-  {% include location/section-all-production.html %}
+    {% include location/section-process.html %}
 
-  {% include location/section-federal-production.html %}
+    {% include location/section-revenue.html %}
 
-  {% include location/section-state-production.html %}
+    {% include location/section-all-production.html %}
 
-  {% include location/section-jobs.html %}
+    {% include location/section-federal-production.html %}
 
-  {% include location/section-gdp.html %}
+    {% include location/section-state-production.html %}
 
-  {% include location/section-exports.html %}
+    {% include location/section-jobs.html %}
 
-  {% include location/section-disbursements.html %}
+    {% include location/section-gdp.html %}
 
-  <!-- XXX setting display: none on this prevents the mask from working -->
-  <svg width="0" height="0">
-    <defs>
-      <clipPath id="state-outline">
-        <use xlink:href="{{ states_svg }}#state-{{ state_id }}"></use>
-      </clipPath>
-    </defs>
-  </svg>
+    {% include location/section-exports.html %}
+
+    {% include location/section-disbursements.html %}
+
+    <!-- XXX setting display: none on this prevents the mask from working -->
+    <svg width="0" height="0">
+      <defs>
+        <clipPath id="state-outline">
+          <use xlink:href="{{ states_svg }}#state-{{ state_id }}"></use>
+        </clipPath>
+      </defs>
+    </svg>
+  </div>
+
+  <div class="container-right-5">
+    <div class="sticky_nav">
+      <nav class="sticky_nav-nav">
+        {% include case-studies/_nav-list.html %}
+      </nav>
+    </div>
+  </div>
 
 </main>
 
 <script src="{{ site.baseurl }}/js/components/bar-chart-table.js"></script>
 <script src="{{ site.baseurl }}/js/components/data-map.js"></script>
+<script type="text/javascript" src="{{ site.baseurl }}/js/lib/narrative.min.js" charset="utf-8"></script>