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>
Loading

0 comments on commit eab337b

Please sign in to comment.