From f17bfc260a6105d275e776139c681b89bef81911 Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Wed, 15 Jul 2020 12:18:45 +0100
Subject: [PATCH 01/22] created a new component equity select

---
 .../components/select/EquitySelect.vue        | 33 +++++++++++++++++++
 app/views/layouts/cms/_equity.html.erb        |  8 +++++
 2 files changed, 41 insertions(+)
 create mode 100644 app/javascript/components/select/EquitySelect.vue

diff --git a/app/javascript/components/select/EquitySelect.vue b/app/javascript/components/select/EquitySelect.vue
new file mode 100644
index 000000000..d27b00371
--- /dev/null
+++ b/app/javascript/components/select/EquitySelect.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="equity-select">
+    <div class="equity-select__content">
+      <img :src="selected.image" :alt="'Visual results for ' + selected.title" />
+    </div>
+
+    <div class="equity-select__panel">
+      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse recusandae deserunt saepe placeat ut architecto optio nostrum dolorem, laudantium ullam provident similique consectetur id eligendi praesentium labore quisquam atque vel?</p>
+      <select v-model="selected">
+        <option v-for="(option, index) in options" :key="index" :value="option">{{ option.title }}</option>
+      </select>
+      <a :href="selected.url" title="View the protected area">View the protected area</a>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "equity-select",
+
+  props: {
+    options: {
+      type: Array
+    }
+  },
+
+  data() {
+    return {
+      selected: null
+    };
+  }
+};
+</script>
\ No newline at end of file
diff --git a/app/views/layouts/cms/_equity.html.erb b/app/views/layouts/cms/_equity.html.erb
index b81e6b721..9d9a8b877 100644
--- a/app/views/layouts/cms/_equity.html.erb
+++ b/app/views/layouts/cms/_equity.html.erb
@@ -1,5 +1,13 @@
 <%= render partial: "./layouts/partials/hero-basic", locals: { title: @cms_page.label, classes: "#{@cms_page.slug} bg-image-overlay--white" } %>
 
+<section class="container">
+  <!-- Equity results component -->
+  <equity-select
+    :options=""
+  />
+</section>
+
+
 <section class="container">
   <%= cms_fragment_render("content") %>
 </section>

From daa91c8834b0a6647bd56bd4ce924ade16d19fcb Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Wed, 15 Jul 2020 12:44:27 +0100
Subject: [PATCH 02/22] created a helper method for populating the component
 and it now renders correctly

---
 app/helpers/equity_helper.rb                  | 22 +++++++++++++++++++
 .../components/select/EquitySelect.vue        |  6 ++---
 app/javascript/vue.js                         |  2 ++
 app/views/layouts/cms/_equity.html.erb        |  3 +--
 4 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 app/helpers/equity_helper.rb

diff --git a/app/helpers/equity_helper.rb b/app/helpers/equity_helper.rb
new file mode 100644
index 000000000..558eb7f87
--- /dev/null
+++ b/app/helpers/equity_helper.rb
@@ -0,0 +1,22 @@
+module EquityHelper
+    # To be updated once the PA pages are actually fleshed out
+    def options
+        @options = []
+
+        @cms_page.children.first.children.published.each do |child|
+            object = {}
+
+            object[:title] = child.label
+            object[:text] = cms_fragment_content(:text, child)
+            # object[:url] = cms_fragment_content(:url, child)
+            object[:url] = child.full_path
+
+            if(cms_fragment_content(:image, child).try(:file) && cms_fragment_content(:image, child).file.url(:dropdownImage))
+                object[:image] = cms_fragment_content(:image, child).file.url(:dropdownImage)
+            end
+
+            @options.push(object)
+            
+        end
+    end
+end
\ No newline at end of file
diff --git a/app/javascript/components/select/EquitySelect.vue b/app/javascript/components/select/EquitySelect.vue
index d27b00371..dfb2aa9b0 100644
--- a/app/javascript/components/select/EquitySelect.vue
+++ b/app/javascript/components/select/EquitySelect.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="equity-select">
     <div class="equity-select__content">
-      <img :src="selected.image" :alt="'Visual results for ' + selected.title" />
+      <!-- <img :src="selected.image" :alt="'Visual results for ' + selected.title" /> -->
     </div>
 
     <div class="equity-select__panel">
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse recusandae deserunt saepe placeat ut architecto optio nostrum dolorem, laudantium ullam provident similique consectetur id eligendi praesentium labore quisquam atque vel?</p>
       <select v-model="selected">
-        <option v-for="(option, index) in options" :key="index" :value="option">{{ option.title }}</option>
+        <option v-for="(option, index) in options" :key="index" :value="option">{{ option.label }}</option>
       </select>
       <a :href="selected.url" title="View the protected area">View the protected area</a>
     </div>
@@ -26,7 +26,7 @@ export default {
 
   data() {
     return {
-      selected: null
+      selected: this.options[0]
     };
   }
 };
diff --git a/app/javascript/vue.js b/app/javascript/vue.js
index c4dc51167..5981d8b18 100644
--- a/app/javascript/vue.js
+++ b/app/javascript/vue.js
@@ -28,6 +28,7 @@ import ChartRectangles from './components/charts/chart-rectangles/ChartRectangle
 import ChartRowPa from './components/charts/chart-row-pa/ChartRowPa'
 import ChartRowTarget from './components/charts/chart-row-target/ChartRowTarget'
 import ChartSunburst from './components/charts/chart-sunburst/ChartSunburst'
+import EquitySelect from './components/select/EquitySelect'
 import Flickity from 'vue-flickity';
 import Download from './components/download/Download'
 import MapInteractive from './components/map/MapInteractive'
@@ -78,6 +79,7 @@ document.addEventListener('DOMContentLoaded', () => {
         ChartRowTarget,
         ChartSunburst,
         Download,
+        EquitySelect,
         Flickity,
         MapInteractive,
         NavBurger,
diff --git a/app/views/layouts/cms/_equity.html.erb b/app/views/layouts/cms/_equity.html.erb
index 9d9a8b877..427c77496 100644
--- a/app/views/layouts/cms/_equity.html.erb
+++ b/app/views/layouts/cms/_equity.html.erb
@@ -1,9 +1,8 @@
 <%= render partial: "./layouts/partials/hero-basic", locals: { title: @cms_page.label, classes: "#{@cms_page.slug} bg-image-overlay--white" } %>
 
 <section class="container">
-  <!-- Equity results component -->
   <equity-select
-    :options=""
+    :options="<%= options.to_json %>"
   />
 </section>
 

From 22f30ddf8b3e81d2474e58876f745e7345901fda Mon Sep 17 00:00:00 2001
From: Stacy Talbot <stacy.talbot@unep-wcmc.org>
Date: Wed, 15 Jul 2020 13:54:46 +0100
Subject: [PATCH 03/22] Add in tabs to cms for equity page

---
 app/controllers/wdpa_controller.rb            | 19 +---------------
 app/helpers/cms_helper.rb                     | 15 +++++++++++++
 app/views/layouts/cms/_equity.html.erb        | 22 ++++++++++++++++---
 app/views/partials/tabs/_tabs-equity.html.erb | 22 +++++++++++++++++++
 4 files changed, 57 insertions(+), 21 deletions(-)
 create mode 100644 app/views/partials/tabs/_tabs-equity.html.erb

diff --git a/app/controllers/wdpa_controller.rb b/app/controllers/wdpa_controller.rb
index 09e5cd7cb..19a8e0c37 100644
--- a/app/controllers/wdpa_controller.rb
+++ b/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
\ No newline at end of file
diff --git a/app/helpers/cms_helper.rb b/app/helpers/cms_helper.rb
index d4e1a7591..e7695bf0c 100644
--- a/app/helpers/cms_helper.rb
+++ b/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
diff --git a/app/views/layouts/cms/_equity.html.erb b/app/views/layouts/cms/_equity.html.erb
index b81e6b721..86a4444d4 100644
--- a/app/views/layouts/cms/_equity.html.erb
+++ b/app/views/layouts/cms/_equity.html.erb
@@ -1,8 +1,24 @@
-<%= render partial: "./layouts/partials/hero-basic", locals: { title: @cms_page.label, classes: "#{@cms_page.slug} bg-image-overlay--white" } %>
+<%
+  ##TODO Stanley - can you put this in the helper
+
+  @tabs = get_cms_tabs(2).to_json
+%>
+
+<%= render partial: "./layouts/partials/hero-basic", locals: { 
+    classes: "#{@cms_page.slug} bg-image-overlay--white" ,
+    title: @cms_page.label
+  } 
+%>
+
+<section class="container">
+  <%= render partial: "partials/tabs/tabs-equity", locals: { 
+    tabs: @tabs
+  } %>
+</section>
 
 <section class="container">
-  <%= cms_fragment_render("content") %>
+  <%= render "partials/cards/resources" %>
 </section>
 
-<%#= render "partials/carousels/themes" %>
+<%= render "partials/carousels/themes" %>
 <%= render "partials/ctas/live-report" %>
\ No newline at end of file
diff --git a/app/views/partials/tabs/_tabs-equity.html.erb b/app/views/partials/tabs/_tabs-equity.html.erb
new file mode 100644
index 000000000..733e79b42
--- /dev/null
+++ b/app/views/partials/tabs/_tabs-equity.html.erb
@@ -0,0 +1,22 @@
+<tabs
+  class="tabs--hero"
+  :tab-triggers="<%= tabs %>"
+>
+  <template slot-scope="{ selectedId }">
+    <tab-target :id="1" :selected-id="selectedId">
+      <section class="container--medium section-padding--bottom">
+        <%= cms_fragment_render("tab-content-1") %>
+      </section>
+
+      <section class="section-padding--bottom">
+        <h1>STANLEY PUT COMPONENT HERE</h1>
+      </section>
+    </tab-target>
+
+    <tab-target :id="2" :selected-id="selectedId">
+      <section class="container--medium">
+        <%= cms_fragment_render("tab-content-2") %>
+      </section>
+    </tab-target>
+  </template>
+</tabs>
\ No newline at end of file

From c3729ebdd5807d3ce68aba6b635324ea6a4c4804 Mon Sep 17 00:00:00 2001
From: Stacy Talbot <stacy.talbot@unep-wcmc.org>
Date: Wed, 15 Jul 2020 14:03:10 +0100
Subject: [PATCH 04/22] Make sure tabs are displaying correctly

---
 app/assets/stylesheets/components/hero/_hero-basic.scss | 2 +-
 app/views/layouts/cms/_equity.html.erb                  | 2 ++
 app/views/partials/tabs/_tabs-equity.html.erb           | 8 ++++----
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/components/hero/_hero-basic.scss b/app/assets/stylesheets/components/hero/_hero-basic.scss
index 601e13916..efc9933d5 100644
--- a/app/assets/stylesheets/components/hero/_hero-basic.scss
+++ b/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%; }
diff --git a/app/views/layouts/cms/_equity.html.erb b/app/views/layouts/cms/_equity.html.erb
index 86a4444d4..14e079bde 100644
--- a/app/views/layouts/cms/_equity.html.erb
+++ b/app/views/layouts/cms/_equity.html.erb
@@ -6,6 +6,8 @@
 
 <%= render partial: "./layouts/partials/hero-basic", locals: { 
     classes: "#{@cms_page.slug} bg-image-overlay--white" ,
+    hero_image: cms_fragment_render(:theme_image, @cms_page),
+    summary: cms_fragment_render("summary"),
     title: @cms_page.label
   } 
 %>
diff --git a/app/views/partials/tabs/_tabs-equity.html.erb b/app/views/partials/tabs/_tabs-equity.html.erb
index 733e79b42..fc329ff34 100644
--- a/app/views/partials/tabs/_tabs-equity.html.erb
+++ b/app/views/partials/tabs/_tabs-equity.html.erb
@@ -4,13 +4,13 @@
 >
   <template slot-scope="{ selectedId }">
     <tab-target :id="1" :selected-id="selectedId">
-      <section class="container--medium section-padding--bottom">
-        <%= cms_fragment_render("tab-content-1") %>
-      </section>
-
       <section class="section-padding--bottom">
         <h1>STANLEY PUT COMPONENT HERE</h1>
       </section>
+  
+      <section class="container--medium section-padding--bottom">
+        <%= cms_fragment_render("tab-content-1") %>
+      </section>
     </tab-target>
 
     <tab-target :id="2" :selected-id="selectedId">

From 286790d15a83562f742211d37e84a9050e9fbc2d Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Wed, 15 Jul 2020 14:06:12 +0100
Subject: [PATCH 05/22] renamed component

---
 app/assets/stylesheets/_settings.scss             |  2 ++
 .../components/select/_select-equity.scss         | 15 +++++++++++++++
 .../select/{EquitySelect.vue => SelectEquity.vue} |  9 +++++----
 app/javascript/vue.js                             |  4 ++--
 app/views/layouts/cms/_equity.html.erb            |  2 +-
 5 files changed, 25 insertions(+), 7 deletions(-)
 create mode 100644 app/assets/stylesheets/components/select/_select-equity.scss
 rename app/javascript/components/select/{EquitySelect.vue => SelectEquity.vue} (82%)

diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss
index 11c2303ae..57a9df024 100644
--- a/app/assets/stylesheets/_settings.scss
+++ b/app/assets/stylesheets/_settings.scss
@@ -10,8 +10,10 @@ $white: #ffffff;
 $black: #000000;
 
 $grey-xlight: #f4f4f4;
+$grey-med-light: #ededed;
 $grey-light: #c8c8c8;
 $grey: #919191;
+$grey-med-dark: #707070;
 $grey-dark: #666666;
 $grey-xdark: #404040;
 $grey-black: #242424;
diff --git a/app/assets/stylesheets/components/select/_select-equity.scss b/app/assets/stylesheets/components/select/_select-equity.scss
new file mode 100644
index 000000000..5440f3a26
--- /dev/null
+++ b/app/assets/stylesheets/components/select/_select-equity.scss
@@ -0,0 +1,15 @@
+.select-equity {
+    @include flex;
+
+    &__content {
+        border: 1px solid $grey-med-dark;
+        width: 50%;
+    }
+
+    &__panel {
+        background-color: $grey-med-light;
+        padding-left: rem-calc(57);
+        padding-right: rem-calc(40);
+        width: 50%;
+    }
+}
\ No newline at end of file
diff --git a/app/javascript/components/select/EquitySelect.vue b/app/javascript/components/select/SelectEquity.vue
similarity index 82%
rename from app/javascript/components/select/EquitySelect.vue
rename to app/javascript/components/select/SelectEquity.vue
index dfb2aa9b0..83f5b07c3 100644
--- a/app/javascript/components/select/EquitySelect.vue
+++ b/app/javascript/components/select/SelectEquity.vue
@@ -1,10 +1,11 @@
 <template>
-  <div class="equity-select">
-    <div class="equity-select__content">
+  <div class="select-equity">
+    <div class="select-equity__content">
       <!-- <img :src="selected.image" :alt="'Visual results for ' + selected.title" /> -->
     </div>
 
-    <div class="equity-select__panel">
+    <div class="select-equity__panel">
+      <h2>Results from study sites</h2>
       <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse recusandae deserunt saepe placeat ut architecto optio nostrum dolorem, laudantium ullam provident similique consectetur id eligendi praesentium labore quisquam atque vel?</p>
       <select v-model="selected">
         <option v-for="(option, index) in options" :key="index" :value="option">{{ option.label }}</option>
@@ -16,7 +17,7 @@
 
 <script>
 export default {
-  name: "equity-select",
+  name: "select-equity",
 
   props: {
     options: {
diff --git a/app/javascript/vue.js b/app/javascript/vue.js
index 5981d8b18..c4e4587e9 100644
--- a/app/javascript/vue.js
+++ b/app/javascript/vue.js
@@ -28,7 +28,7 @@ import ChartRectangles from './components/charts/chart-rectangles/ChartRectangle
 import ChartRowPa from './components/charts/chart-row-pa/ChartRowPa'
 import ChartRowTarget from './components/charts/chart-row-target/ChartRowTarget'
 import ChartSunburst from './components/charts/chart-sunburst/ChartSunburst'
-import EquitySelect from './components/select/EquitySelect'
+import SelectEquity from './components/select/SelectEquity'
 import Flickity from 'vue-flickity';
 import Download from './components/download/Download'
 import MapInteractive from './components/map/MapInteractive'
@@ -79,7 +79,6 @@ document.addEventListener('DOMContentLoaded', () => {
         ChartRowTarget,
         ChartSunburst,
         Download,
-        EquitySelect,
         Flickity,
         MapInteractive,
         NavBurger,
@@ -87,6 +86,7 @@ document.addEventListener('DOMContentLoaded', () => {
         SearchAreasHome,
         SearchSite,
         SearchSiteTopbar,
+        SelectEquity,
         SelectWithContent,
         StickyBar,
         StickyNav,
diff --git a/app/views/layouts/cms/_equity.html.erb b/app/views/layouts/cms/_equity.html.erb
index 427c77496..5ad7d917a 100644
--- a/app/views/layouts/cms/_equity.html.erb
+++ b/app/views/layouts/cms/_equity.html.erb
@@ -1,7 +1,7 @@
 <%= render partial: "./layouts/partials/hero-basic", locals: { title: @cms_page.label, classes: "#{@cms_page.slug} bg-image-overlay--white" } %>
 
 <section class="container">
-  <equity-select
+  <select-equity
     :options="<%= options.to_json %>"
   />
 </section>

From 3628b766fda67a57c2fae9becfc085c6d1907510 Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Wed, 15 Jul 2020 14:58:22 +0100
Subject: [PATCH 06/22] moved tabs provision into equity helper

---
 app/helpers/equity_helper.rb                  |  4 ++++
 app/views/layouts/cms/_equity.html.erb        | 11 +----------
 app/views/partials/tabs/_tabs-equity.html.erb |  4 +++-
 3 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/app/helpers/equity_helper.rb b/app/helpers/equity_helper.rb
index 558eb7f87..cea633029 100644
--- a/app/helpers/equity_helper.rb
+++ b/app/helpers/equity_helper.rb
@@ -1,4 +1,8 @@
 module EquityHelper
+    def tabs
+        @tabs = get_cms_tabs(2).to_json
+    end
+    
     # To be updated once the PA pages are actually fleshed out
     def options
         @options = []
diff --git a/app/views/layouts/cms/_equity.html.erb b/app/views/layouts/cms/_equity.html.erb
index ea359dc65..a320b1f5d 100644
--- a/app/views/layouts/cms/_equity.html.erb
+++ b/app/views/layouts/cms/_equity.html.erb
@@ -1,8 +1,3 @@
-<%
-  ##TODO Stanley - can you put this in the helper
-
-  @tabs = get_cms_tabs(2).to_json
-%>
 
 <%= render partial: "./layouts/partials/hero-basic", locals: { 
     classes: "#{@cms_page.slug} bg-image-overlay--white" ,
@@ -12,13 +7,9 @@
   } 
 %>
 
-<select-equity
-  :options="<%= options.to_json %>"
-/>
-
 <section class="container">
   <%= render partial: "partials/tabs/tabs-equity", locals: { 
-    tabs: @tabs
+    tabs: tabs
   } %>
 </section>
 
diff --git a/app/views/partials/tabs/_tabs-equity.html.erb b/app/views/partials/tabs/_tabs-equity.html.erb
index fc329ff34..3d6ee1969 100644
--- a/app/views/partials/tabs/_tabs-equity.html.erb
+++ b/app/views/partials/tabs/_tabs-equity.html.erb
@@ -5,7 +5,9 @@
   <template slot-scope="{ selectedId }">
     <tab-target :id="1" :selected-id="selectedId">
       <section class="section-padding--bottom">
-        <h1>STANLEY PUT COMPONENT HERE</h1>
+        <select-equity
+          :options="<%= options.to_json %>"
+        />
       </section>
   
       <section class="container--medium section-padding--bottom">

From bc3452569f7a090b8f50a6419b04f9c9376e4f7a Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Wed, 15 Jul 2020 17:08:49 +0100
Subject: [PATCH 07/22] styled right panel

---
 app/assets/stylesheets/base/_buttons.scss     |  4 ++
 .../stylesheets/components/_select.scss       |  2 +-
 .../components/select/_select-equity.scss     | 42 ++++++++++++++++++-
 .../components/select/SelectEquity.vue        | 26 ++++++++----
 4 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/app/assets/stylesheets/base/_buttons.scss b/app/assets/stylesheets/base/_buttons.scss
index b3d3cf820..b78c495af 100644
--- a/app/assets/stylesheets/base/_buttons.scss
+++ b/app/assets/stylesheets/base/_buttons.scss
@@ -208,4 +208,8 @@ $padding-medium: rem-calc(27);
   &--outline-black { @include button-outline($black); }
   &--outline-white { @include button-outline($white); }
   &--primary { @include button-block; }
+  &--view-pa { 
+    @include button-block;
+    @include flex-vs-start;
+  }
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/_select.scss b/app/assets/stylesheets/components/_select.scss
index 44c856431..5d61265fa 100644
--- a/app/assets/stylesheets/components/_select.scss
+++ b/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';
 }
diff --git a/app/assets/stylesheets/components/select/_select-equity.scss b/app/assets/stylesheets/components/select/_select-equity.scss
index 5440f3a26..220a962a6 100644
--- a/app/assets/stylesheets/components/select/_select-equity.scss
+++ b/app/assets/stylesheets/components/select/_select-equity.scss
@@ -1,15 +1,53 @@
-.select-equity {
+&--equity {
     @include flex;
+    height: rem-calc(507);
 
     &__content {
         border: 1px solid $grey-med-dark;
         width: 50%;
     }
 
+    &__description {
+        @include flex-grow;
+    }
+
+    &__header {
+        margin-top: 0;
+        margin-bottom: rem-calc(14);
+    }
+
     &__panel {
+        @include flex;
+        @include flex-column;
         background-color: $grey-med-light;
-        padding-left: rem-calc(57);
+        font-size: rem-calc(17);
+        padding-top: rem-calc(41);
         padding-right: rem-calc(40);
+        padding-bottom: rem-calc(29);
+        padding-left: rem-calc(57);
         width: 50%;
     }
+
+    &__select {
+        @include text-body;
+        -webkit-appearance: none;
+        line-height: 1.9;
+        padding-top: rem-calc(22);
+        padding-bottom: rem-calc(17);
+        padding-left: rem-calc(29);
+        margin-top: rem-calc(14);
+        margin-bottom: rem-calc(19);
+        width: 100%;
+        display: block;
+        position: relative;
+        
+            &:after {
+                @include icon-chevron-black-down;
+                content: '';
+                height: rem-calc(18);
+                width: rem-calc(10);
+                position: absolute;
+                right: rem-calc(24);
+            }
+    }
 }
\ No newline at end of file
diff --git a/app/javascript/components/select/SelectEquity.vue b/app/javascript/components/select/SelectEquity.vue
index 83f5b07c3..4d447bbf7 100644
--- a/app/javascript/components/select/SelectEquity.vue
+++ b/app/javascript/components/select/SelectEquity.vue
@@ -1,16 +1,26 @@
 <template>
-  <div class="select-equity">
-    <div class="select-equity__content">
+  <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>Results from study sites</h2>
-      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse recusandae deserunt saepe placeat ut architecto optio nostrum dolorem, laudantium ullam provident similique consectetur id eligendi praesentium labore quisquam atque vel?</p>
-      <select v-model="selected">
-        <option v-for="(option, index) in options" :key="index" :value="option">{{ option.label }}</option>
+    <div class="select--equity__panel">
+      <h2 class="select--equity__header">Results from study sites</h2>
+      <p class="select--equity__description">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse recusandae deserunt saepe placeat ut architecto optio nostrum dolorem, laudantium ullam provident similique consectetur id eligendi praesentium labore quisquam atque vel?</p>
+      <select class="select--equity__select" v-model="selected">
+        <option 
+          v-for="(option, index) in options" 
+          :key="index" 
+          :value="option"
+        >
+          {{ option.label }}
+        </option>
       </select>
-      <a :href="selected.url" title="View the protected area">View the protected area</a>
+      <a
+        :href="selected.url"
+        class="button--view-pa"
+        title="View the protected area"
+      >View Protected Area</a>
     </div>
   </div>
 </template>

From 43571b540ccd21a672f64551b5e95efde8ebb128 Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Wed, 15 Jul 2020 19:00:33 +0100
Subject: [PATCH 08/22] created custom dropdown component and styles

---
 .../components/select/_select-equity.scss     | 86 ++++++++++++++++---
 app/helpers/equity_helper.rb                  | 24 +++---
 .../components/select/SelectDropdown.vue      | 58 +++++++++++++
 .../components/select/SelectEquity.vue        | 27 +++---
 4 files changed, 159 insertions(+), 36 deletions(-)
 create mode 100644 app/javascript/components/select/SelectDropdown.vue

diff --git a/app/assets/stylesheets/components/select/_select-equity.scss b/app/assets/stylesheets/components/select/_select-equity.scss
index 220a962a6..a877af520 100644
--- a/app/assets/stylesheets/components/select/_select-equity.scss
+++ b/app/assets/stylesheets/components/select/_select-equity.scss
@@ -28,26 +28,86 @@
         width: 50%;
     }
 
-    &__select {
+    
+}
+
+// Custom select for this component
+&--dropdown {
+    &__custom-select {
+        position: relative;
+        user-select: none;
+        width: 100%;
+        margin-top: rem-calc(14);
+        margin-bottom: rem-calc(19);
+    }
+
+    &__custom-select-box {
+        position: relative;
+        display: flex;
+        flex-direction: column;
+    }
+
+    &__selected {
         @include text-body;
         -webkit-appearance: none;
+        background: $white;
+        border: 1px solid $grey-black;
+        cursor: pointer;
         line-height: 1.9;
         padding-top: rem-calc(22);
         padding-bottom: rem-calc(17);
         padding-left: rem-calc(29);
-        margin-top: rem-calc(14);
-        margin-bottom: rem-calc(19);
+        padding-right: rem-calc(24);
         width: 100%;
-        display: block;
+        height: 60px;
+
+
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
         position: relative;
-        
-            &:after {
-                @include icon-chevron-black-down;
-                content: '';
-                height: rem-calc(18);
-                width: rem-calc(10);
-                position: absolute;
-                right: rem-calc(24);
-            }
+    }
+
+    &__options {
+        display: none;
+
+        &--active {
+            height: rem-calc(500);
+            overflow: scroll;
+            position: absolute;
+            display: block;
+            top: 100%;
+            left: 0;
+            right: 0;
+            border: 1px solid $grey-black;
+            border-top: 0;
+            background: $white;
+            z-index: 2;
+        }
+    }
+
+    &__option {
+        @include text-body;
+        position: relative;
+        display: block;
+        padding-left: rem-calc(29);
+        padding-right: rem-calc(24);
+        line-height: 1.9;
+
+        &: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);
+        }
     }
 }
\ No newline at end of file
diff --git a/app/helpers/equity_helper.rb b/app/helpers/equity_helper.rb
index cea633029..cc9a597ad 100644
--- a/app/helpers/equity_helper.rb
+++ b/app/helpers/equity_helper.rb
@@ -5,21 +5,21 @@ def tabs
     
     # To be updated once the PA pages are actually fleshed out
     def options
-        @options = []
+        # @options = []
 
-        @cms_page.children.first.children.published.each do |child|
-            object = {}
+        @cms_page.children.first.children.published.map do |child|
+            {
+                title: child.label,
+                text: cms_fragment_content(:text, child),
+                # object[:url] = cms_fragment_content(:url, child)
+                url: child.full_path    
+            }          
 
-            object[:title] = child.label
-            object[:text] = cms_fragment_content(:text, child)
-            # object[:url] = cms_fragment_content(:url, child)
-            object[:url] = child.full_path
+            # if(cms_fragment_content(:image, child).try(:file) && cms_fragment_content(:image, child).file.url(:dropdownImage))
+            #     object[:image] = cms_fragment_content(:image, child).file.url(:dropdownImage)
+            # end
 
-            if(cms_fragment_content(:image, child).try(:file) && cms_fragment_content(:image, child).file.url(:dropdownImage))
-                object[:image] = cms_fragment_content(:image, child).file.url(:dropdownImage)
-            end
-
-            @options.push(object)
+            # @options.push(object)
             
         end
     end
diff --git a/app/javascript/components/select/SelectDropdown.vue b/app/javascript/components/select/SelectDropdown.vue
new file mode 100644
index 000000000..b919c9991
--- /dev/null
+++ b/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="(option, index) in options"
+          :key="index"
+          class="select--dropdown__option"
+          @click="selectOption(index)"
+        >{{ option.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: {
+    options: {
+      type: Array
+    }
+  },
+
+  data() {
+    return {
+      isActive: false,
+      selected: this.options[0]
+    };
+  },
+  methods: {
+    toggleVis() {
+      this.isActive ? this.close() : this.open();
+    },
+    close() {
+      this.isActive = false;
+    },
+    open() {
+      this.isActive = true;
+    },
+    selectOption(index) {
+        this.selected = this.options[index];
+        this.close();
+        this.$emit('pa-selected', this.selected);
+    }
+  }
+};
+</script>
+
diff --git a/app/javascript/components/select/SelectEquity.vue b/app/javascript/components/select/SelectEquity.vue
index 4d447bbf7..c55b5f902 100644
--- a/app/javascript/components/select/SelectEquity.vue
+++ b/app/javascript/components/select/SelectEquity.vue
@@ -1,21 +1,19 @@
 <template>
   <div class="select--equity">
     <div class="select--equity__content">
+      <!-- Todo: Images aren't present in the CMS pages as of yet, might need to rescue with a placeholder -->
       <!-- <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">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse recusandae deserunt saepe placeat ut architecto optio nostrum dolorem, laudantium ullam provident similique consectetur id eligendi praesentium labore quisquam atque vel?</p>
-      <select class="select--equity__select" v-model="selected">
-        <option 
-          v-for="(option, index) in options" 
-          :key="index" 
-          :value="option"
-        >
-          {{ option.label }}
-        </option>
-      </select>
+      <p
+        class="select--equity__description"
+      >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse recusandae deserunt saepe placeat ut architecto optio nostrum dolorem, laudantium ullam provident similique consectetur id eligendi praesentium labore quisquam atque vel?</p>
+      <select-dropdown 
+        :options="options"
+        @pa-selected="changeSelection"
+      />
       <a
         :href="selected.url"
         class="button--view-pa"
@@ -26,9 +24,11 @@
 </template>
 
 <script>
+import SelectDropdown from './SelectDropdown';
+
 export default {
   name: "select-equity",
-
+  components: { SelectDropdown },
   props: {
     options: {
       type: Array
@@ -39,6 +39,11 @@ export default {
     return {
       selected: this.options[0]
     };
+  },
+  methods: {
+    changeSelection(selected) {
+      this.selected = selected;
+    }
   }
 };
 </script>
\ No newline at end of file

From 9c1ddebc60fa4c2085988bd9ea55641141734231 Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Thu, 16 Jul 2020 09:01:44 +0100
Subject: [PATCH 09/22] updated equity helper with method to retrieve images

---
 app/helpers/equity_helper.rb                  | 24 +++++++++----------
 .../components/select/SelectDropdown.vue      | 14 +++++------
 .../components/select/SelectEquity.vue        |  6 ++---
 app/views/partials/tabs/_tabs-equity.html.erb |  2 +-
 4 files changed, 22 insertions(+), 24 deletions(-)

diff --git a/app/helpers/equity_helper.rb b/app/helpers/equity_helper.rb
index cc9a597ad..7bdafefa3 100644
--- a/app/helpers/equity_helper.rb
+++ b/app/helpers/equity_helper.rb
@@ -3,24 +3,22 @@ def tabs
         @tabs = get_cms_tabs(2).to_json
     end
     
-    # To be updated once the PA pages are actually fleshed out
-    def options
-        # @options = []
-
+    def protected_areas
         @cms_page.children.first.children.published.map do |child|
             {
                 title: child.label,
                 text: cms_fragment_content(:text, child),
-                # object[:url] = cms_fragment_content(:url, child)
-                url: child.full_path    
+                url: child.full_path,
+                image: include_image(child)
             }          
-
-            # if(cms_fragment_content(:image, child).try(:file) && cms_fragment_content(:image, child).file.url(:dropdownImage))
-            #     object[:image] = cms_fragment_content(:image, child).file.url(:dropdownImage)
-            # end
-
-            # @options.push(object)
-            
+        end
+    end
+    
+    def include_image(pa_page)
+        if(cms_fragment_content(:image, pa_page).try(:file) && cms_fragment_content(:image, pa_page).file.url(:dropdownImage))
+            return cms_fragment_content(:image, pa_page).file.url(:dropdownImage)
+        else
+            return nil
         end
     end
 end
\ No newline at end of file
diff --git a/app/javascript/components/select/SelectDropdown.vue b/app/javascript/components/select/SelectDropdown.vue
index b919c9991..cbbefa933 100644
--- a/app/javascript/components/select/SelectDropdown.vue
+++ b/app/javascript/components/select/SelectDropdown.vue
@@ -9,11 +9,11 @@
       </div>
       <div :class="[ isActive ? 'select--dropdown__options--active' : 'select--dropdown__options' ]">
         <span
-          v-for="(option, index) in options"
+          v-for="(area, index) in protectedAreas"
           :key="index"
           class="select--dropdown__option"
-          @click="selectOption(index)"
-        >{{ option.title }}</span>
+          @click="selectArea(index)"
+        >{{ area.title }}</span>
       </div>
     </div>
   </div>
@@ -26,7 +26,7 @@ export default {
   name: "SelectDropdown",
   mixins: [ mixinPopupCloseListeners({closeCallback: 'close', toggleVariable: 'isActive'}) ],
   props: {
-    options: {
+    protectedAreas: {
       type: Array
     }
   },
@@ -34,7 +34,7 @@ export default {
   data() {
     return {
       isActive: false,
-      selected: this.options[0]
+      selected: this.protectedAreas[0]
     };
   },
   methods: {
@@ -47,8 +47,8 @@ export default {
     open() {
       this.isActive = true;
     },
-    selectOption(index) {
-        this.selected = this.options[index];
+    selectArea(index) {
+        this.selected = this.protectedAreas[index];
         this.close();
         this.$emit('pa-selected', this.selected);
     }
diff --git a/app/javascript/components/select/SelectEquity.vue b/app/javascript/components/select/SelectEquity.vue
index c55b5f902..0eeb11d03 100644
--- a/app/javascript/components/select/SelectEquity.vue
+++ b/app/javascript/components/select/SelectEquity.vue
@@ -11,7 +11,7 @@
         class="select--equity__description"
       >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse recusandae deserunt saepe placeat ut architecto optio nostrum dolorem, laudantium ullam provident similique consectetur id eligendi praesentium labore quisquam atque vel?</p>
       <select-dropdown 
-        :options="options"
+        :protected-areas="protectedAreas"
         @pa-selected="changeSelection"
       />
       <a
@@ -30,14 +30,14 @@ export default {
   name: "select-equity",
   components: { SelectDropdown },
   props: {
-    options: {
+    protectedAreas: {
       type: Array
     }
   },
 
   data() {
     return {
-      selected: this.options[0]
+      selected: this.protectedAreas[0]
     };
   },
   methods: {
diff --git a/app/views/partials/tabs/_tabs-equity.html.erb b/app/views/partials/tabs/_tabs-equity.html.erb
index 3d6ee1969..68924ca27 100644
--- a/app/views/partials/tabs/_tabs-equity.html.erb
+++ b/app/views/partials/tabs/_tabs-equity.html.erb
@@ -6,7 +6,7 @@
     <tab-target :id="1" :selected-id="selectedId">
       <section class="section-padding--bottom">
         <select-equity
-          :options="<%= options.to_json %>"
+          :protected-areas="<%= protected_areas.to_json %>"
         />
       </section>
   

From cfd7998acbba473cdd1f341d288fd861030d7d80 Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Thu, 16 Jul 2020 12:32:20 +0100
Subject: [PATCH 10/22] refactored helper methods to include in correct text
 and improve performance

---
 .../components/select/_select-equity.scss     |  1 -
 app/helpers/equity_helper.rb                  | 27 +++++++++++++------
 .../components/select/SelectEquity.vue        |  2 +-
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/components/select/_select-equity.scss b/app/assets/stylesheets/components/select/_select-equity.scss
index a877af520..59b891dab 100644
--- a/app/assets/stylesheets/components/select/_select-equity.scss
+++ b/app/assets/stylesheets/components/select/_select-equity.scss
@@ -1,6 +1,5 @@
 &--equity {
     @include flex;
-    height: rem-calc(507);
 
     &__content {
         border: 1px solid $grey-med-dark;
diff --git a/app/helpers/equity_helper.rb b/app/helpers/equity_helper.rb
index 7bdafefa3..8e9ca1005 100644
--- a/app/helpers/equity_helper.rb
+++ b/app/helpers/equity_helper.rb
@@ -2,23 +2,34 @@ 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
-        @cms_page.children.first.children.published.map do |child|
+        pa_pages.published.map do |child|
             {
                 title: child.label,
-                text: cms_fragment_content(:text, child),
+                text: parsed_text(text),
                 url: child.full_path,
-                image: include_image(child)
+                image: include_image(cms_fragment_content(:text, child))
             }          
         end
     end
     
     def include_image(pa_page)
-        if(cms_fragment_content(:image, pa_page).try(:file) && cms_fragment_content(:image, pa_page).file.url(:dropdownImage))
-            return cms_fragment_content(:image, pa_page).file.url(:dropdownImage)
-        else
-            return nil
-        end
+        # At the moment, the image URLs returns a very long string which seems
+        # to be an encrypted hash, not sure how to decrypt it to get the URL
+        nil
+        # Nokogiri::HTML(text).css('img')[0].attributes['src'].value
+    end
+
+    def parsed_text(text)
+        Nokogiri::HTML(text).css("p").last.text rescue "No description available."
     end
 end
\ No newline at end of file
diff --git a/app/javascript/components/select/SelectEquity.vue b/app/javascript/components/select/SelectEquity.vue
index 0eeb11d03..556d4283d 100644
--- a/app/javascript/components/select/SelectEquity.vue
+++ b/app/javascript/components/select/SelectEquity.vue
@@ -9,7 +9,7 @@
       <h2 class="select--equity__header">Results from study sites</h2>
       <p
         class="select--equity__description"
-      >Lorem ipsum dolor, sit amet consectetur adipisicing elit. Esse recusandae deserunt saepe placeat ut architecto optio nostrum dolorem, laudantium ullam provident similique consectetur id eligendi praesentium labore quisquam atque vel?</p>
+      >{{ selected.text }}</p>
       <select-dropdown 
         :protected-areas="protectedAreas"
         @pa-selected="changeSelection"

From 055dcc2873d9c9abb1945e6f44844fea2b1913ab Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Thu, 16 Jul 2020 12:50:15 +0100
Subject: [PATCH 11/22] updated comments

---
 app/helpers/equity_helper.rb | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/helpers/equity_helper.rb b/app/helpers/equity_helper.rb
index 8e9ca1005..680518400 100644
--- a/app/helpers/equity_helper.rb
+++ b/app/helpers/equity_helper.rb
@@ -23,10 +23,9 @@ def protected_areas
     end
     
     def include_image(pa_page)
-        # At the moment, the image URLs returns a very long string which seems
-        # to be an encrypted hash, not sure how to decrypt it to get the URL
+        # At the moment, there are no images, just a reference to a formerly 
+        # existing image in the content of the fragments
         nil
-        # Nokogiri::HTML(text).css('img')[0].attributes['src'].value
     end
 
     def parsed_text(text)

From 207c11d3569ef13a65fdcaacd1664bc13e95df5e Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Thu, 16 Jul 2020 12:58:23 +0100
Subject: [PATCH 12/22] removed unused classes and css rules

---
 .../stylesheets/components/select/_select-equity.scss  | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/app/assets/stylesheets/components/select/_select-equity.scss b/app/assets/stylesheets/components/select/_select-equity.scss
index 59b891dab..590f8e91f 100644
--- a/app/assets/stylesheets/components/select/_select-equity.scss
+++ b/app/assets/stylesheets/components/select/_select-equity.scss
@@ -40,15 +40,8 @@
         margin-bottom: rem-calc(19);
     }
 
-    &__custom-select-box {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-    }
-
     &__selected {
         @include text-body;
-        -webkit-appearance: none;
         background: $white;
         border: 1px solid $grey-black;
         cursor: pointer;
@@ -57,9 +50,6 @@
         padding-bottom: rem-calc(17);
         padding-left: rem-calc(29);
         padding-right: rem-calc(24);
-        width: 100%;
-        height: 60px;
-
 
         display: flex;
         align-items: center;

From c7a3d549af41f1258678d865685461fb3102c270 Mon Sep 17 00:00:00 2001
From: Stacy Talbot <stacy.talbot@unep-wcmc.org>
Date: Thu, 16 Jul 2020 14:55:05 +0100
Subject: [PATCH 13/22] Update Equity tabs to use wysiwyg

---
 app/views/partials/tabs/_tabs-equity.html.erb | 8 ++++----
 db                                            | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/views/partials/tabs/_tabs-equity.html.erb b/app/views/partials/tabs/_tabs-equity.html.erb
index 68924ca27..164fb9c93 100644
--- a/app/views/partials/tabs/_tabs-equity.html.erb
+++ b/app/views/partials/tabs/_tabs-equity.html.erb
@@ -4,15 +4,15 @@
 >
   <template slot-scope="{ selectedId }">
     <tab-target :id="1" :selected-id="selectedId">
+      <section class="container--medium section-padding--bottom">
+        <%= cms_fragment_render("tab-content-1") %>
+      </section>
+  
       <section class="section-padding--bottom">
         <select-equity
           :protected-areas="<%= protected_areas.to_json %>"
         />
       </section>
-  
-      <section class="container--medium section-padding--bottom">
-        <%= cms_fragment_render("tab-content-1") %>
-      </section>
     </tab-target>
 
     <tab-target :id="2" :selected-id="selectedId">
diff --git a/db b/db
index 93c53057c..1d1133155 160000
--- a/db
+++ b/db
@@ -1 +1 @@
-Subproject commit 93c53057c07db4e2bc086bd4858fb30af5b1c1f4
+Subproject commit 1d1133155f6000eb45b0cd75c6915dd7c74a9ef4

From 7d287fb5b6eddf72b5815b95f2e95daa837c30cb Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Fri, 17 Jul 2020 14:35:34 +0100
Subject: [PATCH 14/22] added method in to populate select component with
 base64 encoded image

---
 app/helpers/equity_helper.rb                      | 8 +++-----
 app/javascript/components/select/SelectEquity.vue | 1 -
 app/javascript/vue.js                             | 2 +-
 3 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/app/helpers/equity_helper.rb b/app/helpers/equity_helper.rb
index 680518400..7249fcdb6 100644
--- a/app/helpers/equity_helper.rb
+++ b/app/helpers/equity_helper.rb
@@ -17,15 +17,13 @@ def protected_areas
                 title: child.label,
                 text: parsed_text(text),
                 url: child.full_path,
-                image: include_image(cms_fragment_content(:text, child))
+                image: include_image(text)
             }          
         end
     end
     
-    def include_image(pa_page)
-        # At the moment, there are no images, just a reference to a formerly 
-        # existing image in the content of the fragments
-        nil
+    def include_image(text)
+        Nokogiri::HTML(text).css("img").attr('src').value
     end
 
     def parsed_text(text)
diff --git a/app/javascript/components/select/SelectEquity.vue b/app/javascript/components/select/SelectEquity.vue
index 556d4283d..97d566eb2 100644
--- a/app/javascript/components/select/SelectEquity.vue
+++ b/app/javascript/components/select/SelectEquity.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="select--equity">
     <div class="select--equity__content">
-      <!-- Todo: Images aren't present in the CMS pages as of yet, might need to rescue with a placeholder -->
       <!-- <img :src="selected.image" :alt="'Visual results for ' + selected.title" /> -->
     </div>
 
diff --git a/app/javascript/vue.js b/app/javascript/vue.js
index ebe56f36d..75d3fdf71 100644
--- a/app/javascript/vue.js
+++ b/app/javascript/vue.js
@@ -30,7 +30,6 @@ import ChartRowPa from './components/charts/chart-row-pa/ChartRowPa'
 import ChartRowStacked from './components/charts/chart-row-stacked/ChartRowStacked'
 import ChartRowTarget from './components/charts/chart-row-target/ChartRowTarget'
 import ChartSunburst from './components/charts/chart-sunburst/ChartSunburst'
-import SelectEquity from './components/select/SelectEquity'
 import Flickity from 'vue-flickity';
 import Download from './components/download/Download'
 import MapInteractive from './components/map/MapInteractive'
@@ -39,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'

From 990de22dfea19be6f8edc436c73a9d95bbf98f79 Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Fri, 17 Jul 2020 14:46:43 +0100
Subject: [PATCH 15/22] images appear and are properly contained with the frame

---
 .../stylesheets/components/select/_select-equity.scss       | 5 +++++
 app/helpers/equity_helper.rb                                | 6 +++---
 app/javascript/components/select/SelectEquity.vue           | 2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/components/select/_select-equity.scss b/app/assets/stylesheets/components/select/_select-equity.scss
index 590f8e91f..373585042 100644
--- a/app/assets/stylesheets/components/select/_select-equity.scss
+++ b/app/assets/stylesheets/components/select/_select-equity.scss
@@ -2,8 +2,13 @@
     @include flex;
 
     &__content {
+        @include flex;
         border: 1px solid $grey-med-dark;
         width: 50%;
+
+        img {
+            object-fit: none;
+        }
     }
 
     &__description {
diff --git a/app/helpers/equity_helper.rb b/app/helpers/equity_helper.rb
index 7249fcdb6..085f2cf28 100644
--- a/app/helpers/equity_helper.rb
+++ b/app/helpers/equity_helper.rb
@@ -17,13 +17,13 @@ def protected_areas
                 title: child.label,
                 text: parsed_text(text),
                 url: child.full_path,
-                image: include_image(text)
+                image: include_image(cms_fragment_content(:text, child))
             }          
         end
     end
     
-    def include_image(text)
-        Nokogiri::HTML(text).css("img").attr('src').value
+    def include_image(pa_page)
+        Nokogiri::HTML(pa_page).css("img").attr('src').value
     end
 
     def parsed_text(text)
diff --git a/app/javascript/components/select/SelectEquity.vue b/app/javascript/components/select/SelectEquity.vue
index 97d566eb2..91cc9b6a0 100644
--- a/app/javascript/components/select/SelectEquity.vue
+++ b/app/javascript/components/select/SelectEquity.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="select--equity">
     <div class="select--equity__content">
-      <!-- <img :src="selected.image" :alt="'Visual results for ' + selected.title" /> -->
+      <img :src="selected.image" :alt="'Visual results for ' + selected.title" />
     </div>
 
     <div class="select--equity__panel">

From 67e6a1651d0c25a5fd679a2b4f3495f07eb41c28 Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Fri, 17 Jul 2020 16:05:26 +0100
Subject: [PATCH 16/22] fixed styling changes

---
 app/assets/stylesheets/_settings.scss         |  2 -
 app/assets/stylesheets/base/_buttons.scss     |  4 --
 .../components/select/_select-equity.scss     | 58 +++++++++----------
 .../components/select/SelectEquity.vue        |  2 +-
 4 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss
index f95f3e7d8..7d0aa36d8 100644
--- a/app/assets/stylesheets/_settings.scss
+++ b/app/assets/stylesheets/_settings.scss
@@ -10,10 +10,8 @@ $white: #ffffff;
 $black: #000000;
 
 $grey-xlight: #f4f4f4;
-$grey-med-light: #ededed;
 $grey-light: #c8c8c8;
 $grey: #919191;
-$grey-med-dark: #707070;
 $grey-dark: #666666;
 $grey-xdark: #404040;
 $grey-black: #242424;
diff --git a/app/assets/stylesheets/base/_buttons.scss b/app/assets/stylesheets/base/_buttons.scss
index b78c495af..b3d3cf820 100644
--- a/app/assets/stylesheets/base/_buttons.scss
+++ b/app/assets/stylesheets/base/_buttons.scss
@@ -208,8 +208,4 @@ $padding-medium: rem-calc(27);
   &--outline-black { @include button-outline($black); }
   &--outline-white { @include button-outline($white); }
   &--primary { @include button-block; }
-  &--view-pa { 
-    @include button-block;
-    @include flex-vs-start;
-  }
 }
\ No newline at end of file
diff --git a/app/assets/stylesheets/components/select/_select-equity.scss b/app/assets/stylesheets/components/select/_select-equity.scss
index 373585042..9ef60d668 100644
--- a/app/assets/stylesheets/components/select/_select-equity.scss
+++ b/app/assets/stylesheets/components/select/_select-equity.scss
@@ -1,13 +1,19 @@
 &--equity {
-    @include flex;
+    @include responsive(display, block, block, flex);
+
+    &__button {
+        @include flex-vs-start;
+    }
 
     &__content {
+        @include responsive(width, 100%, 100%, 50%);
+        @include responsive(height, rem-calc(271), rem-calc(507), auto);
         @include flex;
-        border: 1px solid $grey-med-dark;
-        width: 50%;
+        border: 1px solid $grey-dark;
 
         img {
-            object-fit: none;
+            margin: 0 auto;
+            object-fit: contain;
         }
     }
 
@@ -16,20 +22,16 @@
     }
 
     &__header {
+        @include responsive(margin-bottom, 0, rem-calc(8), rem-calc(14));
         margin-top: 0;
-        margin-bottom: rem-calc(14);
     }
 
     &__panel {
+        @include responsive(width, 100%, 100%, 50%);
+        @include responsive(padding, rem-calc(32 13 29 18), rem-calc(50 44 62 49), rem-calc(41 40 29 57));
         @include flex;
         @include flex-column;
-        background-color: $grey-med-light;
-        font-size: rem-calc(17);
-        padding-top: rem-calc(41);
-        padding-right: rem-calc(40);
-        padding-bottom: rem-calc(29);
-        padding-left: rem-calc(57);
-        width: 50%;
+        background-color: $grey-xlight;
     }
 
     
@@ -38,27 +40,22 @@
 // Custom select for this component
 &--dropdown {
     &__custom-select {
+        @include responsive(margin, rem-calc(0 0 27), rem-calc(30 0 36), rem-calc(14 0 19));
         position: relative;
         user-select: none;
         width: 100%;
-        margin-top: rem-calc(14);
-        margin-bottom: rem-calc(19);
     }
 
     &__selected {
+        @include flex;
+        @include flex-v-center;
+        @include flex-h-between;
+        @include responsive(padding, rem-calc(14 10 15 18), rem-calc(22 17 29 24), rem-calc(22 17 29 24));
         @include text-body;
         background: $white;
         border: 1px solid $grey-black;
         cursor: pointer;
         line-height: 1.9;
-        padding-top: rem-calc(22);
-        padding-bottom: rem-calc(17);
-        padding-left: rem-calc(29);
-        padding-right: rem-calc(24);
-
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
         position: relative;
     }
 
@@ -66,27 +63,26 @@
         display: none;
 
         &--active {
-            height: rem-calc(500);
+            @include responsive(height, rem-calc(200), rem-calc(300), rem-calc(500));
+            background: $white;
+            border: 1px solid $grey-black;
+            border-top: 0;
             overflow: scroll;
-            position: absolute;
             display: block;
+            position: absolute;
             top: 100%;
             left: 0;
             right: 0;
-            border: 1px solid $grey-black;
-            border-top: 0;
-            background: $white;
             z-index: 2;
         }
     }
 
     &__option {
+        @include responsive(padding, rem-calc(0 10 0 18), rem-calc(0 24 0 29), rem-calc(0 24 0 29));
         @include text-body;
-        position: relative;
-        display: block;
-        padding-left: rem-calc(29);
-        padding-right: rem-calc(24);
         line-height: 1.9;
+        display: block;
+        position: relative;
 
         &:hover {
             background-color: $grey-light;
diff --git a/app/javascript/components/select/SelectEquity.vue b/app/javascript/components/select/SelectEquity.vue
index 91cc9b6a0..fb65698f2 100644
--- a/app/javascript/components/select/SelectEquity.vue
+++ b/app/javascript/components/select/SelectEquity.vue
@@ -15,7 +15,7 @@
       />
       <a
         :href="selected.url"
-        class="button--view-pa"
+        class="button--primary select--equity__button"
         title="View the protected area"
       >View Protected Area</a>
     </div>

From 1e3095c877d697d3906941cfcbada9005613c009 Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Fri, 17 Jul 2020 16:07:36 +0100
Subject: [PATCH 17/22] reformatted with indentation of 2 spaces

---
 .../stylesheets/components/select/_select-equity.scss |  2 +-
 app/javascript/components/select/SelectEquity.vue     | 11 +++--------
 2 files changed, 4 insertions(+), 9 deletions(-)

diff --git a/app/assets/stylesheets/components/select/_select-equity.scss b/app/assets/stylesheets/components/select/_select-equity.scss
index 9ef60d668..d5a94b60a 100644
--- a/app/assets/stylesheets/components/select/_select-equity.scss
+++ b/app/assets/stylesheets/components/select/_select-equity.scss
@@ -34,7 +34,7 @@
         background-color: $grey-xlight;
     }
 
-    
+
 }
 
 // Custom select for this component
diff --git a/app/javascript/components/select/SelectEquity.vue b/app/javascript/components/select/SelectEquity.vue
index fb65698f2..59d31d95b 100644
--- a/app/javascript/components/select/SelectEquity.vue
+++ b/app/javascript/components/select/SelectEquity.vue
@@ -6,13 +6,8 @@
 
     <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"
-      />
+      <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"
@@ -23,7 +18,7 @@
 </template>
 
 <script>
-import SelectDropdown from './SelectDropdown';
+import SelectDropdown from "./SelectDropdown";
 
 export default {
   name: "select-equity",

From 2ce164aac44041ea13a12e26e5385fdb46558644 Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Mon, 20 Jul 2020 17:02:12 +0100
Subject: [PATCH 18/22] fixed order of padding

---
 app/assets/stylesheets/components/select/_select-equity.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/select/_select-equity.scss b/app/assets/stylesheets/components/select/_select-equity.scss
index d5a94b60a..5762db2ed 100644
--- a/app/assets/stylesheets/components/select/_select-equity.scss
+++ b/app/assets/stylesheets/components/select/_select-equity.scss
@@ -3,6 +3,7 @@
 
     &__button {
         @include flex-vs-start;
+        border-radius: rem-calc(4);
     }
 
     &__content {
@@ -50,7 +51,7 @@
         @include flex;
         @include flex-v-center;
         @include flex-h-between;
-        @include responsive(padding, rem-calc(14 10 15 18), rem-calc(22 17 29 24), rem-calc(22 17 29 24));
+        @include responsive(padding, rem-calc(14 18 10 15), rem-calc(22 24 17 29), rem-calc(22 24 17 29));
         @include text-body;
         background: $white;
         border: 1px solid $grey-black;
@@ -78,7 +79,7 @@
     }
 
     &__option {
-        @include responsive(padding, rem-calc(0 10 0 18), rem-calc(0 24 0 29), rem-calc(0 24 0 29));
+        @include responsive(padding, rem-calc(0 18 0 15), rem-calc(0 24 0 29), rem-calc(0 24 0 29));
         @include text-body;
         line-height: 1.9;
         display: block;

From 3fde8f9bee3d3d7b3b50d86421fe9ce842a99e41 Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Tue, 21 Jul 2020 15:06:54 +0100
Subject: [PATCH 19/22] changed mixins and padding according to comments

---
 .../components/select/_select-equity.scss     | 76 ++++++++++++++++---
 1 file changed, 66 insertions(+), 10 deletions(-)

diff --git a/app/assets/stylesheets/components/select/_select-equity.scss b/app/assets/stylesheets/components/select/_select-equity.scss
index 5762db2ed..32138a572 100644
--- a/app/assets/stylesheets/components/select/_select-equity.scss
+++ b/app/assets/stylesheets/components/select/_select-equity.scss
@@ -1,5 +1,10 @@
 &--equity {
-    @include responsive(display, block, block, flex);
+    @include breakpoint-down($large) {
+        display: block;
+    }
+    @include breakpoint($large) {
+        display: flex;
+    }
 
     &__button {
         @include flex-vs-start;
@@ -7,8 +12,17 @@
     }
 
     &__content {
-        @include responsive(width, 100%, 100%, 50%);
-        @include responsive(height, rem-calc(271), rem-calc(507), auto);
+        @include breakpoint-down($small) {
+            height: rem-calc(271);
+        }
+        @include breakpoint($small) {
+            height: rem-calc(507);
+        }
+        @include breakpoint($large) {
+            width: 50%;
+            height: auto;
+        }
+
         @include flex;
         border: 1px solid $grey-dark;
 
@@ -23,15 +37,34 @@
     }
 
     &__header {
-        @include responsive(margin-bottom, 0, rem-calc(8), rem-calc(14));
+        @include breakpoint-down($small) {
+            margin-bottom: 0;
+        }
+        @include breakpoint($small) {
+            margin-bottom: rem-calc(8);
+        }
+        @include breakpoint($large) {
+            margin-bottom: rem-calc(14);
+        }
+
         margin-top: 0;
     }
 
     &__panel {
-        @include responsive(width, 100%, 100%, 50%);
-        @include responsive(padding, rem-calc(32 13 29 18), rem-calc(50 44 62 49), rem-calc(41 40 29 57));
+        @include breakpoint-down($small) {
+            padding: rem-calc(32 13 29 18);
+        }
+        @include breakpoint($small) {
+            padding: rem-calc(50 44 62 49);
+        }
+        @include breakpoint($large) {
+            padding: rem-calc(41 40 29 57);
+            width: 50%;
+        }
+
         @include flex;
         @include flex-column;
+
         background-color: $grey-xlight;
     }
 
@@ -41,18 +74,34 @@
 // Custom select for this component
 &--dropdown {
     &__custom-select {
-        @include responsive(margin, rem-calc(0 0 27), rem-calc(30 0 36), rem-calc(14 0 19));
+        @include breakpoint-down($small) {
+            margin: rem-calc(0 0 27);
+        }
+        @include breakpoint($small) {
+            margin: rem-calc(30 0 36);
+        }
+        @include breakpoint($large) {
+            margin: rem-calc(14 0 19);
+        }
+
         position: relative;
         user-select: none;
         width: 100%;
     }
 
     &__selected {
+        @include breakpoint-down($small) {
+            padding: rem-calc(11 20);
+        }
+        @include breakpoint($small) {
+            padding: rem-calc(20 24);
+        }
+
         @include flex;
         @include flex-v-center;
         @include flex-h-between;
-        @include responsive(padding, rem-calc(14 18 10 15), rem-calc(22 24 17 29), rem-calc(22 24 17 29));
         @include text-body;
+
         background: $white;
         border: 1px solid $grey-black;
         cursor: pointer;
@@ -64,7 +113,7 @@
         display: none;
 
         &--active {
-            @include responsive(height, rem-calc(200), rem-calc(300), rem-calc(500));
+            height: 40vh;
             background: $white;
             border: 1px solid $grey-black;
             border-top: 0;
@@ -79,8 +128,15 @@
     }
 
     &__option {
-        @include responsive(padding, rem-calc(0 18 0 15), rem-calc(0 24 0 29), rem-calc(0 24 0 29));
+        @include breakpoint-down($small) {
+            padding: rem-calc(2 20);
+        }
+        @include breakpoint($small) {
+            padding: rem-calc(5 24);
+        }
+   
         @include text-body;
+        
         line-height: 1.9;
         display: block;
         position: relative;

From 4858f554d5569b11486699f797a345fedd8d1b49 Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Tue, 21 Jul 2020 15:20:30 +0100
Subject: [PATCH 20/22] altered padding of image

---
 .../stylesheets/components/select/_select-equity.scss     | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/select/_select-equity.scss b/app/assets/stylesheets/components/select/_select-equity.scss
index 32138a572..bc1908f58 100644
--- a/app/assets/stylesheets/components/select/_select-equity.scss
+++ b/app/assets/stylesheets/components/select/_select-equity.scss
@@ -14,21 +14,25 @@
     &__content {
         @include breakpoint-down($small) {
             height: rem-calc(271);
+            padding: rem-calc(20 0);
         }
         @include breakpoint($small) {
             height: rem-calc(507);
+            padding: rem-calc(30 0);
         }
         @include breakpoint($large) {
             width: 50%;
             height: auto;
+            padding: rem-calc(60 0);
         }
 
         @include flex;
         border: 1px solid $grey-dark;
+       
 
         img {
             margin: 0 auto;
-            object-fit: contain;
+            object-fit: cover;          
         }
     }
 
@@ -136,7 +140,7 @@
         }
    
         @include text-body;
-        
+
         line-height: 1.9;
         display: block;
         position: relative;

From ffbfd573a92fc7cd775497ed06bf8f76b91da5a7 Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Tue, 21 Jul 2020 15:34:35 +0100
Subject: [PATCH 21/22] added a max width for mobiles

---
 .../components/select/_select-equity.scss          | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/app/assets/stylesheets/components/select/_select-equity.scss b/app/assets/stylesheets/components/select/_select-equity.scss
index bc1908f58..00b2069ca 100644
--- a/app/assets/stylesheets/components/select/_select-equity.scss
+++ b/app/assets/stylesheets/components/select/_select-equity.scss
@@ -1,4 +1,7 @@
 &--equity {
+    @include breakpoint-down($small) {
+        max-width: rem-calc(685);
+    }
     @include breakpoint-down($large) {
         display: block;
     }
@@ -15,10 +18,18 @@
         @include breakpoint-down($small) {
             height: rem-calc(271);
             padding: rem-calc(20 0);
+
+            img {
+                object-fit: contain;
+            }
         }
         @include breakpoint($small) {
             height: rem-calc(507);
             padding: rem-calc(30 0);
+
+            img {
+                object-fit: cover; 
+            }
         }
         @include breakpoint($large) {
             width: 50%;
@@ -31,8 +42,7 @@
        
 
         img {
-            margin: 0 auto;
-            object-fit: cover;          
+            margin: 0 auto;                 
         }
     }
 

From 844647360f215b036c95b4e1f18af58076a8607d Mon Sep 17 00:00:00 2001
From: Stanley Liu <sliu1993@hotmail.co.uk>
Date: Wed, 22 Jul 2020 19:02:38 +0100
Subject: [PATCH 22/22] changed breakpoints up

---
 .../components/select/_select-equity.scss     | 49 +++++++------------
 1 file changed, 18 insertions(+), 31 deletions(-)

diff --git a/app/assets/stylesheets/components/select/_select-equity.scss b/app/assets/stylesheets/components/select/_select-equity.scss
index 00b2069ca..1763d67aa 100644
--- a/app/assets/stylesheets/components/select/_select-equity.scss
+++ b/app/assets/stylesheets/components/select/_select-equity.scss
@@ -1,13 +1,12 @@
 &--equity {
-    @include breakpoint-down($small) {
-        max-width: rem-calc(685);
-    }
-    @include breakpoint-down($large) {
-        display: block;
-    }
-    @include breakpoint($large) {
+    @include breakpoint($medium) {
         display: flex;
+        max-width: none;
     }
+    
+    max-width: rem-calc(685);
+    margin: 0 auto;
+    display: block;
 
     &__button {
         @include flex-vs-start;
@@ -16,9 +15,6 @@
 
     &__content {
         @include breakpoint-down($small) {
-            height: rem-calc(271);
-            padding: rem-calc(20 0);
-
             img {
                 object-fit: contain;
             }
@@ -31,7 +27,7 @@
                 object-fit: cover; 
             }
         }
-        @include breakpoint($large) {
+        @include breakpoint($medium) {
             width: 50%;
             height: auto;
             padding: rem-calc(60 0);
@@ -40,6 +36,8 @@
         @include flex;
         border: 1px solid $grey-dark;
        
+        height: rem-calc(271);
+        padding: rem-calc(20 0);
 
         img {
             margin: 0 auto;                 
@@ -51,30 +49,26 @@
     }
 
     &__header {
-        @include breakpoint-down($small) {
-            margin-bottom: 0;
-        }
         @include breakpoint($small) {
             margin-bottom: rem-calc(8);
         }
-        @include breakpoint($large) {
+        @include breakpoint($medium) {
             margin-bottom: rem-calc(14);
         }
 
         margin-top: 0;
+        margin-bottom: 0;
     }
 
     &__panel {
-        @include breakpoint-down($small) {
-            padding: rem-calc(32 13 29 18);
-        }
         @include breakpoint($small) {
             padding: rem-calc(50 44 62 49);
         }
-        @include breakpoint($large) {
+        @include breakpoint($medium) {
             padding: rem-calc(41 40 29 57);
             width: 50%;
         }
+        padding: rem-calc(32 13 29 18);
 
         @include flex;
         @include flex-column;
@@ -88,25 +82,19 @@
 // Custom select for this component
 &--dropdown {
     &__custom-select {
-        @include breakpoint-down($small) {
-            margin: rem-calc(0 0 27);
-        }
         @include breakpoint($small) {
             margin: rem-calc(30 0 36);
         }
-        @include breakpoint($large) {
+        @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-down($small) {
-            padding: rem-calc(11 20);
-        }
         @include breakpoint($small) {
             padding: rem-calc(20 24);
         }
@@ -120,6 +108,7 @@
         border: 1px solid $grey-black;
         cursor: pointer;
         line-height: 1.9;
+        padding: rem-calc(11 20);
         position: relative;
     }
 
@@ -142,17 +131,15 @@
     }
 
     &__option {
-        @include breakpoint-down($small) {
-            padding: rem-calc(2 20);
-        }
         @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 {