-
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> |
Oops, something went wrong.