-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #24 from unepwcmc/feature/refactor-to-single-page
Feature/refactor to single page
Showing
36 changed files
with
581 additions
and
1,173 deletions.
There are no files selected for viewing
Binary file not shown.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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%; } | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters