Skip to content

Commit

Permalink
Merge pull request #24 from unepwcmc/feature/refactor-to-single-page
Browse files Browse the repository at this point in the history
Feature/refactor to single page
Levia authored Dec 19, 2018
2 parents 5f3fc3c + caecdc6 commit eab337b
Showing 36 changed files with 581 additions and 1,173 deletions.
Binary file modified app/assets/.DS_Store
Binary file not shown.
1 change: 1 addition & 0 deletions app/assets/stylesheets/components-vue/_nav.scss
Original file line number Diff line number Diff line change
@@ -30,6 +30,7 @@

&__a {
color: $white;
cursor: pointer;
border: solid 1px $nav;
border-radius: $radius-button;
font-size: rem-calc(20);
25 changes: 25 additions & 0 deletions app/assets/stylesheets/components/_smallprint.scss
Original file line number Diff line number Diff line change
@@ -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%; }
}
}
2 changes: 1 addition & 1 deletion app/assets/stylesheets/utilities/_mixins-shared.scss
Original file line number Diff line number Diff line change
@@ -14,7 +14,7 @@
$colour: nth($colours, $index);
$name: nth($names, $index);

.theme--#{$name} & {
&.theme--#{$name} {
border-color: $colour;
color: $colour;
}
63 changes: 11 additions & 52 deletions app/controllers/site_controller.rb
Original file line number Diff line number Diff line change
@@ -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')
4 changes: 2 additions & 2 deletions app/helpers/application_helper.rb
Original file line number Diff line number Diff line change
@@ -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
10 changes: 0 additions & 10 deletions app/helpers/site_helper.rb

This file was deleted.

146 changes: 146 additions & 0 deletions app/javascript/Habitat.vue
Original file line number Diff line number Diff line change
@@ -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>
68 changes: 68 additions & 0 deletions app/javascript/components/chart/ChartColumn.vue
Original file line number Diff line number Diff line change
@@ -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>
53 changes: 53 additions & 0 deletions app/javascript/components/chart/ChartRow.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<template>
<section class="section-padding sm-trigger-row">
<div class="container">
<div class="chart--row">
<div class="chart__content">
<h3>Top five countries and territories with habitat area covered by a protected area</h3>

<p v-for="p in description" v-html="p"></p>
</div>

<div class="chart__chart">
<div v-for="item in data" class="chart__item">
<p class="chart__label bold">{{ item.label }}</p>
<div class="chart__bar sm-target-row">
<span class="chart__bar-label sm-target-child-row">{{ item.percent }}%</span>
<span class="chart__colour sm-target-child-row" :style="{ width: item.percent + '%' }"></span>
</div>
</div>
</div>
</div>
</div>
</section>
</template>

<script>
import ScrollMagic from 'scrollmagic'
export default {
name: 'chart-row',
props: {
description: Array,
data: Array
},
updated () {
if(this.data.length > 0) {
if(this.scene) { this.scene.removeClassToggle(true) }
this.scrollMagicHandlers()
}
},
methods: {
scrollMagicHandlers () {
let scrollMagicController = new ScrollMagic.Controller()
this.scene = new ScrollMagic.Scene({ triggerElement: '.sm-trigger-row', reverse: false })
.setClassToggle('.sm-target-row .sm-target-child-row, .sm-target-row', 'animate')
.addTo(scrollMagicController)
}
}
}
</script>
20 changes: 18 additions & 2 deletions app/javascript/components/counter/Counter.vue
Original file line number Diff line number Diff line change
@@ -38,6 +38,18 @@
}
},
watch: {
number () {
if(this.scene) {
this.scene.removeClassToggle(true)
this.currentNumber = 0
this.calcuateStep()
}
this.scrollMagicHandlers()
}
},
computed: {
styledNumber () {
const roundingNumber = 1
@@ -47,14 +59,18 @@
},
created () {
this.step = Math.abs(this.number - this.currentNumber) / this.divisor
this.calcuateStep()
},
mounted () {
this.scrollMagicHandlers()
},
methods: {
calcuateStep () {
this.step = Math.abs(this.number - this.currentNumber) / this.divisor
},
count () {
const increase = this.currentNumber < this.number ? true : false
@@ -79,7 +95,7 @@
scrollMagicHandlers () {
let scrollMagicCounter = new ScrollMagic.Controller()
new ScrollMagic.Scene({ triggerElement: `.${this.smTrigger}`, reverse: false })
this.scene = new ScrollMagic.Scene({ triggerElement: `.${this.smTrigger}`, reverse: true })
.on('start', () => {
if(this.$el.classList.contains(this.smTarget)) { this.count() }
})
41 changes: 32 additions & 9 deletions app/javascript/components/map/Mapbox.vue
Original file line number Diff line number Diff line change
@@ -4,17 +4,17 @@
<p class="map__panel-title">{{ titleGlobal }}</p>

<p class="map__panel-stat no-margin">
<counter sm-trigger="sm-counter-trigger" sm-target="sm-counter-target" :number="percentageGlobal"></counter>
<counter v-if="percentageGlobal" sm-trigger="sm-counter-trigger" sm-target="sm-counter-target" :number="percentageGlobal"></counter>
<template v-if="habitatType != 'points'"> km<sup>2</sup></template>
</p>

<p class="map__panel-title">{{ titleProtected }}</p>

<span class="map__panel-stat">
<counter sm-trigger="sm-counter-trigger" sm-target="sm-counter-target" :number="percentageProtected"></counter>%
<counter v-if="percentageProtected" sm-trigger="sm-counter-trigger" sm-target="sm-counter-target" :number="percentageProtected"></counter>%
</span>

<p class="map__panel-layer map__panel-layer-habitat">{{ habitat }}</p>
<p class="map__panel-layer map__panel-layer-habitat">{{ habitatTitle }}</p>
<p class="map__panel-layer">Protected Areas</p>
</div>

@@ -31,7 +31,7 @@
components: { Counter },
props: {
habitat: String,
habitatTitle: String,
habitatType: String,
theme: String,
titleGlobal: String,
@@ -56,14 +56,29 @@
orange: '#FF8A75',
pink: '#F35F8D',
yellow: '#FCDA68'
}
},
}
},
mounted () {
this.createMap()
},
watch: {
tables () {
const waiting = () => {
if (!this.map.isStyleLoaded()) {
setTimeout(waiting, 100);
} else {
this.removeHabitatLayer()
this.addHabitatLayer()
}
}
waiting()
}
},
methods: {
createMap () {
mapboxgl.accessToken = this.mapboxToken
@@ -109,29 +124,37 @@
//this.addLayer(tiles, 'layer1', 'habitat', this.themes[this.theme], false, .8, 'fill')
//this.addLayer(tiles, 'layer1', 'habitat-points', this.themes[this.theme], true, .8)
//this.addLayer(tiles, 'layer1', 'habitat-lines', this.themes[this.theme], false, .8, 'line')
this.addWmsLayer('habitat', this.wmsUrl, this.themes[this.theme])
//this.addWmsLayer('habitat', this.wmsUrl, this.themes[this.theme])
})
},
addWmsLayer (id, url, colour) {
addHabitatLayer () {
let options = {
"id": "habitat",
"type": "raster",
"minzoom": 0,
"maxzoom": 22,
"source": {
"type": "raster",
"tiles": [url],
"tiles": [this.wmsUrl],
"tileSize": 64
},
"paint": {
"raster-hue-rotate": 0
}
}
this.map.addLayer(options)
},
removeHabitatLayer () {
let habitatLayer = this.map.getLayer('habitat')
if(typeof habitatLayer !== 'undefined') {
this.map.removeLayer('habitat').removeSource('habitat')
}
},
addLayer (tiles, source, id, colour, point, opacity, type) {
let options = {
'id': id,
71 changes: 71 additions & 0 deletions app/javascript/components/nav/NavBar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<template>
<nav class="nav">
<nav-link v-for="navLink in nav"
:title="navLink.title"
:name="navLink.name"
:theme="navLink.theme">
</nav-link>
</nav>
</template>

<script>
import { eventHub } from '../../packs/application.js'
import NavLink from './NavLink.vue'
export default {
name: 'nav-bar',
components: { NavLink },
props: {
nav: {
type: Array,
required: true
},
default: {
type: String,
required: true
}
},
data () {
return {
children: []
}
},
created () {
this.children = this.$children
eventHub.$on('changeHabitat', this.updateNav)
},
watch: {
children () {
if(this.children.length > 0) { this.updateNav(this.default) }
}
},
methods: {
updateNav (selectedName) {
window.location.replace(`#${selectedName}`)
let match = 0
this.children.forEach(child => {
if(child.name === selectedName) {
child.isActive = true
match+= 1
} else {
child.isActive = false
}
})
if(match == 0) {
this.children[0].isActive = true
window.location.replace(`#${this.children[0].name}`)
}
}
}
}
</script>
40 changes: 40 additions & 0 deletions app/javascript/components/nav/NavLink.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<template>
<p class="nav__a no-margin" :class="[{ 'active': isActive }, theme]" @click="triggerNavItem">
{{ title }}
</p>
</template>

<script>
import { eventHub } from '../../packs/application.js'
export default {
name: 'nav-link',
props: {
title: {
type: String,
required: true
},
name: {
type: String,
required: true
},
theme: {
type: String,
required: true
}
},
data () {
return {
isActive: false
}
},
methods: {
triggerNavItem (selectedName) {
eventHub.$emit('changeHabitat', this.name)
}
}
}
</script>
9 changes: 6 additions & 3 deletions app/javascript/components/tabs/Tabs.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div>
<ul class="tab__triggers ul-inline ul-unstyled">
<li v-for="child, index in children" @click="triggerTab(child.id)" class="tab__trigger" :class="{ 'tab-active': child.isActive }">
<li v-for="child in children" @click="triggerTab(child.id)" class="tab__trigger" :class="{ 'tab-active': child.isActive }">
{{ child.title }}
</li>
</ul>
@@ -24,10 +24,13 @@
created () {
this.children = this.$children
},
mounted () {
this.triggerTab(this.children[0].id)
watch: {
children () {
if(this.children.length > 0) { this.triggerTab(this.children[0].id) }
}
},
methods: {
14 changes: 2 additions & 12 deletions app/javascript/packs/application.js
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
// libraries
import Vue from 'vue/dist/vue.esm'
import TurbolinksAdapter from 'vue-turbolinks'
import ScrollMagic from 'scrollmagic'

Vue.config.productionTip = false

Vue.use(TurbolinksAdapter)

// components
import Habitat from '../Habitat.vue'
import Tab from '../components/tabs/Tab.vue'
import Tabs from '../components/tabs/Tabs.vue'
import Mapbox from '../components/map/Mapbox.vue'
@@ -20,21 +20,11 @@ document.addEventListener('turbolinks:load', () => {
const app = new Vue({
el: '#v-app',
components: {
Habitat,
Tab,
Tabs,
Mapbox,
StickyBar
}
})

// add scenes for animated html components
let scrollMagicController = new ScrollMagic.Controller()

new ScrollMagic.Scene({ triggerElement: '.sm-trigger-column', reverse: false })
.setClassToggle('.sm-target-column .sm-target-child-column, .sm-target-column', 'animate')
.addTo(scrollMagicController)

new ScrollMagic.Scene({ triggerElement: '.sm-trigger-row', reverse: false })
.setClassToggle('.sm-target-row .sm-target-child-row, .sm-target-row', 'animate')
.addTo(scrollMagicController)
})
60 changes: 60 additions & 0 deletions app/serializers/habitats_serializer.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
class HabitatsSerializer

def initialize(habitat, chart_greatest_coverage, chart_protected_areas, global)
@habitat = habitat
@chart_greatest_coverage = chart_greatest_coverage
@chart_protected_areas = chart_protected_areas
@global = global
end

def serialize
{
name: @habitat.name,
theme: @habitat.theme,
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']
]
}
end

private

def content
YAML.load(File.open("#{Rails.root}/lib/data/content/#{@habitat.name}.yml", 'r'))
end

def aichi_targets
@aichi_targets = YAML.load(File.open("#{Rails.root}/lib/data/content/aichi-targets.yml", 'r'))
generateImageUrls @aichi_targets
end

def sdgs
@sdgs = YAML.load(File.open("#{Rails.root}/lib/data/content/sdgs.yml", 'r'))
generateImageUrls @sdgs
end

def generateImageUrls targets
targets['list'].each do |target|
target.merge!({'icon': ActionController::Base.helpers.image_url(target['icon'])})
end

targets
end
end
7 changes: 0 additions & 7 deletions app/views/global/_citations.html.erb

This file was deleted.

23 changes: 0 additions & 23 deletions app/views/global/_commitments.html.erb

This file was deleted.

9 changes: 0 additions & 9 deletions app/views/global/_disclaimer.html.erb

This file was deleted.

36 changes: 0 additions & 36 deletions app/views/global/_greatest-coverage.html.erb

This file was deleted.

2 changes: 1 addition & 1 deletion app/views/global/_head.html.erb
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<title><%= title_meta_tag(@data['title'])%></title>
<title><%= title_meta_tag %></title>
<%= csrf_meta_tags %>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

4 changes: 2 additions & 2 deletions app/views/global/_header.html.erb
Original file line number Diff line number Diff line change
@@ -3,8 +3,8 @@
<%= image_tag 'logos/logo-ocean-plus-habitats.svg', alt: 'Ocean+ Habitats logo', class: 'header__logo logo--site margin-center' %>
<h1><%= @global['title'] %></h1>
<div>
<% @global['tagline'].each do |p| %>
<p><%= p.html_safe %></p>
<% @global['tagline'].each_with_index do |p, i| %>
<p <% if i == 0 %>class="bold"<% end %>><%= p.html_safe %></p>
<% end %>
</div>
<i class="header__icon icon--scroll absolute-center"></i>
12 changes: 0 additions & 12 deletions app/views/global/_map.html.erb

This file was deleted.

11 changes: 0 additions & 11 deletions app/views/global/_nav.html.erb

This file was deleted.

25 changes: 0 additions & 25 deletions app/views/global/_protected-areas.html.erb

This file was deleted.

12 changes: 4 additions & 8 deletions app/views/layouts/application.html.erb
Original file line number Diff line number Diff line change
@@ -5,15 +5,11 @@
</head>

<body>
<div id="v-app" v-cloak class="theme--<%= @habitat.theme %>">
<div id="v-app" v-cloak>
<%= render '/global/header' %>
<%= render '/global/nav' %>
<%= render '/global/map' %>
<%= render '/global/greatest-coverage' %>
<%= render '/global/protected-areas' %>
<%= render '/global/commitments' %>
<%= render '/global/citations' %>
<%= render '/global/disclaimer' %>

<habitat source="/" :nav="<%= @nav %>"></habitat>

<%= render '/global/footer' %>
</div>
</body>
Empty file added app/views/site/index.html
Empty file.
8 changes: 1 addition & 7 deletions config/routes.rb
Original file line number Diff line number Diff line change
@@ -1,11 +1,5 @@
Rails.application.routes.draw do
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html

root to: 'site#warmwater'

get '/warmwater', to: 'site#warmwater'
get '/saltmarshes', to: 'site#saltmarshes'
get '/mangroves', to: 'site#mangroves'
get '/seagrasses', to: 'site#seagrasses'
get '/coldcorals', to: 'site#coldcorals'
root to: 'site#index'
end
File renamed without changes.
File renamed without changes.
25 changes: 23 additions & 2 deletions lib/data/content/global.yml
Original file line number Diff line number Diff line change
@@ -1,13 +1,34 @@
title: "The first authoritative online resource on marine habitats"
tagline:
-
'<strong>Ocean+ Habitats</strong> 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.'
'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.'
-
'Through <strong>Ocean+ Habitats</strong>, we aim to record the current state of our evolving knowledge on the location and protection of these habitats, with monthly updates drawn from the World Database on Protected Areas.'
'Through Ocean+ Habitats, we aim to record the current state of our evolving knowledge on the location and protection of these habitats, with monthly updates drawn from the World Database on Protected Areas.'
-
'This website will be expanded in the coming year to pilot national and <a href="https://www.unenvironment.org/explore-topics/oceans-seas/what-we-do/working-regional-seas" title="Regional Seas pages" target="_blank">Regional Seas pages</a>; we welcome contributions and collaborations.'
-
'For access to the underlying spatial datasets, please visit the <a href="http://data.unep-wcmc.org" title="Ocean Data Viewer" target="_blank">Ocean Data Viewer</a>. For more information on the Ocean+ initiative, please visit the main <a href="http://oceanplus.org" title="Ocean+" target="_blank">Ocean+ website</a>.'
nav:
-
name: 'coralreef'
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'
disclaimer:
-
'These datasets are compiled from a number of datasets submitted by data providers who have kindly permitted their use. Details regarding these data providers can be found in the accompanying metadata tables associated with each dataset.'
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -3,6 +3,7 @@
"private": true,
"dependencies": {
"@rails/webpacker": "3.5",
"axios": "^0.18.0",
"dotenv-webpack": "^1.5.5",
"es6-promise": "^4.2.5",
"scrollmagic": "^2.0.6",
952 changes: 13 additions & 939 deletions yarn.lock

Large diffs are not rendered by default.

0 comments on commit eab337b

Please sign in to comment.