Feature/refactor to single page

app/assets/stylesheets/components-vue/_nav.scss

@@ -30,6 +30,7 @@
 
   &__a {
     color: $white;
+    cursor: pointer;
     border: solid 1px $nav;
     border-radius: $radius-button;
     font-size: rem-calc(20);

app/assets/stylesheets/components/_smallprint.scss

@@ -0,0 +1,25 @@
+//--------------------------------------------------
+// smallprint
+//--------------------------------------------------
+.smallprint {
+  display: flex;
+  flex-wrap: wrap;
+
+  @include breakpoint($medium) { flex-wrap: nowrap; }
+
+  &__citations {
+    margin: 0 0 rem-calc(20) 0;
+    width: 100%;
+
+    @include breakpoint($medium) { 
+      margin: 0 rem-calc(30) 0 0;
+      width: 33%; 
+    }
+  }
+
+  &__disclaimer {
+    width: 100%;
+
+    @include breakpoint($medium) { width: 66%; }
+  }
+}

app/assets/stylesheets/utilities/_mixins-shared.scss

@@ -14,7 +14,7 @@
   $colour: nth($colours, $index);
   $name: nth($names, $index);
 
-  .theme--#{$name} & {
+  &.theme--#{$name} {
     border-color: $colour;
     color: $colour;
   }

app/controllers/site_controller.rb

@@ -1,62 +1,82 @@
 class SiteController < ApplicationController
+  respond_to? :json, :html
   before_action :load_habitat
   before_action :load_global
   before_action :load_charts_data
 
-  def warmwater
-    @data = YAML.load(File.open("#{Rails.root}/lib/data/content/warmwater.yml", 'r'))
+  def index
+    @title = @habitat.title
 
-    @commitments = [
-      @aichi_targets,
-      @sdgs,
-      @data['other_targets']
-    ]
-  end
-
-  def saltmarshes
-    @data = YAML.load(File.open("#{Rails.root}/lib/data/content/saltmarshes.yml", 'r'))
-
-    @commitments = [
-      @aichi_targets,
-      @sdgs,
-      @data['other_targets']
-    ]
-  end
-
-  def mangroves
-    @data = YAML.load(File.open("#{Rails.root}/lib/data/content/mangroves.yml", 'r'))
-
-    @commitments = [
-      @aichi_targets,
-      @sdgs,
-      @data['other_targets']
-    ]
-  end
-
-  def seagrasses
-    @data = YAML.load(File.open("#{Rails.root}/lib/data/content/seagrasses.yml", 'r'))
-
-    @commitments = [
-      @aichi_targets,
-      @sdgs,
-      @data['other_targets']
-    ]
-  end
-
-  def coldcorals
-    @data = YAML.load(File.open("#{Rails.root}/lib/data/content/coldwater.yml", 'r'))
-
-    @commitments = [
-      @aichi_targets,
-      @sdgs,
-      @data['other_targets']
-    ]
+    @nav = [
+      {
+        name: 'warmwater',
+        theme: 'theme--orange',
+        title: 'Warm-water corals'
+      },
+      {
+        name: 'saltmarshes',
+        theme: 'theme--green',
+        title: 'Saltmarshes'
+      },
+      {
+        name: 'mangroves',
+        theme: 'theme--yellow',
+        title: 'Mangroves'
+      },
+      {
+        name: 'seagrasses',
+        theme: 'theme--blue',
+        title: 'Seagrasses'
+      },
+      {
+        name: 'coldcorals',
+        theme: 'theme--pink',
+        title: 'Cold-water corals'
+      }
+    ].to_json
+
+    content = YAML.load(File.open("#{Rails.root}/lib/data/content/#{@habitat.name}.yml", 'r'))
+    aichi_targets = generateImageUrls @aichi_targets
+    sdgs = generateImageUrls @sdgs
+
+    @habitatData = {
+      name: @habitat.name,
+      theme: @habitat.theme,
+      nav: {
+
+      },
+      content: content,
+      map: {
+        habitatTitle: @habitat.title,
+        habitatType: @habitat_type,
+        theme: @habitat.theme,
+        tables: [@habitat.poly_table, @habitat.point_table].compact,
+        titleGlobal: @habitat.global_coverage_title(@habitat_type),
+        titleProtected: @habitat.protected_title,
+        percentageGlobal: @habitat.global_coverage,
+        percentageProtected: @habitat.protected_percentage,
+        wmsUrl: @habitat.wms_url
+      },
+      columnChart: @chart_greatest_coverage,
+      rowChart: @chart_protected_areas,
+      disclaimer: @global['disclaimer'],
+      commitments: [
+        aichi_targets, 
+        sdgs,
+        content['other_targets'] 
+      ]
+    }.to_json
+
+    respond_to do |format|
+      format.html
+      format.json { render json: @habitatData }
+    end
   end
 
   private
 
   def load_habitat
-    @habitat = Habitat.where(name: action_name).first
+    @habitat = Habitat.where(name: params['habitat'] || 'warmwater').first
     @habitat ||= Habitat.where(name: 'coralreef').first
     @habitat_type = @habitat.type
   end
@@ -67,6 +87,14 @@ def load_global
     @sdgs = YAML.load(File.open("#{Rails.root}/lib/data/content/sdgs.yml", 'r'))
   end
 
+  def generateImageUrls targets
+    targets['list'].each do |target|
+      target.merge!({'icon': ActionController::Base.helpers.image_url(target['icon'])})
+    end
+
+    targets
+  end
+
   def load_charts_data
     top_five_countries = StaticStat.where(habitat_id: @habitat.id)
                                    .order('total_value DESC')

app/helpers/application_helper.rb

@@ -7,8 +7,8 @@ def site_description
     'Ocean+ Habitats is an evolving tool that provides insight into the known extent, protection and other statistics of ecologically and economically important ocean habitats, such as corals, mangroves, seagrasses and saltmarshes.'
   end
 
-  def title_meta_tag(page_title)  
-    page_title == nil ? site_title: "#{page_title} | Ocean+ Habitats" 
+  def title_meta_tag  
+    "Ocean+ Habitats" 
   end
 
  def url_encode text

app/javascript/Habitat.vue

@@ -0,0 +1,146 @@
+<template>
+  <div :class="[`theme--${habitat.theme}`]">
+    <sticky-bar class="nav-wrapper sm-trigger-sticky">
+      <div class="nav-scrollable sm-target-sticky">
+        <nav-bar :nav="nav" class="gutters flex flex-v-center flex-h-between"></nav-bar>
+      </div>
+    </sticky-bar>
+
+    <mapbox
+      :habitatTitle="map.habitatTitle"
+      :habitatType="map.habitatType"
+      :theme="map.theme"
+      :tables="map.tables"
+      :titleGlobal="map.titleGlobal"
+      :titleProtected="map.titleProtected"
+      :percentageGlobal="map.percentageGlobal"
+      :percentageProtected="map.percentageProtected"
+      :wmsUrl="map.wmsUrl">
+    </mapbox>
+
+    <chart-column
+      :habitatTitle="map.habitatTitle"
+      :habitatType="map.habitatType"
+      :description="content.top_coverage_description"
+      :data="habitat.columnChart">
+    </chart-column>
+
+    <chart-row
+      :description="content.top_protected_description"
+      :data="habitat.rowChart">
+    </chart-row>
+
+    <section class="section-padding bg--navy white">
+      <div class="container">
+        <h3 class="white">Commitments and pledges</h3>
+        <tabs>
+          <tab v-for="commitment in habitat.commitments" :id="id(commitment.title)" :title="commitment.title" class="tab__content">
+            <div v-for="item in commitment.list" class="tab__content-item flex">
+              <template v-if="item.icon">
+                <img :src="item.icon" :alt="item.title" class="tab__content-icon">
+
+                <p class="tab__content-text" v-html="item.text"></p>
+              </template>
+
+              <template v-else>
+                <p v-html="item.text"></p>
+              </template>
+            </div>
+          </tab>
+        </tabs>
+      </div>
+    </section>
+
+    <section class="section-padding-small">
+      <div class="container smallprint">
+        <div class="smallprint__citations">
+          <h4>Citations</h4>
+          <p class="text--smallprint" v-html="citation"></p>
+        </div>
+
+        <div class="smallprint__disclaimer">
+          <h4>Limitations</h4>
+          <p v-for="p in habitat.disclaimer" class="text--smallprint" v-html="p"></p>
+        </div>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script>
+  import axios from 'axios'
+  import { eventHub } from './packs/application.js'
+
+  import ChartColumn from './components/chart/ChartColumn.vue'
+  import ChartRow from './components/chart/ChartRow.vue'
+  import Tab from './components/tabs/Tab.vue'
+  import Tabs from './components/tabs/Tabs.vue'
+  import Mapbox from './components/map/Mapbox.vue'
+  import NavBar from './components/nav/NavBar.vue'
+  import StickyBar from './components/sticky/StickyBar.vue'
+
+  export default {
+    name: 'habitat',
+
+    components: { ChartColumn, ChartRow, Tab, Tabs, Mapbox, NavBar, StickyBar },
+
+    props: {
+      nav: {
+        type: Array,
+        required: true
+      },
+      source: {
+        type: String,
+        required: true
+      }
+    },
+
+    data () {
+      return {
+        habitat: {},
+        content: [],
+        map: {},
+        citation: ''
+      }
+    },
+
+    created () {
+      const hash = window.location.hash.substr(1),
+        habitat = hash ? hash : undefined
+
+      this.getHabitatData(habitat)
+
+      eventHub.$on('changeHabitat', this.getHabitatData)
+    },
+
+    methods: {
+      id (title) {
+        return title.toLowerCase().replace(/\s+/g, '')
+      },
+
+      getHabitatData (habitat = 'coralreef') {
+        const csrf = document.querySelectorAll('meta[name="csrf-token"]')[0].getAttribute('content')
+
+        axios.defaults.headers.common['X-CSRF-Token'] = csrf
+        axios.defaults.headers.common['Accept'] = 'application/json'
+
+        const data = {
+          params: {
+            habitat: habitat
+          }
+        }
+
+        axios.get(this.source, data)
+          .then((response) => {
+            this.habitat = response.data
+            this.content = this.habitat.content
+            this.map = this.habitat.map
+            this.citation = this.habitat.content.citations
+          })
+          .catch(function (error) {
+            console.log(error)
+          })
+      }
+    }
+  }
+</script>