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,72 +1,31 @@
 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'))
-
-    @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 index
+    @global = YAML.load(File.open("#{Rails.root}/lib/data/content/global.yml", 'r'))
 
-  def seagrasses
-    @data = YAML.load(File.open("#{Rails.root}/lib/data/content/seagrasses.yml", 'r'))
+    @title = @habitat.title
 
-    @commitments = [
-      @aichi_targets,
-      @sdgs,
-      @data['other_targets']
-    ]
-  end
+    @nav = @global['nav'].to_json
 
-  def coldcorals
-    @data = YAML.load(File.open("#{Rails.root}/lib/data/content/coldwater.yml", 'r'))
+    @habitatData = HabitatsSerializer.new(@habitat, @chart_greatest_coverage, @chart_protected_areas, @global).serialize
 
-    @commitments = [
-      @aichi_targets,
-      @sdgs,
-      @data['other_targets']
-    ]
+    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
 
-  def load_global
-    @global = YAML.load(File.open("#{Rails.root}/lib/data/content/global.yml", 'r'))
-    @aichi_targets = YAML.load(File.open("#{Rails.root}/lib/data/content/aichi-targets.yml", 'r'))
-    @sdgs = YAML.load(File.open("#{Rails.root}/lib/data/content/sdgs.yml", 'r'))
-  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" :default="defaultHabitat" 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)
+
+      this.defaultHabitat = hash ? hash : 'coralreef'
+      this.getHabitatData(this.defaultHabitat)
+
+      eventHub.$on('changeHabitat', this.getHabitatData)
+    },
+
+    methods: {
+      id (title) {
+        return title.toLowerCase().replace(/\s+/g, '')
+      },
+
+      getHabitatData (habitat) {
+        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>

app/javascript/components/chart/ChartColumn.vue

@@ -0,0 +1,68 @@
+<template>
+  <section class="bg--grey-light section-padding sm-trigger-column">
+    <div class="container">
+      <div class="chart--column">
+        <div class="chart__content">
+          <h3 v-if="habitatType == 'points'">Top five countries and territories with the greatest number of records of {{ lowerCaseTitle }}</h3>
+
+          <h3 v-else>Top five countries and territories with the greatest coverage of {{ lowerCaseTitle }}</h3>
+
+          <p v-for="p in description" v-html="p"></p>
+        </div>
+
+        <div class="chart__scrollable">
+          <div class="chart__chart center flex flex-h-between">
+            <div v-for="item in data" class="chart__item">
+              <div class="chart__bar sm-target-column">
+                <p class="chart__bar-label sm-target-column no-margin">
+                  {{ item.value }}
+                  <template v-if="habitatType != 'points'">km<sup>2</sup></template>
+                </p>
+                <span class="chart__colour sm-target-child-column" :style="{ height: item.percent + '%' }"></span>
+              </div>
+              <p class="chart__label bold">{{ item.label }}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+  import ScrollMagic from 'scrollmagic'
+
+  export default {
+    name: 'chart-column',
+
+    props: {
+      habitatType: String,
+      habitatTitle: String,
+      description: Array,
+      data: Array
+    },
+
+    updated () {
+      if(this.data.length > 0) { 
+        if(this.scene) { this.scene.removeClassToggle(true) }
+        this.scrollMagicHandlers() 
+      }
+    },
+
+    computed: {
+      lowerCaseTitle () {
+        return this.habitatTitle ? this.habitatTitle.toLowerCase() : ''
+      }
+    },
+
+    methods: {
+      scrollMagicHandlers () {
+        let scrollMagicController = new ScrollMagic.Controller()
+
+        this.scene = new ScrollMagic.Scene({ triggerElement: '.sm-trigger-column', reverse: false })
+          .setClassToggle('.sm-target-column .sm-target-child-column, .sm-target-column', 'animate')
+          .addTo(scrollMagicController)
+      }
+    }
+  }
+</script>