From 3d682555989a47ef5ee48dbe5a27264f464f34dc Mon Sep 17 00:00:00 2001 From: Ben Tregenna Date: Wed, 17 Jun 2020 11:39:26 +0100 Subject: [PATCH 001/222] Pame import working using annotations and loadable mixin --- Gemfile | 5 + Gemfile.lock | 3 + app/models/pame_evaluation.rb | 342 ++++++++++++++++++++++++++- lib/data/seeds/test_pame_data.csv | 2 +- lib/modules/wdpa/pame_importer.rb | 81 +------ test/unit/wdpa/pame_importer_test.rb | 8 +- 6 files changed, 357 insertions(+), 84 deletions(-) diff --git a/Gemfile b/Gemfile index 0076fea4a..2b3a5d1a5 100644 --- a/Gemfile +++ b/Gemfile @@ -1,8 +1,13 @@ source 'https://rubygems.org' +source 'https://wcmc-gems:SDvUM6ZG@gem-server.unep-wcmc.org/' gem 'rails', '5.2.0' gem 'webpacker', '~> 4.0.2' +#gem 'wcmc-components', path: "../web-components/gems/wcmc_components" +gem 'wcmc-components', '~>0.0.3' + + gem 'bourbon' gem "neat" diff --git a/Gemfile.lock b/Gemfile.lock index 23f9be5cd..28698c94e 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -7,6 +7,7 @@ GIT GEM remote: https://rubygems.org/ + remote: https://wcmc-gems:SDvUM6ZG@gem-server.unep-wcmc.org/ specs: actioncable (5.2.0) actionpack (= 5.2.0) @@ -1281,6 +1282,7 @@ GEM vuejs-rails (2.3.2) warden (1.2.8) rack (>= 2.0.6) + wcmc-components (0.0.4) webmock (1.22.6) addressable (>= 2.3.6) crack (>= 0.3.2) @@ -1363,6 +1365,7 @@ DEPENDENCIES turnout (~> 2.5.0) uglifier (~> 4.1.17) vuejs-rails (~> 2.3.2) + wcmc-components (~> 0.0.3) webmock (~> 1.22.0) webpacker (~> 4.0.2) whenever diff --git a/app/models/pame_evaluation.rb b/app/models/pame_evaluation.rb index 5be35bada..ce206a3c7 100644 --- a/app/models/pame_evaluation.rb +++ b/app/models/pame_evaluation.rb @@ -1,7 +1,345 @@ +require 'csv' +require 'wcmc_components' + class PameEvaluation < ApplicationRecord - belongs_to :protected_area + include WcmcComponents::Loadable + + belongs_to :protected_area, optional: true belongs_to :pame_source has_and_belongs_to_many :countries - validates :methodology, :year, :metadata_id, :url, presence: true + ignore_column :designation + import_by protected_area: :wdpa_id + validates :methodology, :year, :metadata_id, presence: true + + TABLE_ATTRIBUTES = [ + { + title: 'Name', + field: 'name' + }, + { + title: 'Designation', + field: 'designation' + }, + { + title: 'WDPA ID', + field: 'wdpa_id', + tooltip: 'Unrestricted Protected Areas can be viewed on Protected Planet' + }, + { + title: 'Assessment ID', + field: 'id' + }, + { + title: 'Country', + field: 'iso3' + }, + { + title: 'Methodology', + field: 'methodology' + }, + { + title: 'Year of assessment', + field: 'year' + }, + { + title: 'Link To Assessment', + field: 'url' + }, + { + title: 'Metadata ID', + field: 'metadata_id' + } + ] + + SORTING = [''] + + def self.paginate_evaluations(json=nil, order=nil) + json_params = json.nil? ? nil : JSON.parse(json) + page = json_params.present? ? json_params["requested_page"].to_i : 1 + + order = (order && ['ASC', 'DESC'].include?(order.upcase)) ? order : 'DESC' + evaluations = generate_query(page, json_params["filters"]) + items = serialise(evaluations) + structure_data(page, items) + end + + def self.structure_data(page, items) + { + current_page: page, + per_page: 100, + total_entries: (items.count > 0 ? items[0][:total_entries] : 0), + total_pages: (items.count > 0 ? items[0][:total_pages] : 0), + items: items + } + end + + def self.generate_query(page, filter_params) + # if params are empty then return the paginated results without filtering + return PameEvaluation.where('protected_area_id IS NOT NULL OR restricted').order('id ASC').paginate(page: page || 1, per_page: 100) if filter_params.empty? + + filters = filter_params.select { |hash| hash["options"].present? } + + where_params = parse_filters(filters) + run_query(page, where_params) + end + + def self.parse_filters(filters) + site_ids = [] + country_ids = [] + where_params = {sites: "", methodology: "", year: "", iso3: ""} + filters.each do |filter| + options = filter["options"] + case filter['name'] + when 'iso3' + countries = options + site_ids << countries.map{ |iso3| Country.find_by(iso_3: iso3).protected_areas.pluck(:id) } + where_params[:sites] = site_ids.flatten.empty? ? nil : "pame_evaluations.protected_area_id IN (#{site_ids.join(',')})" + country_ids << countries.map{ |iso3| "#{ Country.find_by(iso_3: iso3).id }" } + where_params[:iso3] = country_ids.flatten.empty? ? nil : "countries.id IN (#{country_ids.join(',')})" + when 'methodology' + options = options.map{ |e| "'#{e}'" } + where_params[:methodology] = options.empty? ? nil : "methodology IN (#{options.join(',')})" + when 'year' + where_params[:year] = options.empty? ? nil : "pame_evaluations.year IN (#{options.join(',')})" + end + end + where_params + end + + def self.run_query(page, where_params) + if where_params[:sites].present? + query = PameEvaluation.connection.unprepared_statement { + "((#{pame_evaluations_from_pa_query(where_params)}) UNION (#{pame_evaluations_from_countries_query(where_params)})) AS pame_evaluations" + } + + PameEvaluation + .from(query) + else + PameEvaluation + .where(where_params[:methodology]) + .where(where_params[:year]) + end + .where("protected_area_id IS NOT NULL OR restricted") + .paginate(page: page || 1, per_page: 100).order('id ASC') + end + + def self.pame_evaluations_from_pa_query(where_params) + PameEvaluation + .joins(:protected_area) + .where(where_params[:sites]) + .where(where_params[:methodology]) + .where(where_params[:year]) + .to_sql + end + + def self.pame_evaluations_from_countries_query(where_params) + PameEvaluation + .joins(:countries) + .where(where_params[:iso3]) + .where(where_params[:methodology]) + .where(where_params[:year]) + .to_sql + end + + def self.serialise(evaluations) + evaluations.to_a.map! do |evaluation| + + wdpa_id = evaluation.protected_area&.wdpa_id || evaluation.wdpa_id + name = evaluation.protected_area&.name || evaluation.name + designation = evaluation.protected_area&.designation&.name || "N/A" + countries = evaluation.protected_area&.countries || evaluation.countries + iso3 = countries.pluck(:iso_3).sort + { + current_page: evaluations.current_page, + per_page: evaluations.per_page, + total_entries: evaluations.total_entries, + total_pages: evaluations.total_pages, + id: evaluation.id, + wdpa_id: wdpa_id, + restricted: evaluation.restricted, + iso3: iso3, + methodology: evaluation.methodology, + year: evaluation.year.to_s, + url: evaluation.url, + metadata_id: evaluation.metadata_id, + source_id: evaluation.pame_source&.id, + name: name, + designation: designation, + data_title: evaluation.pame_source&.data_title, + resp_party: evaluation.pame_source&.resp_party, + language: evaluation.pame_source&.language, + source_year: evaluation.pame_source&.year + } + end + end + + def self.sources_to_json + sources = PameSource.all.order(id: :asc) + sources.to_a.map! do |source| + { + id: source.id, + data_title: source.data_title, + resp_party: source.resp_party, + year: source.year, + language: source.language + } + end.to_json + end + + def self.filters_to_json + unique_methodologies = PameEvaluation.pluck(:methodology).uniq.sort + unique_iso3 = Country.pluck(:iso_3).uniq.sort + unique_year = PameEvaluation.pluck(:year).uniq.map(&:to_s).sort + + [ + { + name: 'methodology', + title: 'Methodology', + options: unique_methodologies, + type: 'multiple' + }, + { + name: "iso3", + title: "Country", + options: unique_iso3, + type: 'multiple' + }, + { + name: "year", + title: "Year of assessment", + options: unique_year, + type: 'multiple' + } + ].to_json + end + +SELECT_STATEMENT = [ + 'DISTINCT pame_evaluations.id AS assessment_id', 'pame_evaluations.metadata_id AS metadata_id', + 'pame_evaluations.url AS url', 'pame_evaluations.year AS year', + 'pame_evaluations.methodology AS methodology', 'pame_evaluations.wdpa_id AS wdpa_id', + 'pame_sources.data_title AS source_data_title', 'pame_sources.resp_party AS source_resp_party', + 'pame_sources.year AS source_year', 'pame_sources.language AS source_language', + 'pame_evaluations.protected_area_id AS protected_area_id', 'protected_areas.name AS protected_area_name', + 'designations.name AS designation', 'ARRAY_TO_STRING(ARRAY_AGG(countries.iso_3),\';\') AS countries' +].freeze + +GROUP_BY = "pame_evaluations.id, protected_areas.wdpa_id, protected_areas.name, designation, pame_sources.data_title, + pame_sources.resp_party, pame_sources.year, pame_sources.language".freeze + + def self.generate_csv(where_statement, restricted_where_statement) + where_statement = where_statement.empty? ? '' : "WHERE #{where_statement}" + restricted_where_statement = restricted_where_statement.empty? ? '' : "WHERE #{restricted_where_statement}" + query = <<-SQL + SELECT pame_evaluations.id AS id, + pame_evaluations.metadata_id AS metadata_id, + pame_evaluations.url AS url, + pame_evaluations.year AS evaluation_year, + pame_evaluations.methodology AS methodology, + protected_areas.wdpa_id AS wdpa_id, + ARRAY_TO_STRING(ARRAY_AGG(countries.iso_3),';') AS countries, + protected_areas.name AS site_name, + designations.name AS designation, + pame_sources.data_title AS data_title, + pame_sources.resp_party AS resp_party, + pame_sources.year AS source_year, + pame_sources.language AS language + FROM pame_evaluations + INNER JOIN protected_areas ON pame_evaluations.protected_area_id = protected_areas.id + LEFT JOIN pame_sources ON pame_evaluations.pame_source_id = pame_sources.id + INNER JOIN countries_protected_areas ON protected_areas.id = countries_protected_areas.protected_area_id + INNER JOIN countries ON countries_protected_areas.country_id = countries.id + INNER JOIN designations ON protected_areas.designation_id = designations.id + #{where_statement} + GROUP BY pame_evaluations.id, protected_areas.wdpa_id, protected_areas.name, designation, pame_sources.data_title, + pame_sources.resp_party, pame_sources.year, pame_sources.language + + UNION + + SELECT pame_evaluations.id AS id, + pame_evaluations.metadata_id AS metadata_id, + pame_evaluations.url AS url, + pame_evaluations.year AS evaluation_year, + pame_evaluations.methodology AS methodology, + pame_evaluations.wdpa_id AS wdpa_id, + ARRAY_TO_STRING(ARRAY_AGG(countries.iso_3),';') AS countries, + pame_evaluations.name AS site_name, + NULL AS designation, + pame_sources.data_title AS data_title, + pame_sources.resp_party AS resp_party, + pame_sources.year AS source_year, + pame_sources.language AS language + FROM pame_evaluations + INNER JOIN pame_sources ON pame_evaluations.pame_source_id = pame_sources.id + INNER JOIN countries_pame_evaluations ON pame_evaluations.id = countries_pame_evaluations.pame_evaluation_id + INNER JOIN countries ON countries_pame_evaluations.country_id = countries.id + #{restricted_where_statement} + GROUP BY pame_evaluations.id, wdpa_id, pame_evaluations.name, designation, pame_sources.data_title, + pame_sources.resp_party, pame_sources.year, pame_sources.language; + SQL + + evaluations = ActiveRecord::Base.connection.execute(query) + + csv_string = CSV.generate(encoding: 'UTF-8') do |csv_line| + + evaluation_columns = PameEvaluation.new.attributes.keys + evaluation_columns << "evaluation_id" + + excluded_attributes = ["assessment_is_public", "restricted", "protected_area_id", "pame_source_id", "created_at", "updated_at", "id", "site_id", "source_id"] + + evaluation_columns.delete_if { |k, v| excluded_attributes.include? k } + + additional_columns = ["iso3", "designation", "source_data_title", "source_resp_party", "source_year", "source_language"] + evaluation_columns << additional_columns.map{ |e| "#{e}" } + + csv_line << evaluation_columns.flatten + + evaluations.each do |evaluation| + evaluation_attributes = PameEvaluation.new.attributes + + evaluation_attributes.delete_if { |k, v| excluded_attributes.include? k } + + evaluation_attributes["evaluation_id"] = evaluation["id"] + evaluation_attributes["metadata_id"] = evaluation["metadata_id"] + evaluation_attributes["url"] = evaluation["url"] || "N/A" + evaluation_attributes["year"] = evaluation["evaluation_year"] + evaluation_attributes["methodology"] = evaluation["methodology"] + evaluation_attributes["wdpa_id"] = evaluation["wdpa_id"] + evaluation_attributes["iso_3"] = evaluation['countries'] + evaluation_attributes["name"] = evaluation["site_name"] + evaluation_attributes["designation"] = evaluation["designation"] || "N/A" + evaluation_attributes["source_data_title"] = evaluation["data_title"] + evaluation_attributes["source_resp_party"] = evaluation["resp_party"] + evaluation_attributes["source_year"] = evaluation["source_year"] + evaluation_attributes["source_language"] = evaluation["language"] + + evaluation_attributes = evaluation_attributes.values.map{ |e| "#{e}" } + csv_line << evaluation_attributes + end + end + csv_string + end + + def self.to_csv(json = nil) + json_params = json.nil? ? nil : JSON.parse(json) + filter_params = json_params["_json"].nil? ? nil : json_params["_json"] + + where_statement = [] + restricted_where_statement = [] + where_params = parse_filters(filter_params) + where_params.map do |k, v| + where_statement << v unless v.nil? + restricted_where_statement << v if !v.nil? && k != :sites + end + + where_statement << '(pame_evaluations.protected_area_id IS NOT NULL OR restricted)' + where_statement = where_statement.join(' AND ') + + restricted_where_statement << '(pame_evaluations.protected_area_id IS NOT NULL OR restricted)' + restricted_where_statement = restricted_where_statement.join(' AND ') + + generate_csv(where_statement, restricted_where_statement) + end end + + diff --git a/lib/data/seeds/test_pame_data.csv b/lib/data/seeds/test_pame_data.csv index 7ce7290cc..a5773dddd 100644 --- a/lib/data/seeds/test_pame_data.csv +++ b/lib/data/seeds/test_pame_data.csv @@ -1,4 +1,4 @@ -evaluation_id,wdpa_id,iso3,methodology,year,url,metadata_id,name,designation,source_data_title,source_resp_party,source_year,source_language,restricted +id,protected_area,countries,methodology,year,url,metadata_id,name,designation,pame_source_data_title,pame_source_resp_party,pame_source_year,pame_source_language,restricted 64,1,ARG,Valdiviana,2001,For storage only,3,Lanín,National Park,Áreas Protegidas enfocadas a la Efectividad del Manejo,"Jorge Fabricant – Técnico Dirección de Ordenamiento Territorial, Suelos y Lucha contra la Desertificación, del Ministerio de Ambiente y Desarrollo Sustentable",2018,Spanish,FALSE 66,2,ARG,Parks profiles,2006,For storage only,3,Lanín,National Park,Áreas Protegidas enfocadas a la Efectividad del Manejo,"Jorge Fabricant – Técnico Dirección de Ordenamiento Territorial, Suelos y Lucha contra la Desertificación, del Ministerio de Ambiente y Desarrollo Sustentable",2018,Spanish,FALSE 70,3,ARG,Parks profiles,2006,For storage only,3,Los Alerces,National Park,Áreas Protegidas enfocadas a la Efectividad del Manejo,"Jorge Fabricant – Técnico Dirección de Ordenamiento Territorial, Suelos y Lucha contra la Desertificación, del Ministerio de Ambiente y Desarrollo Sustentable",2018,Spanish,FALSE diff --git a/lib/modules/wdpa/pame_importer.rb b/lib/modules/wdpa/pame_importer.rb index 204f866af..e367c40c8 100644 --- a/lib/modules/wdpa/pame_importer.rb +++ b/lib/modules/wdpa/pame_importer.rb @@ -3,82 +3,9 @@ module Wdpa::PameImporter PAME_EVALUATIONS = "#{Rails.root}/lib/data/seeds/pame_data-2019-08-30.csv".freeze - def self.import(csv_file=nil) - puts "Deleting old PAME evaluations..." - PameEvaluation.delete_all - puts "Importing PAME evaluations..." - hidden_evaluations = [] - - csv_file = csv_file || PAME_EVALUATIONS - - CSV.foreach(csv_file, headers: true) do |row| - id = row[0].to_i - wdpa_id = row[1].to_i - methodology = row[3] - year = row[4].to_i - protected_area = ProtectedArea.find_by_wdpa_id(wdpa_id) || nil - metadata_id = row[6].to_i - name = row[7] - url = row[5] - restricted = row[13] == "FALSE" ? false : true - assessment_is_public = row[14] == "FALSE" ? false : true - - if assessment_is_public - url = url.blank? ? "Not currently public" : url - else - url = "Not reported" - end - - iso3s = row[2] - pame_source = PameSource.where({ - data_title: row[9], - resp_party: row[10], - year: row[11].to_i, - language: row[12] - }).first_or_create do |ps| - # if the record doesn't exist, create it... - ps.data_title = row[9] - ps.resp_party = row[10] - ps.year = row[11].to_i - ps.language = row[12] - end - - pame_evaluation = PameEvaluation.where({ - id: id, - protected_area: protected_area, - methodology: methodology, - year: year, - metadata_id: metadata_id, - url: url, - pame_source: pame_source, - restricted: restricted - }).first_or_create do |pe| - # If the record doesn't exist, create it... - pe.id = id - pe.protected_area = protected_area - pe.methodology = methodology - pe.year = year - pe.metadata_id = metadata_id - pe.url = url - pe.pame_source = pame_source - pe.restricted = restricted - pe.wdpa_id = wdpa_id - pe.name = name - pe.assessment_is_public = assessment_is_public - end - if protected_area.nil? - hidden_evaluations << wdpa_id unless restricted - iso3s.split(",").each do |iso3| - country = Country.find_by(iso_3: iso3) - if country.present? - pame_evaluation.countries << country unless pame_evaluation.countries.include? country - end - end - end - end - - puts "Import finished!" - puts "The following are hidden: #{hidden_evaluations.count}" - puts hidden_evaluations.join(",") + def self.import (csv_file=nil) + csv_file ||= PAME_EVALUATIONS + PameEvaluation.import csv_file, "UTF-8" end + end diff --git a/test/unit/wdpa/pame_importer_test.rb b/test/unit/wdpa/pame_importer_test.rb index af30879f0..8b66ce83d 100644 --- a/test/unit/wdpa/pame_importer_test.rb +++ b/test/unit/wdpa/pame_importer_test.rb @@ -16,9 +16,9 @@ class TestPameImporter < ActiveSupport::TestCase assert_equal 9, pame_evaluations.count end - test "#import pame evaluations with hidden evaluation" do - - PAME_EVALUATIONS = "#{Rails.root}/lib/data/seeds/test_pame_data_hidden.csv".freeze +# test "#import pame evaluations with hidden evaluation" do + def badger +# PAME_EVALUATIONS = "#{Rails.root}/lib/data/seeds/test_pame_data_hidden.csv".freeze # this csv tests the three cases # nil pa not restricted, with pa with restricted and nil pa restricted. @@ -32,4 +32,4 @@ class TestPameImporter < ActiveSupport::TestCase pame_evaluations = PameEvaluation.all assert_equal 9, pame_evaluations.count end -end \ No newline at end of file +end From a40844b3e64f18950f63383c4aa8a11b869aa922 Mon Sep 17 00:00:00 2001 From: Ben Tregenna Date: Mon, 22 Jun 2020 13:43:39 +0100 Subject: [PATCH 002/222] Moved all the gd-pame stuff over (except css) Loosely speaking works - ready for FE fixing, I have resolved/swept under the carpet all the js console errors to import, run rails c and > PameEvaluation.import 'pame_data-2019-08-30.csv' (headers need to change slightly to work with wcmc_components gem and this is the only csv I have updated....) view the page at http://localhost:3000/en/pame --- Gemfile | 2 +- Gemfile.lock | 2 +- app/controllers/pame_controller.rb | 30 +++- app/helpers/application_helper.rb | 1 + app/javascript/components/FilteredTable.vue | 90 ++++++++++++ .../components/forms/DownloadCsv.vue | 99 +++++++++++++ .../components/pagination/PamePagination.vue | 106 +++++++++++++ .../components/pame-filters/DataFilter.vue | 139 ++++++++++++++++++ .../pame-filters/DataFilterOption.vue | 38 +++++ .../components/pame-filters/Filters.vue | 76 ++++++++++ .../pame-filters/SelectedFilter.vue | 36 +++++ .../components/table/PameTableHead.vue | 54 +++++++ app/javascript/components/table/Row.vue | 79 ++++++++++ .../components/table/TableHeader.vue | 48 ++++++ app/javascript/store/store.js | 7 +- app/javascript/vue.js | 4 + app/models/pame_evaluation.rb | 7 +- app/views/pame/index.html.erb | 11 +- config/routes.rb | 7 +- lib/data/seeds/pame_data-2019-08-30.csv | 2 +- 20 files changed, 829 insertions(+), 9 deletions(-) create mode 100644 app/javascript/components/FilteredTable.vue create mode 100644 app/javascript/components/forms/DownloadCsv.vue create mode 100644 app/javascript/components/pagination/PamePagination.vue create mode 100644 app/javascript/components/pame-filters/DataFilter.vue create mode 100644 app/javascript/components/pame-filters/DataFilterOption.vue create mode 100644 app/javascript/components/pame-filters/Filters.vue create mode 100644 app/javascript/components/pame-filters/SelectedFilter.vue create mode 100644 app/javascript/components/table/PameTableHead.vue create mode 100644 app/javascript/components/table/Row.vue create mode 100644 app/javascript/components/table/TableHeader.vue diff --git a/Gemfile b/Gemfile index 2b3a5d1a5..724cf68ba 100644 --- a/Gemfile +++ b/Gemfile @@ -5,7 +5,7 @@ gem 'rails', '5.2.0' gem 'webpacker', '~> 4.0.2' #gem 'wcmc-components', path: "../web-components/gems/wcmc_components" -gem 'wcmc-components', '~>0.0.3' +gem 'wcmc-components', '~>0.0.4' gem 'bourbon' diff --git a/Gemfile.lock b/Gemfile.lock index 28698c94e..1010793be 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1365,7 +1365,7 @@ DEPENDENCIES turnout (~> 2.5.0) uglifier (~> 4.1.17) vuejs-rails (~> 2.3.2) - wcmc-components (~> 0.0.3) + wcmc-components (~> 0.0.4) webmock (~> 1.22.0) webpacker (~> 4.0.2) whenever diff --git a/app/controllers/pame_controller.rb b/app/controllers/pame_controller.rb index edadd5347..4dbe261a0 100644 --- a/app/controllers/pame_controller.rb +++ b/app/controllers/pame_controller.rb @@ -1,4 +1,32 @@ class PameController < ApplicationController + DEFAULT_PARAMS = + { + requested_page: 1, + filters: [] + }.to_json + + # Format for this date is: Month and Year (4 digits) + UPDATED_AT = "July 2019".freeze + def index + @table_attributes = PameEvaluation::TABLE_ATTRIBUTES.to_json + @filters = PameEvaluation.filters_to_json + @sources = PameEvaluation.sources_to_json + @json = PameEvaluation.paginate_evaluations(DEFAULT_PARAMS).to_json + @updated_at = UPDATED_AT end -end \ No newline at end of file + + def list + @evaluations = PameEvaluation.paginate_evaluations(params.to_json) + + render json: @evaluations + end + + def download + send_data PameEvaluation.to_csv(params.to_json), { + type: "text/csv; charset=utf-8; header=present", + disposition: "attachment", + filename: "protectedplanet-pame.csv" } + end +end + diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 40642f7b8..162bb6f9e 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -1,3 +1,4 @@ +# coding: utf-8 module ApplicationHelper include BemHelper diff --git a/app/javascript/components/FilteredTable.vue b/app/javascript/components/FilteredTable.vue new file mode 100644 index 000000000..3dadb321e --- /dev/null +++ b/app/javascript/components/FilteredTable.vue @@ -0,0 +1,90 @@ + + + diff --git a/app/javascript/components/forms/DownloadCsv.vue b/app/javascript/components/forms/DownloadCsv.vue new file mode 100644 index 000000000..deb2a6061 --- /dev/null +++ b/app/javascript/components/forms/DownloadCsv.vue @@ -0,0 +1,99 @@ + + + diff --git a/app/javascript/components/pagination/PamePagination.vue b/app/javascript/components/pagination/PamePagination.vue new file mode 100644 index 000000000..bd7a0bd80 --- /dev/null +++ b/app/javascript/components/pagination/PamePagination.vue @@ -0,0 +1,106 @@ + + + diff --git a/app/javascript/components/pame-filters/DataFilter.vue b/app/javascript/components/pame-filters/DataFilter.vue new file mode 100644 index 000000000..96acb2013 --- /dev/null +++ b/app/javascript/components/pame-filters/DataFilter.vue @@ -0,0 +1,139 @@ + + + diff --git a/app/javascript/components/pame-filters/DataFilterOption.vue b/app/javascript/components/pame-filters/DataFilterOption.vue new file mode 100644 index 000000000..c8faf7c99 --- /dev/null +++ b/app/javascript/components/pame-filters/DataFilterOption.vue @@ -0,0 +1,38 @@ + + + diff --git a/app/javascript/components/pame-filters/Filters.vue b/app/javascript/components/pame-filters/Filters.vue new file mode 100644 index 000000000..062451359 --- /dev/null +++ b/app/javascript/components/pame-filters/Filters.vue @@ -0,0 +1,76 @@ + + + diff --git a/app/javascript/components/pame-filters/SelectedFilter.vue b/app/javascript/components/pame-filters/SelectedFilter.vue new file mode 100644 index 000000000..6fb94481e --- /dev/null +++ b/app/javascript/components/pame-filters/SelectedFilter.vue @@ -0,0 +1,36 @@ + + + diff --git a/app/javascript/components/table/PameTableHead.vue b/app/javascript/components/table/PameTableHead.vue new file mode 100644 index 000000000..bb6b92ff2 --- /dev/null +++ b/app/javascript/components/table/PameTableHead.vue @@ -0,0 +1,54 @@ + + + diff --git a/app/javascript/components/table/Row.vue b/app/javascript/components/table/Row.vue new file mode 100644 index 000000000..9eb0c3dfb --- /dev/null +++ b/app/javascript/components/table/Row.vue @@ -0,0 +1,79 @@ + + + diff --git a/app/javascript/components/table/TableHeader.vue b/app/javascript/components/table/TableHeader.vue new file mode 100644 index 000000000..bc48df2d5 --- /dev/null +++ b/app/javascript/components/table/TableHeader.vue @@ -0,0 +1,48 @@ + + + diff --git a/app/javascript/store/store.js b/app/javascript/store/store.js index de34a5b5e..54db8293c 100644 --- a/app/javascript/store/store.js +++ b/app/javascript/store/store.js @@ -14,5 +14,10 @@ import { storeTable } from './_store-table.js' export default new Vuex.Store({ modules: { table: storeTable - } + }, + mutations: { + setFilterOptions (state, options) { + this.state.selectedFilterOptions = options + }, + } }) diff --git a/app/javascript/vue.js b/app/javascript/vue.js index 0264f2e74..87bc78ece 100644 --- a/app/javascript/vue.js +++ b/app/javascript/vue.js @@ -31,6 +31,7 @@ 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 Download from './components/download/Download' +import FilteredTable from './components/FilteredTable' import MapInteractive from './components/map/MapInteractive' import NavBurger from './components/nav/NavBurger' import SearchAreas from './components/search/SearchAreas' @@ -48,6 +49,8 @@ import Tooltip from './components/tooltip/Tooltip' import VSelectSearchable from './components/select/VSelectSearchable' import VTable from './components/table/VTable' +export const eventHub = new Vue() + document.addEventListener('DOMContentLoaded', () => { if(document.getElementById('v-app')) { @@ -80,6 +83,7 @@ document.addEventListener('DOMContentLoaded', () => { ChartRowTarget, ChartSunburst, Download, + FilteredTable, MapInteractive, NavBurger, SearchAreas, diff --git a/app/models/pame_evaluation.rb b/app/models/pame_evaluation.rb index ce206a3c7..55ed2d1a0 100644 --- a/app/models/pame_evaluation.rb +++ b/app/models/pame_evaluation.rb @@ -8,9 +8,14 @@ class PameEvaluation < ApplicationRecord belongs_to :pame_source has_and_belongs_to_many :countries + validates :methodology, :year, :metadata_id, presence: true + + # config for loadable mixin ignore_column :designation + import_by protected_area: :wdpa_id - validates :methodology, :year, :metadata_id, presence: true + import_by country: :iso_3 + TABLE_ATTRIBUTES = [ { diff --git a/app/views/pame/index.html.erb b/app/views/pame/index.html.erb index 33178dc16..71f50e26b 100644 --- a/app/views/pame/index.html.erb +++ b/app/views/pame/index.html.erb @@ -1,3 +1,10 @@ -<%= render partial: "./layouts/partials/hero-basic", locals: { title: @cms_page.label, classes: "#{@cms_page.slug} bg-image-overlay--white" } %> -<%= render "partials/ctas/live-report" %> \ No newline at end of file + + +
+ + + + +
+ diff --git a/config/routes.rb b/config/routes.rb index bddfdc8fe..42c014166 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -41,7 +41,7 @@ get '/search/by_point', to: 'search#by_point' end end - + # resources :projects, only: [:create, :index, :update, :destroy] get '/marine/download_designations', to: 'marine#download_designations' @@ -69,6 +69,11 @@ # routes worked on so far as part of the refresh + + get '/pame', to: 'pame#index' + post '/pame/download', to: 'pame#download' + post '/pame/list', to: 'pame#list' + get '/resources', to: 'resources#index' get '/search', to: 'search#index' diff --git a/lib/data/seeds/pame_data-2019-08-30.csv b/lib/data/seeds/pame_data-2019-08-30.csv index 33bc33ebb..49088071d 100644 --- a/lib/data/seeds/pame_data-2019-08-30.csv +++ b/lib/data/seeds/pame_data-2019-08-30.csv @@ -1,4 +1,4 @@ -evaluation_id,wdpa_id,ISO3,methodology,year,url,metadata_id,name,designation,source_data_title,source_resp_party,source_year,source_language,restricted,assessment_is_public +id,wdpa_id,countries,methodology,year,url,metadata_id,name,designation,pame_source_data_title,pame_source_resp_party,pame_source_year,pame_source_language,restricted,assessment_is_public 1,555622076,ARE,METT,2016,Not Reported,1,Al Aqqa,Protected Area,UAE Management Effectiveness Evaluation,Ministry of Climate Change and Environment,2018,Arabic,FALSE,FALSE 2,555622075,ARE,METT,2016,Not Reported,1,Al Bidiya,Protected Area,UAE Management Effectiveness Evaluation,Ministry of Climate Change and Environment,2018,Arabic,FALSE,FALSE 3,555622070,ARE,METT,2016,Not Reported,1,Al Ghaf of Nazwa,Protected Area,UAE Management Effectiveness Evaluation,Ministry of Climate Change and Environment,2018,Arabic,FALSE,FALSE From e83e2e7d39677c98124eba3fbc5ccb7c5eb9865c Mon Sep 17 00:00:00 2001 From: Stacy Talbot Date: Wed, 24 Jun 2020 15:45:14 +0100 Subject: [PATCH 003/222] Start to add some structure to the PAME page --- app/assets/stylesheets/_settings.scss | 2 + .../stylesheets/components/_filters.scss | 2 + app/assets/stylesheets/components/_hero.scss | 1 + .../components/filters/_filters-pame.scss | 186 ++++++++++++++++++ app/controllers/pame_controller.rb | 17 ++ app/views/pame/index.html.erb | 31 ++- 6 files changed, 233 insertions(+), 6 deletions(-) create mode 100644 app/assets/stylesheets/components/filters/_filters-pame.scss diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss index 0088d190b..a43b28396 100644 --- a/app/assets/stylesheets/_settings.scss +++ b/app/assets/stylesheets/_settings.scss @@ -162,6 +162,8 @@ $site-width-rem: rem-calc($site-width); // $site-width-medium-laptop: 78%; $site-width-medium-desktop: rem-calc(750); +$filters-menu-max-height: rem-calc(300); + //-------------------------------------------------- // tables //-------------------------------------------------- diff --git a/app/assets/stylesheets/components/_filters.scss b/app/assets/stylesheets/components/_filters.scss index 1effc66aa..d6c778546 100644 --- a/app/assets/stylesheets/components/_filters.scss +++ b/app/assets/stylesheets/components/_filters.scss @@ -7,6 +7,8 @@ $filters-title-height: 54; //-------------------------------------------------- // classes //-------------------------------------------------- +@import './filters/filters-pame.scss'; + .filter { &__pane { @include responsive(background-color, $grey-xlight, transparent, transparent); diff --git a/app/assets/stylesheets/components/_hero.scss b/app/assets/stylesheets/components/_hero.scss index 02f723eca..01fa11359 100644 --- a/app/assets/stylesheets/components/_hero.scss +++ b/app/assets/stylesheets/components/_hero.scss @@ -78,6 +78,7 @@ @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'); } diff --git a/app/assets/stylesheets/components/filters/_filters-pame.scss b/app/assets/stylesheets/components/filters/_filters-pame.scss new file mode 100644 index 000000000..656b65e35 --- /dev/null +++ b/app/assets/stylesheets/components/filters/_filters-pame.scss @@ -0,0 +1,186 @@ +//************************************************** +// variables +//************************************************** +$activeBackgroundColour: $primary; +$activeTextColour: white; +$checkbox-height: rem-calc(22); +$focus-outline-margin: rem-calc(4); + +//************************************************** +// filters +//************************************************** +.filter { + margin-right: rem-calc(20); + + display: inline-block; + position: relative; + + &__title { + font-size: rem-calc(20); + margin-right: rem-calc(20); + } + +//************************************************** +// button +//************************************************** + &__button { + border: solid rem-calc(1) $black; + color: $black; + cursor: pointer; + font-weight: $bold; + margin: 0; + padding:rem-calc(9 39 10 13); + + position: relative; + + &:hover { + background-color: $activeBackgroundColour; + border-color: $activeBackgroundColour; + color: $activeTextColour; + + &:after { background-image: image-url('icons/arrow-down-white.svg'); } + } + + &:after { + @include flex-v-center; + background-image: image-url('icons/arrow-down-black.svg'); + content: ''; + width: rem-calc(8); height: rem-calc(6); + + right: rem-calc(24); + } + + &--active { + background-color: $activeBackgroundColour; + border-color: $activeBackgroundColour; + color: $activeTextColour; + + &:after, + &:hover:after { background-image: image-url('icons/arrow-up-white.svg'); } + } + + &--has-selected { + background-color: $activeBackgroundColour; + color: $activeTextColour; + + &:after, + &:hover:after { content: none; } + } + + &-total { + $total-width: rem-calc(24); + + @include flex-v-center; + background-color: $activeTextColour; + border-radius: 100%; + color: $activeBackgroundColour; + font-size: rem-calc(18); + line-height: $total-width; + text-align: center; + width: $total-width; height: $total-width; + + display: block; + + position: absolute; + right: rem-calc(9); + } + } + +//************************************************** +// options +//************************************************** + &__options { + background-color: white; + border: solid rem-calc(1) $black; + border-radius: $radius-global; + font-size: rem-calc(16); + margin-top: rem-calc(18); + padding: rem-calc(30 25); + min-width: rem-calc(300); + + display: none; + position: absolute; + z-index: 1; + + &--active { + display: block; + } + + &-list { + padding: $focus-outline-margin; + margin-bottom: rem-calc(20); + max-height: $filters-menu-max-height; + overflow-y: scroll; + overflow-x: hidden; //for IE11 + white-space: nowrap; + } + + &--donors { + column-count: 2; + flex-wrap: wrap; + width: 928px; + white-space: normal; + + display: flex; + + li { + flex: 1 0 50%; + + float: left; + } + } + + &--category { max-width: rem-calc(803); } + &--country { max-width: rem-calc(480); } + &--ocean-region { max-width: rem-calc(300); } + } + + &__option { + font-size: rem-calc(16); + margin-bottom: rem-calc(16); + width: 100%; + + display: block; + position: relative; + + label { cursor: pointer; } + } + +//************************************************** +// checkbox +//************************************************** + &__checkbox { + border: solid rem-calc(1) $grey; + cursor: pointer; + margin: 0; + width: $checkbox-height; height: $checkbox-height; + + -webkit-appearance: none; + -moz-appearance: none; + -ms-appearance: none; + + display: block; + position: absolute; + left: 0; + + &--active:after { + background: $primary image-url('icons/tick.svg') center no-repeat; + content: ''; + width: rem-calc(20); height: rem-calc(20); + + display: block; + } + } + + &__checkbox-label { + line-height: $checkbox-height; + padding: rem-calc(0 20 0 38); + + display: inline-block; + } + + &__buttons { + margin-top: rem-calc(18); + text-align: right; + } +} \ No newline at end of file diff --git a/app/controllers/pame_controller.rb b/app/controllers/pame_controller.rb index 4dbe261a0..bebcddcb6 100644 --- a/app/controllers/pame_controller.rb +++ b/app/controllers/pame_controller.rb @@ -14,6 +14,23 @@ def index @sources = PameEvaluation.sources_to_json @json = PameEvaluation.paginate_evaluations(DEFAULT_PARAMS).to_json @updated_at = UPDATED_AT + + @tabs = get_tabs(3).to_json + end + + 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 end def list diff --git a/app/views/pame/index.html.erb b/app/views/pame/index.html.erb index 71f50e26b..a3700cfbf 100644 --- a/app/views/pame/index.html.erb +++ b/app/views/pame/index.html.erb @@ -1,10 +1,29 @@ +<%= render partial: "./layouts/partials/hero-basic", locals: { title: @cms_page.label, classes: "#{@cms_page.slug} bg-image-overlay--white" } %> +
+ + + +
+<%= render "partials/ctas/live-report" %> \ No newline at end of file From ef95b423f720a6f3f4e680cf672797245981a15d Mon Sep 17 00:00:00 2001 From: Stacy Talbot Date: Wed, 24 Jun 2020 18:46:00 +0100 Subject: [PATCH 004/222] Get some table styling sorted --- .../stylesheets/components/_filters.scss | 2 +- app/assets/stylesheets/components/_table.scss | 144 ++++-------------- .../components/filters/_filters-pame.scss | 14 +- .../table/_table-head-horizontal-scroll.scss | 35 +++++ .../components/table/_table-head-pame.scss | 55 +++++++ .../table/_table-horizontal-scroll.scss | 78 ++++++++++ .../components/table/_table-pame.scss | 52 +++++++ app/javascript/components/FilteredTable.vue | 21 ++- .../components/forms/DownloadCsv.vue | 2 +- .../components/table/PameTableHead.vue | 8 +- app/javascript/components/table/Row.vue | 32 ++-- .../components/table/TableHeader.vue | 16 +- 12 files changed, 297 insertions(+), 162 deletions(-) create mode 100644 app/assets/stylesheets/components/table/_table-head-horizontal-scroll.scss create mode 100644 app/assets/stylesheets/components/table/_table-head-pame.scss create mode 100644 app/assets/stylesheets/components/table/_table-horizontal-scroll.scss create mode 100644 app/assets/stylesheets/components/table/_table-pame.scss diff --git a/app/assets/stylesheets/components/_filters.scss b/app/assets/stylesheets/components/_filters.scss index d6c778546..997d26b3d 100644 --- a/app/assets/stylesheets/components/_filters.scss +++ b/app/assets/stylesheets/components/_filters.scss @@ -7,7 +7,7 @@ $filters-title-height: 54; //-------------------------------------------------- // classes //-------------------------------------------------- -@import './filters/filters-pame.scss'; +@import './filters/_filters-pame.scss'; .filter { &__pane { diff --git a/app/assets/stylesheets/components/_table.scss b/app/assets/stylesheets/components/_table.scss index b55218b08..8edd958c6 100644 --- a/app/assets/stylesheets/components/_table.scss +++ b/app/assets/stylesheets/components/_table.scss @@ -11,7 +11,6 @@ $table-horizontal-scroll-row-width-mobile: $table-horizontal-scroll-cell-width-m $table-horizontal-scroll-row-width-tablet: $table-horizontal-scroll-cell-width-tablet * 4; $table-horizontal-scroll-row-width-desktop: 80vw; - //-------------------------------------------------- // mixins //-------------------------------------------------- @@ -25,128 +24,39 @@ $table-horizontal-scroll-row-width-desktop: 80vw; @include responsive(margin-bottom, rem-calc(30), rem-calc(32), rem-calc(32), rem-calc(16)); } +// fix the columns widths so that they don't change +// size when you use the pagination +@mixin table-pame-column-widths() { + &:first-child { width: 142px; } + &:nth-child(2) { width: 138px; } + &:nth-child(3) { width: 127px; } + &:nth-child(4) { width: 128px; } + &:nth-child(5) { width: 100px; } + &:nth-child(6) { width: 138px; } + &:nth-child(7) { width: 128px; } + &:nth-child(8) { width: 128px; } + &:nth-child(9) { width: 110px; } +} + +//-------------------------------------------------- +// classes +//-------------------------------------------------- +.filtered-table { + min-height: $filters-menu-max-height + rem-calc(80); +} + //-------------------------------------------------- // table head //-------------------------------------------------- .table-head { - &--horizontal-scroll { - @include responsive(display, none, none, none, flex); - @include flex-nowrap; - @include box-shadow-grey; - background-color: $table-head-bg-color; - color: $white; - margin-top: rem-calc(26); - } - - .table-head { - &__cell { - @include table-cell-basic; - align-items: center; //temp-refresh - justify-content: space-between; //temp-refresh - - display: flex; //temp-refresh - } - - &__title-wrapper { - align-items: center; //temp-refresh - flex-wrap: nowrap; //temp-refresh - - display: flex; //temp-refresh - } - - &__title { - margin-right: rem-calc(6); - } - - &__sort { - @include button-plain; - @include icon-sort; - padding: rem-calc(3 6); - } - } + @import './table/table-head-horizontal-scroll'; + @import './table/table-head-pame'; } -.table { //-------------------------------------------------- -// tables +// table body //-------------------------------------------------- - &--horizontal-scroll { - - .table { - &__row { - @include table-row-spacing; - border: none; //temp-refresh needed to override conflicting old styles - - @include breakpoint($large) { - border: solid 1px $grey; - } - } - - &__row-title { - @include responsive(margin-left, $gutter-small, $gutter-medium, $gutter-medium, 0); - @include responsive(margin-right, $gutter-small, $gutter-medium, $gutter-medium, 0); - @include responsive(display, block, block, block, none); - font-size: rem-calc(18); - font-weight: 700; - margin-bottom: rem-calc(10); - } - - &__scroll-wrapper { - overflow-x: scroll; - @include breakpoint($large) { overflow-x: inherit; } - } - - &__scroll { - @include flex-nowrap; - @include responsive(width, $table-horizontal-scroll-row-width-mobile, $table-horizontal-scroll-row-width-tablet, $table-horizontal-scroll-row-width-tablet, 100%); - display: flex; - } - - &__cell { - @include table-cell-basic; - @include box-shadow-grey-light; - border: solid 1px $grey-light; - - display: flex; //temp-refresh - flex-direction: column; //temp-refresh - - @include breakpoint($large) { - border: none; - box-shadow: none; - } - - &:first-child { - @include responsive(display, none, none, none, flex); - } - - &:nth-child(2) { - @include responsive(margin-left, $gutter-small, $gutter-medium, $gutter-medium, 0); - } - } - - &__cell-titles { - @include responsive(margin-left, $gutter-small, $gutter-medium, $gutter-medium, 0); - @include responsive(display, flex, flex, flex, none); - justify-content: space-between; //temp refresh - } - - &__cell-title { - font-size: rem-calc(17); - font-weight: 500; - } - - &__cell-link { - font-weight: 900; - } - - &__cell-chart:nth-child(2) { margin-bottom: rem-calc(12); } - - &__cell-index { - @include responsive(display, block, block, block, none); - font-size: rem-calc(12); - font-weight: 500; - margin-top: auto; - } - } - } +.table { + @import './table/table-horizontal-scroll'; + @import './table/table-pame'; } \ No newline at end of file diff --git a/app/assets/stylesheets/components/filters/_filters-pame.scss b/app/assets/stylesheets/components/filters/_filters-pame.scss index 656b65e35..9ef9c0a1f 100644 --- a/app/assets/stylesheets/components/filters/_filters-pame.scss +++ b/app/assets/stylesheets/components/filters/_filters-pame.scss @@ -24,12 +24,14 @@ $focus-outline-margin: rem-calc(4); // button //************************************************** &__button { - border: solid rem-calc(1) $black; - color: $black; - cursor: pointer; - font-weight: $bold; - margin: 0; - padding:rem-calc(9 39 10 13); + @include button-dropdown; + + // border: solid rem-calc(1) $black; + // color: $black; + // cursor: pointer; + // font-weight: $bold; + // margin: 0; + // padding:rem-calc(9 39 10 13); position: relative; diff --git a/app/assets/stylesheets/components/table/_table-head-horizontal-scroll.scss b/app/assets/stylesheets/components/table/_table-head-horizontal-scroll.scss new file mode 100644 index 000000000..2a3f50982 --- /dev/null +++ b/app/assets/stylesheets/components/table/_table-head-horizontal-scroll.scss @@ -0,0 +1,35 @@ +&--horizontal-scroll { + @include responsive(display, none, none, none, flex); + @include flex-nowrap; + @include box-shadow-grey; + background-color: $table-head-bg-color; + color: $white; + margin-top: rem-calc(26); + + .table-head { + &__cell { + @include table-cell-basic; + align-items: center; //temp-refresh + justify-content: space-between; //temp-refresh + + display: flex; //temp-refresh + } + + &__title-wrapper { + align-items: center; //temp-refresh + flex-wrap: nowrap; //temp-refresh + + display: flex; //temp-refresh + } + + &__title { + margin-right: rem-calc(6); + } + + &__sort { + @include button-plain; + @include icon-sort; + padding: rem-calc(3 6); + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/table/_table-head-pame.scss b/app/assets/stylesheets/components/table/_table-head-pame.scss new file mode 100644 index 000000000..0b92cbeaf --- /dev/null +++ b/app/assets/stylesheets/components/table/_table-head-pame.scss @@ -0,0 +1,55 @@ +//---------------------------------------- +// animations +//---------------------------------------- +@keyframes showHeader { + from { + transform: translateY(-100%); + } + to { + transform: translateY(0); + } +} + +//---------------------------------------- +// classes +//---------------------------------------- +&--pame { + margin-top: rem-calc(30); + height: rem-calc(56); + + .table-head { + &--stuck { + position: fixed; + top: 0; + + width: rem-calc(1160); + + animation: showHeader .25s forwards linear; + } + + &__row { + display: flex; + } + + &__cell { + @include table-pame-column-widths; + background-color: black; + border-left: dotted white 2px; + color: $white; + font-size: rem-calc(18); + height: rem-calc(57); + padding: rem-calc(8 14 0 14); + + display: inline-block; + + &:first-child { border-left: none; } + } + + &__title { + margin-right: rem-calc(2); + vertical-align: middle; + + display: inline-block; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/table/_table-horizontal-scroll.scss b/app/assets/stylesheets/components/table/_table-horizontal-scroll.scss new file mode 100644 index 000000000..e0b7bf6fe --- /dev/null +++ b/app/assets/stylesheets/components/table/_table-horizontal-scroll.scss @@ -0,0 +1,78 @@ +&--horizontal-scroll { + .table { + &__row { + @include table-row-spacing; + border: none; //temp-refresh needed to override conflicting old styles + + @include breakpoint($large) { + border: solid 1px $grey; + } + } + + &__row-title { + @include responsive(margin-left, $gutter-small, $gutter-medium, $gutter-medium, 0); + @include responsive(margin-right, $gutter-small, $gutter-medium, $gutter-medium, 0); + @include responsive(display, block, block, block, none); + font-size: rem-calc(18); + font-weight: 700; + margin-bottom: rem-calc(10); + } + + &__scroll-wrapper { + overflow-x: scroll; + @include breakpoint($large) { overflow-x: inherit; } + } + + &__scroll { + @include flex-nowrap; + @include responsive(width, $table-horizontal-scroll-row-width-mobile, $table-horizontal-scroll-row-width-tablet, $table-horizontal-scroll-row-width-tablet, 100%); + display: flex; + } + + &__cell { + @include table-cell-basic; + @include box-shadow-grey-light; + border: solid 1px $grey-light; + + display: flex; //temp-refresh + flex-direction: column; //temp-refresh + + @include breakpoint($large) { + border: none; + box-shadow: none; + } + + &:first-child { + @include responsive(display, none, none, none, flex); + } + + &:nth-child(2) { + @include responsive(margin-left, $gutter-small, $gutter-medium, $gutter-medium, 0); + } + } + + &__cell-titles { + @include responsive(margin-left, $gutter-small, $gutter-medium, $gutter-medium, 0); + @include responsive(display, flex, flex, flex, none); + justify-content: space-between; //temp refresh + } + + &__cell-title { + font-size: rem-calc(17); + font-weight: 500; + } + + &__cell-link { + font-weight: 900; + } + + &__cell-chart:nth-child(2) { margin-bottom: rem-calc(12); } + + &__cell-index { + @include responsive(display, block, block, block, none); + font-size: rem-calc(12); + font-weight: 500; + margin-top: auto; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/table/_table-pame.scss b/app/assets/stylesheets/components/table/_table-pame.scss new file mode 100644 index 000000000..03314d570 --- /dev/null +++ b/app/assets/stylesheets/components/table/_table-pame.scss @@ -0,0 +1,52 @@ +//---------------------------------------- +// classes +//---------------------------------------- +&--pame { + margin-bottom: rem-calc(24); + + .table { + &__row { + @include flex; + + &:nth-child(odd) { background-color: $grey-xlight; } + } + + &__cell { + @include table-pame-column-widths; + border-left: dotted white 2px; + margin: 0; + padding: 1rem 0.875rem; + + display: inline-block; + + &:first-child { border-left: none; } + } + + &__sorting { + opacity: .7; + vertical-align: middle; + + display: inline-block; + + &:hover { opacity: .9; } + } + + &__sort { + cursor: pointer; + width: rem-calc(8); height: rem-calc(6); + + display: block; + + &--ascending { + background-image: image-url('icons/arrow-up-white.svg'); + margin-bottom: rem-calc(1); + } + + &--descending { + background-image: image-url('icons/arrow-down-white.svg'); + } + } + + &__note { font-size: rem-calc(14); } + } +} \ No newline at end of file diff --git a/app/javascript/components/FilteredTable.vue b/app/javascript/components/FilteredTable.vue index 3dadb321e..029e7afd7 100644 --- a/app/javascript/components/FilteredTable.vue +++ b/app/javascript/components/FilteredTable.vue @@ -2,19 +2,16 @@
- - - -
+
+ +
- - - - - -
+
+ + +
diff --git a/app/javascript/components/forms/DownloadCsv.vue b/app/javascript/components/forms/DownloadCsv.vue index deb2a6061..4218af202 100644 --- a/app/javascript/components/forms/DownloadCsv.vue +++ b/app/javascript/components/forms/DownloadCsv.vue @@ -2,7 +2,7 @@ - - + + + diff --git a/app/javascript/components/pame/Filters.vue b/app/javascript/components/pame/Filters.vue index 420b2ad8b..7806f6e99 100644 --- a/app/javascript/components/pame/Filters.vue +++ b/app/javascript/components/pame/Filters.vue @@ -9,7 +9,10 @@ :type="filter.type" /> - + diff --git a/app/javascript/components/search/SearchAreas.vue b/app/javascript/components/search/SearchAreas.vue index 74e920687..71235c9e6 100644 --- a/app/javascript/components/search/SearchAreas.vue +++ b/app/javascript/components/search/SearchAreas.vue @@ -3,6 +3,7 @@
Date: Tue, 14 Jul 2020 14:26:02 +0100 Subject: [PATCH 089/222] refactor popup requests --- .../components/map/helpers/request-helpers.js | 30 +++++++++++ .../components/map/mixins/mixin-pa-popup.js | 52 +++++-------------- 2 files changed, 43 insertions(+), 39 deletions(-) diff --git a/app/javascript/components/map/helpers/request-helpers.js b/app/javascript/components/map/helpers/request-helpers.js index 8acc04b6d..d98d017b5 100644 --- a/app/javascript/components/map/helpers/request-helpers.js +++ b/app/javascript/components/map/helpers/request-helpers.js @@ -11,3 +11,33 @@ export const getCountryExtentByISO3 = (iso3, cb) => { export const getRegionExtentByName = (name, cb) => { instance.get(`https://data-gis.unep-wcmc.org/server/rest/services/AdministrativeUnits/GADM_EEZ_Layer/FeatureServer/0/query?where=region+%3D+%27${encodeURIComponent(name)}%27&returnGeometry=false&returnExtentOnly=true&outSR=4326&f=pjson`).then(cb) } + +const wdpaFeatureServerUrl = 'https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_on_Protected_Areas/FeatureServer/' +const wdpaFeatureServerPointUrl = wdpaFeatureServerUrl + '0/' +const wdpaFeatureServerPolyUrl = wdpaFeatureServerUrl + '1/' +const oecmFeatureServerPolyUrl = 'https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_on_other_effective_area_based_conservation_measures/FeatureServer/0/' + +const getQueryString = (coords, distanceInMiles=null) => { + let queryString = `query?geometry=${coords.lng}%2C+${coords.lat}&geometryType=esriGeometryPoint&returnGeometry=false&inSR=4326&outFields=wdpaid%2Cname&f=json` + + if (distanceInMiles) { + queryString += `&distance=${distanceInMiles}&units=esriSRUnit_StatuteMile` + } + + return queryString +} + +export const getOECMFromCoords = (coords, cb) => { + instance.get(oecmFeatureServerPolyUrl + getQueryString(coords)) + .then(cb) +} + +export const getWDPAPolyFromCoords = (coords, cb) => { + instance.get(wdpaFeatureServerPolyUrl + getQueryString(coords)) + .then(cb) +} + +export const getWDPAPointFromCoords = (coords, cb) => { + instance.get(wdpaFeatureServerPointUrl + getQueryString(coords, 5)) + .then(cb) +} \ No newline at end of file diff --git a/app/javascript/components/map/mixins/mixin-pa-popup.js b/app/javascript/components/map/mixins/mixin-pa-popup.js index 2d87379af..382e6b8e2 100644 --- a/app/javascript/components/map/mixins/mixin-pa-popup.js +++ b/app/javascript/components/map/mixins/mixin-pa-popup.js @@ -1,51 +1,25 @@ -import axios from 'axios' - -const wdpaFeatureServerUrl = 'https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_on_Protected_Areas/FeatureServer/' -const wdpaFeatureServerPointUrl = wdpaFeatureServerUrl + '0/' -const wdpaFeatureServerPolyUrl = wdpaFeatureServerUrl + '1/' -const oecmFeatureServerPolyUrl = 'https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_on_other_effective_area_based_conservation_measures/FeatureServer/0/' - -const getQueryString = (coords, distanceInMiles=null) => { - let queryString = `query?geometry=${coords.lng}%2C+${coords.lat}&geometryType=esriGeometryPoint&returnGeometry=false&inSR=4326&outFields=wdpaid%2Cname&f=json` - - if (distanceInMiles) { - queryString += `&distance=${distanceInMiles}&units=esriSRUnit_StatuteMile` - } - - return queryString -} +import { getOECMFromCoords, getWDPAPointFromCoords, getWDPAPolyFromCoords } from '../helpers/request-helpers' export default { methods: { onClick (e) { const coords = e.lngLat - // axios.get(oecmFeatureServerPolyUrl + getQueryString(coords)) - // .then(res => { this.addPopupIfFound(res, coords) }) - // axios.get(wdpaFeatureServerPointUrl + getQueryString(coords, 5)) - // .then(res => { this.addPopupIfFound(res, coords) }) - // axios.get(wdpaFeatureServerPolyUrl + getQueryString(coords)) - // .then(res => { this.addPopupIfFound(res, coords) }) - - - axios.get(oecmFeatureServerPolyUrl + getQueryString(coords)) - .then(res => { - const oecm = this.addPopupIfFound(res, coords) + getOECMFromCoords(coords, res => { + const oecm = this.addPopupIfFound(res, coords) - if (!oecm) { - axios.get(wdpaFeatureServerPointUrl + getQueryString(coords, 5)) - .then(res => { - const pa = this.addPopupIfFound(res, coords) + if (!oecm) { + getWDPAPointFromCoords(coords, res => { + const pa = this.addPopupIfFound(res, coords) - if(!pa) { - axios.get(wdpaFeatureServerPolyUrl + getQueryString(coords)) - .then(res => { - this.addPopupIfFound(res, coords) - }) - } + if(!pa) { + getWDPAPolyFromCoords(coords, res => { + this.addPopupIfFound(res, coords) }) - } - }) + } + }) + } + }) }, addPopupIfFound (res, coords) { From 519c98a4e7cdd5014a4e3a9cb41387f49a5e0e2b Mon Sep 17 00:00:00 2001 From: Jonathan Feist Date: Tue, 14 Jul 2020 15:00:19 +0100 Subject: [PATCH 090/222] Improve styling and functionality of autocomplete dropdown --- .../components/maps/_v-map-pa-search.scss | 44 ++++++++-- .../components/map/VMapPASearch.vue | 82 +++++++++++++++---- 2 files changed, 103 insertions(+), 23 deletions(-) diff --git a/app/assets/stylesheets/components/maps/_v-map-pa-search.scss b/app/assets/stylesheets/components/maps/_v-map-pa-search.scss index 20ccdb4ef..bf18d003c 100644 --- a/app/assets/stylesheets/components/maps/_v-map-pa-search.scss +++ b/app/assets/stylesheets/components/maps/_v-map-pa-search.scss @@ -1,18 +1,25 @@ .v-map-pa-search { + background-color: $grey-dark; + border: rem-calc(1) solid $white; + border-radius: rem-calc(32); + border-radius: rem-calc(32); margin-bottom: rem-calc(12); position: relative; - + z-index: 2; + display: flex; + + &__container { + position: relative; + } &__input { background-color: rgba($black, 0); - border-radius: rem-calc(32); - border: rem-calc(1) solid $white; - outline: none; - padding-left: rem-calc(50); + border: none; color: $white; font-size: rem-calc(18); + padding-left: rem-calc(50); display: flex; flex: 1; @@ -23,7 +30,7 @@ } - &__search_icon { + &__magnifying-glass { @include icon-search-white; height: 100%; @@ -33,5 +40,30 @@ align-self: center; } + + &__results-container { + background-color: $grey-dark; + border: rem-calc(1) solid $white; + border-bottom-left-radius: rem-calc(24); + border-bottom-right-radius: rem-calc(24); + padding-top: rem-calc(25); + padding-bottom: rem-calc(25); + + width: 100%; + + position: absolute; + top: 50%; + left: 0; + } + + &__results { + overflow-y: scroll; + + height: rem-calc(150); + } + + &__result { + padding: rem-calc(12 16); + } } \ No newline at end of file diff --git a/app/javascript/components/map/VMapPASearch.vue b/app/javascript/components/map/VMapPASearch.vue index 1c88980c4..b32e76387 100644 --- a/app/javascript/components/map/VMapPASearch.vue +++ b/app/javascript/components/map/VMapPASearch.vue @@ -1,15 +1,30 @@ @@ -27,7 +42,7 @@ export default { data() { return { query: "", - autocompleteResults: [], + autocompleteResults: [] }; }, @@ -36,8 +51,7 @@ export default { type: Object, required: true, validator: type => { - return type.hasOwnProperty('id') && - type.hasOwnProperty('placeholder') + return type.hasOwnProperty("id") && type.hasOwnProperty("placeholder"); } } }, @@ -45,6 +59,9 @@ export default { computed: { hasValidQuery() { return this.query && this.query.length > 2; + }, + hasResults() { + return this.autocompleteResults.length > 0; } }, @@ -53,6 +70,14 @@ export default { this.$emit("input", e.target.value); }, + onEscape() { + this.resetAutocompleteResults(); + }, + + resetAutocompleteResults() { + this.autocompleteResults = []; + }, + focusInput() { this.$refs.input.focus(); }, @@ -65,6 +90,10 @@ export default { } }, + onElementFocus() { + this.$refs.input.focus(); + }, + onEnter() { this.$emit("search", this.query); this.submitSearch() @@ -78,10 +107,29 @@ export default { }, submitSearch() { - return axios.post("/search/autocomplete", { - type: this.type.id, - search_term: this.query + return new Promise(resolve => { + // TESTING + setTimeout(function() { + resolve([ + "a", + "abc", + "abcde", + "a", + "abc", + "abcde", + "a", + "abc", + "abcde", + "a", + "abc", + "abcde" + ]); + }, 500); }); + // return axios.post("/search/autocomplete", { + // type: this.type.id, + // search_term: this.query + // }); } } }; From 21ead5dd0a1eddb4a7e81e95e538afd06476aba2 Mon Sep 17 00:00:00 2001 From: Stacy Talbot Date: Tue, 14 Jul 2020 16:33:59 +0100 Subject: [PATCH 091/222] Add in info for Green List affiliation on the site page --- app/assets/stylesheets/components/_cards.scss | 10 ---- .../components/cards/card/_card-stats.scss | 56 ++++++++++++------- .../card/stats/_card-stats-affiliations.scss | 40 +++++++++++++ .../{ => stats}/_card-stats-overview.scss | 0 app/presenters/protected_area_presenter.rb | 5 +- .../partials/stats/_stats-external.html.erb | 17 ++++-- config/locales/global/en.yml | 1 + config/locales/stats/en.yml | 6 ++ 8 files changed, 98 insertions(+), 37 deletions(-) create mode 100644 app/assets/stylesheets/components/cards/card/stats/_card-stats-affiliations.scss rename app/assets/stylesheets/components/cards/card/{ => stats}/_card-stats-overview.scss (100%) diff --git a/app/assets/stylesheets/components/_cards.scss b/app/assets/stylesheets/components/_cards.scss index ae5186669..649339b72 100644 --- a/app/assets/stylesheets/components/_cards.scss +++ b/app/assets/stylesheets/components/_cards.scss @@ -4,16 +4,6 @@ //-------------------------------------------------- // mixins //-------------------------------------------------- -@mixin card-stats-padding { - padding: rem-calc(28 30); -} - -@mixin card-stats-number { - color: $primary; - font-weight: $bold; - line-height: 1; -} - //-------------------------------------------------- // classes //-------------------------------------------------- diff --git a/app/assets/stylesheets/components/cards/card/_card-stats.scss b/app/assets/stylesheets/components/cards/card/_card-stats.scss index 8c7f8545d..3e137a5e9 100644 --- a/app/assets/stylesheets/components/cards/card/_card-stats.scss +++ b/app/assets/stylesheets/components/cards/card/_card-stats.scss @@ -1,3 +1,35 @@ +//-------------------------------------------------- +// mixins +//-------------------------------------------------- +@mixin card-stats-padding { + padding: rem-calc(28 30); +} + +@mixin card-stats-number { + color: $primary; + font-weight: $bold; + line-height: 1; +} + +@mixin card-stats { + @include card-stats-padding; + background-color: $white; + margin-top: rem-calc(30); +} + +@mixin card-stats-h2 { margin-top: 0; } + +@mixin card-button-external { + @include button-with-icon; + @include flex-no-shrink; + + &::after { + @include icon-circle-chevron-black; + height: rem-calc(21); + width: rem-calc(21); + } +} + //-------------------------------------------------- // classes //-------------------------------------------------- @@ -11,10 +43,11 @@ } } +@import './stats/card-stats-affiliations'; +@import './stats/card-stats-overview'; + &--stats { - @include card-stats-padding; - background-color: $white; - margin-top: rem-calc(30); + @include card-stats; &--half { width: 100%; @@ -41,23 +74,6 @@ @include breakpoint($small) { @include flex-row; } } - &__logos { - @include flex; - @include ul-unstyled; - } - - &__logo { - margin-left: rem-calc(24); - - &:first-child { margin-left: 0; } - } - - &__logo-image { - width: rem-calc(100); height: auto; - - display: block; - } - &__number { font-size: rem-calc(16); font-weight: $bold; diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-affiliations.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-affiliations.scss new file mode 100644 index 000000000..426775c28 --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-affiliations.scss @@ -0,0 +1,40 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-affliations { + @include card-stats; + + .card { + &__button { + @include card-button-external; + margin-top: auto; + padding-top: rem-calc(14); + } + + &__h2 { @include card-stats-h2; } + + &__logos { + @include flex; + @include ul-unstyled; + } + + &__logo { + margin-left: rem-calc(30); + max-width: rem-calc(200); + + &:first-child { margin-left: 0; } + } + + &__logo-image { + width: rem-calc(100); height: auto; + + display: block; + } + + &__subtitle { + font-weight: $bold; + line-height: 1.2; + margin: rem-calc(14 0 0 0); + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/_card-stats-overview.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-overview.scss similarity index 100% rename from app/assets/stylesheets/components/cards/card/_card-stats-overview.scss rename to app/assets/stylesheets/components/cards/card/stats/_card-stats-overview.scss diff --git a/app/presenters/protected_area_presenter.rb b/app/presenters/protected_area_presenter.rb index 14cef4209..e7327a56b 100644 --- a/app/presenters/protected_area_presenter.rb +++ b/app/presenters/protected_area_presenter.rb @@ -112,13 +112,14 @@ def attributes def external_links [ { - title: 'View more', + affiliation: 'greenlist', + date: '00/00/00', ## TODO status date -- should already be in CSV thats provided image_url: ActionController::Base.helpers.image_url('logos/green-list.png'), link_title: "View the Green List page for #{protected_area.name}", + type: 'TODO TYPE', ## TODO type = Green Listed/Relisted/Candidate needed from CSV provided by IUCN url: '' ##TODO links needed from CSV provided by IUCN. }, { - title: 'View more', image_url: ActionController::Base.helpers.image_url('logos/parcc.png'), link_title: "View the climate change vulnerability assessments for #{protected_area.name}", link_url: url_for_related_source('parcc_info', protected_area) diff --git a/app/views/partials/stats/_stats-external.html.erb b/app/views/partials/stats/_stats-external.html.erb index efb0f1586..64afe91dc 100644 --- a/app/views/partials/stats/_stats-external.html.erb +++ b/app/views/partials/stats/_stats-external.html.erb @@ -1,13 +1,20 @@ -
-

Lorem Ipsum

+
+

<%= t('stats.external.title') %>

    <% external_links.each do |link| %> <% end %>
diff --git a/config/locales/global/en.yml b/config/locales/global/en.yml index 8e1477363..1021d1f0d 100644 --- a/config/locales/global/en.yml +++ b/config/locales/global/en.yml @@ -8,6 +8,7 @@ en: download-pdf: PDF Download download: Download link: Link + more: More info footer: copyright: "ProtectedPlanet 2014-%{date}. All rights reserved" title1: Explore diff --git a/config/locales/stats/en.yml b/config/locales/stats/en.yml index 7021197fd..bbdf83e0e 100644 --- a/config/locales/stats/en.yml +++ b/config/locales/stats/en.yml @@ -6,8 +6,14 @@ en: coverage: Coverage designatons: title: Designations + external: + title: Affiliations governance: title: Governance types + green-list: + intro: This site is part of the IUCN Green List Community + type: Governance Type + date: Certification Expiry Date iucn-categories: title: IUCN Management Categories location: Location From 9927781886dac60ca8ad082163e6b9591499a38c Mon Sep 17 00:00:00 2001 From: Jonathan Feist Date: Tue, 14 Jul 2020 16:43:53 +0100 Subject: [PATCH 092/222] Refactor and simplify selector i.a... Run ESLint on files with changes --- app/javascript/components/map/VMapFilters.vue | 107 ++++++---- .../components/map/VMapPASearch.vue | 151 +++++++++----- .../components/map/VMapPASearchDropdown.vue | 38 ++-- app/javascript/components/select/Selector.vue | 191 +++++++----------- 4 files changed, 251 insertions(+), 236 deletions(-) diff --git a/app/javascript/components/map/VMapFilters.vue b/app/javascript/components/map/VMapFilters.vue index 55e1faa99..5c21494cb 100644 --- a/app/javascript/components/map/VMapFilters.vue +++ b/app/javascript/components/map/VMapFilters.vue @@ -1,41 +1,63 @@ diff --git a/app/javascript/components/map/VMapPASearch.vue b/app/javascript/components/map/VMapPASearch.vue index b32e76387..9b3c5b213 100644 --- a/app/javascript/components/map/VMapPASearch.vue +++ b/app/javascript/components/map/VMapPASearch.vue @@ -1,27 +1,37 @@ \ No newline at end of file diff --git a/app/javascript/components/map/VMapPASearchDropdown.vue b/app/javascript/components/map/VMapPASearchDropdown.vue index 25ca87f79..6f5fa5d24 100644 --- a/app/javascript/components/map/VMapPASearchDropdown.vue +++ b/app/javascript/components/map/VMapPASearchDropdown.vue @@ -1,41 +1,31 @@ \ No newline at end of file diff --git a/app/javascript/components/select/Selector.vue b/app/javascript/components/select/Selector.vue index 8cc857bb8..9d4f66273 100644 --- a/app/javascript/components/select/Selector.vue +++ b/app/javascript/components/select/Selector.vue @@ -1,200 +1,153 @@ \ No newline at end of file From 6b538c394af3d7f3815647d4f68d2a3d46c1cb3a Mon Sep 17 00:00:00 2001 From: Will Kocur Date: Tue, 14 Jul 2020 17:13:26 +0100 Subject: [PATCH 093/222] add maps to pa page --- app/controllers/protected_areas_controller.rb | 18 ++++++++ .../components/map/helpers/request-helpers.js | 30 ++++++++----- .../map/mixins/mixin-bounding-box.js | 45 +++++++++++-------- app/views/protected_areas/show.html.erb | 9 ++-- 4 files changed, 68 insertions(+), 34 deletions(-) diff --git a/app/controllers/protected_areas_controller.rb b/app/controllers/protected_areas_controller.rb index d54b445ce..2f6677755 100644 --- a/app/controllers/protected_areas_controller.rb +++ b/app/controllers/protected_areas_controller.rb @@ -1,6 +1,7 @@ class ProtectedAreasController < ApplicationController after_action :record_visit after_action :enable_caching + include MapHelper def show id = params[:id] @@ -30,6 +31,19 @@ def show @wdpa_other = [] ## 3 other PAs from ...? + @map = { + disclaimer: map_yml[:disclaimer], + title: map_yml[:title], + overlays: MapOverlaysSerializer.new(map_overlays, map_yml).serialize + } + + @map_options = { + map: { + boundingWDPAId: @protected_area.wdpa_id, + isPoint: @protected_area.the_geom.geometry_type.type_name === 'MultiPoint' + } + } + respond_to do |format| format.html format.pdf { @@ -45,6 +59,10 @@ def show private + def map_overlays + overlays(['oecm', 'marine_wdpa', 'terrestrial_wdpa']) + end + def get_locations locations = [] diff --git a/app/javascript/components/map/helpers/request-helpers.js b/app/javascript/components/map/helpers/request-helpers.js index d98d017b5..d79f7fe5b 100644 --- a/app/javascript/components/map/helpers/request-helpers.js +++ b/app/javascript/components/map/helpers/request-helpers.js @@ -4,6 +4,8 @@ const instance = axios.create() delete instance.defaults.headers.common['X-CSRF-Token'] +//TODO: Move urls and point vs poly logic to backend + export const getCountryExtentByISO3 = (iso3, cb) => { instance.get(`https://data-gis.unep-wcmc.org/server/rest/services/AdministrativeUnits/GADM_EEZ_Layer/FeatureServer/0/query?where=GID_0+%3D+%27${iso3}%27&returnGeometry=false&returnExtentOnly=true&outSR=4326&f=pjson`).then(cb) } @@ -12,21 +14,17 @@ export const getRegionExtentByName = (name, cb) => { instance.get(`https://data-gis.unep-wcmc.org/server/rest/services/AdministrativeUnits/GADM_EEZ_Layer/FeatureServer/0/query?where=region+%3D+%27${encodeURIComponent(name)}%27&returnGeometry=false&returnExtentOnly=true&outSR=4326&f=pjson`).then(cb) } +export const getPAExtentByWDPAId = (wdpaId, isPoint, cb) => { + const layerNumber = isPoint ? 0 : 1 + + instance.get(`https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_on_Protected_Areas/FeatureServer/${layerNumber}/query?where=wdpaid+%3D+%27${wdpaId}%27&returnGeometry=false&returnExtentOnly=true&outSR=4326&f=pjson`).then(cb) +} + const wdpaFeatureServerUrl = 'https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_on_Protected_Areas/FeatureServer/' const wdpaFeatureServerPointUrl = wdpaFeatureServerUrl + '0/' const wdpaFeatureServerPolyUrl = wdpaFeatureServerUrl + '1/' const oecmFeatureServerPolyUrl = 'https://data-gis.unep-wcmc.org/server/rest/services/ProtectedSites/The_World_Database_on_other_effective_area_based_conservation_measures/FeatureServer/0/' -const getQueryString = (coords, distanceInMiles=null) => { - let queryString = `query?geometry=${coords.lng}%2C+${coords.lat}&geometryType=esriGeometryPoint&returnGeometry=false&inSR=4326&outFields=wdpaid%2Cname&f=json` - - if (distanceInMiles) { - queryString += `&distance=${distanceInMiles}&units=esriSRUnit_StatuteMile` - } - - return queryString -} - export const getOECMFromCoords = (coords, cb) => { instance.get(oecmFeatureServerPolyUrl + getQueryString(coords)) .then(cb) @@ -40,4 +38,14 @@ export const getWDPAPolyFromCoords = (coords, cb) => { export const getWDPAPointFromCoords = (coords, cb) => { instance.get(wdpaFeatureServerPointUrl + getQueryString(coords, 5)) .then(cb) -} \ No newline at end of file +} + +const getQueryString = (coords, distanceInMiles=null) => { + let queryString = `query?geometry=${coords.lng}%2C+${coords.lat}&geometryType=esriGeometryPoint&returnGeometry=false&inSR=4326&outFields=wdpaid%2Cname&f=json` + + if (distanceInMiles) { + queryString += `&distance=${distanceInMiles}&units=esriSRUnit_StatuteMile` + } + + return queryString +} diff --git a/app/javascript/components/map/mixins/mixin-bounding-box.js b/app/javascript/components/map/mixins/mixin-bounding-box.js index 50e6eca74..42833739d 100644 --- a/app/javascript/components/map/mixins/mixin-bounding-box.js +++ b/app/javascript/components/map/mixins/mixin-bounding-box.js @@ -1,4 +1,4 @@ -import { getCountryExtentByISO3, getRegionExtentByName } from '../helpers/request-helpers' +import { getCountryExtentByISO3, getPAExtentByWDPAId, getRegionExtentByName } from '../helpers/request-helpers' export default { data () { @@ -10,32 +10,39 @@ export default { methods: { initBoundingBoxAndMap () { if (this.mapOptions.boundingISO) { - getCountryExtentByISO3(this.mapOptions.boundingISO, this.handleExtentResponse) + getCountryExtentByISO3(this.mapOptions.boundingISO, this.getExtentResponseHandler()) } else if (this.mapOptions.boundingRegion) { - getRegionExtentByName(this.mapOptions.boundingRegion, this.handleExtentResponse) + getRegionExtentByName(this.mapOptions.boundingRegion, this.getExtentResponseHandler()) + } else if (this.mapOptions.boundingWDPAId) { + getPAExtentByWDPAId( + this.mapOptions.boundingWDPAId, + this.mapOptions.isPoint, + this.getExtentResponseHandler(1) + ) } else { this.initMap() } }, - handleExtentResponse (res) { - const extent = res.data.extent - const padding = 5 - - if (extent) { - this.initBounds = [ - [ - Math.max(extent.xmin - padding, -180), - Math.max(extent.ymin - padding, -90) - ], - [ - Math.min(extent.xmax + padding, 180), - Math.min(extent.ymax + padding, 90) + getExtentResponseHandler (padding=5) { + return res => { + const extent = res.data.extent + + if (extent) { + this.initBounds = [ + [ + Math.max(extent.xmin - padding, -180), + Math.max(extent.ymin - padding, -90) + ], + [ + Math.min(extent.xmax + padding, 180), + Math.min(extent.ymax + padding, 90) + ] ] - ] + } + + this.initMap() } - - this.initMap() } } } \ No newline at end of file diff --git a/app/views/protected_areas/show.html.erb b/app/views/protected_areas/show.html.erb index 7ef2dbf0b..2488a5289 100644 --- a/app/views/protected_areas/show.html.erb +++ b/app/views/protected_areas/show.html.erb @@ -1,7 +1,7 @@
-
+
<%= render partial: "partials/stats/stats-overview", locals: { area: reported_area, location: @locations.html_safe, @@ -11,9 +11,10 @@ story_map_links: @protected_area.story_map_links } %> -
- MAP -
+ <%= render partial: "partials/maps/header", locals: { + map: @map, + map_options: @map_options + } %>
From 7d63a25486b311d6e3b56e6ceb19b5d628e65f79 Mon Sep 17 00:00:00 2001 From: Stacy Talbot Date: Tue, 14 Jul 2020 17:16:43 +0100 Subject: [PATCH 094/222] Refactor some of the card stats styles --- app/assets/stylesheets/base/_buttons.scss | 20 ++- app/assets/stylesheets/components/_lists.scss | 11 +- .../components/cards/card/_card-stats.scss | 107 +++------------ .../card/stats/_card-stats-attributes.scss | 10 ++ .../card/stats/_card-stats-coverage.scss | 51 +++++++ .../card/stats/_card-stats-designations.scss | 12 ++ .../card/stats/_card-stats-governance.scss | 10 ++ .../cards/card/stats/_card-stats-iucn.scss | 10 ++ .../card/stats/_card-stats-management.scss | 10 ++ .../cards/card/stats/_card-stats-sources.scss | 25 ++++ .../card/stats/_cards-stats-overlap.scss | 10 ++ app/views/country/show.html.erb | 51 +------ .../partials/stats/_stats-attributes.html.erb | 4 +- .../partials/stats/_stats-coverage.html.erb | 4 +- .../stats/_stats-designations.html.erb | 4 +- .../partials/stats/_stats-governance.html.erb | 4 +- .../stats/_stats-iucn-categories.html.erb | 4 +- .../partials/stats/_stats-overlap.html.erb | 3 + app/views/partials/stats/_stats-pame.html.erb | 4 +- .../partials/stats/_stats-sources.html.erb | 4 +- app/views/protected_areas/show.html.erb | 128 ++---------------- 21 files changed, 206 insertions(+), 280 deletions(-) create mode 100644 app/assets/stylesheets/components/cards/card/stats/_card-stats-attributes.scss create mode 100644 app/assets/stylesheets/components/cards/card/stats/_card-stats-coverage.scss create mode 100644 app/assets/stylesheets/components/cards/card/stats/_card-stats-designations.scss create mode 100644 app/assets/stylesheets/components/cards/card/stats/_card-stats-governance.scss create mode 100644 app/assets/stylesheets/components/cards/card/stats/_card-stats-iucn.scss create mode 100644 app/assets/stylesheets/components/cards/card/stats/_card-stats-management.scss create mode 100644 app/assets/stylesheets/components/cards/card/stats/_card-stats-sources.scss create mode 100644 app/assets/stylesheets/components/cards/card/stats/_cards-stats-overlap.scss create mode 100644 app/views/partials/stats/_stats-overlap.html.erb diff --git a/app/assets/stylesheets/base/_buttons.scss b/app/assets/stylesheets/base/_buttons.scss index b3d3cf820..1de9f7593 100644 --- a/app/assets/stylesheets/base/_buttons.scss +++ b/app/assets/stylesheets/base/_buttons.scss @@ -91,6 +91,20 @@ $padding-medium: rem-calc(27); //-------------------------------------------------- // mixins for classes //-------------------------------------------------- +@mixin button-all($small: false) { + @include button-with-icon; + @include flex-no-shrink; + &::after { @include icon-circle-chevron-black; } + + @if $small { + @include breakpoint($medium) { font-size: rem-calc(16); } + + &::after { + height: rem-calc(21); + width: rem-calc(21); + } + } +} @mixin button-burger { @include button-basic; @include icon-burger; @@ -180,11 +194,7 @@ $padding-medium: rem-calc(27); //-------------------------------------------------- .button { &--accent { @include button-block; } - &--all { - @include button-with-icon; - @include flex-no-shrink; - &::after { @include icon-circle-chevron-black; } - } + &--all { @include button-all; } &--download { @include button-with-icon; &::after { diff --git a/app/assets/stylesheets/components/_lists.scss b/app/assets/stylesheets/components/_lists.scss index c2f28d2bd..cdfdf134c 100644 --- a/app/assets/stylesheets/components/_lists.scss +++ b/app/assets/stylesheets/components/_lists.scss @@ -64,16 +64,7 @@ } - &__a { - @include button-with-icon; - @include flex-no-shrink; - - &::after { - @include icon-circle-chevron-black; - height: rem-calc(21); - width: rem-calc(21); - } - } + &__a { @include button-all($small: true); } } } } diff --git a/app/assets/stylesheets/components/cards/card/_card-stats.scss b/app/assets/stylesheets/components/cards/card/_card-stats.scss index 3e137a5e9..eb9c9c35c 100644 --- a/app/assets/stylesheets/components/cards/card/_card-stats.scss +++ b/app/assets/stylesheets/components/cards/card/_card-stats.scss @@ -1,6 +1,13 @@ //-------------------------------------------------- // mixins //-------------------------------------------------- +@mixin card-stat-content { + @include flex; + @include flex-column; + + @include breakpoint($small) { @include flex-row; } +} + @mixin card-stats-padding { padding: rem-calc(28 30); } @@ -19,16 +26,9 @@ @mixin card-stats-h2 { margin-top: 0; } -@mixin card-button-external { - @include button-with-icon; - @include flex-no-shrink; - - &::after { - @include icon-circle-chevron-black; - height: rem-calc(21); - width: rem-calc(21); - } -} +@mixin card-stats-third { width: calc(33% - 16px); } + +@mixin card-button-external { @include button-all($small: true); } //-------------------------------------------------- // classes @@ -43,81 +43,18 @@ } } -@import './stats/card-stats-affiliations'; -@import './stats/card-stats-overview'; - -&--stats { - @include card-stats; - - &--half { - width: 100%; - - @include breakpoint($small) { width: calc(50% - 15px); } - } - - .card { - &__chart { - margin-bottom: rem-calc(14); - width: 50%; +&--stats-half { + width: 100%; - @include breakpoint($small) { - margin-right: rem-calc(20); - margin-bottom: 0; - width: 30%; - } - } - - &__content { - @include flex; - @include flex-column; - - @include breakpoint($small) { @include flex-row; } - } - - &__number { - font-size: rem-calc(16); - font-weight: $bold; - line-height: .9; - } - - &__number-large { - font-size: rem-calc(40); - font-weight: $bold; - line-height: .9; - } - - &__stat-box { - @include bg-grey-xdark; - @include flex; - @include flex-center; - font-size: rem-calc(20); - font-weight: $bold; - margin-right: rem-calc(20); - height: rem-calc(280); - } - - &__stat { - font-size: rem-calc(14); - line-height: 1.3; - margin: rem-calc(6 0 14 0); - } - - &__stat-large { margin-bottom: rem-calc(14); } - - &__subsection { border-top: solid 1px $grey-light; } - - &__subtitle { - font-size: rem-calc(20); - font-weight: $bold; - margin: rem-calc(12 0 0 0); - } - - &__title { - margin-top: 0; - } - - &__third { width: calc(33% - 16px); } - &__two-thirds { width: calc(100% - 33%); } - } + @include breakpoint($small) { width: calc(50% - 15px); } } +@import './stats/card-stats-affiliations'; +@import './stats/card-stats-attributes'; +@import './stats/card-stats-coverage'; +@import './stats/card-stats-designations'; +@import './stats/card-stats-governance'; +@import './stats/card-stats-iucn'; +@import './stats/card-stats-management'; +@import './stats/card-stats-overview'; +@import './stats/card-stats-sources'; \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-attributes.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-attributes.scss new file mode 100644 index 000000000..f423ac5f6 --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-attributes.scss @@ -0,0 +1,10 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-attributes { + @include card-stats; + + .card { + &__h2 { @include card-stats-h2; } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-coverage.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-coverage.scss new file mode 100644 index 000000000..1ef6d507d --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-coverage.scss @@ -0,0 +1,51 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-coverage { + @include card-stats; + + .card { + &__chart { + margin-bottom: rem-calc(14); + width: 50%; + + @include breakpoint($small) { + margin-right: rem-calc(20); + margin-bottom: 0; + width: 30%; + } + } + + &__content { @include card-stat-content; } + + &__h2 { @include card-stats-h2; } + + &__number { + font-size: rem-calc(16); + font-weight: $bold; + line-height: .9; + } + + &__number-large { + font-size: rem-calc(40); + font-weight: $bold; + line-height: .9; + } + + &__stat { + font-size: rem-calc(14); + line-height: 1.3; + margin: rem-calc(6 0 14 0); + } + + &__stat-large { margin-bottom: rem-calc(14); } + + &__subsection { border-top: solid 1px $grey-light; } + + &__subtitle { + font-size: rem-calc(20); + font-weight: $bold; + margin: rem-calc(12 0 0 0); + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-designations.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-designations.scss new file mode 100644 index 000000000..46082ddad --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-designations.scss @@ -0,0 +1,12 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-designations { + @include card-stats; + + .card { + &__h2 { @include card-stats-h2; } + + &__third { @include card-stats-third; } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-governance.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-governance.scss new file mode 100644 index 000000000..2e57cd8fa --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-governance.scss @@ -0,0 +1,10 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-governance { + @include card-stats; + + .card { + &__h2 { @include card-stats-h2; } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-iucn.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-iucn.scss new file mode 100644 index 000000000..3fa68696e --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-iucn.scss @@ -0,0 +1,10 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-iucn { + @include card-stats; + + .card { + &__h2 { @include card-stats-h2; } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-management.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-management.scss new file mode 100644 index 000000000..5ef9f65d2 --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-management.scss @@ -0,0 +1,10 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-management { + @include card-stats; + + .card { + &__h2 { @include card-stats-h2; } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/stats/_card-stats-sources.scss b/app/assets/stylesheets/components/cards/card/stats/_card-stats-sources.scss new file mode 100644 index 000000000..b6620baa8 --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_card-stats-sources.scss @@ -0,0 +1,25 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-sources { + @include card-stats; + + .card { + &__content { @include card-stat-content; } + + &__h2 { @include card-stats-h2; } + + &__stat-box { + @include bg-grey-black; + @include flex; + @include flex-center; + font-size: rem-calc(20); + font-weight: $bold; + margin-right: rem-calc(20); + height: rem-calc(280); + } + + &__third { @include card-stats-third; } + &__two-thirds { width: calc(100% - 33%); } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/cards/card/stats/_cards-stats-overlap.scss b/app/assets/stylesheets/components/cards/card/stats/_cards-stats-overlap.scss new file mode 100644 index 000000000..49c77fd75 --- /dev/null +++ b/app/assets/stylesheets/components/cards/card/stats/_cards-stats-overlap.scss @@ -0,0 +1,10 @@ +//-------------------------------------------------- +// classes +//-------------------------------------------------- +&--stats-overlap { + @include card-stats; + + .card { + &__h2 { @include card-stats-h2; } + } +} \ No newline at end of file diff --git a/app/views/country/show.html.erb b/app/views/country/show.html.erb index 6fe108630..789b00f7d 100644 --- a/app/views/country/show.html.erb +++ b/app/views/country/show.html.erb @@ -49,15 +49,9 @@ <%= render partial: "partials/cards/sites", locals: { cards: @sites } %> <%= render partial: "partials/messages/message-citation", locals: { title: @country.name } %> - - -Download this dataset -<%= download_dropdown(@country.iso_3, 'general', (types rescue [:csv, :shp])) %> - - -
- +
+
+

related countries

<% if @country.children.any? || @country.parent.present? %> @@ -118,41 +112,4 @@ data-control-position="bottomleft">
<% end %>
-<% end %> - - - - - -
-
+<% end %> \ No newline at end of file diff --git a/app/views/partials/stats/_stats-attributes.html.erb b/app/views/partials/stats/_stats-attributes.html.erb index 8c745cd77..06ccbf195 100644 --- a/app/views/partials/stats/_stats-attributes.html.erb +++ b/app/views/partials/stats/_stats-attributes.html.erb @@ -1,5 +1,5 @@ -
-

<%= t('stats.attributes.title') %>

+
+

<%= t('stats.attributes.title') %>

    <% attributes.each do |attribute| %> diff --git a/app/views/partials/stats/_stats-coverage.html.erb b/app/views/partials/stats/_stats-coverage.html.erb index 7d3aea02b..dc3148ae8 100644 --- a/app/views/partials/stats/_stats-coverage.html.erb +++ b/app/views/partials/stats/_stats-coverage.html.erb @@ -1,5 +1,5 @@ -
    -

    <%= t("stats.#{type}-title") %>

    +
    +

    <%= t("stats.#{type}-title") %>

    diff --git a/app/views/partials/stats/_stats-designations.html.erb b/app/views/partials/stats/_stats-designations.html.erb index 4178df719..95e039c53 100644 --- a/app/views/partials/stats/_stats-designations.html.erb +++ b/app/views/partials/stats/_stats-designations.html.erb @@ -1,5 +1,5 @@ -
    -

    <%= t('stats.designations.title') %>

    +
    +

    <%= t('stats.designations.title') %>

    Chart diff --git a/app/views/partials/stats/_stats-governance.html.erb b/app/views/partials/stats/_stats-governance.html.erb index 88cd864a4..6fddb58e1 100644 --- a/app/views/partials/stats/_stats-governance.html.erb +++ b/app/views/partials/stats/_stats-governance.html.erb @@ -1,5 +1,5 @@ -
    -

    <%= t('stats.governance.title') %>

    +
    +

    <%= t('stats.governance.title') %>

    Chart diff --git a/app/views/partials/stats/_stats-iucn-categories.html.erb b/app/views/partials/stats/_stats-iucn-categories.html.erb index dcc094a30..20ea4f599 100644 --- a/app/views/partials/stats/_stats-iucn-categories.html.erb +++ b/app/views/partials/stats/_stats-iucn-categories.html.erb @@ -1,5 +1,5 @@ -
    -

    <%= t('stats.iucn-categories.title') %>

    +
    +

    <%= t('stats.iucn-categories.title') %>

      <% iucn_categories.each do |category| %> diff --git a/app/views/partials/stats/_stats-overlap.html.erb b/app/views/partials/stats/_stats-overlap.html.erb new file mode 100644 index 000000000..12319b577 --- /dev/null +++ b/app/views/partials/stats/_stats-overlap.html.erb @@ -0,0 +1,3 @@ +
      +

      Chart - overlaps

      +
      \ No newline at end of file diff --git a/app/views/partials/stats/_stats-pame.html.erb b/app/views/partials/stats/_stats-pame.html.erb index 6391e9b0f..168ea73a6 100644 --- a/app/views/partials/stats/_stats-pame.html.erb +++ b/app/views/partials/stats/_stats-pame.html.erb @@ -1,5 +1,5 @@ -
      -

      <%= t('stats.pame.title') %>

      +
      +

      <%= t('stats.pame.title') %>

      <% if pame_evaluations_summary.any? %>
        diff --git a/app/views/partials/stats/_stats-sources.html.erb b/app/views/partials/stats/_stats-sources.html.erb index 895d9e41b..a96770a76 100644 --- a/app/views/partials/stats/_stats-sources.html.erb +++ b/app/views/partials/stats/_stats-sources.html.erb @@ -1,5 +1,5 @@ -
        -

        <%= t('stats.sources.title') %>

        +
        +

        <%= t('stats.sources.title') %>

        diff --git a/app/views/protected_areas/show.html.erb b/app/views/protected_areas/show.html.erb index 7ef2dbf0b..01f05c53a 100644 --- a/app/views/protected_areas/show.html.erb +++ b/app/views/protected_areas/show.html.erb @@ -17,19 +17,17 @@
        -
        +
        <%= render partial: "partials/stats/stats-attributes", locals: { attributes: @presenter.attributes } %>
        -
        +
        <%= render "partials/stats/stats-pame" %> <%= render partial: "partials/stats/stats-external", locals: { external_links: @presenter.external_links } %>
        -
        -

        Chart - overlaps

        -
        + <%= render partial: "partials/stats/stats-overlap" %> <%= render partial: "partials/stats/stats-sources", locals: { sources: @sources } %> @@ -37,71 +35,21 @@
        - - - - <%= content_for :seo, "Learn about and visualise the protected area #{@protected_area.name} (#{@protected_area.designation.try(:name)}), situated in #{@countries.map(&:name).join("; ") rescue "Areas Beyond National Jurisdiction"}" %> <%= content_for :seo_image, tiles_url(type: "protected_area", id: @protected_area.wdpa_id, version: 1) %> <%= content_for :page_title, @protected_area.name %> <% has_designations = @protected_area.networks.detect(&:designation).present? %> -
        -

        - - -

        - - <% if has_designations %> -
        -

        - This site has multiple designations. <%= link_to raw('(See all details ↓)'), '#anchor-designations', class: 'link--page-anchor' %> -

        -
        - <% end %> - - - -<%= link_to url_for(action: :show, id: @protected_area.wdpa_id, format: :pdf), class: 'link link--hero-download' do %> -Download site -<% end %> - - -
        - - - -
        -
        - -
        - The designations employed and the presentation of material on this map do not - imply the expression of any opinion whatsoever on the part of the Secretariat - of the United Nations concerning the legal status of any country, territory, - city or area or of its authorities, or concerning the delimitation of its - frontiers or boundaries. +<% if has_designations %> +
        +

        + This site has multiple designations. <%= link_to raw('(See all details ↓)'), '#anchor-designations', class: 'link--page-anchor' %> +

        - -
        - -<% if @protected_area.story_map_links.any? %> -

        Link to story map

        - <% @protected_area.story_map_links.each do |story_map_link| %> -

        <%= link_to "Story Map(#{story_map_link.link_type})", story_map_link.link, class: 'link is-external', title: 'view the Story map', target: '_blank'%>

        - <% end %> <% end %> + <% if has_designations %>

        Site multiple designations

        @@ -136,64 +84,6 @@
        <% end %> - <% if @networks.any? %> - <% unless @for_pdf %> - <%= render partial: "map_connections" %> - <% end %> - -
        -

        Site network breakdown

        - -
        - <% unless @for_pdf %> -
          - <% @networks.each_with_index do |network, i| %> -
        • "><%= network.name %>
          • - <% end %> -
        - <% end %> - - <% @networks.each_with_index do |network, i| %> -
        "> - - <% if @for_pdf %> - <%= network.name %> - <% end %> - -

        - -
        - -
        - <% network.protected_areas.each do |protected_area| %> - <% next if protected_area.id == @protected_area.id %> - <%= render partial: "pa_card", locals: { protected_area: protected_area, comparison_protected_area: @protected_area } %> - <% end %> -
        - - -
        -
        - <% end %> -
        - -
        - <% end %> - -
        -

        Downloads

        -
        -
        - - <%= link_to url_for(action: :show, id: @protected_area.wdpa_id, format: :pdf), class: 'info-box__link' do %> - Download site - <% end %> -
        -
        -
        <% if management_plan_document %>
        From 3499a5400d99223ddafa7d12eb5d37c903588f34 Mon Sep 17 00:00:00 2001 From: Will Kocur Date: Tue, 14 Jul 2020 18:01:40 +0100 Subject: [PATCH 095/222] remove redundant map section --- app/views/home/index.html.erb | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index 032a01cf4..df1fae23e 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -14,11 +14,9 @@ <%= render partial: "partials/cards/squares", locals: { cards: pas_categories } %>
        -
        - <%= render partial: "partials/maps/main", locals: { - map: @main_map - } %> -
        +<%= render partial: "partials/maps/main", locals: { + map: @main_map +} %> <%= render "partials/carousels/themes" %> From d6fe0030fb8db37170bd63b789494e13797859ca Mon Sep 17 00:00:00 2001 From: Jonathan Feist Date: Wed, 15 Jul 2020 02:11:12 +0100 Subject: [PATCH 096/222] Re-work v-map-pa-search --- .../stylesheets/components/_autocomplete.scss | 69 ++++++ .../components/maps/_v-map-pa-search.scss | 71 +----- .../components/autocomplete/Autocomplete.vue | 106 +++++++++ app/javascript/components/map/VMapFilters.vue | 67 +----- .../components/map/VMapPASearch.vue | 223 ++++++------------ .../components/map/VMapPASearchDropdown.vue | 31 --- app/javascript/components/select/Selector.vue | 4 +- 7 files changed, 270 insertions(+), 301 deletions(-) create mode 100644 app/assets/stylesheets/components/_autocomplete.scss create mode 100644 app/javascript/components/autocomplete/Autocomplete.vue delete mode 100644 app/javascript/components/map/VMapPASearchDropdown.vue diff --git a/app/assets/stylesheets/components/_autocomplete.scss b/app/assets/stylesheets/components/_autocomplete.scss new file mode 100644 index 000000000..4a71c2c42 --- /dev/null +++ b/app/assets/stylesheets/components/_autocomplete.scss @@ -0,0 +1,69 @@ +.autocomplete { + background-color: $grey-dark; + border: rem-calc(1) solid $white; + border-radius: rem-calc(32); + border-radius: rem-calc(32); + margin-bottom: rem-calc(12); + + position: relative; + z-index: 2; + + display: flex; + + &__container { + position: relative; + } + + &__input { + background-color: rgba($black, 0); + border: none; + color: $white; + font-size: rem-calc(18); + padding-left: rem-calc(50); + + display: flex; + flex: 1; + + // &:focus { + // background-color: rgba($black, .25); + // } + + } + + &__magnifying-glass { + @include icon-search-white; + + height: 100%; + + position: absolute; + left: rem-calc(16); + + align-self: center; + } + + &__results-container { + background-color: $grey-dark; + border: rem-calc(1) solid $white; + border-bottom-left-radius: rem-calc(24); + border-bottom-right-radius: rem-calc(24); + padding-top: rem-calc(25); + padding-bottom: rem-calc(25); + + width: 100%; + + position: absolute; + top: 50%; + left: 0; + } + + &__results { + overflow-y: scroll; + + height: rem-calc(150); + } + + &__result { + padding: rem-calc(12 16); + } + +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/maps/_v-map-pa-search.scss b/app/assets/stylesheets/components/maps/_v-map-pa-search.scss index bf18d003c..0df510bd0 100644 --- a/app/assets/stylesheets/components/maps/_v-map-pa-search.scss +++ b/app/assets/stylesheets/components/maps/_v-map-pa-search.scss @@ -1,69 +1,2 @@ -.v-map-pa-search { - background-color: $grey-dark; - border: rem-calc(1) solid $white; - border-radius: rem-calc(32); - border-radius: rem-calc(32); - margin-bottom: rem-calc(12); - - position: relative; - z-index: 2; - - display: flex; - - &__container { - position: relative; - } - - &__input { - background-color: rgba($black, 0); - border: none; - color: $white; - font-size: rem-calc(18); - padding-left: rem-calc(50); - - display: flex; - flex: 1; - - // &:focus { - // background-color: rgba($black, .25); - // } - - } - - &__magnifying-glass { - @include icon-search-white; - - height: 100%; - - position: absolute; - left: rem-calc(16); - - align-self: center; - } - - &__results-container { - background-color: $grey-dark; - border: rem-calc(1) solid $white; - border-bottom-left-radius: rem-calc(24); - border-bottom-right-radius: rem-calc(24); - padding-top: rem-calc(25); - padding-bottom: rem-calc(25); - - width: 100%; - - position: absolute; - top: 50%; - left: 0; - } - - &__results { - overflow-y: scroll; - - height: rem-calc(150); - } - - &__result { - padding: rem-calc(12 16); - } - -} \ No newline at end of file +// .v-map-pa-search { +// } \ No newline at end of file diff --git a/app/javascript/components/autocomplete/Autocomplete.vue b/app/javascript/components/autocomplete/Autocomplete.vue new file mode 100644 index 000000000..54c2b94fc --- /dev/null +++ b/app/javascript/components/autocomplete/Autocomplete.vue @@ -0,0 +1,106 @@ + + + \ No newline at end of file diff --git a/app/javascript/components/map/VMapFilters.vue b/app/javascript/components/map/VMapFilters.vue index 5c21494cb..cf1c6a6cd 100644 --- a/app/javascript/components/map/VMapFilters.vue +++ b/app/javascript/components/map/VMapFilters.vue @@ -9,15 +9,9 @@ @close="onClose" />
        -
        - types.every(type => { - return ( - type.hasOwnProperty('id') && - type.hasOwnProperty('title') && - type.hasOwnProperty('placeholder') && - typeof type.id === 'string' && - typeof type.title === 'string' && - typeof type.placeholder === 'string' - ) - }), } }, data() { return { - show: true, - searchType: this.searchTypes[0] - } - }, - - computed: { - dropdownOptions() { - return this.searchTypes.map(type => - this.convertSearchTypeToDropdownOption(type) - ) + show: true } }, methods: { - convertSearchTypeToDropdownOption(searchType) { - return { - label: searchType.title, - value: searchType.id - } - }, - onClose() { this.show = false this.$emit('show', false) }, - onSearch(query) { - console.log({ query }) - }, - - onDropdownChange(value) { - // set the original search type from its dropdown-compatible option - this.searchType = this.searchTypes[ - this.searchTypes.map(type => type.id).indexOf(value) - ] + onSearch(search) { + // LOGIC GOES HERE FOR INITIATING MAP CHANGE + console.log({ search }) } } } diff --git a/app/javascript/components/map/VMapPASearch.vue b/app/javascript/components/map/VMapPASearch.vue index 9b3c5b213..b594c9512 100644 --- a/app/javascript/components/map/VMapPASearch.vue +++ b/app/javascript/components/map/VMapPASearch.vue @@ -1,184 +1,115 @@ \ No newline at end of file diff --git a/app/javascript/components/select/Selector.vue b/app/javascript/components/select/Selector.vue index 9d4f66273..ba1141a0c 100644 --- a/app/javascript/components/select/Selector.vue +++ b/app/javascript/components/select/Selector.vue @@ -41,9 +41,10 @@
        \ No newline at end of file diff --git a/app/javascript/components/map/VMapPASearch.vue b/app/javascript/components/map/VMapPASearch.vue index b594c9512..b91d36bd8 100644 --- a/app/javascript/components/map/VMapPASearch.vue +++ b/app/javascript/components/map/VMapPASearch.vue @@ -14,18 +14,18 @@
        \ No newline at end of file From b7a21fc79338e551cdbfe2dc0f26fa6db931799a Mon Sep 17 00:00:00 2001 From: Jonathan Feist Date: Thu, 23 Jul 2020 16:45:57 +0100 Subject: [PATCH 157/222] Refactor VMapFilters to use slots --- app/javascript/components/map/VMapFilters.vue | 47 ++----------------- .../components/map/VMapPASearch.vue | 12 +++-- app/javascript/vue.js | 2 + app/views/partials/maps/_main.html.erb | 21 +++++++-- 4 files changed, 29 insertions(+), 53 deletions(-) diff --git a/app/javascript/components/map/VMapFilters.vue b/app/javascript/components/map/VMapFilters.vue index 27c3b98da..f775b4556 100644 --- a/app/javascript/components/map/VMapFilters.vue +++ b/app/javascript/components/map/VMapFilters.vue @@ -10,15 +10,8 @@ @close="onClose" />
        - + +
        - - +
        From eac39db40a336aa17afa82b49e85d74b0b9edefd Mon Sep 17 00:00:00 2001 From: Will Kocur Date: Fri, 24 Jul 2020 11:55:17 +0100 Subject: [PATCH 160/222] match mixin-responsive and settings breakpoints --- app/javascript/mixins/mixin-responsive.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/javascript/mixins/mixin-responsive.js b/app/javascript/mixins/mixin-responsive.js index 592d4a174..4f5ebd801 100644 --- a/app/javascript/mixins/mixin-responsive.js +++ b/app/javascript/mixins/mixin-responsive.js @@ -4,7 +4,7 @@ export default { windowWidth: 0, currentBreakpoint: '', breakpoints: { - small: 768, // MUST MATCH VARIABLES IN assets/stylesheets/_settings + small: 767, // MUST MATCH VARIABLES IN assets/stylesheets/_settings medium: 1024, large: 1200 } From 008af774388927d37c5f0c7caa127748a3ccb1df Mon Sep 17 00:00:00 2001 From: Jonathan Feist Date: Fri, 24 Jul 2020 12:04:52 +0100 Subject: [PATCH 161/222] Remove CGI.escapeHTML from OG metatag content output --- lib/modules/opengraph_builder.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/modules/opengraph_builder.rb b/lib/modules/opengraph_builder.rb index 36f3b1108..ee0d0e5dd 100644 --- a/lib/modules/opengraph_builder.rb +++ b/lib/modules/opengraph_builder.rb @@ -52,7 +52,7 @@ def meta_tags(data, prefix) data.each do |key, value| arr << format( '', - { prefix: prefix, key: key, value: CGI.escapeHTML(value.to_s) } + { prefix: prefix, key: key, value: value.to_s } ) end arr.join("\n") From 555a316947d62e1483efcd5488bc449d5cd4a77a Mon Sep 17 00:00:00 2001 From: Jonathan Feist Date: Fri, 24 Jul 2020 12:06:03 +0100 Subject: [PATCH 162/222] Add some twitter tags to default output i.a... Rename description to site_description and use old site_description as site_summary (currently unused) --- app/controllers/application_controller.rb | 8 ++++++-- config/locales/opengraph/defaults/en.yml | 5 ++++- config/locales/seo/defaults/en.yml | 4 ++-- 3 files changed, 12 insertions(+), 5 deletions(-) diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 6c478c758..36242fefa 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -18,13 +18,17 @@ class PageNotFound < StandardError; end; def opengraph @opengraph ||= OpengraphBuilder.new({ 'og': { - 'site_name': t('opengraph.defaults.site_name'), - 'title': t('opengraph.defaults.title'), + 'site_name': t('opengraph.defaults.site_name', default: 'Protected Planet'), + 'title': t('opengraph.defaults.title', default: 'Protected Planet'), 'description': t('opengraph.defaults.description'), 'url': request.original_url, 'type': 'website', 'image': URI.join(root_url, helpers.image_path(t('opengraph.defaults.image'))), 'image:alt': t('opengraph.defaults.image_alt') + }, + 'twitter': { + 'site': t('opengraph.defaults.twitter.site'), + 'creator': t('opengraph.defaults.twitter.creator') } }) end diff --git a/config/locales/opengraph/defaults/en.yml b/config/locales/opengraph/defaults/en.yml index b02af0232..ae2a3d27a 100644 --- a/config/locales/opengraph/defaults/en.yml +++ b/config/locales/opengraph/defaults/en.yml @@ -10,4 +10,7 @@ en: image: social.png image_alt: >- Screenshot of the Protected Planet website which shows the menu bar - and a map of the world that has protected areas highlighted in green. \ No newline at end of file + and a map of the world that has protected areas highlighted in green. + twitter: + site: "@protectedplanet" + creator: "@protectedplanet" \ No newline at end of file diff --git a/config/locales/seo/defaults/en.yml b/config/locales/seo/defaults/en.yml index b50f6a7a6..8289f1591 100644 --- a/config/locales/seo/defaults/en.yml +++ b/config/locales/seo/defaults/en.yml @@ -2,8 +2,8 @@ en: seo: defaults: site_title: Protected Planet - site_description: >- + site_summary: >- Discover the world's protected areas - description: >- + site_description: >- Protected Planet is the online interface for the World Database on Protected Areas (WDPA), and the most comprehensive global database on terrestrial and marine protected areas. \ No newline at end of file From e18f955280d1039090a91858ef997cc6d976f664 Mon Sep 17 00:00:00 2001 From: Jonathan Feist Date: Fri, 24 Jul 2020 12:07:30 +0100 Subject: [PATCH 163/222] Refactor metadata helper --- app/helpers/metadata_helper.rb | 77 ++--------------------- app/views/layouts/partials/_head.html.erb | 2 +- 2 files changed, 5 insertions(+), 74 deletions(-) diff --git a/app/helpers/metadata_helper.rb b/app/helpers/metadata_helper.rb index aa3e7a039..b62851aa1 100644 --- a/app/helpers/metadata_helper.rb +++ b/app/helpers/metadata_helper.rb @@ -1,80 +1,11 @@ module MetadataHelper - def site_title - t('seo.defaults.site_title') - end - - def site_description - t('seo.defaults.site_description') - end - def page_title - custom_title = content_for(:page_title) - - if custom_title - "#{custom_title} | #{site_title}".html_safe + page_title = content_for(:page_title) + site_title = t('seo.defaults.site_title') + if page_title + "#{page_title} | #{site_title}".html_safe else site_title end end - - def social_image - if content_for?(:social_image) - content_for(:social_image) - elsif t("#{translation_path}.social_image") - t("#{translation_path}.social_image") - else - URI.join(root_url, image_path('social.png')) - end - end - - def social_image_alt - if content_for?(:social_image_alt) - content_for(:social_image_alt) - else - t("#{translation_path}.social_image_alt", default: t('opengraph.defaults.image_alt')) - end - end - - def seo_description - if content_for?(:seo) - content_for(:seo) - else - t('seo.defaults.description') - end - end - - def twitter_card - if content_for?(:twitter_card) - content_for(:twitter_card) - else - t("#{translation_path}.social_twitter_card", default: 'summary') - end - end - - def social_title - if content_for?(:social_title) - sanitize content_for(:social_title) - else - t("#{translation_path}.title", default: page_title('Protected Planet')) - end - end - - def social_description - if content_for?(:social_description) - sanitize content_for(:social_description) - else - t("#{translation_path}.social_description", default: seo_description) - end - end - - private - - def translation_path - case controller_name - when 'target_dashboard' - 'thematic_area.target_11_dashboard' - else - controller_name - end - end end diff --git a/app/views/layouts/partials/_head.html.erb b/app/views/layouts/partials/_head.html.erb index f3edde0d5..33d980a92 100644 --- a/app/views/layouts/partials/_head.html.erb +++ b/app/views/layouts/partials/_head.html.erb @@ -1,6 +1,6 @@ <%= page_title %> - + <%== opengraph.content %> From ab626a40b191911a8c60c56d866408608366679a Mon Sep 17 00:00:00 2001 From: Will Kocur Date: Fri, 24 Jul 2020 13:43:29 +0100 Subject: [PATCH 164/222] add search map --- app/assets/stylesheets/_settings.scss | 2 +- app/assets/stylesheets/components/_map.scss | 4 -- app/assets/stylesheets/components/_tabs.scss | 2 + .../search/_search-results-areas.scss | 8 +++ app/controllers/search_areas_controller.rb | 10 ++++ app/javascript/components/map/VMap.vue | 2 + .../components/map/default-options.js | 1 + .../components/search/SearchAreas.vue | 16 ++++-- app/views/home/index.html.erb | 8 +-- .../layouts/partials/_hero-thematic.html.erb | 6 +-- app/views/marine/index.html.erb | 8 +-- app/views/oecm/index.html.erb | 12 ++--- app/views/partials/maps/_main.html.erb | 49 +++++++++---------- .../_tabs-thematic-area-database.html.erb | 8 +-- app/views/search_areas/index.html.erb | 8 ++- app/views/wdpa/index.html.erb | 12 ++--- 16 files changed, 95 insertions(+), 61 deletions(-) diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss index 175cc067b..caf940b5e 100644 --- a/app/assets/stylesheets/_settings.scss +++ b/app/assets/stylesheets/_settings.scss @@ -131,7 +131,7 @@ $z-300: 300; //-------------------------------------------------- // padding //-------------------------------------------------- -$gutter-small: rem-calc(25); +$gutter-small: rem-calc(20); $gutter-medium: rem-calc(25); $gutter-large: rem-calc(30); diff --git a/app/assets/stylesheets/components/_map.scss b/app/assets/stylesheets/components/_map.scss index 73c98d867..5ccc02923 100644 --- a/app/assets/stylesheets/components/_map.scss +++ b/app/assets/stylesheets/components/_map.scss @@ -8,10 +8,6 @@ .map-section { @include gutters; - - @include breakpoint-down($small) { - padding: 0; - } } .map { diff --git a/app/assets/stylesheets/components/_tabs.scss b/app/assets/stylesheets/components/_tabs.scss index 01f6fe13b..867e61655 100644 --- a/app/assets/stylesheets/components/_tabs.scss +++ b/app/assets/stylesheets/components/_tabs.scss @@ -61,6 +61,8 @@ @include ul-unstyled; @include ul-inline; @include tabs-horizontal-scroll; + @include container; + @include site-width; transform: translateY(-100%); } diff --git a/app/assets/stylesheets/components/search/_search-results-areas.scss b/app/assets/stylesheets/components/search/_search-results-areas.scss index 0ed4282c5..fe7889f31 100644 --- a/app/assets/stylesheets/components/search/_search-results-areas.scss +++ b/app/assets/stylesheets/components/search/_search-results-areas.scss @@ -27,6 +27,14 @@ @include flex-v-center; } + &__map-container { + @include container; + @include site-width; + + padding-top: rem-calc(28); + padding-bottom: rem-calc(28); + } + &__main { @include container; @include site-width; diff --git a/app/controllers/search_areas_controller.rb b/app/controllers/search_areas_controller.rb index dbe3a77a2..9defe5561 100644 --- a/app/controllers/search_areas_controller.rb +++ b/app/controllers/search_areas_controller.rb @@ -1,5 +1,6 @@ class SearchAreasController < ApplicationController include Concerns::Searchable + include MapHelper after_action :enable_caching @@ -26,6 +27,11 @@ def index geo_type = search_params[:geo_type] || 'site' @filters = @db_type ? { db_type: @db_type } : {} @results = Search::AreasSerializer.new(@search, geo_type).serialize + + @map = { + overlays: MapOverlaysSerializer.new(search_overlays, map_yml).serialize, + areFiltersHidden: true + } end def search_results @@ -37,6 +43,10 @@ def search_results private + def search_overlays + overlays(['marine_wdpa', 'terrestrial_wdpa']) + end + def search_params params.permit( :search_term, :geo_type, :items_per_page, :requested_page, :filters, diff --git a/app/javascript/components/map/VMap.vue b/app/javascript/components/map/VMap.vue index 70d970198..5ede7075a 100644 --- a/app/javascript/components/map/VMap.vue +++ b/app/javascript/components/map/VMap.vue @@ -118,6 +118,8 @@ export default { }, addEventHandlersToMap () { + this.$eventHub.$on('map:resize', () => this.map.resize()) + this.map.on('style.load', () => { this.setFirstForegroundLayerId() }) diff --git a/app/javascript/components/map/default-options.js b/app/javascript/components/map/default-options.js index 4e9133e68..f2f70bea8 100644 --- a/app/javascript/components/map/default-options.js +++ b/app/javascript/components/map/default-options.js @@ -14,6 +14,7 @@ export const MAP_OPTIONS_DEFAULT = { container: 'map-target', scrollZoom: false, attributionControl: false, + bounds: [[-180, -90], [180, 90]] //boundingISO: ISO3, //boundingRegion; Name e.g. Europe, } diff --git a/app/javascript/components/search/SearchAreas.vue b/app/javascript/components/search/SearchAreas.vue index 74e920687..0d1a7056c 100644 --- a/app/javascript/components/search/SearchAreas.vue +++ b/app/javascript/components/search/SearchAreas.vue @@ -28,10 +28,12 @@
        - +
        + +
        { + this.$eventHub.$emit('map:resize') + }) + } } } } diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index dd7bfeebf..4b3ba9680 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -19,9 +19,11 @@ <%= render partial: "partials/cards/squares", locals: { cards: pas_categories } %> -<%= render partial: "partials/maps/main", locals: { - map: @main_map -} %> +
        + <%= render partial: "partials/maps/main", locals: { + map: @main_map + } %> +
        <%= render "partials/carousels/themes" %> diff --git a/app/views/layouts/partials/_hero-thematic.html.erb b/app/views/layouts/partials/_hero-thematic.html.erb index 0dd4a56bc..56be33eb6 100644 --- a/app/views/layouts/partials/_hero-thematic.html.erb +++ b/app/views/layouts/partials/_hero-thematic.html.erb @@ -24,7 +24,7 @@
        % @@ -34,7 +34,7 @@
        @@ -43,7 +43,7 @@
        km2 diff --git a/app/views/marine/index.html.erb b/app/views/marine/index.html.erb index 022f53835..3edc1b7a0 100644 --- a/app/views/marine/index.html.erb +++ b/app/views/marine/index.html.erb @@ -57,9 +57,11 @@ regionCoverage: @regionCoverage, } %> -<%= render partial: "partials/maps/main", locals: { - map: @map -} %> +
        + <%= render partial: "partials/maps/main", locals: { + map: @map + } %> +
        <%= render partial: "partials/cards/sites", locals: { diff --git a/app/views/oecm/index.html.erb b/app/views/oecm/index.html.erb index c6cd4f9be..7dfbe5ed8 100644 --- a/app/views/oecm/index.html.erb +++ b/app/views/oecm/index.html.erb @@ -12,13 +12,11 @@ } %> -
        - <%= render partial: "partials/tabs/tabs-thematic-area-database", locals: { - config_search: @config_search_areas, - map: @map, - tabs: @tabs - } %> -
        +<%= render partial: "partials/tabs/tabs-thematic-area-database", locals: { + config_search: @config_search_areas, + map: @map, + tabs: @tabs +} %>
        <%= render "partials/cards/resources" %> diff --git a/app/views/partials/maps/_main.html.erb b/app/views/partials/maps/_main.html.erb index 0fa35adb2..8c58170b4 100644 --- a/app/views/partials/maps/_main.html.erb +++ b/app/views/partials/maps/_main.html.erb @@ -1,25 +1,24 @@ -
        -
        - - - - - - -
        -
        +
        + + + + + + +
        diff --git a/app/views/partials/tabs/_tabs-thematic-area-database.html.erb b/app/views/partials/tabs/_tabs-thematic-area-database.html.erb index 962a957aa..e0abf92cf 100644 --- a/app/views/partials/tabs/_tabs-thematic-area-database.html.erb +++ b/app/views/partials/tabs/_tabs-thematic-area-database.html.erb @@ -14,9 +14,11 @@
        - <%= render partial: "partials/maps/main", locals: { - map: map - } %> +
        + <%= render partial: "partials/maps/main", locals: { + map: map + } %> +
        diff --git a/app/views/search_areas/index.html.erb b/app/views/search_areas/index.html.erb index 4a998d331..0446b7c07 100644 --- a/app/views/search_areas/index.html.erb +++ b/app/views/search_areas/index.html.erb @@ -16,5 +16,11 @@ text-filters="<%= t('search.filters') %>" text-map="<%= t('search.map') %>" :results="<%= @results.to_json %>" - > + > + +
        \ No newline at end of file diff --git a/app/views/wdpa/index.html.erb b/app/views/wdpa/index.html.erb index 0bf264329..985ad6f46 100644 --- a/app/views/wdpa/index.html.erb +++ b/app/views/wdpa/index.html.erb @@ -12,13 +12,11 @@ } %> -
        - <%= render partial: "partials/tabs/tabs-thematic-area-database", locals: { - config_search: @config_search_areas, - map: @map, - tabs: @tabs - } %> -
        +<%= render partial: "partials/tabs/tabs-thematic-area-database", locals: { + config_search: @config_search_areas, + map: @map, + tabs: @tabs +} %>
        <%= render "partials/cards/resources" %> From 6e267d6bd73207efddc2fed236244d6018169c0d Mon Sep 17 00:00:00 2001 From: Will Kocur Date: Fri, 24 Jul 2020 15:11:37 +0100 Subject: [PATCH 165/222] style map popup --- app/assets/images/icons/pin-outline.svg | 14 +++++++ app/assets/images/icons/pin.svg | 13 ++++++ app/assets/stylesheets/base/_buttons.scss | 10 +++++ .../stylesheets/base/mixins/_icons.scss | 10 +++++ app/assets/stylesheets/components/_map.scss | 1 + .../components/maps/_v-map-popup.scss | 42 +++++++++++++++++++ app/javascript/components/map/MapTrigger.vue | 22 +++++++++- .../components/map/mixins/mixin-pa-popup.js | 40 +++++++++++++++++- .../components/search/SearchAreas.vue | 1 + config/locales/search/en.yml | 2 +- 10 files changed, 150 insertions(+), 5 deletions(-) create mode 100644 app/assets/images/icons/pin-outline.svg create mode 100644 app/assets/images/icons/pin.svg create mode 100644 app/assets/stylesheets/components/maps/_v-map-popup.scss diff --git a/app/assets/images/icons/pin-outline.svg b/app/assets/images/icons/pin-outline.svg new file mode 100644 index 000000000..664e3d49a --- /dev/null +++ b/app/assets/images/icons/pin-outline.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/app/assets/images/icons/pin.svg b/app/assets/images/icons/pin.svg new file mode 100644 index 000000000..4fd38c1de --- /dev/null +++ b/app/assets/images/icons/pin.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/app/assets/stylesheets/base/_buttons.scss b/app/assets/stylesheets/base/_buttons.scss index b3d3cf820..a40dc719e 100644 --- a/app/assets/stylesheets/base/_buttons.scss +++ b/app/assets/stylesheets/base/_buttons.scss @@ -134,7 +134,17 @@ $padding-medium: rem-calc(27); @mixin button-map-trigger { @include button-with-icon; @include button-outline; + white-space: nowrap; + &::after { @include icon-pin-outline; } + + &.active { + &::after { + @include icon-cross-small; + + width: rem-calc(14); + } + } } @mixin button-next { @include button-basic; } @mixin button-prev { @include button-basic; } diff --git a/app/assets/stylesheets/base/mixins/_icons.scss b/app/assets/stylesheets/base/mixins/_icons.scss index 86170d7d8..8ab7c3e70 100644 --- a/app/assets/stylesheets/base/mixins/_icons.scss +++ b/app/assets/stylesheets/base/mixins/_icons.scss @@ -82,6 +82,11 @@ $icon-search-width: rem-calc(21); @include icon-image('cross.svg', rem-calc(20), rem-calc(20)); } +@mixin icon-cross-small() { + @include icon-basic; + @include icon-image('cross.svg', rem-calc(11), rem-calc(11)); +} + @mixin icon-cross-white() { @include icon-basic; @include icon-image('cross-white.svg', rem-calc(20), rem-calc(20)); @@ -205,6 +210,11 @@ $icon-search-width: rem-calc(21); @include icon-image('pin-outline.svg', rem-calc(14), rem-calc(20)); } +@mixin icon-pin-map { + @include icon-basic; + @include icon-image('pin.svg', rem-calc(13), rem-calc(18)); +} + @mixin icon-placeholder-image() { @include icon-basic; @include icon-image('image.svg', rem-calc(114), rem-calc(91)); diff --git a/app/assets/stylesheets/components/_map.scss b/app/assets/stylesheets/components/_map.scss index 5ccc02923..7d7062f7f 100644 --- a/app/assets/stylesheets/components/_map.scss +++ b/app/assets/stylesheets/components/_map.scss @@ -4,6 +4,7 @@ @import 'maps/v-map-filters'; @import 'maps/v-map-header'; @import 'maps/v-map-pa-search'; +@import 'maps/v-map-popup'; @import 'maps/v-map-toggler'; .map-section { diff --git a/app/assets/stylesheets/components/maps/_v-map-popup.scss b/app/assets/stylesheets/components/maps/_v-map-popup.scss new file mode 100644 index 000000000..6a9912aa6 --- /dev/null +++ b/app/assets/stylesheets/components/maps/_v-map-popup.scss @@ -0,0 +1,42 @@ +.v-map-pin { + @include icon-pin-map; +} + +.mapboxgl-popup-anchor-top, +.mapboxgl-popup-anchor-top-right, +.mapboxgl-popup-anchor-top-left { + .mapboxgl-popup-tip { + border-bottom-color: $grey-xdark !important; + border-bottom-width: 6px; + } +} + +.mapboxgl-popup-anchor-right { + .mapboxgl-popup-tip { + border-left-color: $grey-xdark !important; + border-left-width: 6px; + } +} +.mapboxgl-popup-anchor-left { + .mapboxgl-popup-tip { + border-right-color: $grey-xdark !important; + border-right-width: 6px; + } +} +.mapboxgl-popup-anchor-bottom, +.mapboxgl-popup-anchor-bottom-right, +.mapboxgl-popup-anchor-bottom-left { + .mapboxgl-popup-tip { + border-top-color: $grey-xdark !important; + border-top-width: 6px; + } +} + +.mapboxgl-popup-content { + background-color: $grey-xdark !important; + color: $white !important; +} + +.mapboxgl-popup-close-button { + display: none !important; +} \ No newline at end of file diff --git a/app/javascript/components/map/MapTrigger.vue b/app/javascript/components/map/MapTrigger.vue index 678ab030b..f536dec48 100644 --- a/app/javascript/components/map/MapTrigger.vue +++ b/app/javascript/components/map/MapTrigger.vue @@ -1,6 +1,6 @@