Merge pull request #433 from unepwcmc/ticket-53

Ticket 53

app/assets/stylesheets/components/_select.scss

@@ -33,6 +33,6 @@ $select-selected-color: $grey-light;
 // selects
 //--------------------------------------------------
 .select {
-  @import './select/select';
+  @import './select/select-equity';
   @import './select/select-searchable';
 }

app/assets/stylesheets/components/hero/_hero-basic.scss

@@ -5,9 +5,9 @@
   @include hero-medium;
   @include flex;
   @include flex-v-center;
+  z-index: 0;
 
   &.about { background-image: image_url('hero/about.png'); }
-  &.equity { background-image: image_url('hero/equity.png'); }
 
   .hero__content {
     @include breakpoint($small) { width: 80%; }

app/assets/stylesheets/components/select/_select-equity.scss

@@ -0,0 +1,161 @@
+&--equity {
+    @include breakpoint($medium) {
+        display: flex;
+        max-width: none;
+    }
+
+    max-width: rem-calc(685);
+    margin: 0 auto;
+    display: block;
+
+    &__button {
+        @include flex-vs-start;
+        border-radius: rem-calc(4);
+    }
+
+    &__content {
+        @include breakpoint-down($small) {
+            img {
+                object-fit: contain;
+            }
+        }
+        @include breakpoint($small) {
+            height: rem-calc(507);
+            padding: rem-calc(30 0);
+
+            img {
+                object-fit: cover; 
+            }
+        }
+        @include breakpoint($medium) {
+            width: 50%;
+            height: auto;
+            padding: rem-calc(60 0);
+        }
+
+        @include flex;
+        border: 1px solid $grey-dark;
+
+        height: rem-calc(271);
+        padding: rem-calc(20 0);
+
+        img {
+            margin: 0 auto;                 
+        }
+    }
+
+    &__description {
+        @include flex-grow;
+    }
+
+    &__header {
+        @include breakpoint($small) {
+            margin-bottom: rem-calc(8);
+        }
+        @include breakpoint($medium) {
+            margin-bottom: rem-calc(14);
+        }
+
+        margin-top: 0;
+        margin-bottom: 0;
+    }
+
+    &__panel {
+        @include breakpoint($small) {
+            padding: rem-calc(50 44 62 49);
+        }
+        @include breakpoint($medium) {
+            padding: rem-calc(41 40 29 57);
+            width: 50%;
+        }
+        padding: rem-calc(32 13 29 18);
+
+        @include flex;
+        @include flex-column;
+
+        background-color: $grey-xlight;
+    }
+
+
+}
+
+// Custom select for this component
+&--dropdown {
+    &__custom-select {
+        @include breakpoint($small) {
+            margin: rem-calc(30 0 36);
+        }
+        @include breakpoint($medium) {
+            margin: rem-calc(14 0 19);
+        }
+        margin: rem-calc(0 0 27);
+        position: relative;
+        user-select: none;
+        width: 100%;
+    }
+
+    &__selected {
+        @include breakpoint($small) {
+            padding: rem-calc(20 24);
+        }
+
+        @include flex;
+        @include flex-v-center;
+        @include flex-h-between;
+        @include text-body;
+
+        background: $white;
+        border: 1px solid $grey-black;
+        cursor: pointer;
+        line-height: 1.9;
+        padding: rem-calc(11 20);
+        position: relative;
+    }
+
+    &__options {
+        display: none;
+
+        &--active {
+            height: 40vh;
+            background: $white;
+            border: 1px solid $grey-black;
+            border-top: 0;
+            overflow: scroll;
+            display: block;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            right: 0;
+            z-index: 2;
+        }
+    }
+
+    &__option {
+        @include breakpoint($small) {
+            padding: rem-calc(5 24);
+        }
+
+        @include text-body;
+
+        line-height: 1.9;
+        display: block;
+        padding: rem-calc(2 20);
+        position: relative;
+
+        &:hover {
+            background-color: $grey-light;
+        }
+    }
+
+    &__dropdown {
+        @include icon-chevron-black-down;
+        height: rem-calc(10);
+        width: rem-calc(18);
+        transform: rotate(0deg);
+
+        &--active {
+            @extend .select--dropdown__dropdown;
+            transform: rotate(180deg);
+        }
+    }
+}

app/controllers/wdpa_controller.rb

@@ -8,23 +8,6 @@ def index
     }.to_json
 
     @filters = { db_type: ['wdpa'] }
-    @tabs = get_tabs(3).to_json
-  end
-
-  private
-
-  def get_tabs total_tabs
-    tabs = []
-
-    total_tabs.times do |i|
-      tab = {
-        id: i+1,
-        title: @cms_page.fragments.where(identifier: "tab-title-#{i+1}").first.content
-      }
-
-      tabs << tab
-    end
-
-    tabs
+    @tabs = helpers.get_cms_tabs(3).to_json
   end
 end

app/helpers/cms_helper.rb

@@ -36,6 +36,21 @@ def cms_page_path page
     "#"
   end
 
+  def get_cms_tabs total_tabs
+    tabs = []
+
+    total_tabs.times do |i|
+      tab = {
+        id: i+1,
+        title: @cms_page.fragments.where(identifier: "tab-title-#{i+1}").first.content
+      }
+
+      tabs << tab
+    end
+
+    tabs
+  end
+
   def hasParent? page
     page.parent
   end

app/helpers/equity_helper.rb

@@ -0,0 +1,32 @@
+module EquityHelper
+    def tabs
+        @tabs = get_cms_tabs(2).to_json
+    end
+
+    def pa_pages
+        @pa_pages ||= @cms_page.children.first.children
+    end
+
+    def text
+        @text ||= cms_fragment_content(:text, @pa_pages.first)
+    end
+
+    def protected_areas
+        pa_pages.published.map do |child|
+            {
+                title: child.label,
+                text: parsed_text(text),
+                url: child.full_path,
+                image: include_image(cms_fragment_content(:text, child))
+            }          
+        end
+    end
+
+    def include_image(pa_page)
+        Nokogiri::HTML(pa_page).css("img").attr('src').value
+    end
+
+    def parsed_text(text)
+        Nokogiri::HTML(text).css("p").last.text rescue "No description available."
+    end
+end

app/javascript/components/select/SelectDropdown.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="select--dropdown__custom-select">
+    <div class="select--dropdown__custom-select-box">
+      <div class="select--dropdown__selected" @click="toggleVis">
+        <span>{{ selected.title }}</span>
+        <div
+          :class="[ isActive ? 'select--dropdown__dropdown--active' : 'select--dropdown__dropdown' ]"
+        ></div>
+      </div>
+      <div :class="[ isActive ? 'select--dropdown__options--active' : 'select--dropdown__options' ]">
+        <span
+          v-for="(area, index) in protectedAreas"
+          :key="index"
+          class="select--dropdown__option"
+          @click="selectArea(index)"
+        >{{ area.title }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import mixinPopupCloseListeners from "../../mixins/mixin-popup-close-listeners"
+
+export default {
+  name: "SelectDropdown",
+  mixins: [ mixinPopupCloseListeners({closeCallback: 'close', toggleVariable: 'isActive'}) ],
+  props: {
+    protectedAreas: {
+      type: Array
+    }
+  },
+
+  data() {
+    return {
+      isActive: false,
+      selected: this.protectedAreas[0]
+    };
+  },
+  methods: {
+    toggleVis() {
+      this.isActive ? this.close() : this.open();
+    },
+    close() {
+      this.isActive = false;
+    },
+    open() {
+      this.isActive = true;
+    },
+    selectArea(index) {
+        this.selected = this.protectedAreas[index];
+        this.close();
+        this.$emit('pa-selected', this.selected);
+    }
+  }
+};
+</script>
+

app/javascript/components/select/SelectEquity.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="select--equity">
+    <div class="select--equity__content">
+      <img :src="selected.image" :alt="'Visual results for ' + selected.title" />
+    </div>
+
+    <div class="select--equity__panel">
+      <h2 class="select--equity__header">Results from study sites</h2>
+      <p class="select--equity__description">{{ selected.text }}</p>
+      <select-dropdown :protected-areas="protectedAreas" @pa-selected="changeSelection" />
+      <a
+        :href="selected.url"
+        class="button--primary select--equity__button"
+        title="View the protected area"
+      >View Protected Area</a>
+    </div>
+  </div>
+</template>
+
+<script>
+import SelectDropdown from "./SelectDropdown";
+
+export default {
+  name: "select-equity",
+  components: { SelectDropdown },
+  props: {
+    protectedAreas: {
+      type: Array
+    }
+  },
+
+  data() {
+    return {
+      selected: this.protectedAreas[0]
+    };
+  },
+  methods: {
+    changeSelection(selected) {
+      this.selected = selected;
+    }
+  }
+};
+</script>

app/javascript/vue.js

@@ -38,6 +38,7 @@ import SearchAreas from './components/search/SearchAreas'
 import SearchAreasHome from './components/search/SearchAreasHome'
 import SearchSite from './components/search/SearchSite'
 import SearchSiteTopbar from './components/search/SearchSiteTopbar'
+import SelectEquity from './components/select/SelectEquity'
 import SelectWithContent from './components/select/SelectWithContent'
 import StickyBar from './components/sticky/StickyBar'
 import StickyNav from './components/sticky/StickyNav'
@@ -89,6 +90,7 @@ document.addEventListener('DOMContentLoaded', () => {
         SearchAreasHome,
         SearchSite,
         SearchSiteTopbar,
+        SelectEquity,
         SelectWithContent,
         StickyBar,
         StickyNav,