diff --git a/.bowerrc b/.bowerrc deleted file mode 100644 index 3f18a85ed..000000000 --- a/.bowerrc +++ /dev/null @@ -1,4 +0,0 @@ -{ - "registry": "https://registry.bower.io", - "directory": "vendor/assets/bower_components" -} diff --git a/.dockerignore b/.dockerignore new file mode 100644 index 000000000..62e01a412 --- /dev/null +++ b/.dockerignore @@ -0,0 +1,6 @@ +.git* +log/* +tmp/* +Dockerfile +README.md +.env* diff --git a/.gitignore b/.gitignore index 2b0459be6..cc958c703 100644 --- a/.gitignore +++ b/.gitignore @@ -21,6 +21,12 @@ dump.rdb /public/assets .env -/vendor/assets/bower_components coverage node_modules +/public/packs +/public/packs-test +/node_modules +/yarn-error.log +yarn-debug.log* +.yarn-integrity +tmp/cache/webpacker \ No newline at end of file diff --git a/.ruby-version b/.ruby-version index eca07e4c1..ec1cf33c3 100644 --- a/.ruby-version +++ b/.ruby-version @@ -1 +1 @@ -2.1.2 +2.6.3 diff --git a/.travis.yml b/.travis.yml index cc349e4b0..298ba6eb4 100644 --- a/.travis.yml +++ b/.travis.yml @@ -23,12 +23,26 @@ before_install: - psql -c 'create database pp_test_backup' -U postgres - psql -c 'CREATE EXTENSION postgis;' -U postgres -d pp_test - psql -c 'CREATE EXTENSION postgis_topology;' -U postgres -d pp_test + - curl -s -O https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.0.1-amd64.deb + - sudo dpkg -i --force-confnew elasticsearch-7.0.1-amd64.deb + - sudo sed -i.old 's/-Xms1g/-Xms128m/' /etc/elasticsearch/jvm.options + - sudo sed -i.old 's/-Xmx1g/-Xmx128m/' /etc/elasticsearch/jvm.options + - echo -e '-XX:+DisableExplicitGC\n-Djdk.io.permissionsUseCanonicalPath=true\n-Dlog4j.skipJansi=true\n-server\n' | sudo tee -a /etc/elasticsearch/jvm.options + - sudo chown -R elasticsearch:elasticsearch /etc/default/elasticsearch + - sudo service elasticsearch start +install: + - nvm install node + - node -v + - npm i -g yarn + - yarn + - bundle install bundler_args: --without development production staging --jobs=6 rvm: - - 2.1.2 + - 2.6.3 before_script: + - sleep 10 - cp .env.example .env - - RAILS_ENV=test bundle exec rake db:migrate + - RAILS_ENV=test bundle exec rake db:drop db:create db:migrate notifications: email: - andrea.rossi@unep-wcmc.org @@ -45,4 +59,3 @@ addons: postgresql: 9.3 services: - redis-server - - elasticsearch diff --git a/CHANGELOG.md b/CHANGELOG.md index 6db1f94ac..d449fca81 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +### 3.0.0 + +* Upgrade to Rails 5.0.5 +* Add webpacker 4.0.2 +* Remove dependency on the protectedplanet-frontend repo and move styles in asset folder +* Add docker for local development + ### 2.6.1 * Add country, pame_country and marine stats (WDPA September 2019 release). diff --git a/Capfile b/Capfile index b28420c71..079c16d83 100644 --- a/Capfile +++ b/Capfile @@ -1,11 +1,24 @@ -require 'dotenv' -Dotenv.load - # Load DSL and set up stages -require 'capistrano/setup' +require "capistrano/setup" # Include default deployment tasks -require 'capistrano/deploy' +require "capistrano/deploy" + +# Load the SCM plugin appropriate to your project: +# +# require "capistrano/scm/hg" +# install_plugin Capistrano::SCM::Hg +# or +# require "capistrano/scm/svn" +# install_plugin Capistrano::SCM::Svn +# or +require "capistrano/scm/git" +install_plugin Capistrano::SCM::Git + + +require "capistrano/scm/git-with-submodules" +install_plugin Capistrano::SCM::Git::WithSubmodules + # Include tasks from other gems included in your Gemfile # @@ -18,16 +31,24 @@ require 'capistrano/deploy' # https://github.com/capistrano/rails # https://github.com/capistrano/passenger # -require 'capistrano/rvm' -# require 'capistrano/rbenv' -# require 'capistrano/chruby' -require 'capistrano/bundler' -require 'capistrano/rails/assets' -require 'capistrano/rails/migrations' -require 'capistrano/passenger' -require "whenever/capistrano" -require 'capistrano/sidekiq' +require "capistrano/rvm" +# require "capistrano/rbenv" +# require "capistrano/chruby" +require "capistrano/bundler" +require "capistrano/rails/assets" +require "capistrano/rails/migrations" +require "capistrano/passenger" require 'capistrano/maintenance' +require 'whenever/capistrano' +require 'capistrano/sidekiq' + + + + + + # Load custom tasks from `lib/capistrano/tasks` if you have any defined +# Load environment variables + Dir.glob('lib/capistrano/tasks/*.rake').each { |r| import r } diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 000000000..420af04ce --- /dev/null +++ b/Dockerfile @@ -0,0 +1,19 @@ +FROM unepwcmc/unepwcmc-geospatial-base:20190809 +LABEL maintainer="andrew.potter@unep-wcmc.org" + +USER unepwcmc + +WORKDIR /ProtectedPlanet +ADD Gemfile /ProtectedPlanet/Gemfile +ADD Gemfile.lock /ProtectedPlanet/Gemfile.lock +ADD package.json /ProtectedPlanet/package.json +ADD docker/scripts /ProtectedPlanet/docker/scripts + +COPY --chown=unepwcmc:unepwcmc . /ProtectedPlanet + +RUN /bin/bash -l -c "bundle install" +RUN /bin/bash -l -c "yarn install" + +EXPOSE 3000 + +CMD ["rails", "server", "-b", "0.0.0.0"] diff --git a/Gemfile b/Gemfile index 57464641c..d194a017c 100644 --- a/Gemfile +++ b/Gemfile @@ -1,73 +1,89 @@ source 'https://rubygems.org' -gem 'rails', '4.2.5.1' +gem 'rails', '5.0.5' +gem 'webpacker', '~> 4.0.2' -gem 'pg' -gem 'activerecord-postgis-adapter', '~> 3.1.0' -gem 'gdal', '~> 0.0.5' +gem 'pg', '~> 0.21' +gem 'activerecord-postgis-adapter', '~> 4.0.0' gem 'dbf', '~> 2.0.7' -gem 'rb-readline' +# +gem 'elasticsearch', '~> 7.2.0' +# +gem 'sass-rails', '~> 5.0.7' +gem 'sprockets-rails', '~> 3.2.1' -gem 'elasticsearch', '~> 5.0.3' - -gem 'bower-rails', '~> 0.10.0' -gem 'sass-rails', '~> 5.0.4' -gem 'sprockets-rails', '~> 2.3.3' gem 'uglifier', '~> 2.7.2' -gem 'coffee-rails', '~> 4.0.0' +gem 'coffee-rails', '~> 4.2.2' gem "autoprefixer-rails" -gem "exception_notification", '~> 4.1.4' +gem "exception_notification", '~> 4.3.0' gem "slack-notifier", "~> 1.5.1" - -gem 'jquery-rails', '~> 3.1.3' +# +gem 'jquery-rails', '~> 4.3.3' gem 'premailer-rails' - +# gem 'listen' gem 'levenshtein', '~> 0.2.2' -gem 'vuejs-rails', '~> 2.3.2', github: 'adambutler/vuejs-rails' +gem 'vuejs-rails', '~> 2.3.2' gem 'sprockets-vue', '~> 0.1.0' +gem 'rails-controller-testing' +gem 'gdal', '~> 2.0' +# group :production, :staging do # gem 'unicorn' gem 'dalli', '~> 2.7.2' gem 'rack-cache', '~> 1.2' end - +# group :development do gem 'spring' - gem 'capistrano', '~> 3.4', require: false - gem 'capistrano-rails', '~> 1.1', require: false - gem 'capistrano-bundler', '~> 1.1.4', require: false - gem 'capistrano-rvm', '~> 0.1', require: false - gem 'capistrano-sidekiq' - gem 'capistrano-maintenance', '~> 1.0', require: false - gem 'capistrano-passenger', '~> 0.2.0', require: false - gem 'byebug', '~> 3.1.2' + gem 'capistrano', '3.11.0', require: false + gem 'capistrano-rails', '1.4.0', require: false + gem 'capistrano-bundler', '1.6.0', require: false + gem 'capistrano-rvm', '0.1.2', require: false + gem 'capistrano-maintenance','1.2.1', require: false + gem 'capistrano-passenger', '0.2.0', require: false + gem 'capistrano-sidekiq','1.0.2' + gem 'capistrano-git-with-submodules', '2.0.3' + # gem 'listen', '~> 3.1.5' + # gem 'spring-watcher-listen', '~> 2.0.0' + # + # gem 'web-console', '>= 3.3.0' + # gem 'listen', '>= 3.0.5', '< 3.2' + # gem 'spring-watcher-listen', '~> 2.0.0' end group :test do gem 'factory_girl_rails', '~> 4.4.1' gem 'mocha', '~> 1.0.0' - gem 'webmock', '~> 1.18.0', require: false + gem 'webmock', '~> 1.22.0', require: false gem 'timecop', '~> 0.7.1' gem 'capybara', '~> 2.3.0' - gem 'codeclimate-test-reporter', require: nil + # gem 'codeclimate-test-reporter', require: nil + gem 'simplecov', require: false, group: :test + # gem 'simplecov-console' gem 'selenium-webdriver' + gem 'database_cleaner' end group :test, :development do - gem 'konacha' + #gem 'konacha' - TODO - NOT COMPATIBLE WITH RAILS 5 gem 'ejs' + # gem 'minitest', '5.10.3' # Explicit minitest version fixes test reporting errors + gem 'minitest', '~> 5.10', '!= 5.10.2' + gem 'byebug', '~> 9.0', '>= 9.0.5' + end + gem 'will_paginate', '~> 3.0' -gem 'aws-sdk', '~> 1.3.9' +gem 'aws-sdk', '3.0.1' # DRAMATIC CHANGES -gem 'httparty', '~> 0.13.1' +gem 'httparty', '~> 0.15.1' # FROM 13 to 15 BREAKING CHANGES gem 'httmultiparty', '~> 0.3.14' -gem 'sidekiq', '~> 3.5.3' +gem 'sidekiq', '~> 5.2.5' # DRAMATIC CHANGES gem 'sinatra', '>= 1.3.0', :require => nil gem 'whenever', require: false @@ -77,13 +93,14 @@ gem 'system' gem 'dotenv', '~> 0.11.1' gem 'dotenv-deployment' -gem 'best_in_place' -gem 'turnout', '~> 2.0.0' -gem 'bystander', github: 'unepwcmc/bystander' +gem 'best_in_place', '~> 3.0.1' +gem 'turnout', '~> 2.5.0' + +gem 'bystander', '2.0.0', git: 'https://github.com/unepwcmc/bystander' -gem 'devise', '~> 3.5.2' +gem 'devise', '~> 4.6.2' # MAJOR VERSION CHANGE, CHECK DOCS -gem 'comfortable_mexican_sofa', '~> 1.12.8' -gem 'nokogiri', '~> 1.6.7' +gem 'comfortable_mexican_sofa', '1.12.10' +gem 'nokogiri', '~> 1.10.1' gem 'tinymce-rails', '~> 4.3.2' gem 'phantompdf', '~> 1.2.2' diff --git a/Gemfile.lock b/Gemfile.lock index 551c9457a..aadaec462 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,11 +1,5 @@ GIT - remote: git://github.com/adambutler/vuejs-rails.git - revision: 79de9df9d8b494580ac36037b65e10e1b71e28a1 - specs: - vuejs-rails (2.3.2) - -GIT - remote: git://github.com/unepwcmc/bystander.git + remote: https://github.com/unepwcmc/bystander revision: 5293e96caec6257af5a280b41f0d0d6ed7910850 specs: bystander (2.0.0) @@ -14,134 +8,815 @@ GIT GEM remote: https://rubygems.org/ specs: - actionmailer (4.2.5.1) - actionpack (= 4.2.5.1) - actionview (= 4.2.5.1) - activejob (= 4.2.5.1) + actioncable (5.0.5) + actionpack (= 5.0.5) + nio4r (>= 1.2, < 3.0) + websocket-driver (~> 0.6.1) + actionmailer (5.0.5) + actionpack (= 5.0.5) + actionview (= 5.0.5) + activejob (= 5.0.5) mail (~> 2.5, >= 2.5.4) - rails-dom-testing (~> 1.0, >= 1.0.5) - actionpack (4.2.5.1) - actionview (= 4.2.5.1) - activesupport (= 4.2.5.1) - rack (~> 1.6) - rack-test (~> 0.6.2) - rails-dom-testing (~> 1.0, >= 1.0.5) + rails-dom-testing (~> 2.0) + actionpack (5.0.5) + actionview (= 5.0.5) + activesupport (= 5.0.5) + rack (~> 2.0) + rack-test (~> 0.6.3) + rails-dom-testing (~> 2.0) rails-html-sanitizer (~> 1.0, >= 1.0.2) - actionview (4.2.5.1) - activesupport (= 4.2.5.1) + actionview (5.0.5) + activesupport (= 5.0.5) builder (~> 3.1) erubis (~> 2.7.0) - rails-dom-testing (~> 1.0, >= 1.0.5) - rails-html-sanitizer (~> 1.0, >= 1.0.2) - active_link_to (1.0.3) + rails-dom-testing (~> 2.0) + rails-html-sanitizer (~> 1.0, >= 1.0.3) + active_link_to (1.0.5) actionpack - activejob (4.2.5.1) - activesupport (= 4.2.5.1) - globalid (>= 0.3.0) - activemodel (4.2.5.1) - activesupport (= 4.2.5.1) - builder (~> 3.1) - activerecord (4.2.5.1) - activemodel (= 4.2.5.1) - activesupport (= 4.2.5.1) - arel (~> 6.0) - activerecord-postgis-adapter (3.1.0) - activerecord (>= 4.2.0) - rgeo-activerecord (~> 4.0) - activesupport (4.2.5.1) + addressable + activejob (5.0.5) + activesupport (= 5.0.5) + globalid (>= 0.3.6) + activemodel (5.0.5) + activesupport (= 5.0.5) + activerecord (5.0.5) + activemodel (= 5.0.5) + activesupport (= 5.0.5) + arel (~> 7.0) + activerecord-postgis-adapter (4.0.5) + activerecord (~> 5.0.0) + rgeo-activerecord (~> 5.0.0) + activesupport (5.0.5) + concurrent-ruby (~> 1.0, >= 1.0.2) i18n (~> 0.7) - json (~> 1.7, >= 1.7.7) minitest (~> 5.1) - thread_safe (~> 0.3, >= 0.3.4) tzinfo (~> 1.1) - addressable (2.3.6) + addressable (2.6.0) + public_suffix (>= 2.0.2, < 4.0) + airbrussh (1.3.2) + sshkit (>= 1.6.1, != 1.7.0) appsignal (1.3.6) rack thread_safe - arel (6.0.3) - autoprefixer-rails (3.1.2.20141016) + arel (7.1.4) + autoprefixer-rails (9.4.10.2) execjs - aws-sdk (1.3.9) - httparty (~> 0.7) - json (~> 1.4) - nokogiri (>= 1.4.4) - uuidtools (~> 2.1) - bcrypt (3.1.10) - best_in_place (3.0.0) + aws-eventstream (1.0.2) + aws-partitions (1.144.0) + aws-sdk (3.0.1) + aws-sdk-resources (~> 3) + aws-sdk-acm (1.14.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-acmpca (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-alexaforbusiness (1.16.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-amplify (1.0.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-apigateway (1.23.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-apigatewaymanagementapi (1.0.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-apigatewayv2 (1.1.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-applicationautoscaling (1.19.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-applicationdiscoveryservice (1.11.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-appmesh (1.2.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-appstream (1.21.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-appsync (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-athena (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-autoscaling (1.15.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-autoscalingplans (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-backup (1.0.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-batch (1.12.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-budgets (1.15.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-chime (1.3.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-cloud9 (1.8.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-clouddirectory (1.11.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-cloudformation (1.14.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-cloudfront (1.11.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-cloudhsm (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-cloudhsmv2 (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-cloudsearch (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-cloudsearchdomain (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-cloudtrail (1.8.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-cloudwatch (1.14.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-cloudwatchevents (1.13.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-cloudwatchlogs (1.14.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-codebuild (1.29.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-codecommit (1.14.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-codedeploy (1.14.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-codepipeline (1.11.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-codestar (1.8.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-cognitoidentity (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-cognitoidentityprovider (1.12.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-cognitosync (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-comprehend (1.12.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-comprehendmedical (1.0.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-configservice (1.22.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-connect (1.10.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-core (3.46.2) + aws-eventstream (~> 1.0) + aws-partitions (~> 1.0) + aws-sigv4 (~> 1.0) + jmespath (~> 1.0) + aws-sdk-costandusagereportservice (1.7.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-costexplorer (1.18.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-databasemigrationservice (1.16.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-datapipeline (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-datasync (1.0.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-dax (1.8.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-devicefarm (1.16.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-directconnect (1.12.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-directoryservice (1.12.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-dlm (1.8.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-docdb (1.0.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-dynamodb (1.21.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-dynamodbstreams (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-ec2 (1.72.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-ecr (1.11.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-ecs (1.31.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-efs (1.10.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-eks (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-elasticache (1.10.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-elasticbeanstalk (1.16.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-elasticloadbalancing (1.8.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-elasticloadbalancingv2 (1.21.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-elasticsearchservice (1.16.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-elastictranscoder (1.7.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-emr (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-firehose (1.11.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-fms (1.8.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-fsx (1.1.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-gamelift (1.12.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-glacier (1.14.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-globalaccelerator (1.1.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-glue (1.25.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-greengrass (1.13.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-guardduty (1.11.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-health (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-iam (1.13.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-importexport (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv2 (~> 1.0) + aws-sdk-inspector (1.12.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-iot (1.25.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-iot1clickdevicesservice (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-iot1clickprojects (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-iotanalytics (1.12.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-iotdataplane (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-iotjobsdataplane (1.7.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-kafka (1.0.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-kinesis (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-kinesisanalytics (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-kinesisanalyticsv2 (1.0.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-kinesisvideo (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-kinesisvideoarchivedmedia (1.8.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-kinesisvideomedia (1.7.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-kms (1.13.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-lambda (1.18.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-lambdapreview (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-lex (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-lexmodelbuildingservice (1.12.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-licensemanager (1.0.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-lightsail (1.14.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-machinelearning (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-macie (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-marketplacecommerceanalytics (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-marketplaceentitlementservice (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-marketplacemetering (1.7.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-mediaconnect (1.1.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-mediaconvert (1.20.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-medialive (1.23.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-mediapackage (1.12.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-mediastore (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-mediastoredata (1.8.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-mediatailor (1.10.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-migrationhub (1.8.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-mobile (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-mq (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-mturk (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-neptune (1.7.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-opsworks (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-opsworkscm (1.12.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-organizations (1.19.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-pi (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-pinpoint (1.16.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-pinpointemail (1.2.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-pinpointsmsvoice (1.3.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-polly (1.15.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-pricing (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-quicksight (1.2.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-ram (1.1.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-rds (1.44.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-rdsdataservice (1.1.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-redshift (1.18.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-rekognition (1.19.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-resourcegroups (1.10.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-resourcegroupstaggingapi (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-resources (3.40.0) + aws-sdk-acm (~> 1) + aws-sdk-acmpca (~> 1) + aws-sdk-alexaforbusiness (~> 1) + aws-sdk-amplify (~> 1) + aws-sdk-apigateway (~> 1) + aws-sdk-apigatewaymanagementapi (~> 1) + aws-sdk-apigatewayv2 (~> 1) + aws-sdk-applicationautoscaling (~> 1) + aws-sdk-applicationdiscoveryservice (~> 1) + aws-sdk-appmesh (~> 1) + aws-sdk-appstream (~> 1) + aws-sdk-appsync (~> 1) + aws-sdk-athena (~> 1) + aws-sdk-autoscaling (~> 1) + aws-sdk-autoscalingplans (~> 1) + aws-sdk-backup (~> 1) + aws-sdk-batch (~> 1) + aws-sdk-budgets (~> 1) + aws-sdk-chime (~> 1) + aws-sdk-cloud9 (~> 1) + aws-sdk-clouddirectory (~> 1) + aws-sdk-cloudformation (~> 1) + aws-sdk-cloudfront (~> 1) + aws-sdk-cloudhsm (~> 1) + aws-sdk-cloudhsmv2 (~> 1) + aws-sdk-cloudsearch (~> 1) + aws-sdk-cloudsearchdomain (~> 1) + aws-sdk-cloudtrail (~> 1) + aws-sdk-cloudwatch (~> 1) + aws-sdk-cloudwatchevents (~> 1) + aws-sdk-cloudwatchlogs (~> 1) + aws-sdk-codebuild (~> 1) + aws-sdk-codecommit (~> 1) + aws-sdk-codedeploy (~> 1) + aws-sdk-codepipeline (~> 1) + aws-sdk-codestar (~> 1) + aws-sdk-cognitoidentity (~> 1) + aws-sdk-cognitoidentityprovider (~> 1) + aws-sdk-cognitosync (~> 1) + aws-sdk-comprehend (~> 1) + aws-sdk-comprehendmedical (~> 1) + aws-sdk-configservice (~> 1) + aws-sdk-connect (~> 1) + aws-sdk-costandusagereportservice (~> 1) + aws-sdk-costexplorer (~> 1) + aws-sdk-databasemigrationservice (~> 1) + aws-sdk-datapipeline (~> 1) + aws-sdk-datasync (~> 1) + aws-sdk-dax (~> 1) + aws-sdk-devicefarm (~> 1) + aws-sdk-directconnect (~> 1) + aws-sdk-directoryservice (~> 1) + aws-sdk-dlm (~> 1) + aws-sdk-docdb (~> 1) + aws-sdk-dynamodb (~> 1) + aws-sdk-dynamodbstreams (~> 1) + aws-sdk-ec2 (~> 1) + aws-sdk-ecr (~> 1) + aws-sdk-ecs (~> 1) + aws-sdk-efs (~> 1) + aws-sdk-eks (~> 1) + aws-sdk-elasticache (~> 1) + aws-sdk-elasticbeanstalk (~> 1) + aws-sdk-elasticloadbalancing (~> 1) + aws-sdk-elasticloadbalancingv2 (~> 1) + aws-sdk-elasticsearchservice (~> 1) + aws-sdk-elastictranscoder (~> 1) + aws-sdk-emr (~> 1) + aws-sdk-firehose (~> 1) + aws-sdk-fms (~> 1) + aws-sdk-fsx (~> 1) + aws-sdk-gamelift (~> 1) + aws-sdk-glacier (~> 1) + aws-sdk-globalaccelerator (~> 1) + aws-sdk-glue (~> 1) + aws-sdk-greengrass (~> 1) + aws-sdk-guardduty (~> 1) + aws-sdk-health (~> 1) + aws-sdk-iam (~> 1) + aws-sdk-importexport (~> 1) + aws-sdk-inspector (~> 1) + aws-sdk-iot (~> 1) + aws-sdk-iot1clickdevicesservice (~> 1) + aws-sdk-iot1clickprojects (~> 1) + aws-sdk-iotanalytics (~> 1) + aws-sdk-iotdataplane (~> 1) + aws-sdk-iotjobsdataplane (~> 1) + aws-sdk-kafka (~> 1) + aws-sdk-kinesis (~> 1) + aws-sdk-kinesisanalytics (~> 1) + aws-sdk-kinesisanalyticsv2 (~> 1) + aws-sdk-kinesisvideo (~> 1) + aws-sdk-kinesisvideoarchivedmedia (~> 1) + aws-sdk-kinesisvideomedia (~> 1) + aws-sdk-kms (~> 1) + aws-sdk-lambda (~> 1) + aws-sdk-lambdapreview (~> 1) + aws-sdk-lex (~> 1) + aws-sdk-lexmodelbuildingservice (~> 1) + aws-sdk-licensemanager (~> 1) + aws-sdk-lightsail (~> 1) + aws-sdk-machinelearning (~> 1) + aws-sdk-macie (~> 1) + aws-sdk-marketplacecommerceanalytics (~> 1) + aws-sdk-marketplaceentitlementservice (~> 1) + aws-sdk-marketplacemetering (~> 1) + aws-sdk-mediaconnect (~> 1) + aws-sdk-mediaconvert (~> 1) + aws-sdk-medialive (~> 1) + aws-sdk-mediapackage (~> 1) + aws-sdk-mediastore (~> 1) + aws-sdk-mediastoredata (~> 1) + aws-sdk-mediatailor (~> 1) + aws-sdk-migrationhub (~> 1) + aws-sdk-mobile (~> 1) + aws-sdk-mq (~> 1) + aws-sdk-mturk (~> 1) + aws-sdk-neptune (~> 1) + aws-sdk-opsworks (~> 1) + aws-sdk-opsworkscm (~> 1) + aws-sdk-organizations (~> 1) + aws-sdk-pi (~> 1) + aws-sdk-pinpoint (~> 1) + aws-sdk-pinpointemail (~> 1) + aws-sdk-pinpointsmsvoice (~> 1) + aws-sdk-polly (~> 1) + aws-sdk-pricing (~> 1) + aws-sdk-quicksight (~> 1) + aws-sdk-ram (~> 1) + aws-sdk-rds (~> 1) + aws-sdk-rdsdataservice (~> 1) + aws-sdk-redshift (~> 1) + aws-sdk-rekognition (~> 1) + aws-sdk-resourcegroups (~> 1) + aws-sdk-resourcegroupstaggingapi (~> 1) + aws-sdk-robomaker (~> 1) + aws-sdk-route53 (~> 1) + aws-sdk-route53domains (~> 1) + aws-sdk-route53resolver (~> 1) + aws-sdk-s3 (~> 1) + aws-sdk-s3control (~> 1) + aws-sdk-sagemaker (~> 1) + aws-sdk-sagemakerruntime (~> 1) + aws-sdk-secretsmanager (~> 1) + aws-sdk-securityhub (~> 1) + aws-sdk-serverlessapplicationrepository (~> 1) + aws-sdk-servicecatalog (~> 1) + aws-sdk-servicediscovery (~> 1) + aws-sdk-ses (~> 1) + aws-sdk-shield (~> 1) + aws-sdk-signer (~> 1) + aws-sdk-simpledb (~> 1) + aws-sdk-sms (~> 1) + aws-sdk-snowball (~> 1) + aws-sdk-sns (~> 1) + aws-sdk-sqs (~> 1) + aws-sdk-ssm (~> 1) + aws-sdk-states (~> 1) + aws-sdk-storagegateway (~> 1) + aws-sdk-support (~> 1) + aws-sdk-swf (~> 1) + aws-sdk-textract (~> 1) + aws-sdk-transcribeservice (~> 1) + aws-sdk-transfer (~> 1) + aws-sdk-translate (~> 1) + aws-sdk-waf (~> 1) + aws-sdk-wafregional (~> 1) + aws-sdk-workdocs (~> 1) + aws-sdk-worklink (~> 1) + aws-sdk-workmail (~> 1) + aws-sdk-workspaces (~> 1) + aws-sdk-xray (~> 1) + aws-sdk-robomaker (1.1.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-route53 (1.17.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-route53domains (1.8.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-route53resolver (1.1.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-s3 (1.31.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sdk-kms (~> 1) + aws-sigv4 (~> 1.0) + aws-sdk-s3control (1.1.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-sagemaker (1.29.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-sagemakerruntime (1.7.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-secretsmanager (1.21.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-securityhub (1.0.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-serverlessapplicationrepository (1.12.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-servicecatalog (1.16.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-servicediscovery (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-ses (1.14.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-shield (1.10.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-signer (1.5.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-simpledb (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv2 (~> 1.0) + aws-sdk-sms (1.7.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-snowball (1.11.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-sns (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-sqs (1.10.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-ssm (1.38.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-states (1.11.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-storagegateway (1.15.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-support (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-swf (1.6.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-textract (1.0.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-transcribeservice (1.13.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-transfer (1.1.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-translate (1.8.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-waf (1.13.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-wafregional (1.14.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-workdocs (1.9.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-worklink (1.0.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-workmail (1.7.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-workspaces (1.12.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sdk-xray (1.10.0) + aws-sdk-core (~> 3, >= 3.39.0) + aws-sigv4 (~> 1.0) + aws-sigv2 (1.0.1) + aws-sigv4 (1.1.0) + aws-eventstream (~> 1.0, >= 1.0.2) + bcrypt (3.1.13) + best_in_place (3.0.3) actionpack (>= 3.2) railties (>= 3.2) - bootstrap-sass (3.3.1.0) - sass (~> 3.2) - bootstrap_form (2.3.0) - bower-rails (0.10.0) - builder (3.2.2) - byebug (3.1.2) - columnize (~> 0.8) - debugger-linecache (~> 1.2) - capistrano (3.4.0) + bootstrap-sass (3.4.1) + autoprefixer-rails (>= 5.2.1) + sassc (>= 2.0.0) + bootstrap_form (4.2.0) + actionpack (>= 5.0) + activemodel (>= 5.0) + builder (3.2.3) + byebug (9.1.0) + capistrano (3.11.0) + airbrussh (>= 1.0.0) i18n rake (>= 10.0.0) - sshkit (~> 1.3) - capistrano-bundler (1.1.4) + sshkit (>= 1.9.0) + capistrano-bundler (1.6.0) capistrano (~> 3.1) - sshkit (~> 1.2) - capistrano-maintenance (1.0.0) + capistrano-git-with-submodules (2.0.3) + capistrano (~> 3.7) + capistrano-maintenance (1.2.1) capistrano (>= 3.0) capistrano-passenger (0.2.0) capistrano (~> 3.0) - capistrano-rails (1.1.5) + capistrano-rails (1.4.0) capistrano (~> 3.1) capistrano-bundler (~> 1.1) capistrano-rvm (0.1.2) capistrano (~> 3.0) sshkit (~> 1.2) - capistrano-sidekiq (0.3.3) - capistrano - sidekiq + capistrano-sidekiq (1.0.2) + capistrano (>= 3.9.0) + sidekiq (>= 3.4) capybara (2.3.0) mime-types (>= 1.16) nokogiri (>= 1.3.3) rack (>= 1.0.0) rack-test (>= 0.5.4) xpath (~> 2.0) - celluloid (0.17.2) - celluloid-essentials - celluloid-extras - celluloid-fsm - celluloid-pool - celluloid-supervision - timers (>= 4.1.1) - celluloid-essentials (0.20.5) - timers (>= 4.1.1) - celluloid-extras (0.20.5) - timers (>= 4.1.1) - celluloid-fsm (0.20.5) - timers (>= 4.1.1) - celluloid-pool (0.20.5) - timers (>= 4.1.1) - celluloid-supervision (0.20.5) - timers (>= 4.1.1) - childprocess (0.5.5) + childprocess (0.9.0) ffi (~> 1.0, >= 1.0.11) chronic (0.10.2) - climate_control (0.0.3) - activesupport (>= 3.0) - cocaine (0.5.8) - climate_control (>= 0.0.3, < 1.0) - codeclimate-test-reporter (0.3.0) - simplecov (>= 0.7.1, < 1.0.0) - codemirror-rails (5.6) - railties (>= 3.0, < 5) - coffee-rails (4.0.1) + climate_control (0.2.0) + codemirror-rails (5.16.0) + railties (>= 3.0, < 6.0) + coffee-rails (4.2.2) coffee-script (>= 2.2.0) - railties (>= 4.0.0, < 5.0) - coffee-script (2.2.0) + railties (>= 4.0.0) + coffee-script (2.4.1) coffee-script-source execjs - coffee-script-source (1.7.0) - colorize (0.7.3) - columnize (0.8.9) - comfortable_mexican_sofa (1.12.8) + coffee-script-source (1.12.2) + comfortable_mexican_sofa (1.12.10) active_link_to (>= 1.0.0) bootstrap-sass (>= 3.2.0) bootstrap_form (>= 2.2.0) @@ -153,323 +828,353 @@ GEM kramdown (>= 1.0.0) paperclip (>= 4.0.0) plupload-rails (>= 1.2.1) - rails (>= 4.0.0, < 5) + rails (>= 4.0.0, < 5.1) rails-i18n (>= 4.0.0) sass-rails (>= 4.0.3) - concurrent-ruby (1.0.0) - connection_pool (2.2.0) - crack (0.4.2) + concurrent-ruby (1.1.5) + connection_pool (2.2.2) + crack (0.4.3) safe_yaml (~> 1.0.0) - css_parser (1.3.5) + crass (1.0.4) + css_parser (1.7.0) addressable - dalli (2.7.2) - dbf (2.0.7) - fastercsv (~> 1.5.4) - debugger-linecache (1.2.0) - devise (3.5.2) + dalli (2.7.9) + database_cleaner (1.7.0) + dbf (2.0.13) + fastercsv (~> 1.5) + devise (4.6.2) bcrypt (~> 3.0) orm_adapter (~> 0.1) - railties (>= 3.2.6, < 5) + railties (>= 4.1.0, < 6.0) responders - thread_safe (~> 0.1) warden (~> 1.2.3) - docile (1.1.5) + docile (1.3.1) dotenv (0.11.1) dotenv-deployment (~> 0.0.2) dotenv-deployment (0.0.2) ejs (1.1.1) - elasticsearch (5.0.3) - elasticsearch-api (= 5.0.3) - elasticsearch-transport (= 5.0.3) - elasticsearch-api (5.0.3) + elasticsearch (7.2.1) + elasticsearch-api (= 7.2.1) + elasticsearch-transport (= 7.2.1) + elasticsearch-api (7.2.1) multi_json - elasticsearch-transport (5.0.3) + elasticsearch-transport (7.2.1) faraday multi_json erubis (2.7.0) - exception_notification (4.1.4) - actionmailer (~> 4.0) - activesupport (~> 4.0) - execjs (2.6.0) + exception_notification (4.3.0) + actionmailer (>= 4.0, < 6) + activesupport (>= 4.0, < 6) + execjs (2.7.0) factory_girl (4.4.0) activesupport (>= 3.0.0) factory_girl_rails (4.4.1) factory_girl (~> 4.4.0) railties (>= 3.0.0) - faraday (0.11.0) + faraday (0.15.4) multipart-post (>= 1.2, < 3) fastercsv (1.5.5) - ffi (1.9.6) - gdal (0.0.5) - globalid (0.3.6) - activesupport (>= 4.1.0) - haml (4.0.7) + ffi (1.10.0) + gdal (2.0.0) + globalid (0.4.2) + activesupport (>= 4.2.0) + haml (5.0.4) + temple (>= 0.8.0) tilt - haml-rails (0.9.0) + haml-rails (1.0.0) actionpack (>= 4.0.1) activesupport (>= 4.0.1) - haml (>= 4.0.6, < 5.0) + haml (>= 4.0.6, < 6.0) html2haml (>= 1.0.1) railties (>= 4.0.1) - hitimes (1.2.3) - html2haml (2.0.0) + hashdiff (0.3.8) + html2haml (2.2.0) erubis (~> 2.7.0) - haml (~> 4.0.0) - nokogiri (~> 1.6.0) + haml (>= 4.0, < 6) + nokogiri (>= 1.6.0) ruby_parser (~> 3.5) - htmlentities (4.3.2) - httmultiparty (0.3.14) + htmlentities (4.3.4) + httmultiparty (0.3.16) httparty (>= 0.7.3) mimemagic multipart-post - httparty (0.13.1) - json (~> 1.8) + httparty (0.15.7) multi_xml (>= 0.5.2) - i18n (0.7.0) - jquery-rails (3.1.4) - railties (>= 3.0, < 5.0) + i18n (0.9.5) + concurrent-ruby (~> 1.0) + jmespath (1.4.0) + jquery-rails (4.3.3) + rails-dom-testing (>= 1, < 3) + railties (>= 4.2.0) thor (>= 0.14, < 2.0) - jquery-ui-rails (5.0.5) + jquery-ui-rails (6.0.1) railties (>= 3.2.16) - json (1.8.3) - konacha (3.2.3) - actionpack (>= 3.1, < 5) - capybara - colorize - railties (>= 3.1, < 5) - sprockets - kramdown (1.9.0) + json (2.2.0) + kramdown (2.1.0) levenshtein (0.2.2) - loofah (2.0.3) + loofah (2.2.3) + crass (~> 1.0.2) nokogiri (>= 1.5.9) - mail (2.6.3) - mime-types (>= 1.16, < 3) + mail (2.7.1) + mini_mime (>= 0.1.1) metaclass (0.0.4) - mime-types (2.99) - mimemagic (0.2.1) - mini_portile2 (2.0.0) - minitest (5.8.4) + method_source (0.9.2) + mime-types (3.2.2) + mime-types-data (~> 3.2015) + mime-types-data (3.2018.0812) + mimemagic (0.3.3) + mini_mime (1.0.1) + mini_portile2 (2.4.0) + minitest (5.11.3) mocha (1.0.0) metaclass (~> 0.0.1) - multi_json (1.11.2) - multi_xml (0.5.5) + multi_json (1.13.1) + multi_xml (0.6.0) multipart-post (2.0.0) - net-scp (1.2.1) - net-ssh (>= 2.6.5) - net-ssh (3.0.1) - nokogiri (1.6.7.2) - mini_portile2 (~> 2.0.0.rc2) + mustermann (1.0.3) + net-scp (2.0.0) + net-ssh (>= 2.6.5, < 6.0.0) + net-ssh (5.2.0) + nio4r (2.3.1) + nokogiri (1.10.3) + mini_portile2 (~> 2.4.0) orm_adapter (0.5.0) - paperclip (4.2.4) - activemodel (>= 3.2.0) - activesupport (>= 3.2.0) - cocaine (~> 0.5.5) + paperclip (6.1.0) + activemodel (>= 4.2.0) + activesupport (>= 4.2.0) mime-types - pg (0.17.1) - phantomjs (1.9.8.0) + mimemagic (~> 0.3.0) + terrapin (~> 0.6.0) + pg (0.21.0) + phantomjs (2.1.1.0) phantompdf (1.2.2) json phantomjs rack plupload-rails (1.2.1) rails (>= 3.1) - premailer (1.8.2) - css_parser (>= 1.3.5) + premailer (1.11.1) + addressable + css_parser (>= 1.6.0) htmlentities (>= 4.0.0) - premailer-rails (1.8.0) - actionmailer (>= 3, < 5) + premailer-rails (1.10.2) + actionmailer (>= 3, < 6) premailer (~> 1.7, >= 1.7.9) - rack (1.6.4) + public_suffix (3.0.3) + rack (2.0.7) rack-accept (0.4.5) rack (>= 0.4) - rack-cache (1.2) + rack-cache (1.9.0) rack (>= 0.4) - rack-protection (1.5.3) + rack-protection (2.0.5) + rack + rack-proxy (0.6.5) rack rack-test (0.6.3) rack (>= 1.0) - rails (4.2.5.1) - actionmailer (= 4.2.5.1) - actionpack (= 4.2.5.1) - actionview (= 4.2.5.1) - activejob (= 4.2.5.1) - activemodel (= 4.2.5.1) - activerecord (= 4.2.5.1) - activesupport (= 4.2.5.1) - bundler (>= 1.3.0, < 2.0) - railties (= 4.2.5.1) - sprockets-rails - rails-deprecated_sanitizer (1.0.3) - activesupport (>= 4.2.0.alpha) - rails-dom-testing (1.0.7) - activesupport (>= 4.2.0.beta, < 5.0) - nokogiri (~> 1.6.0) - rails-deprecated_sanitizer (>= 1.0.1) - rails-html-sanitizer (1.0.3) - loofah (~> 2.0) - rails-i18n (4.0.7) - i18n (~> 0.7) - railties (~> 4.0) - railties (4.2.5.1) - actionpack (= 4.2.5.1) - activesupport (= 4.2.5.1) + rails (5.0.5) + actioncable (= 5.0.5) + actionmailer (= 5.0.5) + actionpack (= 5.0.5) + actionview (= 5.0.5) + activejob (= 5.0.5) + activemodel (= 5.0.5) + activerecord (= 5.0.5) + activesupport (= 5.0.5) + bundler (>= 1.3.0) + railties (= 5.0.5) + sprockets-rails (>= 2.0.0) + rails-controller-testing (1.0.4) + actionpack (>= 5.0.1.x) + actionview (>= 5.0.1.x) + activesupport (>= 5.0.1.x) + rails-dom-testing (2.0.3) + activesupport (>= 4.2.0) + nokogiri (>= 1.6) + rails-html-sanitizer (1.0.4) + loofah (~> 2.2, >= 2.2.2) + rails-i18n (5.1.3) + i18n (>= 0.7, < 2) + railties (>= 5.0, < 6) + railties (5.0.5) + actionpack (= 5.0.5) + activesupport (= 5.0.5) + method_source rake (>= 0.8.7) thor (>= 0.18.1, < 2.0) - rake (10.5.0) - rb-readline (0.5.5) - redis (3.2.1) - redis-namespace (1.5.2) - redis (~> 3.0, >= 3.0.4) - responders (2.1.0) - railties (>= 4.2.0, < 5) - rgeo (0.4.0) - rgeo-activerecord (4.0.0) - activerecord (~> 4.2) + rake (12.3.3) + rb-fsevent (0.10.3) + rb-inotify (0.10.0) + ffi (~> 1.0) + redis (4.1.0) + responders (3.0.0) + actionpack (>= 5.0) + railties (>= 5.0) + rgeo (0.6.0) + rgeo-activerecord (5.0.1) + activerecord (~> 5.0.0) rgeo (~> 0.3) - ruby_parser (3.7.2) - sexp_processor (~> 4.1) - rubyzip (1.1.6) - safe_yaml (1.0.3) - sass (3.4.19) - sass-rails (5.0.4) - railties (>= 4.0.0, < 5.0) + ruby_parser (3.13.0) + sexp_processor (~> 4.9) + rubyzip (1.2.2) + safe_yaml (1.0.5) + sass (3.7.3) + sass-listen (~> 4.0.0) + sass-listen (4.0.0) + rb-fsevent (~> 0.9, >= 0.9.4) + rb-inotify (~> 0.9, >= 0.9.7) + sass-rails (5.0.7) + railties (>= 4.0.0, < 6) sass (~> 3.1) sprockets (>= 2.8, < 4.0) sprockets-rails (>= 2.0, < 4.0) tilt (>= 1.1, < 3) - selenium-webdriver (2.43.0) + sassc (2.0.1) + ffi (~> 1.9) + rake + selenium-webdriver (3.141.0) childprocess (~> 0.5) - multi_json (~> 1.0) - rubyzip (~> 1.0) - websocket (~> 1.0) - sexp_processor (4.6.0) - sidekiq (3.5.3) - celluloid (~> 0.17.2) - connection_pool (~> 2.2, >= 2.2.0) - json (~> 1.0) - redis (~> 3.2, >= 3.2.1) - redis-namespace (~> 1.5, >= 1.5.2) - simplecov (0.8.2) - docile (~> 1.1.0) - multi_json - simplecov-html (~> 0.8.0) - simplecov-html (0.8.0) - sinatra (1.4.5) - rack (~> 1.4) - rack-protection (~> 1.4) - tilt (~> 1.3, >= 1.3.4) + rubyzip (~> 1.2, >= 1.2.2) + sexp_processor (4.12.0) + sidekiq (5.2.5) + connection_pool (~> 2.2, >= 2.2.2) + rack (>= 1.5.0) + rack-protection (>= 1.5.0) + redis (>= 3.3.5, < 5) + simplecov (0.16.1) + docile (~> 1.1) + json (>= 1.8, < 3) + simplecov-html (~> 0.10.0) + simplecov-html (0.10.2) + sinatra (2.0.5) + mustermann (~> 1.0) + rack (~> 2.0) + rack-protection (= 2.0.5) + tilt (~> 2.0) slack-notifier (1.5.1) - spring (1.1.2) - sprockets (3.5.2) + spring (2.0.2) + activesupport (>= 4.2) + sprockets (3.7.2) concurrent-ruby (~> 1.0) rack (> 1, < 3) - sprockets-rails (2.3.3) - actionpack (>= 3.0) - activesupport (>= 3.0) - sprockets (>= 2.8, < 4.0) + sprockets-rails (3.2.1) + actionpack (>= 4.0) + activesupport (>= 4.0) + sprockets (>= 3.0.0) sprockets-vue (0.1.0) actionview activesupport sprockets (>= 3.0.0) - sshkit (1.8.1) + sshkit (1.20.0) net-scp (>= 1.1.2) net-ssh (>= 2.8.0) system (0.1.3) version (~> 1.0.0) - thor (0.19.1) - thread_safe (0.3.5) - tilt (1.4.1) - timecop (0.7.1) - timers (4.1.1) - hitimes - tinymce-rails (4.3.2) + temple (0.8.1) + terrapin (0.6.0) + climate_control (>= 0.0.3, < 1.0) + thor (0.20.3) + thread_safe (0.3.6) + tilt (2.0.9) + timecop (0.7.4) + tinymce-rails (4.3.13) railties (>= 3.1.1) - turnout (2.0.0) - rack (~> 1.3) + turnout (2.5.0) + i18n (>= 0.7, < 2) + rack (>= 1.3, < 3) rack-accept (~> 0.4) - tzinfo (1.2.2) + tilt (>= 1.4, < 3) + tzinfo (1.2.5) thread_safe (~> 0.1) uglifier (2.7.2) execjs (>= 0.3.0) json (>= 1.8.0) - uuidtools (2.1.4) version (1.0.0) - warden (1.2.3) - rack (>= 1.0) - webmock (1.18.0) + vuejs-rails (2.3.2) + warden (1.2.8) + rack (>= 2.0.6) + webmock (1.22.6) addressable (>= 2.3.6) crack (>= 0.3.2) - websocket (1.2.1) - whenever (0.9.2) - activesupport (>= 2.3.4) + hashdiff + webpacker (4.0.2) + activesupport (>= 4.2) + rack-proxy (>= 0.6.1) + railties (>= 4.2) + websocket-driver (0.6.5) + websocket-extensions (>= 0.1.0) + websocket-extensions (0.1.4) + whenever (0.10.0) chronic (>= 0.6.3) - will_paginate (3.0.5) - xpath (2.0.0) + will_paginate (3.1.6) + xpath (2.1.0) nokogiri (~> 1.3) PLATFORMS ruby DEPENDENCIES - activerecord-postgis-adapter (~> 3.1.0) + activerecord-postgis-adapter (~> 4.0.0) appsignal (~> 1.3.6) autoprefixer-rails - aws-sdk (~> 1.3.9) - best_in_place - bower-rails (~> 0.10.0) - byebug (~> 3.1.2) - bystander! - capistrano (~> 3.4) - capistrano-bundler (~> 1.1.4) - capistrano-maintenance (~> 1.0) - capistrano-passenger (~> 0.2.0) - capistrano-rails (~> 1.1) - capistrano-rvm (~> 0.1) - capistrano-sidekiq + aws-sdk (= 3.0.1) + best_in_place (~> 3.0.1) + byebug (~> 9.0, >= 9.0.5) + bystander (= 2.0.0)! + capistrano (= 3.11.0) + capistrano-bundler (= 1.6.0) + capistrano-git-with-submodules (= 2.0.3) + capistrano-maintenance (= 1.2.1) + capistrano-passenger (= 0.2.0) + capistrano-rails (= 1.4.0) + capistrano-rvm (= 0.1.2) + capistrano-sidekiq (= 1.0.2) capybara (~> 2.3.0) - codeclimate-test-reporter - coffee-rails (~> 4.0.0) - comfortable_mexican_sofa (~> 1.12.8) + coffee-rails (~> 4.2.2) + comfortable_mexican_sofa (= 1.12.10) dalli (~> 2.7.2) + database_cleaner dbf (~> 2.0.7) - devise (~> 3.5.2) + devise (~> 4.6.2) dotenv (~> 0.11.1) dotenv-deployment ejs - elasticsearch (~> 5.0.3) - exception_notification (~> 4.1.4) + elasticsearch (~> 7.2.0) + exception_notification (~> 4.3.0) factory_girl_rails (~> 4.4.1) - gdal (~> 0.0.5) + gdal (~> 2.0) httmultiparty (~> 0.3.14) - httparty (~> 0.13.1) - jquery-rails (~> 3.1.3) - konacha + httparty (~> 0.15.1) + jquery-rails (~> 4.3.3) levenshtein (~> 0.2.2) + minitest (~> 5.10, != 5.10.2) mocha (~> 1.0.0) - nokogiri (~> 1.6.7) - pg + nokogiri (~> 1.10.1) + pg (~> 0.21) phantompdf (~> 1.2.2) premailer-rails rack-cache (~> 1.2) - rails (= 4.2.5.1) - rb-readline - sass-rails (~> 5.0.4) + rails (= 5.0.5) + rails-controller-testing + sass-rails (~> 5.0.7) selenium-webdriver - sidekiq (~> 3.5.3) + sidekiq (~> 5.2.5) + simplecov sinatra (>= 1.3.0) slack-notifier (~> 1.5.1) spring - sprockets-rails (~> 2.3.3) + sprockets-rails (~> 3.2.1) sprockets-vue (~> 0.1.0) system timecop (~> 0.7.1) tinymce-rails (~> 4.3.2) - turnout (~> 2.0.0) + turnout (~> 2.5.0) uglifier (~> 2.7.2) - vuejs-rails (~> 2.3.2)! - webmock (~> 1.18.0) + vuejs-rails (~> 2.3.2) + webmock (~> 1.22.0) + webpacker (~> 4.0.2) whenever will_paginate (~> 3.0) BUNDLED WITH - 1.16.1 + 1.17.3 diff --git a/README.md b/README.md index ddb4ef366..3962ccf54 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,16 @@ You can check out the previous version of Protected Planet on ## Topics +When you clone this repo please do it recursively. For the first time: +``` +git clone --recurse-submodules +``` + +If you already cloned it: +``` +git submodule update --init --recursive +``` + 1. [Getting Started and Configuration](docs/installation.md) 2. [Importing and Managing the WDPA](docs/wdpa.md) * [Automatic Import](docs/automatic_import.md) @@ -23,4 +33,109 @@ You can check out the previous version of Protected Planet on ## Licence Protected Planet is released under the [BSD -3-Clause](http://opensource.org/licenses/BSD-3-Clause) License. \ No newline at end of file +3-Clause](http://opensource.org/licenses/BSD-3-Clause) License. + +## Docker + +You need a `.env` file similar to this: + +``` +POSTGRES_USER=postgres +POSTGRES_PASSWORD=postgres +POSTGRES_HOST=protectedplanet-db +POSTGRES_MULTIPLE_EXTENSIONS=postgis,hstore,postgis_topology +REDIS_URL=redis://redis:6379/0 +RAILS_ENV=development +ELASTIC_SEARCH_URL=http://elastic:elastic@elasticsearch:9200 +xpack.security.enabled=false +discovery.type=single-node +``` + +The database is in a separate repo at the moment: +``` +git submodule foreach git pull origin master +``` + +To prepare the Docker environment: +``` +docker-compose build +``` + +To set-up the database +`docker-compose run web /bin/bash -l -c "rake db:create"` + +To import the database sql dump: +``` +docker-compose run -v ~/path/to/sql/dump:/import_database web bash -c "psql protectedplanet-db < /import_database/pp_development.sql -U postgres -h protectedplanet-db" +``` + +``` +docker-compose run web /bin/bash -l -c "rake db:migrate" +docker-compose run web /bin/bash -l -c "rake db:seed" +``` + +To install front end dependencies +``` +docker-compose run web /bin/bash -l -c "yarn install" +``` + +To precompile the assets +``` +docker-compose run web /bin/bash -l -c "rake assets:precompile" +``` + +To bring up the ProtectedPlanet website locally: +``` +docker-compose up +``` + +Visit: `http://localhost:3000` + +To shutdown: +``` +docker-compose down +``` + +To rebuild the Docker container after making changes: +``` +docker-compose up --build +``` + +To reindex the data in Elasticsearch: +``` +docker-compose run web /bin/bash -l -c "bundle exec rails c" +Search::Index.delete +Search::Index.create +``` + +For running tests, we have an additional table which must be created: +``` +docker-compose run web /bin/bash -l -c "rails dbconsole" +Password for user postgres: +psql (11.1) +Type "help" for help. + +protectedplanet-db=# CREATE DATABASE pp_test_backup; +CREATE DATABASE +``` + +Followed by: +``` +docker-compose run -e "RAILS_ENV=test" web /bin/bash -l -c "rake db:create db:migrate db:seed" +``` + +Finally to actually run the tests: +``` +docker-compose run -e "RAILS_ENV=test" web /bin/bash -l -c "rake test" +``` + +To backup a docker image to a tar file for sharing with others: +``` +docker save protectedplanet_web > protectedplanet_web.tar +``` + +You can then share this exact tar file with anyone else and they will have an exact copy of that version of that Dockerised ProtectedPlanet, through loading it: + +``` +docker load < protectedplanet_web.tar.gz +``` diff --git a/Rakefile b/Rakefile index 5bc4508ff..6495f1bcd 100644 --- a/Rakefile +++ b/Rakefile @@ -1,12 +1,14 @@ # Add your own tasks in files placed in lib/tasks ending in .rake, # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake. +require 'rake/testtask' require File.expand_path('../config/application', __FILE__) Rails.application.load_tasks -Rails::TestTask.new("test:acceptance" => "test:prepare") do |t| +Rake::TestTask.new("test:acceptance" => "test:prepare") do |t| t.pattern = "test/acceptance/**/*_test.rb" end Rake::Task["test:run"].enhance ["test:acceptance"] + diff --git a/app/assets/images/IUCN_logo.png b/app/assets/images/IUCN_logo.png new file mode 100644 index 000000000..84c48d614 Binary files /dev/null and b/app/assets/images/IUCN_logo.png differ diff --git a/app/assets/images/IUCN_logo@2x.png b/app/assets/images/IUCN_logo@2x.png new file mode 100644 index 000000000..9a3063bb5 Binary files /dev/null and b/app/assets/images/IUCN_logo@2x.png differ diff --git a/app/assets/images/background.jpg b/app/assets/images/background.jpg new file mode 100644 index 000000000..619dea8ef Binary files /dev/null and b/app/assets/images/background.jpg differ diff --git a/app/assets/images/hand-solo.png b/app/assets/images/hand-solo.png new file mode 100644 index 000000000..a6ca5fd03 Binary files /dev/null and b/app/assets/images/hand-solo.png differ diff --git a/app/assets/images/hero/hero-marine-min.jpg b/app/assets/images/hero/hero-marine-min.jpg new file mode 100644 index 000000000..21653910b Binary files /dev/null and b/app/assets/images/hero/hero-marine-min.jpg differ diff --git a/app/assets/images/icon-search-grey.png b/app/assets/images/icon-search-grey.png new file mode 100644 index 000000000..fc3d21808 Binary files /dev/null and b/app/assets/images/icon-search-grey.png differ diff --git a/app/assets/images/icon-search.png b/app/assets/images/icon-search.png new file mode 100644 index 000000000..ed30b5d41 Binary files /dev/null and b/app/assets/images/icon-search.png differ diff --git a/app/assets/images/logo-grey.png b/app/assets/images/logo-grey.png new file mode 100644 index 000000000..5ac3c649a Binary files /dev/null and b/app/assets/images/logo-grey.png differ diff --git a/app/assets/images/logo-white-nowrap.png b/app/assets/images/logo-white-nowrap.png new file mode 100644 index 000000000..44983b20f Binary files /dev/null and b/app/assets/images/logo-white-nowrap.png differ diff --git a/app/assets/images/pp-home-banner.jpeg b/app/assets/images/pp-home-banner.jpeg new file mode 100644 index 000000000..bfc7dfd1d Binary files /dev/null and b/app/assets/images/pp-home-banner.jpeg differ diff --git a/app/assets/javascripts/base.js b/app/assets/javascripts/base.js index 73f832f63..43def1958 100644 --- a/app/assets/javascripts/base.js +++ b/app/assets/javascripts/base.js @@ -1,5 +1,4 @@ //= require 'require' -//= require REM-unit-polyfill/js/rem.min.js //= require jquery //= require jquery_ujs //= require 'jquery.tablesorter.min' diff --git a/app/assets/javascripts/content.js b/app/assets/javascripts/content.js index d781b49f0..68e296930 100644 --- a/app/assets/javascripts/content.js +++ b/app/assets/javascripts/content.js @@ -2,5 +2,4 @@ //= require 'base' //= require 'modules/cms/article_navigation' //= require 'modules/cms/external_links' -//= require 'modules/cms/base' -//= require vue/components/SelectWithContent \ No newline at end of file +//= require 'modules/cms/base' \ No newline at end of file diff --git a/app/assets/javascripts/country.js b/app/assets/javascripts/country.js index ec43b501e..78c15508c 100644 --- a/app/assets/javascripts/country.js +++ b/app/assets/javascripts/country.js @@ -1,4 +1,2 @@ //= require 'base' -//= require 'select2' -//= require 'modules/country/base' //= require 'modules/shared/stats' diff --git a/app/assets/javascripts/home.js b/app/assets/javascripts/home.js index fd61511b4..d9faf168c 100644 --- a/app/assets/javascripts/home.js +++ b/app/assets/javascripts/home.js @@ -1,6 +1 @@ -//= require 'vue' -//= require base -//= require 'modules/home/base' -//= require 'vue/components/carousel/carousel-helpers' -//= require vue/components/carousel/Carousel -//= require vue/components/carousel/CarouselSlide \ No newline at end of file +//= require base \ No newline at end of file diff --git a/app/assets/javascripts/map.js b/app/assets/javascripts/map.js index 92a3765c7..25ee65df1 100644 --- a/app/assets/javascripts/map.js +++ b/app/assets/javascripts/map.js @@ -1,6 +1,5 @@ //= require 'mapbox' //= require 'cartodb.core' -//= require 'leaflet.markercluster' //= require 'modules/maps/base_layer' //= require 'modules/maps/interactive' //= require 'modules/maps/bounds' diff --git a/app/assets/javascripts/marine.js b/app/assets/javascripts/marine.js index deafea574..2fb79480b 100644 --- a/app/assets/javascripts/marine.js +++ b/app/assets/javascripts/marine.js @@ -1,21 +1,4 @@ -//= require vue -//= require d3 -//= require scrollmagic -//= require vue/charts/HorizontalBarChart -//= require vue/charts/interactive_multiline/TabTitle -//= require vue/charts/interactive_multiline/InteractiveMultiline -//= require vue/charts/Sunburst -//= require vue/charts/Treemap -//= require vue/components/Counter -//= require vue/components/horizontal_bars/HorizontalBar -//= require vue/components/horizontal_bars/HorizontalBars -//= require vue/components/InteractiveTreemap -//= require vue/components/rectangles/Rectangle -//= require vue/components/rectangles/Rectangles -//= require vue/components/StickyNav -//= require vue/components/StickyTab -//= require vue/components/TwitterShare -//= require 'require' +//= require 'require' //= require jquery //= require 'map' //= require modules/marine/base diff --git a/app/assets/javascripts/modules/cms/base.js.coffee b/app/assets/javascripts/modules/cms/base.js.coffee index a502ddedd..4ffeb84a1 100644 --- a/app/assets/javascripts/modules/cms/base.js.coffee +++ b/app/assets/javascripts/modules/cms/base.js.coffee @@ -17,12 +17,4 @@ $(document).ready( -> $(window).scroll(setPosition) setPosition() ) - - # generate a new vue instance and initialise all the vue components on the page - new Vue({ - el: '.v-cms-content', - components: { - 'select-with-content': VComponents['vue/components/SelectWithContent'] - } - }) ) diff --git a/app/assets/javascripts/modules/country/base.js.coffee b/app/assets/javascripts/modules/country/base.js.coffee deleted file mode 100644 index 92784f845..000000000 --- a/app/assets/javascripts/modules/country/base.js.coffee +++ /dev/null @@ -1,11 +0,0 @@ -$(document).ready( -> - $countriesSelect = $('#countries-select') - return false if $countriesSelect.length == 0 - - $countriesSelect.select2(containerCss: {width: '200px'}) - $countriesSelect.on 'change', (ev) -> - iso = $('.factsheet').data('countryIso') - iso_to_compare = ev.added.id - - window.location = "/country/#{iso}/compare/#{iso_to_compare}" -) diff --git a/app/assets/javascripts/modules/home/base.js.coffee b/app/assets/javascripts/modules/home/base.js.coffee deleted file mode 100644 index edd76ce2a..000000000 --- a/app/assets/javascripts/modules/home/base.js.coffee +++ /dev/null @@ -1,9 +0,0 @@ -$(document).ready( -> - new Vue({ - el: '.home-parent', - components: { - 'carousel': VComponents['vue/components/carousel/Carousel'] - 'carousel-slide': VComponents['vue/components/carousel/CarouselSlide'] - } - }) -) diff --git a/app/assets/javascripts/modules/marine/base.js.coffee b/app/assets/javascripts/modules/marine/base.js.coffee index 90c696621..061fc2c3a 100644 --- a/app/assets/javascripts/modules/marine/base.js.coffee +++ b/app/assets/javascripts/modules/marine/base.js.coffee @@ -6,42 +6,4 @@ $(document).ready( -> mapMarine.render() ) - # generate a new vue instance and initialise all the vue components on the page - new Vue({ - el: '.v-marine', - components: { - 'horizontal-bar-chart': VComponents['vue/charts/HorizontalBarChart'], - 'interactive-multiline': VComponents['vue/charts/interactive_multiline/InteractiveMultiline'], - 'sunburst': VComponents['vue/charts/Sunburst'], - 'treemap': VComponents['vue/charts/Treemap'], - 'counter': VComponents['vue/components/Counter'], - 'horizontal-bars': VComponents['vue/components/horizontal_bars/HorizontalBars'], - 'interactive-treemap': VComponents['vue/components/InteractiveTreemap'], - 'rectangles': VComponents['vue/components/rectangles/Rectangles'], - 'sticky-nav': VComponents['vue/components/StickyNav'], - 'sticky-tab': VComponents['vue/components/StickyTab'], - 'twitter-share': VComponents['vue/components/TwitterShare'] - } - }) - - # generate triggers for animations using scroll magic - # controller - marineScrollMagic = new ScrollMagic.Controller() - - # scenes - new ScrollMagic.Scene({ triggerElement: '.sm-infographic', reverse: false }) - .setClassToggle('.sm-infographic .infographic__bar--pa', 'infographic__bar--pa--animate') - .addTo(marineScrollMagic) - - new ScrollMagic.Scene({ triggerElement: '.sm-bar-chart', reverse: false }) - .setClassToggle('.sm-bar-chart', 'd3-horizontal-bar-chart-animate') - .addTo(marineScrollMagic) - - new ScrollMagic.Scene({ triggerElement: '.sm-size-distribution', reverse: false }) - .setClassToggle('.sm-size-distribution .sm-bar', 'v-horizontal-bars__bar-wrapper-animate') - .addTo(marineScrollMagic) - - new ScrollMagic.Scene({ triggerElement: '.sm-size-distribution', reverse: false }) - .setClassToggle('.sm-size-distribution .sm-rectangle', 'v-rectangles__rectangle-animate') - .addTo(marineScrollMagic) ) \ No newline at end of file diff --git a/app/assets/javascripts/region.js b/app/assets/javascripts/region.js index 3279dd0dd..78c15508c 100644 --- a/app/assets/javascripts/region.js +++ b/app/assets/javascripts/region.js @@ -1,3 +1,2 @@ //= require 'base' -//= require 'select2' //= require 'modules/shared/stats' diff --git a/app/assets/javascripts/vue/components/carousel/Carousel.vue b/app/assets/javascripts/vue/components/carousel/Carousel.vue deleted file mode 100644 index 81649caf3..000000000 --- a/app/assets/javascripts/vue/components/carousel/Carousel.vue +++ /dev/null @@ -1,277 +0,0 @@ - - - diff --git a/app/assets/javascripts/vue/components/carousel/CarouselSlide.vue b/app/assets/javascripts/vue/components/carousel/CarouselSlide.vue deleted file mode 100644 index 0ceac1c08..000000000 --- a/app/assets/javascripts/vue/components/carousel/CarouselSlide.vue +++ /dev/null @@ -1,51 +0,0 @@ - - - \ No newline at end of file diff --git a/app/assets/javascripts/vue/components/horizontal_bars/HorizontalBars.vue b/app/assets/javascripts/vue/components/horizontal_bars/HorizontalBars.vue deleted file mode 100644 index 18ffdc6d0..000000000 --- a/app/assets/javascripts/vue/components/horizontal_bars/HorizontalBars.vue +++ /dev/null @@ -1,54 +0,0 @@ - - - diff --git a/app/assets/javascripts/vue/components/rectangles/Rectangles.vue b/app/assets/javascripts/vue/components/rectangles/Rectangles.vue deleted file mode 100644 index 62fea8574..000000000 --- a/app/assets/javascripts/vue/components/rectangles/Rectangles.vue +++ /dev/null @@ -1,62 +0,0 @@ - - - \ No newline at end of file diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss index eb7ab57bf..e1f87df00 100644 --- a/app/assets/stylesheets/application.scss +++ b/app/assets/stylesheets/application.scss @@ -11,21 +11,159 @@ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new * file per style scope. * - *= require 'protectedplanet-frontend/dist/style/main' - *= require 'custom' - *= require_self + * *= require_self */ +// grids +@import 'bourbon/core/bourbon'; +@import 'bourbon-neat/app/assets/stylesheets/neat'; + +// // maps +@import 'leaflet/dist/leaflet'; + @import './resources/**/*'; -@import './map/custom-leaflet'; +// development mixins +@import 'utilities/flexbox'; +@import 'utilities/accessibility'; +@import 'utilities/bem'; +@import 'utilities/rem-calc'; +@import 'utilities/responsive'; + +// variables +@import 'variables/colors'; +@import 'variables/dimensions'; +@import 'variables/font-faces'; +@import 'variables/fonts'; +@import 'variables/z-index'; +// variables + +// atoms +@import 'atoms/fonts'; +@import 'atoms/fa'; + +@import 'atoms/colors'; +@import 'atoms/buttons'; +@import 'atoms/disclaimer'; +@import 'atoms/headers'; +@import 'atoms/icons'; +@import 'atoms/label'; +@import 'atoms/leaflet-controls'; +@import 'atoms/links'; +@import 'atoms/logos'; +@import 'atoms/overlay'; +@import 'atoms/small-text'; +@import 'atoms/text'; +// atoms + +// molecules +@import 'molecules/accordion'; +@import 'molecules/animated-loader'; +@import 'molecules/alert'; +@import 'molecules/attribute'; +@import 'molecules/big-button'; +@import 'molecules/breadcrumbs'; +@import 'molecules/burger'; +@import 'molecules/carousel'; +@import 'molecules/circle-story'; +@import 'molecules/close-button'; +@import 'molecules/counter'; +@import 'molecules/cube'; +@import 'molecules/dropdown'; +@import 'molecules/expandable-section'; // DEPRECATED, use accordion +@import 'molecules/fullscreen'; +@import 'molecules/fullscreen-message'; +@import 'molecules/header-with-image'; +@import 'molecules/home-banner'; +@import 'molecules/home-carousel'; +@import 'molecules/horizontal-bar'; +@import 'molecules/horizontal-bars'; +@import 'molecules/key'; +@import 'molecules/link-with-icon'; +@import 'molecules/map'; +@import 'molecules/modal'; +@import 'molecules/pa-card'; +@import 'molecules/rectangles'; +@import 'molecules/reference'; +@import 'molecules/select-with-content'; +@import 'molecules/search-bar'; +@import 'molecules/social'; +@import 'molecules/stats'; +@import 'molecules/sticky-nav'; +@import 'molecules/sticky-tab'; +@import 'molecules/table'; +@import 'molecules/tooltip'; +@import 'molecules/twitter-share'; +@import 'molecules/uservoice'; +@import 'molecules/value'; +// molecules -@import './variables/*'; +// organisms +@import 'organisms/hero'; +@import 'organisms/cover-story'; +@import 'organisms/section'; +@import 'organisms/navbar'; +@import 'organisms/autocompletion'; +@import 'organisms/fact'; +@import 'organisms/filter-bar'; +@import 'organisms/footer'; +@import 'organisms/form'; +@import 'organisms/info-box'; +@import 'organisms/gallery'; +@import 'organisms/key-records'; +@import 'organisms/search-result'; +@import 'organisms/stats-card'; +@import 'organisms/row'; +@import 'organisms/article'; +@import 'organisms/vertical-nav'; +@import 'organisms/container'; +@import 'organisms/tabs'; +// organisms -@import './utilities/*'; +// old pp assets +@import 'old/neat-grid'; +@import 'old/transitions'; +@import 'old/leaflet_overrides'; +@import 'old/map'; +@import 'old/base'; +@import 'old/search_bar'; +@import 'old/buttons'; +@import 'old/home'; +@import 'old/protected_areas'; +@import 'old/projects'; +@import 'old/search'; +@import 'old/devise'; +@import 'old/static_pages'; +// old pp assets -@import './atoms/*'; +// scopes +@import 'scopes/article'; +@import 'scopes/form'; +// scopes -@import './organisms/*'; +// utilities +@import 'utilities/keyframes'; +@import 'utilities/reset'; +@import 'utilities/grid'; +@import 'utilities/html-elements'; +// utilities + +//templates +@import 'templates/marine'; +@import 'templates/site'; +//templates + +//charts +@import 'charts/horizontal-bar-chart'; +@import 'charts/interactive-multiline'; +@import 'charts/interactive-treemap'; +@import 'charts/sunburst'; +//charts + +@import 'utilities/u-classes'; + +@import 'custom'; + +@import './map/custom-leaflet'; @import './helpers/*'; \ No newline at end of file diff --git a/app/assets/stylesheets/atoms/buttons.scss b/app/assets/stylesheets/atoms/buttons.scss new file mode 100644 index 000000000..717d7410f --- /dev/null +++ b/app/assets/stylesheets/atoms/buttons.scss @@ -0,0 +1,83 @@ +%show-hide-styles { + @include font-weight(bold); + + border: solid rem-calc(2) $button--hide-border-color; + border-radius: rem-calc(4); + font-family: 'MuseoSlab'; + font-size: rem-calc(15); + color: $button--hide-color; + padding: rem-calc(0 18); + + &:before { + @include text--icon(body); + + margin-right: rem-calc(8); + } +} + +.button { + &--basic-link { + text-decoration: none; + + &:hover { text-decoration: underline; } + } + + &--green-link { + color: $green; + + &:hover { text-decoration: underline; } + } + + &--grey { + @include font-weight(bold); + + border: solid rem-calc(2) $button--grey-border-color; + border-radius: rem-calc(4); + color: $button--grey-text-color; + font-family: 'MuseoSlab'; + font-size: rem-calc(15); + padding: rem-calc(6 16); + } + + &--hide { + @extend %show-hide-styles; + + &:before { content: '\f070'; } + } + + &--show { + @extend %show-hide-styles; + + &:before { content: '\f06e'; } + } + + &--fullscreen { + background-color: $white; + color: $button--grey-text-color; + font-size: rem-calc(18); + line-height: rem-calc(18); + text-align: center; + width: rem-calc(40); height: rem-calc(40); + + position: absolute; + + &:hover { + background-color: $button--fullscreen-hover-color; + } + } + + &--external { + color: $button--external-color; + text-decoration: none; + + display: block; + + &:before { + @extend .u-font-icon; + content: '\f14c'; + margin-right: rem-calc(8); + } + + &:hover { text-decoration: underline; } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/atoms/colors.scss b/app/assets/stylesheets/atoms/colors.scss index dd1041532..3bc108a7f 100644 --- a/app/assets/stylesheets/atoms/colors.scss +++ b/app/assets/stylesheets/atoms/colors.scss @@ -21,4 +21,4 @@ 'visited:active': $link__color--pressed, visited: $link__color--visited, )); -} +} \ No newline at end of file diff --git a/app/assets/stylesheets/atoms/disclaimer.scss b/app/assets/stylesheets/atoms/disclaimer.scss new file mode 100644 index 000000000..18f8eae8c --- /dev/null +++ b/app/assets/stylesheets/atoms/disclaimer.scss @@ -0,0 +1,66 @@ +@include b(disclaimer) { + cursor: pointer; + + @include color($color--map-disclaimer-text); + @include text--alt(small, thin); + + background: $color--map-disclaimer-bg; + display: block; + padding: rem-calc(5 96 16 96); + text-align: center; + width: 100%; + z-index: $z-index-10; + + @include only-mobile { + padding: rem-calc(8 16); + font-size: rem-calc(8); + line-height: 1.5; + } + + @include e(arrow) { + content: ""; + width: 0; + height: 0; + border-left: rem-calc(35) solid transparent; + border-right: rem-calc(35) solid transparent; + border-top: rem-calc(25) solid #f2f2f2; + top: 100%; + position: absolute; + left: 50%; + margin-left: rem-calc(-35); + + @include only-mobile { + border-left: rem-calc(25) solid transparent; + border-right: rem-calc(25) solid transparent; + border-top: rem-calc(20) solid #f2f2f2; + margin-left: rem-calc(-25); + } + } + + @include e(arrow-inner) { + position: relative; + + &:before { + content: ""; + width: 0; + height: 0; + border-left: rem-calc(5) solid transparent; + border-right: rem-calc(5) solid transparent; + border-top: rem-calc(6) solid #333; + bottom: rem-calc(13); + position: absolute; + left: rem-calc(-5); + } + &:after { + content: ""; + width: 0; + height: 0; + border-left: rem-calc(6) solid transparent; + border-right: rem-calc(6) solid transparent; + border-top: rem-calc(6) solid #f2f2f2; + bottom: rem-calc(15); + position: absolute; + left: rem-calc(-6); + } + } +} diff --git a/app/assets/stylesheets/atoms/fa.scss b/app/assets/stylesheets/atoms/fa.scss new file mode 100644 index 000000000..ea870e147 --- /dev/null +++ b/app/assets/stylesheets/atoms/fa.scss @@ -0,0 +1,21 @@ +@mixin fa($icon, $margin: null) { + $unicodes: ( + external-link: "\f08e", + external-link-square: "\f14c", + arrow-up: "\f0de", + arrow-down: "\f0dd", + arrow-both: "\f0dc", + chevron-down: "\f078", + chevron-up: "\f077", + plus-circle: "\f055", + minus-circle: "\f056", + search: "\f002", + ); + + content: map-get($unicodes, $icon); + font-family: 'FontAwesome'; + + @if($margin != null) { + margin-#{map-get($margin, direction)}: map-get($margin, value); + } +} diff --git a/app/assets/stylesheets/atoms/headers.scss b/app/assets/stylesheets/atoms/headers.scss new file mode 100644 index 000000000..5d75cbc65 --- /dev/null +++ b/app/assets/stylesheets/atoms/headers.scss @@ -0,0 +1,104 @@ +@mixin header-with-delimiter($border-bottom: ($color, $size)) { + @extend %color-base; + @include text(headline, thin); + + padding-bottom: rem-calc(4); + + border-bottom: solid + map-get($border-bottom, color) + map-get($border-bottom, size); +} + +@include b(header-with-delimiter) { + margin-bottom: rem-calc(10); + @include header-with-delimiter( + $border-bottom: (color: $grey-33, size: 1px) + ); + + @include m(bold) { @include font-weight(normal); } + @include m(smaller) { @include text(body, null); } + @include m(bigger) { @include text(medium, null); } + + @include m(no-margin-bottom) { margin-bottom: 0; } + + @include m(same-padding-margin) { + margin-bottom: rem-calc(12); + padding-bottom: rem-calc(12); + } +} + +//---------------------------------------- +// placeholder selectors +//---------------------------------------- +%header--h1-insights { + color: white; + font-family: 'MuseoSans'; + font-size: rem-calc(38); + padding: rem-calc(14 18); + + display: inline-block; +} + +//---------------------------------------- +// header classes +//---------------------------------------- +.header { + &--h1-insights { + @extend %header--h1-insights; + text-transform: uppercase; + + @include breakpoint($medium){ font-size: rem-calc(52); } + @include breakpoint($large){ font-size: rem-calc(64); } + } + + &--h1-insights-small { + @extend %header--h1-insights; + font-size: rem-calc(24); + + @include breakpoint($medium){ font-size: rem-calc(38); } + @include breakpoint($large){ font-size: rem-calc(48); } + } + + &--h1-small { + @include color($color--base); + @include text(large); + + margin-top: rem-calc(30); + margin-bottom: rem-calc(10); + + a { color: $link--color; } + } + + &--h2-insights { + border-bottom: solid rem-calc(1) $blue--marine-5; + font-family: 'MuseoSans'; + font-size: rem-calc(32); + font-weight: $thin; + padding-bottom: .5em; + margin-bottom: .83em; + + @include breakpoint($medium){ font-size: rem-calc(40); } + @include breakpoint($large){ font-size: rem-calc(48); } + } + + &--section { + @extend .fact__header; + margin-top: rem-calc(25); + margin-bottom: rem-calc(25); + } + + &--small { + border-bottom: solid $grey-33 rem-calc(1); + font-family: 'MuseoSans'; + font-size: rem-calc(16); + } + + &--h3-insights { + border-bottom: solid $blue--marine-5 rem-calc(1); + font-family: 'MuseoSans'; + font-size: rem-calc(16); + line-height: 1.2; + margin-bottom: rem-calc(18); + padding-bottom: rem-calc(6); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/atoms/icons.scss b/app/assets/stylesheets/atoms/icons.scss new file mode 100644 index 000000000..af86e7bba --- /dev/null +++ b/app/assets/stylesheets/atoms/icons.scss @@ -0,0 +1,16 @@ +.icon--info { + padding-left: rem-calc(24); + position: relative; + + &:before { + @include text--icon(body); + + color: $info-box__icon-color; + content: '\f05a'; + display: inline-block; + + position: absolute; + top: rem-calc(-2); + left: 0; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/atoms/label.scss b/app/assets/stylesheets/atoms/label.scss new file mode 100644 index 000000000..7fd5c5f13 --- /dev/null +++ b/app/assets/stylesheets/atoms/label.scss @@ -0,0 +1,22 @@ +@include b(label) { + @include text(small); + @extend %color-base; + + font-style: italic; + + background-color: $grey-5; + margin-right: rem-calc(20); + padding: rem-calc(5 16); + + @include m(code) { + font-size: inherit; + font-family: monospace; + font-style: normal; + word-wrap: break-word; + + padding: rem-calc(2 8); + border-radius: rem-calc(4); + margin-right: 0; + margin-bottom: rem-calc(32); + } +} diff --git a/app/assets/stylesheets/atoms/leaflet-controls.scss b/app/assets/stylesheets/atoms/leaflet-controls.scss new file mode 100644 index 000000000..2473db4d7 --- /dev/null +++ b/app/assets/stylesheets/atoms/leaflet-controls.scss @@ -0,0 +1,108 @@ +@mixin leaflet-control-zoom($color: $leaflet-control__color, $bg-color: $leaflet-control__bg-color, $font-size: $leaflet-control__font-size) { + .leaflet-control-layers-base { + @include text(small); + @include color($color--base); + + & .is-selected { + @include text(small, bold); + @include color($green); + } + } + + .leaflet-control-zoom { + @include _leaflet-control($color: $color, $bg-color: $bg-color, $font-size: $font-size); + } + + a.leaflet-control-zoom-in, + a.leaflet-control-zoom-out { + color: $green; + display: block; + opacity: 1; + line-height: rem-calc(16); + padding: rem-calc(12); + text-align: center; + width: rem-calc(40); height: rem-calc(40); + + &:first-child { + border-bottom: solid rem-calc(1) $leaflet-control__border; + } + + &.leaflet-disabled { + background-color: $leaflet-control__bg-color; + color: $leaflet-control__disabled-color; + cursor: not-allowed; + } + } + + .leaflet-control-zoom-in:hover, + .leaflet-control-zoom-out:hover { + background-color: $leaflet-control__hover-color; + } +} + +@mixin leaflet-control-layers($color: $leaflet-control__color, $bg-color: $leaflet-control__bg-color, $font-size: $leaflet-control__font-size) { + .leaflet-control-layers-list { + @include _leaflet-control($color: $color, $bg-color: $bg-color, $font-size: $font-size); + display: block; + } + + .leaflet-control-layers { + margin: rem-calc(20); + label { + cursor: pointer; + display: inline-block; + line-height: rem-calc(20); + margin: rem-calc(5 0); + padding: rem-calc(0 15); + + + &:first-child { + border-right: solid rem-calc(1) $leaflet-control__border; + } + } + + input, + .leaflet-control-layers-toggle { + display: none; + } + } +} + +@mixin _leaflet-control($color, $bg-color, $font-size) { + @include _leaflet-control__margins; + @include _leaflet-control--hover($color: $color, $bg-color: $bg-color); + + border: 0; + border-radius: 0; + + box-shadow: none; + background-color: $bg-color; + + font-size: $font-size; + color: $color; + + transition: background-color .1s; +} + +@mixin _leaflet-control__margins { + .leaflet-top .leaflet-control { margin-top: rem-calc(20); } + .leaflet-left .leaflet-control { margin-left: rem-calc(20); } + .leaflet-right .leaflet-control { margin-right: rem-calc(20); } + .leaflet-bottom .leaflet-control { margin-bottom: rem-calc(20); } +} + +@mixin _leaflet-control--hover($color, $bg-color) { + @at-root .leaflet-control-layers-expanded { + background-color: $color; + color: $bg-color; + cursor: pointer; + padding: 0; + transition: background-color .1s; + } +} + +.leaflet-container { + &#map-marine { + background: transparent; + } +} diff --git a/app/assets/stylesheets/atoms/links.scss b/app/assets/stylesheets/atoms/links.scss new file mode 100644 index 000000000..61fb551be --- /dev/null +++ b/app/assets/stylesheets/atoms/links.scss @@ -0,0 +1,29 @@ +.link { + color: $info-box-link__color; + font-family: 'MuseoSans'; + font-size: rem-calc(15); + @include font-weight(normal); + + &--hero-download { + cursor: pointer; + margin-right: rem-calc(20); + + & i { margin-right: rem-calc(8); } + } + + &--external { + @extend %acts-as-link; + + &:after { + @include fa(external-link); + + margin-left: rem-calc(4); + font-size: rem-calc(11); + } + } + + &--page-anchor { + @include color($link--color); + @include font-weight(normal); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/atoms/logos.scss b/app/assets/stylesheets/atoms/logos.scss new file mode 100644 index 000000000..79f263a91 --- /dev/null +++ b/app/assets/stylesheets/atoms/logos.scss @@ -0,0 +1,50 @@ +@include b(logos) { + @include e(logo) { + margin: rem-calc(0 10); + } +} +@mixin unepwcmc-logo { + width: 121px; + height: 52px; + + @include only-mobile { + width: 45px; + height: 30px; + } + + background: url('https://s3.amazonaws.com/wcmc.logo/UNEP_WCMC_logo_white.svg') no-repeat; + background-size: 80%; + background-position: center; +} +.unepwcmc-logo { @include unepwcmc-logo; } + +@mixin iucn-logo { + width: 50px; + height: 50px; + + @include only-mobile { + width: 30px; + height: 30px; + } + + background: image_url('IUCN_logo@2x.png') no-repeat; + background-size: 65%; + background-position: center; +} +.iucn-logo { @include iucn-logo; } + +@mixin protectedplanet-logo { + padding-left: 2.5rem; + content: ""; + display: block; + background: image_url('hand-solo.png') center left/2rem no-repeat; +} +.protectedplanet-logo { + @include protectedplanet-logo; + + @include e(registered) { + position: relative; + font-size: rem-calc(8); + top: -.5rem; + } +} diff --git a/app/assets/stylesheets/atoms/overlay.scss b/app/assets/stylesheets/atoms/overlay.scss new file mode 100644 index 000000000..2edbfb282 --- /dev/null +++ b/app/assets/stylesheets/atoms/overlay.scss @@ -0,0 +1,30 @@ +@include b(o-overlay) { + @include flexbox; + @include justify-content(flex-start); + @include align-items(flex-start); + + position: absolute; + left: 0; + top: 0; + + height: 100%; + width: 100%; + + padding: rem-calc(20); +} + +.bg-image-overlay { + position: relative; + z-index: 1; + + &:before { + background-color: rgba(black, 0.2); + content: ''; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: -1; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/atoms/small-text.scss b/app/assets/stylesheets/atoms/small-text.scss new file mode 100644 index 000000000..f8a1dae7f --- /dev/null +++ b/app/assets/stylesheets/atoms/small-text.scss @@ -0,0 +1,4 @@ +@include b(small-text) { + @include text--alt(small, thin); + font-style: italic; +} \ No newline at end of file diff --git a/app/assets/stylesheets/atoms/text.scss b/app/assets/stylesheets/atoms/text.scss new file mode 100644 index 000000000..ec23d7091 --- /dev/null +++ b/app/assets/stylesheets/atoms/text.scss @@ -0,0 +1,45 @@ +.text { + + &--48 { + font-size: rem-calc(22); + + @include breakpoint($medium){ font-size: rem-calc(38); } + @include breakpoint($large){ font-size: rem-calc(48); } + + sup { + font-size: rem-calc(16); + @include breakpoint($medium){ font-size: rem-calc(20); } + @include breakpoint($large){ font-size: rem-calc(30); } + } + } + + &--60 { + font-size: rem-calc(28); + + @include breakpoint($medium){ font-size: rem-calc(48); } + @include breakpoint($large){ font-size: rem-calc(60); } + } + + &--100 { + font-size: rem-calc(40); + + @include breakpoint($medium){ font-size: rem-calc(80); } + @include breakpoint($large){ font-size: rem-calc(100); } + } + + &--120 { + font-size: rem-calc(120); + } + + &--144 { + font-size: rem-calc(60); + + @include breakpoint($medium){ font-size: rem-calc(144); } + } + + &--standard { + @include text(body, thin); + line-height: 1.3; + margin-bottom: rem-calc(20); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/charts/horizontal-bar-chart.scss b/app/assets/stylesheets/charts/horizontal-bar-chart.scss new file mode 100644 index 000000000..ed3dbfdfa --- /dev/null +++ b/app/assets/stylesheets/charts/horizontal-bar-chart.scss @@ -0,0 +1,64 @@ +.d3-horizontal-bar-chart { + + // hack to get the svg to scale in IE11 + width: 100%; + + position: relative; + // end hack + + &-animate { + .bar { animation: fullScaleX .8s forwards linear; } + .bar-label { animation: fullOpacity .2s .8s forwards linear; } + } + + &__svg { + // hack to get the svg to scale in IE11 + display: block; + position: absolute; + top: 0; + left: 0; + // end hack + } + + .background { fill: rgba($blue--marine-1, 0.4); } + + .bar { + fill: rgba(0, 0, 0, .4); + transform: scaleX(0); + } + + .bar-label { + @extend .u-text-sans; + fill: $white; + font-size: rem-calc(14); + opacity: 0; + + &--dark { fill: #666666; } + } + + .gridlines { + .domain { stroke-width: 0; } + + .tick { + line { stroke: $white; } + } + } + + .xaxis { + .domain { stroke-width: 0; } + + text { + fill: $blue--marine-5; + font-size: rem-calc(12); + } + } + + .yaxis { + .domain { stroke-width: 0; } + + text { + fill: $blue--marine-5; + font-size: rem-calc(16); + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/charts/interactive-multiline.scss b/app/assets/stylesheets/charts/interactive-multiline.scss new file mode 100644 index 000000000..15fc6fd47 --- /dev/null +++ b/app/assets/stylesheets/charts/interactive-multiline.scss @@ -0,0 +1,158 @@ +.v-interactive-multiline { + &__tabs { + border-bottom: solid rem-calc(1) $grey-55; + font-family: 'MuseoSans'; + font-weight: thin; + } + + &__tab-title { + background-color: $blue--marine-3; + border-right: solid rem-calc(1) $blue--marine-2; + border-left: solid rem-calc(1) $blue--marine-2; + cursor: pointer; + font-size: rem-calc(12); + padding: rem-calc(8 10 5 10); + text-transform: capitalize; + + display: inline-block; + position: relative; + + @include breakpoint($large){ font-size: rem-calc(16); } + + &.active { + background-color: transparent; + border: solid rem-calc(1) $grey-55; + border-bottom: 0; + + &:after { + background-color: $blue--marine-2; + content: ''; + width: 100%; height: rem-calc(1); + + position: absolute; + bottom: -1px; + left: 0; + } + } + } + + &__chart { + // hack to get the svg to scale in IE11 + width: 100%; + + position: relative; + // end hack + } + &__svg { + // hack to get the svg to scale in IE11 + display: block; + position: absolute; + top: 0; + left: 0; + // end hack + } + + &__axis { + .domain { stroke: $grey-55; } + + .tick { + line { stroke-width: 0; } + + text { + font-size: rem-calc(14); + fill: $blue--marine-5; + + @include breakpoint($large){ font-size: rem-calc(10); } + } + } + } + + &__gridlines { + .domain { stroke-width: 0; } + + .tick { + line { stroke: $grey-33; } + } + } + + &__target { + .domain { stroke-width: 0; } + + .tick { + line { + stroke: $white; + stroke-width: 2; + stroke-dasharray: 10px; + } + + text { + fill: $white; + font-size: rem-calc(14); + font-weight: bold; + + transform: translateY(6px); + + @include breakpoint($large){ font-size: rem-calc(10); } + } + } + } + + &__line { + stroke: $blue--marine-5; + stroke-linecap: round; + stroke-width: 3; + + stroke-dasharray: 1000; + stroke-dashoffset: 1000; + + @include breakpoint($medium){ stroke-width: 2; } + + @media screen\0 { + opacity: 0; //target IE11 + stroke-dashoffset: 0; //target IE11 + } + } + + &__line-active { + animation: dashOffsetNone 2s linear forwards 1; + + @media screen\0 { + animation: fullOpacity .1s linear forwards; //target IE11 + } + } + + &__datapoint { + cursor: pointer; + fill: white; + stroke: $blue--marine-5; + + transform-origin: 50%; + transform: scale(0); + + @media screen\0 { opacity: 0; } //target IE11 + + .v-interactive-multiline__datapoints-active & { + animation: fullScaleXY .2s linear forwards 1s; + + @media screen\0 { + animation: fullOpacity .1s linear forwards; //target IE11 + } + } + } + + &__tooltip-wrapper { + position: absolute; + } + + &__tooltip { + fill: white; + font-family: 'MuseoSans'; + font-size: rem-calc(18); + display: none; + text-anchor: middle; + } + + &__tooltip-active { + display: block; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/charts/interactive-treemap.scss b/app/assets/stylesheets/charts/interactive-treemap.scss new file mode 100644 index 000000000..56e5be759 --- /dev/null +++ b/app/assets/stylesheets/charts/interactive-treemap.scss @@ -0,0 +1,139 @@ +.v-interactive-treemap { + + //---------------------------------------- + // grid + //---------------------------------------- + .flex-2-fiths, + .flex-3-fiths { + @media only screen and (max-width: $large){ + flex: 0 0 100%; + } + } + + //---------------------------------------- + // info panel + //---------------------------------------- + &__info-panel { + display: none; + + @include breakpoint($medium){ display: block; } + } + + &__list { + @include breakpoint($medium){ display: none; } + } + + &__list-item { + font-size: rem-calc(14); + padding: rem-calc(14 12 16 12); + + &:nth-child(even){ background-color: $grey-5; } + + @include breakpoint($medium){ padding: rem-calc(14 12 2 12); } + } + + &__info { + line-height: 1.2; + + @include breakpoint($medium){ + margin-bottom: rem-calc(16); + } + + @include breakpoint($large){ margin-right: rem-calc(24); } + } + + &__title { + border-bottom: solid rem-calc(1) $grey-55; + color: $blue--marine-4; + font-size: rem-calc(24); + line-height: 1; + margin-bottom: rem-calc(16); + padding-bottom: rem-calc(6); + + @include breakpoint($medium){ + font-size: rem-calc(28); + margin-bottom: rem-calc(20); + padding-bottom: rem-calc(8); + } + + @include breakpoint($large){ + font-size: rem-calc(34); + margin-bottom: rem-calc(26); + padding-bottom: rem-calc(10); + } + } + + &__stat { + margin-top: rem-calc(10); + flex: 0 0 50%; + + @include breakpoint($medium){ margin-top: rem-calc(20); } + @include breakpoint($large){ flex: 0 0 100%; } + } + + &__percent { + color: $marine-accent-color; + font-size: rem-calc(20); + + display: block; + + @include breakpoint($medium){ font-size: rem-calc(34); } + @include breakpoint($large){ font-size: rem-calc(46); } + } + + &__km { + color: $marine-accent-color; + font-size: rem-calc(14); + margin-bottom: rem-calc(8); + + display: block; + + @include breakpoint($medium){ font-size: rem-calc(22); } + @include breakpoint($large){ font-size: rem-calc(28); } + } + + //---------------------------------------- + // treemap + //---------------------------------------- + &__treemap { + margin-bottom: rem-calc(20); + + @include breakpoint($medium){ margin-bottom: 0; } + } + + &__cell { + text { font-size: rem-calc(16); } + + &-active { + text { font-weight: bold; } + } + } + + //---------------------------------------- + // instruction + //---------------------------------------- + &__instruction { + font-size: rem-calc(15); + margin-top: rem-calc(10); + } +} + +//---------------------------------------- +// treemap component +//---------------------------------------- +.d3-treemap { + // hack to get the svg to scale in IE11 + width: 100%; + + position: relative; + // end hack + + &__svg { + // hack to get the svg to scale in IE11 + display: block; + position: absolute; + top: 0; + left: 0; + // end hack + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/charts/sunburst.scss b/app/assets/stylesheets/charts/sunburst.scss new file mode 100644 index 000000000..a2609017d --- /dev/null +++ b/app/assets/stylesheets/charts/sunburst.scss @@ -0,0 +1,63 @@ +.d3-sunburst { + position: relative; + + &-wrapper { + margin: 0 auto rem-calc(16) auto; + width: 60%; + + @include breakpoint($medium){ + margin: 0 auto; + width: 100%; + } + } + + &__svg { + // hack to get the svg to scale in IE11 + display: block; + position: absolute; + top: 0; + left: 0; + // end hack + } + + &__info-wrapper { + display: flex; + + align-items: center; + } + + &__info { + margin: 0 auto; + padding: rem-calc(12); + text-align: center; + + display: none; + + @include breakpoint($medium){ + margin: 0 0 0 rem-calc(14); + text-align: left; + } + + @include breakpoint($large){ margin-left: rem-calc(22); } + + &--active { display: block; } + } + + &__title { + color: $blue--marine-3; + font-size: rem-calc(22); + margin-bottom: rem-calc(12); + + @include breakpoint($large){ font-size: rem-calc(28); } + } + + &__subtitle { + font-weight: bold; + line-height: 1.3; + margin-top: rem-calc(12); + + display: block; + + @include breakpoint($large){ font-size: rem-calc(20); } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/fonts/MuseoSans-100.eot b/app/assets/stylesheets/fonts/MuseoSans-100.eot new file mode 100644 index 000000000..72f3a33d4 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSans-100.eot differ diff --git a/app/assets/stylesheets/fonts/MuseoSans-100.ttf b/app/assets/stylesheets/fonts/MuseoSans-100.ttf new file mode 100644 index 000000000..f9ac5fa55 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSans-100.ttf differ diff --git a/app/assets/stylesheets/fonts/MuseoSans-100.woff b/app/assets/stylesheets/fonts/MuseoSans-100.woff new file mode 100644 index 000000000..6da90c8ba Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSans-100.woff differ diff --git a/app/assets/stylesheets/fonts/MuseoSans-300.eot b/app/assets/stylesheets/fonts/MuseoSans-300.eot new file mode 100644 index 000000000..bfec8c03b Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSans-300.eot differ diff --git a/app/assets/stylesheets/fonts/MuseoSans-300.ttf b/app/assets/stylesheets/fonts/MuseoSans-300.ttf new file mode 100644 index 000000000..8dba3ecfc Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSans-300.ttf differ diff --git a/app/assets/stylesheets/fonts/MuseoSans-300.woff b/app/assets/stylesheets/fonts/MuseoSans-300.woff new file mode 100644 index 000000000..56c98354c Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSans-300.woff differ diff --git a/app/assets/stylesheets/fonts/MuseoSans-500.eot b/app/assets/stylesheets/fonts/MuseoSans-500.eot new file mode 100644 index 000000000..314a94519 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSans-500.eot differ diff --git a/app/assets/stylesheets/fonts/MuseoSans-500.ttf b/app/assets/stylesheets/fonts/MuseoSans-500.ttf new file mode 100644 index 000000000..e74a020b7 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSans-500.ttf differ diff --git a/app/assets/stylesheets/fonts/MuseoSans-500.woff b/app/assets/stylesheets/fonts/MuseoSans-500.woff new file mode 100644 index 000000000..c4eae2540 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSans-500.woff differ diff --git a/app/assets/stylesheets/fonts/MuseoSans-700.eot b/app/assets/stylesheets/fonts/MuseoSans-700.eot new file mode 100644 index 000000000..a49d6f236 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSans-700.eot differ diff --git a/app/assets/stylesheets/fonts/MuseoSans-700.ttf b/app/assets/stylesheets/fonts/MuseoSans-700.ttf new file mode 100644 index 000000000..4a6a1f024 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSans-700.ttf differ diff --git a/app/assets/stylesheets/fonts/MuseoSans-700.woff b/app/assets/stylesheets/fonts/MuseoSans-700.woff new file mode 100644 index 000000000..4b82bf3f6 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSans-700.woff differ diff --git a/app/assets/stylesheets/fonts/MuseoSlab-100.otf b/app/assets/stylesheets/fonts/MuseoSlab-100.otf new file mode 100644 index 000000000..d1d56d12b Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSlab-100.otf differ diff --git a/app/assets/stylesheets/fonts/MuseoSlab-1000.otf b/app/assets/stylesheets/fonts/MuseoSlab-1000.otf new file mode 100644 index 000000000..bfa67a9a3 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSlab-1000.otf differ diff --git a/app/assets/stylesheets/fonts/MuseoSlab-1000Italic.otf b/app/assets/stylesheets/fonts/MuseoSlab-1000Italic.otf new file mode 100644 index 000000000..5a4d4755d Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSlab-1000Italic.otf differ diff --git a/app/assets/stylesheets/fonts/MuseoSlab-100Italic.otf b/app/assets/stylesheets/fonts/MuseoSlab-100Italic.otf new file mode 100644 index 000000000..c5564607b Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSlab-100Italic.otf differ diff --git a/app/assets/stylesheets/fonts/MuseoSlab-300.otf b/app/assets/stylesheets/fonts/MuseoSlab-300.otf new file mode 100644 index 000000000..b9c867b58 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSlab-300.otf differ diff --git a/app/assets/stylesheets/fonts/MuseoSlab-300Italic.otf b/app/assets/stylesheets/fonts/MuseoSlab-300Italic.otf new file mode 100644 index 000000000..db231b864 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSlab-300Italic.otf differ diff --git a/app/assets/stylesheets/fonts/MuseoSlab-500.eot b/app/assets/stylesheets/fonts/MuseoSlab-500.eot new file mode 100644 index 000000000..b2810b9d8 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSlab-500.eot differ diff --git a/app/assets/stylesheets/fonts/MuseoSlab-500.ttf b/app/assets/stylesheets/fonts/MuseoSlab-500.ttf new file mode 100644 index 000000000..00bdcb835 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSlab-500.ttf differ diff --git a/app/assets/stylesheets/fonts/MuseoSlab-500.woff b/app/assets/stylesheets/fonts/MuseoSlab-500.woff new file mode 100644 index 000000000..b9e3a1145 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSlab-500.woff differ diff --git a/app/assets/stylesheets/fonts/MuseoSlab-700.otf b/app/assets/stylesheets/fonts/MuseoSlab-700.otf new file mode 100644 index 000000000..57f0e7325 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSlab-700.otf differ diff --git a/app/assets/stylesheets/fonts/MuseoSlab-700Italic.otf b/app/assets/stylesheets/fonts/MuseoSlab-700Italic.otf new file mode 100644 index 000000000..daf4dbcd3 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSlab-700Italic.otf differ diff --git a/app/assets/stylesheets/fonts/MuseoSlab-900.otf b/app/assets/stylesheets/fonts/MuseoSlab-900.otf new file mode 100644 index 000000000..4b537c94d Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSlab-900.otf differ diff --git a/app/assets/stylesheets/fonts/MuseoSlab-900Italic.otf b/app/assets/stylesheets/fonts/MuseoSlab-900Italic.otf new file mode 100644 index 000000000..4307c9021 Binary files /dev/null and b/app/assets/stylesheets/fonts/MuseoSlab-900Italic.otf differ diff --git a/app/assets/stylesheets/molecules/accordion.scss b/app/assets/stylesheets/molecules/accordion.scss new file mode 100644 index 000000000..d3c60e1f3 --- /dev/null +++ b/app/assets/stylesheets/molecules/accordion.scss @@ -0,0 +1,37 @@ +@include b(accordion) { + margin-bottom: rem-calc(10); + + @include e(header) { + &:hover { background-color: $grey-15; } + + @extend %color-base; + @include text(headline); + + background-color: $grey-5; + cursor: pointer; + padding: rem-calc(8 20); + + @include m(no-bg) { background-color: inherit; } +} + + @include e(switch) { + float: right; + + &:after { @extend %color-base; } + + &.is-open { + &:after { @include fa(minus-circle); } + } + + &.is-closed { + &:after { @include fa(plus-circle); } + } + } + + @include e(body) { + @extend %color-base; + border: solid rem-calc(1) $grey-5; + padding: rem-calc(20); + } +} + diff --git a/app/assets/stylesheets/molecules/alert.scss b/app/assets/stylesheets/molecules/alert.scss new file mode 100644 index 000000000..9378e94e5 --- /dev/null +++ b/app/assets/stylesheets/molecules/alert.scss @@ -0,0 +1,50 @@ +@include b(alert) { + @include m(flex) { + @extend %flexbox; + @include align-items(flex-start); + } + + @include m(push) { + margin-bottom: rem-calc(40); + } + + background-color: $alert__bg-color; + padding: rem-calc(10); + + @include e(body) { + @include text(body); + @extend %color-base; + } + + @include e(icon) { + float: left; + + min-width: rem-calc(40) !important; + @include text--icon(body, thin); + + @include m(warning) { color: $alert-warning--color; } + @include m(info) { color: $alert-info--color; } + @include m(success) { color: $alert-success--color; } + } + + @include e(icon-inner) { + box-sizing: content-box; + @include text--icon(small, thin); + + @include m(warning) { color: $alert__bg-color; } + @include m(info) { color: $alert__bg-color; } + @include m(success) { color: $alert__bg-color; } + } + + @include e(title) { + @include text--alt(headline, bold); + @include line-height(2rem); + + margin-bottom: rem-calc(8); + + @include m(warning) { color: $alert-warning--color; } + @include m(success) { color: $alert-success--color; } + @include m(info) { color: $alert-info--color; } + } + +} diff --git a/app/assets/stylesheets/molecules/animated-loader.scss b/app/assets/stylesheets/molecules/animated-loader.scss new file mode 100644 index 000000000..06a6fa44e --- /dev/null +++ b/app/assets/stylesheets/molecules/animated-loader.scss @@ -0,0 +1,29 @@ +@keyframes animate { + from { + transform: translateY(-5px); + } + to { + transform: translateY(0); + } +} + +.loader { + &__dot { + background-color: $green; + border-radius: rem-calc(100); + margin: rem-calc(0 1); + width: rem-calc(8); height: rem-calc(8); + + display: inline-block; + + animation: animate .5s alternate infinite cubic-bezier(.68,.12,.36,.92); + + &:nth-child(2){ + animation-delay: .1s; + } + + &:nth-child(3){ + animation-delay: .2s; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/attribute.scss b/app/assets/stylesheets/molecules/attribute.scss new file mode 100644 index 000000000..faf3aa3a8 --- /dev/null +++ b/app/assets/stylesheets/molecules/attribute.scss @@ -0,0 +1,46 @@ +%attribute--large-text { + line-height: 1; + margin-bottom: rem-calc(20); +} + +.attribute { + @extend .flex-row; + @extend .align-items-end; + + border-bottom: solid rem-calc(1) $attribute-border-color; + margin-top: rem-calc(18); + padding-bottom: rem-calc(2); + + &--bold { + @include font-weight(bold); + } + + &--large { + @extend %attribute--large-text; + font-size: rem-calc(24); + } + + &--xlarge { + @extend %attribute--large-text; + font-size: rem-calc(48); + } + + &__title { + color: $attribute__title-color; + flex: 0 0 60%; + } + + &__value { + color: $attribute__value-color; + word-break: break-word; + font-family: 'MuseoSlab'; + flex: 0 0 40%; + } + + &__link-margin { margin: rem-calc(0 8 0 16); } + + &__icon { + font-size: rem-calc(13); + transform: translateY(1px); + } +} diff --git a/app/assets/stylesheets/molecules/big-button.scss b/app/assets/stylesheets/molecules/big-button.scss new file mode 100644 index 000000000..b166bf141 --- /dev/null +++ b/app/assets/stylesheets/molecules/big-button.scss @@ -0,0 +1,49 @@ +@include b(big-button) { + text-align: center; + @include text--alt(body, bold); + + color: $big-button__color; + @include color-with-state($big-button__bg-color, ( + hover: $big-button__bg-color--hover, + active: $big-button__bg-color--pressed, + disabled: $big-button__bg-color--disabled + ), background-color); + + border-radius: $big-button__border-radius; + padding: $big-button__padding; + min-height: rem-calc(40); + min-width: rem-calc(40); + + @include e(icon) { + margin-right: $big-button-icon__margin-right; + + @include m(closer) { + margin-right: $big-button-icon__margin-right - rem-calc(4); + } + } + + @include m(alt-colors) { + background-color: $big-button__color; + border: solid rem-calc(1) $grey-15; + + @include color-with-state($big-button__bg-color, ( + hover: $big-button__color, + active: $big-button__color, + disabled: $big-button__color + )); + } + + @include m(danger) { + border: solid rem-calc(1) $grey-15; + + @include color-with-state($big-button-danger__bg-color, ( + hover: $big-button-danger__bg-color--hover, + active: $big-button-danger__bg-color--pressed, + disabled: $big-button-danger__bg-color--disabled + ), background-color); + } + + @include m(compact) { + padding: $big-button-compact__padding; + } +} diff --git a/app/assets/stylesheets/molecules/breadcrumbs.scss b/app/assets/stylesheets/molecules/breadcrumbs.scss new file mode 100644 index 000000000..58682b94c --- /dev/null +++ b/app/assets/stylesheets/molecules/breadcrumbs.scss @@ -0,0 +1,12 @@ +@include b(breadcrumbs) { + @extend %color-base; + @include text(small); + + margin: rem-calc(24 0); + padding: { left: rem-calc(11); right: rem-calc(11); } + + @include e(link) { + @extend %acts-as-link; + @include text(small, bold); + } +} diff --git a/app/assets/stylesheets/molecules/burger.scss b/app/assets/stylesheets/molecules/burger.scss new file mode 100644 index 000000000..b7da3a788 --- /dev/null +++ b/app/assets/stylesheets/molecules/burger.scss @@ -0,0 +1,65 @@ +//---------------------------------------- +// shared styles +//---------------------------------------- +%burger-line { + background-color: $white; + width: rem-calc(30); height: rem-calc(3); + display: block; +} + +%burger-open { //used in navbar.scss + background-color: transparent; + + &:before { transform: rotateZ(-45deg); } + + &:after { transform: rotateZ(45deg); } +} + +//---------------------------------------- +// burger +//---------------------------------------- +.burger { + cursor: pointer; + + align-self: center; + position: relative; + + @include breakpoint($large){ display: none; } + + &:hover .burger-icon, + &:hover .burger-icon:before, + &:hover .burger-icon:after { + background-color: lighten($navbar-element-hover__bg-color, 30%); + } + + &.burger--open { + &:hover .burger-icon { background-color: transparent; } + + .burger-icon { @extend %burger-open; } + } + + &-icon { + @extend %burger-line; + margin: rem-calc(10 14 10 0); + + &:before { + @extend %burger-line; + content: ''; + + position: absolute; + top: 0; + + transform-origin: top right; + } + + &:after { + @extend %burger-line; + content: ''; + + position: absolute; + bottom: 0; + + transform-origin: bottom right; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/carousel.scss b/app/assets/stylesheets/molecules/carousel.scss new file mode 100644 index 000000000..389171bfc --- /dev/null +++ b/app/assets/stylesheets/molecules/carousel.scss @@ -0,0 +1,99 @@ +$padding-top-bottom: rem-calc(25); +$padding-side: rem-calc(40); + +$indicator-height: rem-calc(14); +$indicator-row-height: $indicator-height + $padding-top-bottom * 2; +$transition-options: 0.6s ease-in-out; + +.transition { + &.carousel__slides { + transition: transform $transition-options; + } +} + +.carousel { + padding-top: $padding-top-bottom; + + position: relative; + + &__slides-container { + width: 100%; height: calc(100% - #{$indicator-row-height}); + overflow: hidden; + } + + &__slides { + height: 100%; + + position: relative; + display: flex; + } + + &__arrow-buttons { + width: 100%; + + display: flex; + justify-content: space-between; + position: absolute; + top: 50%; + + transform: translateY(-50%); + } + + &__arrow { + background-color: rgba($white, 0.4); + padding: rem-calc(18 8); + } + + &__control-bar { + color: white; + padding: rem-calc(0 $padding-side); + height: $indicator-row-height; + + display: flex; + align-items: center; + } + + &__pause { + background-color: rgba($white, 0.4); + border-radius: 50%; + width: 2em; height: 2em; + + justify-self: flex-end; + margin-left: auto; + } + + &__indicator { + background-color: rgba($white, 0.4); + border-radius: 50%; + margin-right: $indicator-height / 3; + width: $indicator-height; height: $indicator-height; + + display: inline-block; + + transition: background-color $transition-options; + + &--selected { + background-color: $white; + } + } +} + +.carousel-slide { + flex-shrink: 0; + + &--full-width { + margin: 0 $padding-side; + width: calc(100% - 2 * #{$padding-side}); + } + + &--half-width { + margin: 0 $padding-side; + width: calc(50% - 2 * #{$padding-side}); + } + + &--third-width { + margin: 0 $padding-side; + $one-third: 100/3; + width: calc(#{$one-third}% - 2 * #{$padding-side}); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/circle-story.scss b/app/assets/stylesheets/molecules/circle-story.scss new file mode 100644 index 000000000..d7d6113a0 --- /dev/null +++ b/app/assets/stylesheets/molecules/circle-story.scss @@ -0,0 +1,61 @@ +.circle-story { + @include flexbox; + flex-flow: row wrap; + padding: rem-calc(0 0 28 0); + + + @include breakpoint($medium){ + flex-flow: row nowrap; + padding: rem-calc(0 26 40 0); + } + + @include breakpoint($large){ padding: rem-calc(0 26 90 0); } + + &__circle { + + &--above { + margin: rem-calc(28 0); + margin-right: 0; + float: none; + } + + &--smaller { + $circle-diameter: rem-calc(160); + height: $circle-diameter; + width: $circle-diameter; + } + } + + &__circle-inner { + border-radius: 0; + object-fit: cover; + margin-bottom: rem-calc(8); + width: 100%; height: rem-calc(150); + + @include breakpoint($medium){ + border-radius: 100%; + margin: 0; + width: 92%; height: auto; + } + } + + &__body { + @include text(body, thin); + + padding-left: rem-calc(8); + } + + + &__title { + @include text(medium, bold); + @include color($green); + line-height: 1.1; + + margin-bottom: rem-calc(8); + } + + &__content { + margin-bottom: rem-calc(16); + } + +} diff --git a/app/assets/stylesheets/molecules/close-button.scss b/app/assets/stylesheets/molecules/close-button.scss new file mode 100644 index 000000000..f8692ee0a --- /dev/null +++ b/app/assets/stylesheets/molecules/close-button.scss @@ -0,0 +1,12 @@ +@include b(close-button) { + @include e(container) { + position: relative; + } + + @extend %acts-as-link; + + position: absolute; + top: rem-calc(12); + right: rem-calc(20); + cursor: pointer; +} diff --git a/app/assets/stylesheets/molecules/counter.scss b/app/assets/stylesheets/molecules/counter.scss new file mode 100644 index 000000000..55066d824 --- /dev/null +++ b/app/assets/stylesheets/molecules/counter.scss @@ -0,0 +1,13 @@ +.counter { + font-family: 'MuseoSans'; + + p { + font-family: inherit; + } + + .header--h3-insights { + padding-top: rem-calc(18); + + &:first-child { padding-top: 0; } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/cube.scss b/app/assets/stylesheets/molecules/cube.scss new file mode 100644 index 000000000..97ac832ac --- /dev/null +++ b/app/assets/stylesheets/molecules/cube.scss @@ -0,0 +1,18 @@ +@mixin cube($size, $bg-color: $grey-100, $fill-color: $green) { + @include b(cube) { + position: relative; + height: $size; + width: $size; + @include align-self(self-start); + + background-color: $bg-color; + + @include e(inner) { + position: absolute; + top: 0; + left: 0; + + background-color: $fill-color; + } + } +} diff --git a/app/assets/stylesheets/molecules/dropdown.scss b/app/assets/stylesheets/molecules/dropdown.scss new file mode 100644 index 000000000..8044be66a --- /dev/null +++ b/app/assets/stylesheets/molecules/dropdown.scss @@ -0,0 +1,60 @@ +@include b(dropdown) { + background-color: $dropdown__bg-color; + + left:0; + padding: rem-calc(0 10); + padding-bottom: rem-calc(24); + min-width: 100%; + white-space: nowrap; + z-index: 1000; + + @include breakpoint($large) { + position: absolute; + top: 100%; + } + + @include m(search-dropdown) { + background-color: $white; + + left: auto; // needs to be auto for IE11 + right: 0; + + min-width: rem-calc(480); + padding-bottom: initial; + padding: rem-calc(10); + } + + @include e(trigger) { + display: inline-block; + position: relative; + + &.is-active { + background-color: $dropdown-trigger-is-selected__bg-color; + } + } + + @include e(inner) { + border-top: solid rem-calc(2) $dropdown-inner__border-top-color; + padding-top: rem-calc(8); + + @include e(simple) { + border-top: 0; + padding-top: 0; + } + + @include e(stretch) { + min-width: rem-calc(400); + } + } + + @include e(element) { + &:hover { background-color: $dropdown-element-hover__bg-color; } + + @include color($white); + @include text(body); + + display: block; + padding: rem-calc(10 20); + margin: rem-calc(0 -10); + } +} diff --git a/app/assets/stylesheets/molecules/expandable-section.scss b/app/assets/stylesheets/molecules/expandable-section.scss new file mode 100644 index 000000000..4446bee2f --- /dev/null +++ b/app/assets/stylesheets/molecules/expandable-section.scss @@ -0,0 +1,35 @@ +@include b(expandable-section) { + margin-bottom: rem-calc(10); + + @include e(header) { + &:hover { background-color: $grey-15; } + + @extend %color-base; + @include text(headline); + + background-color: $grey-5; + cursor: pointer; + padding: rem-calc(8 20); + + @include m(no-bg) { background-color: inherit; } +} + + @include e(switch) { + float: right; + + &:after { @extend %color-base; } + + &.is-open { + &:after { @include fa(minus-circle); } + } + + &.is-closed { + &:after { @include fa(plus-circle); } + } + } + + @include e(body) { + border: solid rem-calc(1) $grey-5; + padding: rem-calc(20); + } +} diff --git a/app/assets/stylesheets/molecules/fullscreen-message.scss b/app/assets/stylesheets/molecules/fullscreen-message.scss new file mode 100644 index 000000000..333d7340b --- /dev/null +++ b/app/assets/stylesheets/molecules/fullscreen-message.scss @@ -0,0 +1,19 @@ +@include b(fullscreen-message) { + text-align: center; + + width: 75%; + margin: auto; + margin-top: rem-calc(112); + + @include e(header) { + @include text--alt(xlarge, x-bold); + margin-bottom: rem-calc(16); + } + + @include e(body) { + @extend %color-base; + + @include text(headline, thin); + line-height: form-factor(headline, line-height); + } +} diff --git a/app/assets/stylesheets/molecules/fullscreen.scss b/app/assets/stylesheets/molecules/fullscreen.scss new file mode 100644 index 000000000..b7fc55152 --- /dev/null +++ b/app/assets/stylesheets/molecules/fullscreen.scss @@ -0,0 +1,16 @@ +.fullscreen { + position: relative; + + &--active { + background-color: rgba(black, 0.8); + padding: rem-calc(20); + width: 100%; height: 100%; + + position: fixed; + top: 0; + right: 0; + bottom: 0; + left: 0; + z-index: 6000; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/header-with-image.scss b/app/assets/stylesheets/molecules/header-with-image.scss new file mode 100644 index 000000000..86fcc262a --- /dev/null +++ b/app/assets/stylesheets/molecules/header-with-image.scss @@ -0,0 +1,19 @@ +@include b(header) { + @include e(text) { + @extend %color-base; + @include text(medium, thin); + margin-bottom: rem-calc(20); + } + + @include e(sup) { + vertical-align: super; + + @include text(small, bold); + @include color($green); + } + + @include e(image) { + float: left; + margin-right: rem-calc(15); + } +} diff --git a/app/assets/stylesheets/molecules/home-banner.scss b/app/assets/stylesheets/molecules/home-banner.scss new file mode 100644 index 000000000..5f906e31a --- /dev/null +++ b/app/assets/stylesheets/molecules/home-banner.scss @@ -0,0 +1,47 @@ +.home-banner { + background-image: image_url('pp-home-banner.jpeg'); + background-size: cover; + padding: rem-calc(0 14 14); + + display: flex; + align-items: center; + flex-direction: column; + + @include breakpoint($small) { + padding: rem-calc(20 20 30 20); + + flex-direction: row; + } + + &__title { + @include text(large, x-bold); + color: $white; + margin: rem-calc(40 0); + + @include breakpoint($small) { + padding: 0 rem-calc(40); + } + @include breakpoint($medium) { + @include text(xxlarge, x-bold); + padding: 0 rem-calc(60); + } + @include breakpoint($large) { + @include text(xxxxlarge, x-bold); + padding: rem-calc(0 100); + width: rem-calc(1200); + } + } + + &__carousel { + background-color: $green--darker; + margin-left: auto; + + width: 100%; height: auto; + + flex-shrink: 0; + + @include breakpoint($small) { + width: rem-calc(400); height: rem-calc(340); + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/home-carousel.scss b/app/assets/stylesheets/molecules/home-carousel.scss new file mode 100644 index 000000000..366e6bc64 --- /dev/null +++ b/app/assets/stylesheets/molecules/home-carousel.scss @@ -0,0 +1,46 @@ +.home-carousel-slide { + color: $white; + height: 100%; + + display: flex; + flex-direction: column; + + &__title { + @include text(headline, thin); + overflow-wrap: break-word; + + margin-bottom: rem-calc(14); + + @include breakpoint($small) { + @include text(large, thin) + } + } + + &__description { + @include text(body, thin); + overflow-wrap: break-word; + + display: none; + + @include breakpoint($small) {display: block} + } + + &__link { + @include text(body, bold); + line-height: 1; + margin-top: auto; + margin-right: auto; + + display: flex; + align-items: center; + justify-self: flex-end; + + &-text:hover { + text-decoration: underline; + } + } + + &__link-icon { + margin-left: rem-calc(4); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/horizontal-bar.scss b/app/assets/stylesheets/molecules/horizontal-bar.scss new file mode 100644 index 000000000..eb80b01e2 --- /dev/null +++ b/app/assets/stylesheets/molecules/horizontal-bar.scss @@ -0,0 +1,17 @@ +@include b(horizontal-bar) { + position: relative; + height: $horizontal-bar__height; + width: 100%; + background-color: $horizontal-bar__bg-color; + + margin-bottom: $horizontal-bar__margin-bottom; + + @include e(inner) { + position: absolute; + top: 0; + left: 0; + + height: 100%; + background-color: $horizontal-bar-inner__bg-color; + } +} diff --git a/app/assets/stylesheets/molecules/horizontal-bars.scss b/app/assets/stylesheets/molecules/horizontal-bars.scss new file mode 100644 index 000000000..e0d0acfd1 --- /dev/null +++ b/app/assets/stylesheets/molecules/horizontal-bars.scss @@ -0,0 +1,54 @@ +.v-horizontal-bars { + margin-bottom: rem-calc(20); + + &__bar-wrapper { + position: relative; + + @include breakpoint($large){ + display: inline; + } + } + + &__title { + font-size: rem-calc(14); + font-weight: $thin; + } + + &__bar { + background-color: $blue--marine-3; + margin: rem-calc(3 0 9 0); + text-align: right; + height: rem-calc(24); + + display: inline-block; + + transform: scaleX(0); + transform-origin: left; + + .v-horizontal-bars__bar-wrapper-animate & { + animation: fullScaleX .8s linear forwards; + } + } + + &__value { + color: white; + font-family: 'MuseoSans'; + font-size: rem-calc(15); + opacity: 0; + text-align: right; + + position: absolute; + top: 8px; + left: 5px; + + @include breakpoint($large){ + top: -13px; + right: 5px; + left: initial; + } + + .v-horizontal-bars__bar-wrapper-animate & { + animation: fullOpacity .2s .8s linear forwards; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/key.scss b/app/assets/stylesheets/molecules/key.scss new file mode 100644 index 000000000..5d98f2d16 --- /dev/null +++ b/app/assets/stylesheets/molecules/key.scss @@ -0,0 +1,85 @@ +.key-container { + border: solid rem-calc(1) $grey-15; + box-shadow: 0px 0px 2px 1px $grey-5; + padding: rem-calc(25 20 20 20); + + @include only-desktop { + align-self: stretch; + border-right: none; + } +} + +.key { + @extend %clearfix; + + &--hidden { + visibility: hidden; + } + + &__title { + font-family: 'MuseoSans'; + font-size: rem-calc(15); + } + + &__list { + border-top: solid rem-calc(1) $grey-15; + border-bottom: solid rem-calc(1) $grey-15; + overflow-y: scroll; + margin: rem-calc(16 0); + padding: rem-calc(24 0); + width: auto; height: rem-calc(130); + + @include only-desktop { height: rem-calc(438); } + } + + &__item { + @include flexbox; + + color: $key__title-color; + font-family: 'MuseoSans'; + margin-bottom: rem-calc(18); + + &:last-child { margin-bottom: 0; } + } + + &__checkbox { + cursor: pointer; + padding-left: rem-calc(32); + + position: relative; + + &:before { + border: solid rem-calc(1) $grey-33; + color: $key__tick-color; + content: ""; + font-size: rem-calc(18); + font-family: fontAwesome; + width: rem-calc(20); height: rem-calc(20); + + display: block; + position: absolute; + left: 0; + } + + &--active:before { content: "\f00c"; } + } + + &__name { + color: inherit; + cursor: pointer; + font-size: rem-calc(15); + line-height: 1.2; + + display: block; + + &:hover { color: $key__title-hover-color; } + + &--green { color: $key__title-hover-color; } + } + + &__designation { + color: $grey-77; + font-size: rem-calc(13); + font-weight: 300; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/link-with-icon.scss b/app/assets/stylesheets/molecules/link-with-icon.scss new file mode 100644 index 000000000..370a8ecbc --- /dev/null +++ b/app/assets/stylesheets/molecules/link-with-icon.scss @@ -0,0 +1,59 @@ +@mixin link-with-icon($color: $link-with-icon__color, $bg-color: $link-with-icon__bg-color, $icon__margin-sides: $link-with-icon-icon__margin-sides) { + @include text(body, thin); + @extend %acts-as-link; + + cursor: pointer; + + @include e(icon) { + margin-right: $icon__margin-sides; + + @include m(after) { + margin-left: $icon__margin-sides; + margin-right: 0; + } + + @include m(above) { + display: block !important; + margin-bottom: $icon__margin-sides; + } + + @include m(absolute) { + position: absolute; + left: 0; top: 0; + } + } + + @include m(inherit) { + font: inherit; + } + + @include m(no-push) { + margin-bottom: 0; + } + + @include m(push) { + &:not(:last-child) { margin-bottom: rem-calc(8); } + } + + @include m(no-color) { + color: inherit !important; + font-weight: inherit; + } + + @include m(bold) { @include font-weight(bold); } + + @include m(pull-right) { + position: relative; + padding-left: rem-calc(24); + } + + @content; + + &--no-underline { + &:hover { text-decoration: none; } + } +} + +@include b(link-with-icon) { + @include link-with-icon; +} diff --git a/app/assets/stylesheets/molecules/map.scss b/app/assets/stylesheets/molecules/map.scss new file mode 100644 index 000000000..c8d156f96 --- /dev/null +++ b/app/assets/stylesheets/molecules/map.scss @@ -0,0 +1,34 @@ +.map { + width: $map__width; + + &--hero { + height: $map--hero__height; + } + + &--main { + height: $map--main__height; + } + + &--marine { + height: rem-calc(700); + + @include breakpoint($medium){ height: $map--main__height; } + } + + &--networks { + height: rem-calc(360); + + @include only-desktop { height: $map--networks__height; } + } + + &--double { + height: $map--main__height*2; + } + + &--margin-top-bottom { + margin: rem-calc(30 0); + } + + @include leaflet-control-zoom; + @include leaflet-control-layers; +} diff --git a/app/assets/stylesheets/molecules/modal.scss b/app/assets/stylesheets/molecules/modal.scss new file mode 100644 index 000000000..ca58c1787 --- /dev/null +++ b/app/assets/stylesheets/molecules/modal.scss @@ -0,0 +1,65 @@ +@include b(modal) { + display: none; + + position: fixed; + z-index: $z-index-10; + top: 25%; + left: 30%; + width: 40%; + padding: rem-calc(30); + background: $white; + box-sizing: border-box; + + @extend %color-base; + @include text(body, thin); + + h2 { + font-size: rem-calc(22); + margin: 0; + } + + p { + margin-top: rem-calc(20); + } + + &.is-opened { + display: block; + } + + a.btn { + display: inline-block; + padding: rem-calc(10 40); + } + + .fa-external-link{ + margin-left: rem-calc(10); + } + + input { + width: 100%; + display: block; + } +} + +.btn-close { + cursor: pointer; + position: absolute; + top: rem-calc(10); + right: rem-calc(10); + padding: rem-calc(5); +} + +.total-overlay { + display: none; + position: fixed; + z-index: $z-index-8; + width: 100%; + height: 100%; + top: 0; + left: 0; + background: $color--download-modal-overlay-bg; + + &.visible { + display: block; + } +} diff --git a/app/assets/stylesheets/molecules/pa-card.scss b/app/assets/stylesheets/molecules/pa-card.scss new file mode 100644 index 000000000..363e5c15b --- /dev/null +++ b/app/assets/stylesheets/molecules/pa-card.scss @@ -0,0 +1,62 @@ +@include b(pa-card) { + color: $pa-card-text__color; + font-size: rem-calc(15); + margin-bottom: rem-calc(32); + + @include only-desktop { + padding: rem-calc(0 20 20 20); + } + + @include e(name) { + @extend %acts-as-link; + @include text(body, bold); + + margin-bottom: rem-calc(12); + } + + @include e(subtitle) { + @include text(body); + color: $pa-card-subtitle__color; + margin-bottom: rem-calc(16); + } + + @include e(map) { + margin-bottom: rem-calc(16); + } + + @include e(details) { + border-bottom: solid rem-calc(1) $pa-card-border-bottom__color; + padding-bottom: rem-calc(4); + } + + @include e(detail) { + @include text(body); + font-size: inherit; + margin-bottom: rem-calc(12); + + @include m(inline) { + float: left; + &:not(:last-child) { + padding-right: rem-calc(16); + border-right: solid rem-calc(1) $pa-card-detail-border-right__color; + } + &:not(:first-child) { + padding-left: rem-calc(16); + } + } + } + + @include e(detail-link) { + @extend %acts-as-link; + @include font-weight(thin); + + font-family: 'MuseoSlab'; + } + + @include e(detail-value){ + @include font-weight(thin); + + font-family: 'MuseoSlab'; + } +} + diff --git a/app/assets/stylesheets/molecules/rectangles.scss b/app/assets/stylesheets/molecules/rectangles.scss new file mode 100644 index 000000000..881deeb2a --- /dev/null +++ b/app/assets/stylesheets/molecules/rectangles.scss @@ -0,0 +1,38 @@ +.v-rectangles { + padding-top: 100%; + + position: relative; + + &__rectangle { + opacity: 0; + + position: absolute; + bottom: 0; + right: 0; + + &:first-child { opacity: 1; } + + &-animate { + animation: fullOpacity .8s ease-in forwards; + } + } + + &__content { + position: relative; + } + + &__title { + color: white; + font-family: 'MuseoSans'; + font-size: rem-calc(18); + opacity: 0; + + position: absolute; + top: rem-calc(14); + left: rem-calc(14); + + .v-rectangles__rectangle-animate & { + animation: fullOpacity .2s .8s ease-in forwards; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/reference.scss b/app/assets/stylesheets/molecules/reference.scss new file mode 100644 index 000000000..827438271 --- /dev/null +++ b/app/assets/stylesheets/molecules/reference.scss @@ -0,0 +1,26 @@ +@include b(reference) { + &:not(:last-child) { + margin-bottom: $reference__margin-bottom; + } + + @include e(title) { + float: left; + font-weight: bolder; + + margin-right: $reference-title__margin-right; + } + + @include e(body) { + margin-bottom: $reference-body__margin-bottom; + } + + @include e(link) { + @include text(body, bold); + color: $reference-link__color; + } + + @include e(link-icon) { + color: $reference-link-icon__color; + margin-right: $reference-link-icon__margin-right; + } +} diff --git a/app/assets/stylesheets/molecules/search-bar.scss b/app/assets/stylesheets/molecules/search-bar.scss new file mode 100644 index 000000000..8bd28a03e --- /dev/null +++ b/app/assets/stylesheets/molecules/search-bar.scss @@ -0,0 +1,79 @@ +@include b(search-bar) { + @include flexbox; + @include justify-content(center); + @include align-items(stretch); + + padding: rem-calc(0 2); + height: $search-bar__height; + width: 100%; + + @include m(bigger) { + height: $search-bar--bigger__height; + } + + @include m(push) { + margin-bottom: rem-calc(20); + } + + @include e(form) { + @include only-desktop { + @include flexbox; + @include flex(1); + &:not(:last-child) { + border-right: solid rem-calc(1) $grey-15; + margin-right: rem-calc(14); + padding-right: rem-calc(14); + } + } + + @include only-mobile { + &:after { + @include fa(search); + position: absolute; + top: rem-calc(12); // required for IE11 + right: 0; + margin-right: 5%; + color: $grey-15; + pointer-events: none; + } + width: 100%; + height: rem-calc(40); + } + } + + @include e(input) { + @include text(body, thin); + box-sizing: border-box; + height: 100%; + border: solid rem-calc(1) $grey-15; + + @include only-desktop { + &:focus { outline: none; } + padding: rem-calc(0 8); + flex-grow: 1; + margin-right: rem-calc(10); + } + @include only-mobile { + -webkit-appearance: none; + border-radius: 0; + width: 100%; + padding: rem-calc(0 16); + } + } + + @include e(submit) { + @include color-with-state($big-button__bg-color, ( + hover: $big-button__bg-color--hover, + active: $big-button__bg-color--pressed, + disabled: $big-button__bg-color--disabled + ), background-color); + + height: 100%; + width: $search-bar__height; + line-height: $search-bar__height; + box-sizing: border-box; + + border-radius: $big-button__border-radius; + color: $big-button__color; + } +} diff --git a/app/assets/stylesheets/molecules/select-with-content.scss b/app/assets/stylesheets/molecules/select-with-content.scss new file mode 100644 index 000000000..e6bef4bda --- /dev/null +++ b/app/assets/stylesheets/molecules/select-with-content.scss @@ -0,0 +1,19 @@ +.select-with-content { + @include text(body, thin); + @extend .u-base-color; + + select { + appearance: menulist; + -webkit-appearance: menulist; + } + + &__content { + padding: rem-calc(20 0 10 0); + } + + &__text { + margin: rem-calc(8 0 22 0); + + @include breakpoint($large){ margin: rem-calc(16 0 22 0); } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/social.scss b/app/assets/stylesheets/molecules/social.scss new file mode 100644 index 000000000..a2c88c500 --- /dev/null +++ b/app/assets/stylesheets/molecules/social.scss @@ -0,0 +1,55 @@ +//---------------------------------------- +// social mixins +//---------------------------------------- +@mixin social-icon($colour, $unicode) { + background-color: $colour; + + &:hover { background-color: darken($colour, 5%); } + + &:before { content: $unicode; } +} + +.social { + +//---------------------------------------- +// icons +//---------------------------------------- + &--facebook { @include social-icon(#3b5998,'\f09a'); } + &--linkedin { @include social-icon(#0077b5,'\f0e1'); } + &--twitter { @include social-icon(#1da1f2,'\f099'); } + &--email { + @include social-icon(#00a2e8, '\f0e0'); + font-size: rem-calc(17); + } + +//---------------------------------------- +// sharing +//---------------------------------------- + &--sharing { + position: absolute; + top: rem-calc(5); + right: rem-calc(4); + + @include breakpoint($medium){ + top: rem-calc(8); + right: rem-calc(6); + } + } + + &--share { + border-radius: 3px; + margin: rem-calc(4); + padding-top: rem-calc(6); + text-align: center; + text-decoration: none; + width: rem-calc(28); height: rem-calc(28); + + display: inline-block; + + &:before { + color: white; + font: $fontAwesome; + font-size: rem-calc(18); + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/stats.scss b/app/assets/stylesheets/molecules/stats.scss new file mode 100644 index 000000000..02ffa4ace --- /dev/null +++ b/app/assets/stylesheets/molecules/stats.scss @@ -0,0 +1,49 @@ +.stats { + background-color: $stats-background-color; + color: $stats-text-color; + font-family: 'MuseoSlab'; + font-size: rem-calc(15); + font-weight: 700; + line-height: 1.3; + margin-bottom: rem-calc(30); + padding: rem-calc(12 18); + + &__country-list { + border-top: solid rem-calc(1) $grey-15; + color: $stats-country-color; + font-family: 'MuseoSans'; + font-weight: 500; + margin-top: rem-calc(16); + padding-top:rem-calc(14); + + position: relative; + + &:before { + border-style: solid; + border-color: transparent transparent $grey-15 transparent; + border-width: rem-calc(0 11 12 11); + content: ''; + + position: absolute; + top: rem-calc(-12); + left: rem-calc(37); + } + + &:after { + border-style: solid; + border-color: transparent transparent $stats-background-color transparent; + border-width: rem-calc(0 10 11 10); + content: ''; + + position: absolute; + top: rem-calc(-10); + left: rem-calc(38); + } + } + + &__number { + color: $stats-number-color; + font-size: rem-calc(48); + margin-right: rem-calc(7); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/sticky-nav.scss b/app/assets/stylesheets/molecules/sticky-nav.scss new file mode 100644 index 000000000..421bbb403 --- /dev/null +++ b/app/assets/stylesheets/molecules/sticky-nav.scss @@ -0,0 +1,157 @@ +//---------------------------------------- +// variables +//---------------------------------------- +$navHeightMobile: rem-calc(48); + +//---------------------------------------- +// animations +//---------------------------------------- +@keyframes showNav { + from { + transform: translateY(-100%); + } + to { + transform: translateY(0); + } +} + +@keyframes unstickNav { + from { + transform: translateY(100%); + } + to { + transform: translateY(0); + } +} + +//---------------------------------------- +// sticky nav styles +//---------------------------------------- +.v-sticky-nav { + @extend .u-text-sans; + + @include breakpoint($large){ + margin: auto; + max-width: 80rem; + overflow: hidden; + width: 80%; + } + + &__wrapper { + background-color: $blue--marine-4; + height: $navHeightMobile; + + display: none; + position: relative; + + @include breakpoint($large){ + height: rem-calc(55); + + display: flex; + } + + &--unstick { + animation: unstickNav .25s forwards linear; + } + + &--stuck { + width: 100%; + + display: flex; + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 100000; + + animation: showNav .25s forwards linear; + + & .v-sticky-nav__menu { + @include breakpoint($large){ + margin: auto; + max-width: 80rem; + width: 80%; + } + } + } + } + + &__title { + color: white; + font-weight: bold; + margin-left: rem-calc(14); + text-transform: uppercase; + + align-self: center; + transform: translateY(2px); + + @include breakpoint($large){ display: none; } + } + + &__burger { + margin-left: auto; + + justify-self: flex-end; + + &:hover .v-sticky-nav__burger-icon, + &:hover .v-sticky-nav__burger-icon:before, + &:hover .v-sticky-nav__burger-icon:after { + background-color: $blue--marine-1; + } + } + + &__menu { + @include flex-flow(row wrap); + height: 100%; + + display: none; + position: absolute; + right: 0; + top: $navHeightMobile; + left: 0; + + @include breakpoint($large){ + @include flex-flow(row nowrap); + width: 100%; + + display: flex; + position: static; + } + + &--open { + display: block; + } + } + + &__menu-item { + flex: 1 1 auto; + + display: flex; + } + + a.v-sticky-nav__link { + background-color: $blue--marine-4; + border-top: solid rem-calc(1) $blue--marine-3; + color: white; + font-size: rem-calc(15); + padding: rem-calc(16 10 15 10); + text-align: center; + text-decoration: none; + width: 100%; height: 100%; + + display: flex; + + align-items: center; + justify-content: center; + + @include breakpoint($large){ + padding: rem-calc(0 10); + border: none; + } + + &:hover, + &-active { + background-color: $blue--marine-3; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/sticky-tab.scss b/app/assets/stylesheets/molecules/sticky-tab.scss new file mode 100644 index 000000000..882f87fb7 --- /dev/null +++ b/app/assets/stylesheets/molecules/sticky-tab.scss @@ -0,0 +1,56 @@ +$tabWidth: rem-calc(409); +$iconWidth: rem-calc(32); + +.sticky-tab { + background-color: white; + border: solid rem-calc(1) $blue--marine-5; + border-top-right-radius: rem-calc(3); + border-bottom-right-radius: rem-calc(3); + + display: none; + position: fixed; + top: 50%; + left: -($tabWidth - $iconWidth); + z-index: 2000; + + transition: left .2s ease-in-out; + + @include breakpoint($medium) { display: block; } + + &--open { left: 0; } + + &__icon { + background-color: $blue--marine-5; + cursor: pointer; + width: $iconWidth; height: $iconWidth; + + display: inline-block; + + &:hover { background-color: darken($blue--marine-5, 5%); } + + &:before { + color: white; + content: '\f1e0'; + font: $fontAwesome; + font-size: rem-calc(18); + + position: relative; + top: rem-calc(7); + left: rem-calc(7); + + .sticky-tab--open & { + content: '\f053'; + top: rem-calc(8); + left: rem-calc(9); + } + } + } + + &__text { + padding: rem-calc(0 6); + + display: inline-block; + + transform: translateY(6px); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/table.scss b/app/assets/stylesheets/molecules/table.scss new file mode 100644 index 000000000..797886490 --- /dev/null +++ b/app/assets/stylesheets/molecules/table.scss @@ -0,0 +1,177 @@ +@include b(table) { + @extend %color-base; + width: 100%; + + @include e(column) { + cursor: pointer; + + @include text--alt(body, x-thin); + text-align: right; + &:first-child { text-align: left; } + + @include m(align-left) { + text-align: left; + } + + padding-bottom: 0.5em; + + @include m(with-sorting) { + &:after { + @include color($green); + @include fa(arrow-both, $margin: (direction: left, value: 7px)); + } + } + + &.is-sorted-asc { + &:after { + @include color($green); + @include fa(arrow-up, $margin: (direction: left, value: 7px)); + } + } + + &.is-sorted-desc { + &:after { + @include color($green); + @include fa(arrow-down, $margin: (direction: left, value: 7px)); + } + } + + @include m(no-arrows) { + &:before, &:after { content: null; } + } + } + + @include e(header) { + line-height: rem-calc(32); + border-bottom: solid rem-calc(1) $grey-33; + th { padding-right: 0.625rem; } + }; + + @include e(label) { + @include text(body, thin); + @include line-height(1.666em); + + @include m(link) { + color: $table-link__color; + } + + @include m(align-top) { + vertical-align: top; + } + + padding-top: rem-calc(10); + padding-right: .65em; + vertical-align: middle; + text-align: left; + }; + + @include e(row) { + @include text(body, thin); + border-bottom: solid rem-calc(1) $grey-15; + margin-bottom: rem-calc(10); + padding: rem-calc(5 0); + + @include m(last) { + td { padding-top: 1em; } + font-weight: bolder; + } + + @include m(first) { + td { padding-top: rem-calc(24); } + } + }; + + @include e(value) { + text-align: right; + + @include line-height(1.666em); + vertical-align: middle; + padding-right: 0.625rem; + padding-top: rem-calc(10); + + @include m(link) { + color: $table-link__color; + } + } + +} + +//---------------------------------------- +// grey table +// +// - responsive (list on mobile) +// - alternate coloured rows +// - used on the marine page +//---------------------------------------- +.table--grey { + @extend .u-text-sans; + + text-align: left; + width: 100%; + + &__headers { + display: none; + + @include breakpoint($medium){ + border-bottom: solid rem-calc(1) $grey-77; + + display: flex; + } + } + + &__header-cell { + padding: rem-calc(8 4); + + @include breakpoint($medium){ flex: 0 0 25%; } + } + + &__row { + padding: rem-calc(8 0 6 0); + + @include breakpoint($medium){ + padding: 0; + + display: flex; + } + + &:nth-child(even) { + background-color: $grey-5; + } + } + + &__cell { + padding: rem-calc(8); + + @include breakpoint($medium){ + flex: 0 0 25%; + padding: rem-calc(12 4); + } + + &:before { + font-weight: bold; + margin-right: rem-calc(6); + + @include breakpoint($medium){ display: none; } + } + + // Add copy for the table header + // These are shown on mobile only + // Check _pledges.html.erb for the copy + + &:nth-child(1) { + &:before { content: 'PA name:'; } + } + + &:nth-child(2) { + &:before { content: 'Country:'; } + } + + &:nth-child(3) { + &:before { content: 'Size:'; } + } + + &:nth-child(4) { + &:before { content: 'Date of designation:'; } + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/tooltip.scss b/app/assets/stylesheets/molecules/tooltip.scss new file mode 100644 index 000000000..4ce99d2f3 --- /dev/null +++ b/app/assets/stylesheets/molecules/tooltip.scss @@ -0,0 +1,59 @@ +@include b(tooltip) { + background-color: $white; + + position: absolute; + left: 0; + z-index: 1000; + + + white-space: nowrap; + + min-width: 100%; + padding: rem-calc(20); + padding-top: rem-calc(24); + border: solid rem-calc(1) $grey-5; + border-radius: rem-calc(8); + margin-top: 1rem; + + &:after, &:before { + bottom: 100%; + left: 50%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + } + + &:after { + border-color: rgba(255, 255, 255, 0); + border-bottom-color: #ffffff; + border-width: rem-calc(10); + margin-left: rem-calc(-10); + } + &:before { + border-color: rgba(242, 242, 242, 0); + border-bottom-color: #f2f2f2; + border-width: rem-calc(11); + margin-left: rem-calc(-11); + } + + @include e(trigger) { + display: inline-block; + position: relative; + } + + @include e(element) { + @extend %acts-as-link; + display:block; + width: 100; + + padding: .625rem rem-calc(4); + padding-bottom: rem-calc(4); + margin-bottom: rem-calc(4); + + border-bottom: solid rem-calc(1) $grey-15; + text-align: left; + } +} diff --git a/app/assets/stylesheets/molecules/twitter-share.scss b/app/assets/stylesheets/molecules/twitter-share.scss new file mode 100644 index 000000000..19aa1c3f7 --- /dev/null +++ b/app/assets/stylesheets/molecules/twitter-share.scss @@ -0,0 +1,48 @@ +//---------------------------------------- +// mixins +//---------------------------------------- +@mixin arrow ($colour, $size) { + border-top: solid $size $colour; + border-right: solid $size transparent; + border-left: solid $size transparent; + content: ''; + + width: 0; height: 0; + position: absolute; + bottom: -$size; + left: 50%; + + transform: translateX(-50%); +} + +//---------------------------------------- +// twitter share styles +//---------------------------------------- +.twitter-share { + @extend .u-text-sans; + + background: white; + border: solid rem-calc(2) $blue--marine-4; + border-radius: rem-calc(3); + padding: rem-calc(4 5 4 10); + + display: none; + position: absolute; + z-index: 100; + + transform: translate(-50%, -100%); + + &--active { display: block; } + + &:before { @include arrow($blue--marine-4, rem-calc(8)); } + + &:after { @include arrow(white, rem-calc(5)); } + + &__title { + margin-right: rem-calc(4); + + display: inline-block; + + transform: translateY(-1px); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/molecules/uservoice.scss b/app/assets/stylesheets/molecules/uservoice.scss new file mode 100644 index 000000000..192128975 --- /dev/null +++ b/app/assets/stylesheets/molecules/uservoice.scss @@ -0,0 +1,16 @@ +@mixin uservoice { + @include link-with-icon($icon__margin-sides: rem-calc(4)) { + @include e(icon) { + @include color($white); + } + + @include text(small, bold); + @include line-height(2rem); + } + + @content; +} + +@include b(uservoice) { + @include uservoice; +} diff --git a/app/assets/stylesheets/molecules/value.scss b/app/assets/stylesheets/molecules/value.scss new file mode 100644 index 000000000..f48a6c24a --- /dev/null +++ b/app/assets/stylesheets/molecules/value.scss @@ -0,0 +1,46 @@ +@mixin value($number__color: $value-number__color, $number-alt-color__color: $value-number-alt-color__color) { + @include b(value) { $block: &; + position: relative; + + @include e(number) { + @include color($number__color); + @include text--alt(medium, bold); + + @include m(inherit) { font: inherit; } + @include m(xxlarge) { @include text--alt(xxlarge, bold); } + @include m(xxxxlarge) { + @include text--alt(xxxxlarge, bold); + @media print { @include text--alt(large, bold); } + } + @include m(large) { @include text(xlarge, bold); } + + @include m(alt-color) { @include color($number-alt-color__color); } + + @include only-mobile { + margin-right: rem-calc(8); + } + } + + @include e(label) { + @extend %color-base; + @include text(body, thin); + + @include m(right) { + float: right; + } + + @include m(side) { + float: left; + margin: rem-calc(0 16); + width: 50%; + + @include only-mobile { + float: none; + margin: 0; + } + } + } + } +} + +@include value; diff --git a/app/assets/stylesheets/old/base.scss b/app/assets/stylesheets/old/base.scss new file mode 100644 index 000000000..011c16bd7 --- /dev/null +++ b/app/assets/stylesheets/old/base.scss @@ -0,0 +1,80 @@ +@import 'transitions'; + +$gutter: 0px; + +* { + margin: 0; +} + +html, +body { + -webkit-font-smoothing: antialiased; + height: 100%; +} + +.body-container { + min-height: 100%; + margin-bottom: -2rem; +} +a, button { + background-color: inherit; + border: 0; + color: inherit; + cursor: pointer; + display: inline-block; + font: inherit; + padding: 0; + + &:link { + text-decoration: none; + } + + // &:focus { outline:none; } + +} + +sup { + font-size: 0.6em; + vertical-align: super; + font-family: 'MuseoSlab-700'; +} + +strong { + font-family: 'MuseoSans'; + font-weight: 500; + color: $grey-77; +} + +img { max-width: 100%; height: auto; } + +select { + appearance:none; + -webkit-appearance: none; + -moz-appearance: none; + + font-size: 14px; + font-family: 'MuseoSans'; + font-weight: 300; + border: 1px solid $grey-33; + padding: 10px; + color: $grey-100; + background-color: $white; + border-radius: 0; + text-indent: 0.01px; + text-overflow: ""; +} + +.left { float: left; } +.right { float: right; } + + +.flash { + border: 1px solid $green; + padding: 20px; + margin-bottom: 30px; +} + +.protected_areas-parent #map +.protected_areas-parent { + top: 120px; +} diff --git a/app/assets/stylesheets/old/buttons.scss b/app/assets/stylesheets/old/buttons.scss new file mode 100644 index 000000000..bdb0dd78a --- /dev/null +++ b/app/assets/stylesheets/old/buttons.scss @@ -0,0 +1,36 @@ +a.btn { + display: inline-block; + font-weight: normal; + background: $color--base-btn-bg; + border: none; + font-size: 0.9em; + box-sizing: border-box; + text-align: center; + color: $color--base-btn-text; + + &:hover { + background-color: $color--base-btn-hover-bg; + cursor: pointer; + } +} + +.btn.btn-download { + width: 231px; + height: 75px; + padding: 10px 15px; + font-size: 1.2em; + line-height: 1.5em; + text-align: left; + + img { + float: right; + margin-top: 12px; + } + + span { + float: left; + display: inline-block; + width: 125px; + } +} + diff --git a/app/assets/stylesheets/old/devise.scss b/app/assets/stylesheets/old/devise.scss new file mode 100644 index 000000000..a74f78529 --- /dev/null +++ b/app/assets/stylesheets/old/devise.scss @@ -0,0 +1,105 @@ +div { + + &.login-right-panel { + position:absolute; + background: $grey-33; + right: 0px; + padding: 40px; + overflow:hidden + + img { + //float:left; + //height: 20%; + //width: 20%; + //margin-right: 10px; + } + + h1,h2,p { + text-wrap:none; + } + + h1 { + font-size: 36px; + text-transform: uppercase; + color: $grey-77; + } + + article { @include outer-container; + div { + &.login-image { @include span-columns(3);} + &.login-text { @include span-columns(9);} + } + } + } + + &.login-form { + padding: 50px; + + input { + border: 1px solid $grey-33; + font-size: 24px; + padding: 5px; + width: 100%; + + &.btn { + background: $dark-blue; + text-transform: uppercase; + color: $white; + border:none; + font-size: 16px; + padding: 10px; + } + } + + label { + color: $grey-77; + display: block; + margin-bottom: 10px; + } + + article { width:400px; } + } + + &.login-right-panel, &.login-form { + article { + margin-left: auto; + margin-right: auto; + text-wrap: none; + margin-bottom: 60px; + } + + h1,h2,p { + margin-bottom: 20px; + } + + h1:last-child,h2:last-child,p:last-child { + margin-bottom: none; + } + } + + div { + &.form-group { + margin-bottom: 40px; + } + + &.form-group:last-child { + margin-bottom: 0px; + } + + &.shared-links { + width: 100%; + text-align: center; + margin-top: 20px; + + a { + text-decoration: none; + color: $grey-55; + margin-right: 20px; + } + + a:hover { color: $grey-100; } + + a:last-child { margin-right: 0px; } + } + } +} diff --git a/app/assets/stylesheets/old/home.scss b/app/assets/stylesheets/old/home.scss new file mode 100644 index 000000000..6a78d8bab --- /dev/null +++ b/app/assets/stylesheets/old/home.scss @@ -0,0 +1,151 @@ +.btn-map-download { + text-align: center; + @include text--alt(body, bold); + font-size: .9rem; + + @include color-with-state($big-button__bg-color, ( + hover: $big-button__bg-color--hover, + active: $big-button__bg-color--pressed, + disabled: $big-button__bg-color--disabled + ), background-color); + + height: 100%; + min-width: 180px; + box-sizing: border-box; + + border-radius: $big-button__border-radius; + color: $big-button__color; + &--marine { + background-color: $blue--marine-1; + color: $blue--marine-5; + padding: 5px 10px; + &:hover { + background-color: $blue--marine-2; + } + } +} + +.marine-download { + top: -120px; + left: 50%; + transform: translateX(-50%); + z-index: 400; +} + +.btn.btn-marine-toggle { + position: fixed; + top: 181px; + right: 20px; + height: 40px; + font-size: 1em; + + background-color: $grey-100; + transition: top $search-bar-transition-time ease; + + i { + margin-right: 5px; + } + + &.opened { + transition: top $search-bar-transition-time ease; + top: 171px; + } + + &:hover { + background-color: $white; + color: $grey-100; + } +} + +.nav-main.home-nav-main { + background-color: $navbar__bg-color; + + li.active { + a { + background-color: $color--header-active-link; + } + } + + li { + a { + color: $color--header-link; + } + + a:hover { + background-color: $color--header-hover-link; + } + } + + li.search { + background-image: image_url('icon-search-grey.png'); + } +} + +nav .download-type-dropdown { + position: absolute; +} + +.download-type-dropdown { + z-index: 2000; + display: none; + + li { + background-color: $green--dark; + border-top: solid 1px $white; + float: none; + line-height: 1rem; + + a { + text-align: left; + color: $white; + + display: inline-block; + padding: 20px; + width: 100%; + } + } +} + +.home-parent { + transition: top $search-bar-transition-time ease; + + #map { + left: 0; + } + + &.opened { + transition: top $search-bar-transition-time ease; + top: 120px; + } +} + +.explore { + width: 840px; + height: 120px; + position: relative; + z-index: 900; + margin: 150px auto; + box-sizing: border-box; + + h1{ + font-family: 'MuseoSans'; + font-weight: 100; + font-size: 30px; + color: $green; + padding: 10px 20px; + clear: both; + } + + .search-bar-container { + width: 600px; + height: 75px; + background: white; + padding: 20px; + float: left; + box-shadow: 5px 5px 5px rgba(0,0,0,0.20); + } + + a.btn { + float: right; + } +} diff --git a/app/assets/stylesheets/old/leaflet_overrides.scss b/app/assets/stylesheets/old/leaflet_overrides.scss new file mode 100644 index 000000000..5fd7936e7 --- /dev/null +++ b/app/assets/stylesheets/old/leaflet_overrides.scss @@ -0,0 +1,47 @@ +// Markers +.marker-cluster-medium { + div { + margin-left: 4px; + } +} + +.marker-cluster-medium { + width: 50px !important; + height: 50px !important; + border-radius: 25px; + + div { + font-size: 16px; + margin: 10px; + margin-left: 9px; + } +} + +.marker-cluster-large { + width: 60px !important; + height: 60px !important; + border-radius: 30px; + + div { + font-size: 18px; + margin: 15px 5px; + width: 50px; + } +} + +.marker-cluster-small, +.marker-cluster-medium, +.marker-cluster-large { + border: 1px solid $color--leaflet-cluster-border; + + &, div { + color: $color--leaflet-cluster-text; + background: $color--leaflet-cluster-bg; + } +} + +@include only-mobile { + .leaflet-control-container { + display: none; + } +} diff --git a/app/assets/stylesheets/old/map.scss b/app/assets/stylesheets/old/map.scss new file mode 100644 index 000000000..633af01ab --- /dev/null +++ b/app/assets/stylesheets/old/map.scss @@ -0,0 +1,19 @@ +@import 'transitions'; + +.search-grid { + transition: top $search-bar-transition-time ease; + + &.opened { + transition: top $search-bar-transition-time ease; + top: 120px; + } + + &.sub-nav-open { + top: 120px; + } +} + +.map-filters { + height: 100%; + min-height: 100%; +} diff --git a/app/assets/stylesheets/old/neat-grid.scss b/app/assets/stylesheets/old/neat-grid.scss new file mode 100644 index 000000000..ad0325dec --- /dev/null +++ b/app/assets/stylesheets/old/neat-grid.scss @@ -0,0 +1,21 @@ +/* Defaults */ +$gutter: 0%; +$max-width: 100%; + +section { + @include outer-container; + max-width: initial; +} + +.col-one { @include span-columns(1); } +.col-two { @include span-columns(2); } +.col-three { @include span-columns(3); } +.col-four { @include span-columns(4); } +.col-five { @include span-columns(5); } +.col-six { @include span-columns(6); } +.col-seven { @include span-columns(7); } +.col-eight { @include span-columns(8); } +.col-nine { @include span-columns(9); } +.col-ten { @include span-columns(10); } +.col-eleven { @include span-columns(11); } +.col-twelve { @include span-columns(12); } diff --git a/app/assets/stylesheets/old/projects.scss b/app/assets/stylesheets/old/projects.scss new file mode 100644 index 000000000..213d48fd0 --- /dev/null +++ b/app/assets/stylesheets/old/projects.scss @@ -0,0 +1,123 @@ +.project { + background-color: $color--project-bg; + + &:last-child { + .project-item { + border-bottom: 1px solid $color--project-item-border; + } + } + + .project-header { + height: 60px; + background-color: $color--project-header-bg; + border-bottom: solid 1px $color--project-header-border; + border-top: solid 1px $color--project-header-border; + + ul li { + line-height: 58px; + float:left; + + &.project-name { + cursor: pointer; + } + + &.right { + float: right; + + &:last-child { + margin-right: 20px; + } + } + } + input { + font-size: 15px; + border: 0px; + padding: 5px 10px; + } + + h1 small { + font-size: 0.8em; + margin-left: 5px; + color: $color--project-header-small; + } + + + h1, h2, a { + padding: 0px 20px; + display: block; + box-sizing: border-box; + color: $grey-77; + + &:hover { color: $grey-100; } + &.active { background-color: $grey-33; } + } + + h2, a { font-size: 14px; } + } + + .project-item { + min-height: 256px; + @include span-columns(3); + @include omega(4n+1); + @include fill-parent; + margin-right: 0px; + width: 25%; + border-right: 1px solid $color--project-item-border; + background-color: $color--project-item-bg; + + h4 { margin: 20px; } + p { padding: 20px; } + } +} + +.no-projects { + width:50%; + margin: 50px auto; + border: 1px solid $green; + padding:40px; + + h1 { + font-size: 32px; + margin-bottom: 20px; + } + + h2 { + color: $grey-77; + } + +} + +.info-search { + margin-top: 20px; +} + +.info-search:after { + content: " "; + display: block; + height: 0; + clear: both; +} + +.projects-parent { + overflow: scroll; +} + +.btn-project-download { + cursor: pointer; +} + +.projects-dropdown { + background-color: $color--project-dropdown-bg; + + li a { + display: inline-block; + width: 100%; + padding: 13px 7px; + border-bottom: solid 1px $color--project-header-border; + border-top: solid 1px $color--project-header-border; + + &:hover { + background-color: $color--project-header-border; + } + } +} diff --git a/app/assets/stylesheets/old/protected_areas.scss b/app/assets/stylesheets/old/protected_areas.scss new file mode 100644 index 000000000..43b7fdf52 --- /dev/null +++ b/app/assets/stylesheets/old/protected_areas.scss @@ -0,0 +1,264 @@ +.old-factsheet { + position: fixed; + top: 120px; + bottom: 75px; + overflow-y: auto; + width: 450px; + + @include only-mobile { + position: initial; + top: initial; + bottom: initial; + width: initial; + } +} + +.old-map { + position: fixed; + left: 470px; + top: 120px; + bottom: 75px; + + .leaflet-bottom { bottom: 3.25rem; } +} + +.map-disclaimer { + display: block; + position: absolute; + bottom: 0; + z-index: 1000; + background: rgba(43,49,70,0.5); + width: 100%; + color: white; + text-align: center; + padding: 5px; +} + +.fixed-footer { + position: fixed; + bottom: 0; + + @include only-mobile { + position: initial; + } +} + +.factsheet { + overflow-y: auto; + width: 400px; + height: 100%; + float:left; +} + +.factsheet article { + padding: 20px; + font-family: MuseoSans-100; + font-size: 14px; + color: $color--pa-text; + + h3 { + color: $color--pa-header; + margin: 20px 0px; + } + + h3:first-child { + margin: 0px 0px 20px 0px; + } +} + +.key-records { + li { + margin: 15px 0; + height: 15px; + clear: left; + + &.ellipsed { + cursor: pointer; + } + + p { + float:left; + padding: 0 5px 0 0; + background: $white; + overflow:hidden; + white-space: nowrap; + + &.hidden-record { + display: none; + } + } + + strong { + float: right; + margin-left: 0px; + padding: 0 0 0 10px; + background: $white; + max-width:55%; + overflow:hidden; + text-overflow:ellipsis; + height: 15px; + white-space: nowrap; + display: inline-block; + + &.full-record { + max-width: 100%; + } + } + } +} + +.data-provider{ + margin: 30px 0; + padding: 5px; + border-top: 1px solid $grey-55; + border-bottom: 1px solid $grey-55; + background: $grey-33; + + ul li{ + background: none; + } +} + +.factsheet table { + width: 100%; + margin: 20px 0 0 0; + + tr { + border-top: 1px solid $color--pa-table-border; + } + + tr:first-child { + border-top: none; + } + + td { + width: 50%; + padding: 10px 5px 10px 0; + line-height: 1.5em; + + strong { + font-family: MuseoSans-300; + font-weight: normal; + font-size: 14px; + display: block; + color: $color--pa-table-attribute; + } + } +} + +.protected-area-infographic { + background: $green--dark; + text-align: left; + width: 100%; + + > div { + padding-left: 20px; + color: $color--pa-infographic-text; + font-size: 12px; + border-bottom: solid 1px $color--pa-infographic-border; + } + + > div:last-child { + border-bottom: none; + } +} + +.percentage-container { + span { + font-size: 40px; + font-family: 'MuseoSans'; + font-weight: 500; + line-height: 60px; + } +} + +.data-completion-info { + padding: 20px; + + div:not(:last-child) { margin-bottom: 5px; } + + h3 { + @include text(body, bold); + @include color(white) + } + + & ul { + margin: 8px 0px; + column-count: 2; + + li { + @include text(small, thin); + padding: 2px; + display: block; + } + } +} + +.data-completion__trigger { + width: 100%; + text-align: center; + @include text(body); + @include color($white); + &.is-closed:after { @include fa(chevron-down); } + &.is-open:after { @include fa(chevron-up); } +} + +.open-details-anchor { + font-size: 18px; + color: $grey-33; + width: 100%; + display: block; + box-sizing: border-box; +} + +.related-source { + margin: 30px 20px; + padding: 5px; + border-top: 1px solid $grey-55; + border-bottom: 1px solid $grey-55; + background: $grey-33; + + a { + color: $green; + background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAD1BMVEX///94nzGRtkzL3avX5b7nSZYyAAAAAXRSTlMAQObYZgAAAC9JREFUeAFFjFEKAFEIhPRN9z/zQhs1/YhgQOwFkJ5E4Sn/UYtl3uAkXuY9W8c5PhJyAFT42ovRAAAAAElFTkSuQmCC) right no-repeat; + padding: 0 15px 0 0; + } + + span { + margin: 0; + padding: 0; + } +} + +.nearest-protected-areas { + li { + border-top: 1px solid $grey-15; + border-bottom: 1px solid $grey-15; + clear: left; + height: 101px; + margin: 10px 0; + } + + a { + float: left; + + img { + width: 177px; + height: 99px; + } + } + + h4 { + width: auto; + height: 99px; + background: $grey-3; + margin: 0 0 0 1px; + float: none; + + a { + width: 40%; + display: block; + margin: 20px 0 0 5px; + } + } +} diff --git a/app/assets/stylesheets/old/search.scss b/app/assets/stylesheets/old/search.scss new file mode 100644 index 000000000..9c5a26b81 --- /dev/null +++ b/app/assets/stylesheets/old/search.scss @@ -0,0 +1,269 @@ +$width--search-sidebar: 270px; + +.search-sub-nav { + position: fixed; + top: 60px; + z-index: $z-index-1; +} + +.search-sub-nav ul { + li { + &.right { + float: right; + } + + h1, h2 { + display: inline-block; + } + + h2 { + color: $grey-77; + } + + .btn-search-download { + border-left: solid 1px $color--search-download-border; + border-right: solid 1px $color--search-download-border; + background-color: $color--search-download-bg; + color: $color--search-download-text; + text-transform: uppercase; + font-size: 1em; + position: absolute; + right: 20px; + height: 60px; + + img { + margin-top: 4px; + } + } + } +} + +.map-filters.search-map-filters { + background: $color--search-filters-bg; + + transition: margin $search-sidebar-transition-time ease; + + &.closed { + margin-left: (-$width--search-sidebar); + transition: margin $search-sidebar-transition-time ease; + + } + + header { + height: 40px; + background-color: $color--search-filters-header; + + ul { + float: right; + + li { + border-left: solid 1px $color--search-switch-border; + float: left; + + &.active { + background-color: $color--search-filters-active; + } + + a { + padding: 10px; + vertical-align: middle; + display: block; + height: 40px; + width: 40px; + background-color: inherit; + } + } + } + + span { + color: $color--search-filters-text; + display: inline-block; + margin: 13px 0px 0px 14px; + } + } + + > ul { + margin-top: 40px; + padding-bottom: 40px; + overflow-y: auto; + height: 100%; + } + + > ul > li { + border-bottom: solid 1px $color--search-filters-border; + padding: 0px 20px 20px 20px; + + &:first-child { + padding: 10px 0 10px 20px; + border-bottom: none; + + + a { + float: right; + color: $white; + background: $grey-55; + padding: 3px 5px; + font-size: 13px; + margin: 0 10px 0 0; + + &:hover { + background: $grey-100; + } + } + } + + h5 { + padding: 20px 10px 10px 0px; + text-transform: uppercase; + } + + > ul >li { + padding: 5px 0 5px 0; + + strong{ + color: $green; + } + + } + } +} + +.search-parent #map, .search-parent .search-grid { + left: $width--search-sidebar; + + @include only-mobile { + left: initial; + } + + transition: left $search-sidebar-transition-time ease; + + &.opened { + left: 0px; + transition: left $search-sidebar-transition-time ease; + } + + &.no-results { + left: 0px; + } +} + +.fixed-sidebar-toggle { + background-color: $color--search-filters-header; + padding: 10px; + vertical-align: middle; + display: block; + position: fixed; + top: 120px; + left: -40px; + width: 40px; + height: 40px; + + transition: left 0.3s ease; + + &.opened { + transition: left 0.3s ease; + left: 0px; + } +} + +.search-grid { + @include clearfix; + + background-color: $grey-5; + padding: 1rem; + + @include only-desktop { + @include span-columns(9.5); + @include shift(2.5); + } +} + +.result { + background-color: $white; + + @include only-desktop { + @include span-columns(3); + @include omega(4n); + } + + @include only-mobile { + @include span-columns(6); + @include omega(2n); + } + + margin-bottom: 1rem; + border-right: 2px solid $grey-15; + border-right: 2px solid transparentize($grey-15, 0.2); + + a { width: 100%; } +} + +.inner-result { + @extend %color-base; + @include text(body); + padding: 8px; + position: relative; + height: 128px; + margin-top: -4px; + border-bottom: 3px solid $grey-15; + + h3 { + margin-top: 4px; + + a:first-of-type, + small { + position: absolute; + left: 8px; + right: 8px; + display: block; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + } + + small { + top: 26px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + + margin-top: 5px; + padding-top: 5px; + + border-top: 1px solid $green; + display:block; + color: $grey-77; + } + } + + p { + @include text--alt(small, thin); + @include color($white); + position: absolute; + left: 8px; + right: 8px; + bottom: 8px; + padding: 3px 5px; + font-size: 12px; + background: $green; + } +} + +.pagination { + @include text(body, thin); + @extend %color-base; + margin: 0 auto; + width: 100%; + text-align: center; + float: left; + padding: 16px; + + a { + margin: 5px; + } + + .current { + @include text(body, bold); + @include color($green); + } +} diff --git a/app/assets/stylesheets/old/search_bar.scss b/app/assets/stylesheets/old/search_bar.scss new file mode 100644 index 000000000..55e6e0aae --- /dev/null +++ b/app/assets/stylesheets/old/search_bar.scss @@ -0,0 +1,44 @@ +.search-bar--old { + height: 60px; + width: 100%; + float: left; + padding: 15px 20px; + background-color: $color--search-bar-bg; + z-index: $z-index-3; + position: fixed; + top: 60px; + display: none; +} + +.search-input, +.search-submit { + height: 31px; +} + +.search-input { + color: $color--search-input-text; + background-color: $color--search-input-bg; + font-size: 16px; + line-height: 33px; + padding-left: 10px; + border: 0; + outline: none; + box-sizing: border-box; + float: left; + display: block; + margin-right: 0.35765%; + width: 84.94039%; +} + +.search-submit { + color: $color--search-input-text; + background-color: $color--search-input-bg; + float: left; + display: block; + width: 14.70196%; + line-height: 1.875rem; + + &:hover { + background-color: $color--search-input-bg-hover; + } +} diff --git a/app/assets/stylesheets/old/static_pages.scss b/app/assets/stylesheets/old/static_pages.scss new file mode 100644 index 000000000..8f7eface3 --- /dev/null +++ b/app/assets/stylesheets/old/static_pages.scss @@ -0,0 +1,97 @@ +.static_pages-parent { + .header { + height: 300px; + background: image_url('background.jpg') no-repeat; + background-position: center center; + background-size: 100%; + } + + .headline { + display:block; + margin: auto; + width: 550px; + position:relative; + top: 25%; + + h1 { + font-size: 48px; + color: $white; + text-align: center; + line-height: 60px; + font-family: MuseoSlab-500; + } + } + + .about-links { + width: 100%; + margin: 40px 0; + height: 125px; + } + + + .about-link { + width: 33.33%; + line-height: 28px; + color: $white; + background-color: $dark-blue; + padding: 20px; + border-right: 1px solid $white; + display: inline-block; + text-align: center; + margin: auto; + font-size: 18px; + float: left; + height: 124px; + + &:last-child { border-right: none; } + } + + article { + a { + color: $blue; + } + + pre { + padding-left: 10px; + font-size: 14px; + line-height: 32px; + } + + p { + font-size: 18px; + line-height: 28px; + } + + p:last-child { + margin-bottom: 40px; + } + + p, h2, pre { + margin: auto; + margin-top: 40px; + width: 70%; + } + } + + article.centered { + p { + text-align: center; + } + } + + h1, h2 { + font-family: MuseoSlab-500; + border-bottom: 1px solid $grey-33; + border-top: 1px solid $grey-33; + padding: 20px 0px; + } + + h1 { + font-size: 36px; + text-align: center; + } + + h2 { + font-size: 28px; + } +} diff --git a/app/assets/stylesheets/old/transitions.scss b/app/assets/stylesheets/old/transitions.scss new file mode 100644 index 000000000..17b35f3e5 --- /dev/null +++ b/app/assets/stylesheets/old/transitions.scss @@ -0,0 +1,2 @@ +$search-bar-transition-time: 0.8s; +$search-sidebar-transition-time: 0.8s; diff --git a/app/assets/stylesheets/organisms/article.scss b/app/assets/stylesheets/organisms/article.scss new file mode 100644 index 000000000..143d6e40f --- /dev/null +++ b/app/assets/stylesheets/organisms/article.scss @@ -0,0 +1,100 @@ +@include b(article) { + padding: { + left: rem-calc(16); + right: rem-calc(16); + } + @include only-mobile { + padding: 0; + } + + @include e(title) { + margin-bottom: rem-calc(40); + &:not(:first-child) { margin-top: rem-calc(40); } + + @include text(xxlarge, thin); + @include color($color--base); + + @include only-mobile { + margin-bottom: rem-calc(24); + @include text(large, thin); + } + + @include m(smaller) { + @include text(xlarge, thin); + } + + @include m(paragraph) { + @include text(medium); + margin-bottom: rem-calc(16); + } + + @include m(subparagraph) { + @include text(headline); + margin-bottom: rem-calc(16); + } + + @include m(no-push) { + margin-bottom: 0; + } + } + + @include e(paragraph) { + margin-bottom: rem-calc(20); + + @include text(body, thin); + @extend %color-base; + + @include m(bigger) { + @include text--alt(headline, thin); + } + } + + @include e(bold-text) { + @include text--alt(body, bold); + } + + @include e(cursive-text) { + font-style: italic; + } + + @include e(link) { + @include text(body, bold); + @extend %acts-as-link; + + &.is-external { + &:after { + @include fa(external-link-square, (direction: left, value: 3px)) + } + } + } + + @include e(image) { + display: block; + margin: auto; + } + + @include e(list) { + margin-left: rem-calc(40); + + @include m(less-margin) { + margin-left: rem-calc(16); + } + } + + @include e(list-item) { + @extend .article__paragraph; + + position: relative; + + &:before { + content: '\2022'; // circle bullet + color: $article-list-index__color; + + font-size: rem-calc(16); + font-weight: 700; + + position: absolute; + left: rem-calc(-16); + } + } +} diff --git a/app/assets/stylesheets/organisms/autocompletion.scss b/app/assets/stylesheets/organisms/autocompletion.scss new file mode 100644 index 000000000..644454dfa --- /dev/null +++ b/app/assets/stylesheets/organisms/autocompletion.scss @@ -0,0 +1,45 @@ +@include b(autocompletion) { + display: none; + + width: 100%; + max-height: 15em; + overflow: auto; + padding: rem-calc(15 0); + z-index: 300; + + @include e(image) { + float: left; + height: 100%; + width: auto; + margin-right: rem-calc(20); + } + + @include e(result) { + @include text(body); + display: block; + height: rem-calc(100); + padding: rem-calc(20) 0; + + &:hover { + background-color: $grey-3; + } + } + + @include e(body) { + height: 100%; + + @include flexbox; + @include flex-direction(column); + @include justify-content(center); + @include align-items(flex-start); + } + + @include e(type) { + @include text(small); + font-style: italic; + padding: rem-calc(0 12); + margin-top: rem-calc(4); + + background-color: $grey-5; + } +} diff --git a/app/assets/stylesheets/organisms/container.scss b/app/assets/stylesheets/organisms/container.scss new file mode 100644 index 000000000..2870887f4 --- /dev/null +++ b/app/assets/stylesheets/organisms/container.scss @@ -0,0 +1,41 @@ +@include b(container) { + @include m(profile) { + @extend %clearfix; + + max-width: $max-width--desktop; + width: $container-profile--width; + margin: auto; + + @include only-mobile { + width: 100%; + padding: rem-calc(0 36); + } + } + + @include m(fullscreen) { + @extend %clearfix; + width: 100%; + padding: rem-calc(20); + padding-bottom: 0; + + @include only-mobile { + padding: 0; + } + } + + @include m(right-padded) { + padding-right: 5%; + } + + @include m(push-bottom) { + margin-bottom: rem-calc(192); + + @include only-mobile { + margin-bottom: rem-calc(96); + } + } + + @include m(push-top) { + margin-top: rem-calc(192); + } +} diff --git a/app/assets/stylesheets/organisms/cover-story.scss b/app/assets/stylesheets/organisms/cover-story.scss new file mode 100644 index 000000000..2fc7461ab --- /dev/null +++ b/app/assets/stylesheets/organisms/cover-story.scss @@ -0,0 +1,88 @@ +@include b(cover-story) { + @include flexbox; + + @include only-mobile { + @include flex-direction(column); + } + + + @include e(cover) { + @include m(above) { + width: 100%; + margin-bottom: rem-calc(48); + } + + height: 100%; + width: 65%; + + @include only-mobile { + width: 100%; + margin-bottom: rem-calc(8); + } + } + + @include e(story) { + @include flexbox; + @include flex-direction(column); + + width: 35%; + + @include only-mobile { + width: 100%; + } + } + + @include e(story-border) { + border-bottom: solid rem-calc(20) $grey-5; + margin-top: rem-calc(20); + width: 100%; + } + + @include e(story-title) { + @include text(medium, bold); + @include color($green); + margin-bottom: rem-calc(16); + } + + @include e(story-content) { + @extend %color-base; + @include text(body, thin); + margin-bottom: rem-calc(32); + } + + @include e(story-body) { + background-color: $white; + z-index: 100; + + @include flex(1); + height: 100%; + + padding-top: rem-calc(40); + + @include only-mobile { + padding-top: 0; + } + + @include m(left) { + margin-right: rem-calc(-96); + padding-right: rem-calc(40); + + @include only-mobile { + margin-right: 0; + padding-left: 0; + } + } + + @include m(right) { + margin-left: rem-calc(-96); + padding-left: rem-calc(40); + + @include only-mobile { + margin-left: 0; + padding-left: 0; + } + } + } + + +} diff --git a/app/assets/stylesheets/organisms/fact.scss b/app/assets/stylesheets/organisms/fact.scss new file mode 100644 index 000000000..1ffd4f068 --- /dev/null +++ b/app/assets/stylesheets/organisms/fact.scss @@ -0,0 +1,98 @@ +@include b(fact) { $block: &; + margin-bottom: .666em; + + @include e(header) { + @include header-with-delimiter($border-bottom: ( + color: $fact-header__border-bottom-color, + size: $fact-header__border-bottom-size + )); + } + + @include e(subheader) { + @include color($grey-100); + @include text(body); + margin-bottom: .5em; + } + + @include e(body) { + width: 100%; + padding: $fact-body__padding-top-bottom 0; + + @include m(no-padding) { + padding: 0; + } + + @include m(lateral-padding) { + padding-left: rem-calc(16); + padding-right: rem-calc(16); + } + } + + @include e(single-figure) { + @include text--alt(xxxxlarge, bold); + @include color($green); + + @media print { + @include text--alt(large, bold); + } + + @include m(push-down) { + margin-bottom: .4em; + } + } + + @include e(external-link) { + margin-left: .25em; + color: $fact-external-link__color; + } +} + +.fact { + &--circle { + border-radius: 100%; + font-family: 'MuseoSans'; + font-size: rem-calc(15); + line-height: 1.2; + padding-top: rem-calc(160); + text-align: center; + width: rem-calc(160); + + position: relative; + + @include breakpoint($medium){ + font-size: rem-calc(18); + padding-top: rem-calc(200); + width: rem-calc(200); + } + + @include breakpoint($large){ + font-size: rem-calc(24); + padding-top: rem-calc(260); + width: rem-calc(260); + } + } + + &--marine { + background-color: $blue--marine-1; + border: solid rem-calc(4) $blue--marine-3; + + @include breakpoint($medium){ + margin-left: rem-calc(32); + transform: translateY(-50px); + } + + @include breakpoint($large){ margin-left: rem-calc(50); } + } + + &__content { + padding: rem-calc(17); + + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + + @include breakpoint($medium){ padding: rem-calc(32); } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/organisms/filter-bar.scss b/app/assets/stylesheets/organisms/filter-bar.scss new file mode 100644 index 000000000..e0de0f24f --- /dev/null +++ b/app/assets/stylesheets/organisms/filter-bar.scss @@ -0,0 +1,100 @@ +.filter-bar { + position: fixed; + overflow: scroll; + height: 80%; + + @include span-columns(2.5); + + &--larger { + @include span-columns(3); + } + + &--non-fixed { + position: relative; + overflow: hidden; + } + + &__inner { + background-color: $grey-3; + + @include text(body); + @extend %color-base; + + padding: rem-calc(20); + } + + @include e(body) { + padding: rem-calc(16 0); + } + + @include e(clear) { + color: $white; + @include text--alt(small, bold); + + background-color: $green; + padding: rem-calc(0 4); + + float: right; + } + + @include e(count) { + @include color($green); + @include font-weight(bold); + } + + @include e(group) { + line-height: form-factor(headline, line-height); + margin-bottom: rem-calc(8); + } + + @include e(group-title) { + @include text(body); + @include color-with-state($color--base, ( + hover: $link__color--hover, + active: $link__color--pressed, + )); + + cursor: pointer; + + padding: rem-calc(8) 0; + border-bottom: solid rem-calc(1) $grey-4; + margin-bottom: rem-calc(8); + width: 100%; + + @include m(no-border) { + border: 0; + } + + &.is-open { + &:after { float: right; @include fa(chevron-up); } + } + + &.is-closed { + &:after { float: right; @include fa(chevron-down); } + } + } + + @include e(header) { + @include text(headline); + } + + &__value { + @include color-with-state($color--base, ( + hover: $link__color--hover, + active: $link__color--pressed, + )); + + display: block; + width: 100%; + padding: rem-calc(4); + cursor: pointer; + + &--smaller { + @include text(small); + } + } + + &__sub-value { + padding-left: rem-calc(14); + } +} diff --git a/app/assets/stylesheets/organisms/footer.scss b/app/assets/stylesheets/organisms/footer.scss new file mode 100644 index 000000000..f183bbb60 --- /dev/null +++ b/app/assets/stylesheets/organisms/footer.scss @@ -0,0 +1,54 @@ +.footer { + @extend %flexbox; + @include align-items(center); + + background-color: $navbar__bg-color; + flex-direction: column; + justify-content: space-between; + padding: rem-calc(16 20); + text-align: center; + width: 100%; + + @include breakpoint($medium){ + flex-direction: row; + padding: rem-calc(3 24); + text-align: left; + } + + &__element { + @include color($navbar-element__color); + @include line-height(null); + @include text(body); + + align-content: center; + font-size: rem-calc(14); + margin-bottom: rem-calc(8); + + @include breakpoint($medium){ + font-size: rem-calc(16); + margin-bottom: 0; + } + + &--with-separator { + border-left: solid rem-calc(2) $footer-element-with-separator__border-left-color; + padding-left: rem-calc(16); + margin-left: rem-calc(12); + } + + &--logos { + min-width: rem-calc(80); + + .unepwcmc-logo { + width: rem-calc(100); height: rem-calc(34); + + @include breakpoint($medium){ width: rem-calc(121); height: rem-calc(52); } + } + + .iucn-logo { + width: rem-calc(38); height: rem-calc(38); + + @include breakpoint($medium){ width: rem-calc(50); height: rem-calc(50); } + } + } + } +} diff --git a/app/assets/stylesheets/organisms/form.scss b/app/assets/stylesheets/organisms/form.scss new file mode 100644 index 000000000..b6b66c948 --- /dev/null +++ b/app/assets/stylesheets/organisms/form.scss @@ -0,0 +1,54 @@ +@include b(form) { + @include text(body); + @extend %color-base; + + @include e(label) { + @include text(body, bold); + + display: block; + margin-bottom: rem-calc(4); + } + + @include e(input) { + &:focus { outline: none; border-width: rem-calc(2); } + + @extend %color-base; + font: inherit; + + min-height: rem-calc(30); + min-width: 50%; + padding: rem-calc(8); + border: solid rem-calc(1) $grey-15; + + @include m(big) { + min-height: rem-calc(40); + min-width: 75%; + } + + @include m(textarea) { + min-height: rem-calc(112); + min-width: 100%; + } + } + + @include e(fieldset) { + margin-bottom: rem-calc(16); + } + + @include e(select-container) { + position: relative; + + &:after { + font-family: FontAwesome; + content: "\f078"; + color: $green; + + position: absolute; + top: 0; + right: 5%; + line-height: rem-calc(36); + cursor: pointer; + pointer-events: none; + } + } +} diff --git a/app/assets/stylesheets/organisms/gallery.scss b/app/assets/stylesheets/organisms/gallery.scss new file mode 100644 index 000000000..e6206172c --- /dev/null +++ b/app/assets/stylesheets/organisms/gallery.scss @@ -0,0 +1,55 @@ +@include b(gallery) { + @include e(body) { + position: relative; + + height: $gallery-body__height; + overflow: hidden; + white-space: nowrap; + + margin-bottom: rem-calc(10); + } + + @include e(body-inner) { + position: absolute; + top: 0; + left: 0; + + height: 100%; + } + + @include e(photo) { + display: inline-block; + + height: 100%; + width: auto; + + margin-right: rem-calc(6); + + &.is-blurred { + opacity: .4; + } + } + + @include e(controls) { + @extend .u-center; + + background-color: $gallery-controls__bg-color; + line-height: rem-calc(50); + } + + @include e(control) { + padding: $gallery-control__padding; + } + + @include e(counter) { + @include text(body); + @extend %color-base; + } + + @include e(current-index) { + color: $gallery-current-index__color; + background-color: $gallery-current-index__bg-color; + padding: $gallery-current-index__padding; + border-radius: $gallery-current-index__border-radius; + } +} diff --git a/app/assets/stylesheets/organisms/hero.scss b/app/assets/stylesheets/organisms/hero.scss new file mode 100644 index 000000000..a88e7572f --- /dev/null +++ b/app/assets/stylesheets/organisms/hero.scss @@ -0,0 +1,151 @@ +@mixin _top { + @include e(top) { + @include flexbox; + @include align-items(baseline); + @include justify-content(space-between); + + padding: rem-calc(0 20); + margin-bottom: .666rem; + + @include m(centered) { + @include justify-content(center); + } + + @include m(flex-start) { + @include justify-content(flex-start); + } + } + + @include e(title) { + @include text(large); + @include color($hero-title__color); + + @include m(thin) { + @include text(large, thin); + } + + @include m(base) { + @include color($color--base); + } + + @include m(bigger) { + @include text(xxlarge); + } + + @include m(article) { + padding: { + left: rem-calc(8); + right: rem-calc(8); + } + + @include text(xxlarge, thin); + @include color($color--base); + + @include only-mobile { + @include text(xlarge, thin); + line-height: 1.5; + } + } + + @include m(push) { + padding-bottom: rem-calc(24); + margin-bottom: rem-calc(40); + } + + @include m(with-border) { + border-bottom: solid rem-calc(1) $grey-15; + } + + @include m(nowrap) { + @include flex(1); + + @include only-desktop { + white-space: nowrap; + margin-right: .3125rem; + } + } + } + + @include e(link) { + @extend %acts-as-link; + @include color($hero-title__color); + @include flex(2); + + @include only-desktop { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + + &:not(:last-child) { margin-right: rem-calc(20); } + } +} + +@include b(hero) { + font-size: rem-calc(16); + margin: { + top: 2em; + bottom: 2em; + } + + @include only-mobile { + margin-top: .666rem; + } + + @include only-mobile { + @include m(overflow) { + margin-left: rem-calc(-36); + margin-right: rem-calc(-36); + } + } + + @include m(no-margin-top) { + margin-top: 0; + } + + @include m(no-margin-bottom) { + margin-bottom: 0; + } + + + @include _top; + + @include e(cover) { + @extend %flexbox; + @include justify-content(center); + @include align-items(center); + @include flex-direction(column); + + + height: 300px; + background: image_url('background.jpg') no-repeat; + background-position: 50% 100%; + background-size: 100% 110%; + + @include only-mobile { + text-align: center; + padding: rem-calc(0 32); + } + } + + @include e(cover-text) { + @include text(xxlarge, normal); + @include color($white); + + @include only-mobile { + @include text(xlarge, normal); + } + + @include m(alt) { + @include text--alt(xxlarge, x-bold); + + @include only-mobile { + @include text--alt(xlarge, x-bold); + } + } + } + + @include e(logo) { + } +} + diff --git a/app/assets/stylesheets/organisms/info-box.scss b/app/assets/stylesheets/organisms/info-box.scss new file mode 100644 index 000000000..07bb77c06 --- /dev/null +++ b/app/assets/stylesheets/organisms/info-box.scss @@ -0,0 +1,139 @@ +.info-box { + @extend %clearfix; + @extend %color-base; + + padding: $info-box__padding; + margin-bottom: $info-box__margin-bottom; + + &--fill-color { + background-color: $info-box__bg-color; + } + + &--overflow { + margin: { left: rem-calc(-16); right: rem-calc(-16); } + + @include only-mobile { + margin: 0; + } + + } + + &--alt-color { + background-color: $green; + color: $white; + } + + &--fff { + background-color: $white; + } + + &--hero { + min-width: rem-calc(500); + padding: rem-calc(20); + z-index: 400; + } + + &--shadow { + box-shadow: rem-calc(2 2 4) rgba(0, 0, 0, 0.3); + } + + &--padding-top-bottom { + padding: $info-box-padding-top-bottom__padding; + } + + &--margin-top { + margin-top: rem-calc(28); + } + + &--small { + @include font-weight(thin); + + color: $grey-100; + font-family: 'MuseoSans'; + font-size: .9375rem; + margin-right: rem-calc(16); + margin-bottom: rem-calc(4); + padding: rem-calc(10); + + display: inline-block; + } + + &--factsheet { + h3 { + @include font-weight(bold); + + color: $info-box__icon-color; + margin-bottom: rem-calc(18); + padding-bottom: rem-calc(4); + } + + @include font-weight(normal); + + color: $grey-100; + font-size: rem-calc(18); + } + + @include e(body) { + @extend %clearfix; + + @include m(no-padding) { padding: 0; } + @include m(inherit) { font: inherit; } + @include text(body, thin); + + @include m(flex) { @include flexbox; } + + padding: $info-box-body__padding; + } + + @include e(column) { + @extend .one-thirds; + } + + @include e(header) { + border-bottom: solid $fact-header__border-bottom-color $fact-header__border-bottom-size; + + @include m(white) { + color: $white; + border-bottom: solid $white $fact-header__border-bottom-size; + } + + @include m(with-padding) { + padding-bottom: rem-calc(12); + } + } + + @include e(link-icon) { + color: $info-box-link__color; + margin-right: $info-box-link-icon__margin-right; + } + + @include e(link) { + @include text(body, bold); + color: $info-box-link__color; + cursor: pointer; + + padding-bottom: $info-box-link__padding-bottom; + display: block; + } + + @include e(row) { + width: 100%; + + padding-top: rem-calc(16); + border-bottom: solid rem-calc(1) $info-box-row__border-bottom; + + @include m(around-padding) { + padding: rem-calc(32 0); + } + + @include m(light-border) { + &:not(:last-child) { + border-bottom: solid rem-calc(1) $grey-15; + } + } + + @include m(no-border) { + border: none; + } + } +} diff --git a/app/assets/stylesheets/organisms/key-records.scss b/app/assets/stylesheets/organisms/key-records.scss new file mode 100644 index 000000000..55f45c5cb --- /dev/null +++ b/app/assets/stylesheets/organisms/key-records.scss @@ -0,0 +1,12 @@ +@include b(key-records) { + @include e(row) { + @include clearfix; + + margin-bottom: rem-calc(8); + } + + @include e(value) { + max-width: 50%; + text-align: right; + } +} diff --git a/app/assets/stylesheets/organisms/navbar.scss b/app/assets/stylesheets/organisms/navbar.scss new file mode 100644 index 000000000..44fc3a987 --- /dev/null +++ b/app/assets/stylesheets/organisms/navbar.scss @@ -0,0 +1,192 @@ +.navbar { + @include flexbox; + + background-color: $navbar__bg-color; + color: $navbar-element__color; + justify-content: space-between; + padding: rem-calc(0 14); + + position: relative; + + @include breakpoint($large) { padding-right: 0; } + + &--darker { + background-color: $navbar__bg-color--darker; + } + +//---------------------------------------- +// burger +//---------------------------------------- + &__burger { + margin-left: auto; // required for IE11 + + &.is-open .burger-icon { @extend %burger-open; } + + &.is-open:hover .burger-icon { background-color: transparent; } + + .burger-icon { margin-right: 0; } + } + +//---------------------------------------- +// menu +//---------------------------------------- + &__menu { + @include flexbox; + + align-items: center; + background-color: $navbar__bg-color; + border-top: solid rem-calc(1) $navbar__bg-color--darker; + flex-direction: column; + + position: absolute; + top: rem-calc(54); + right: 0; + left: 0; + z-index: 2000; //to sit over the controls on the map on the home page + + @include breakpoint($large){ + border: none; + flex-direction: row; + + position: static; + top: auto; + right: auto; + left: auto; + } + + &.u-hide { + @include breakpoint($large){ display: flex; } // don't hide on desktop + } + } + + &__element { + @include text(body); + + align-items: center; + cursor: pointer; + line-height: $navbar__height; + justify-content: center; + width: 100%; height: 100%; + + display: flex; + position: relative; + + @include breakpoint($large){ + padding: rem-calc(0 10); + width: auto; + } + + &.active, + &:hover { + background-color: $navbar-element-hover__bg-color; + text-decoration: none; + + .navbar__submenu__title { background-color: $navbar-element-hover__bg-color; } // required for IE11 + } + + &.is-active { + background-color: $navbar-element-dark__bg-color; + + &:hover { background-color: $navbar-element-dark__bg-color; } + &:active { background-color: $navbar-element-dark__bg-color; } + } + + // delete? + &--dark { + background-color: $navbar-element-dark__bg-color; + &:hover { background-color: $navbar-element-dark__bg-color !important; } + } + // delete? + &--with-separator { + border-left: solid rem-calc(2) $navbar-element-dark__bg-color; + + &:before { top: 0; } + &:after { bottom: 0; } + &:before, &:after { + background-color: $navbar__bg-color; + + content: ""; + width: rem-calc(4); + height: rem-calc(8); + position: absolute; + left: -.25rem; + } + } + + &--submenu { flex-direction: column; } + + &--search { + background-color: transparent; // required for IE11 + + &.is-open { background-color: white; } // required for IE11 + } + + &--for-search-dropdown { + display: none; + + @include breakpoint($large){ + width: rem-calc(50); + + display: flex; + } + + &.is-active { + color: $navbar-element-for-search-dropdown-is-active__color; + background-color: $white; + + &:hover { background-color: $white; } + &:active { background-color: $white; } + } + } + // ok to change to logo? + &--bigger { + @include text(headline); + @include line-height($navbar__height); + } + // delete? + &--thinner { + @include text(small); + @include line-height($navbar__height--thinner); + } + // delete? + &--larger { + padding: rem-calc(0 20); + } + } + +//---------------------------------------- +// submenu +//---------------------------------------- + &__submenu { + background-color: $navbar__bg-color--darker; + padding: 0; + } + + &__submenu__title { + background-color: $navbar__bg-color; //required for IE11 + width: 100%; + + &:after { + @include fa(chevron-down); + padding-left: rem-calc(10); + } + + &.is-open:after { + @include fa(chevron-up); + + @include breakpoint($large){ @include fa(chevron-down); } + } + } + + &__submenu__link { + line-height: 2.6; + padding: rem-calc(0 10); + text-align: center; + + display: block; + + &:hover { background-color: $navbar-element-hover__bg-color; } + + @include breakpoint($large){ text-align: left; } + } +} diff --git a/app/assets/stylesheets/organisms/row.scss b/app/assets/stylesheets/organisms/row.scss new file mode 100644 index 000000000..e3eb65555 --- /dev/null +++ b/app/assets/stylesheets/organisms/row.scss @@ -0,0 +1,22 @@ +@include b(row) { + @extend %clearfix; + + @include m(no-push) { + margin-bottom: 0; + } + + @include m(push) { + margin-bottom: rem-calc(80); + } + + @include m(push2x) { + margin-bottom: 2em; + } + + @include m(with-border-top) { + border-top: solid rem-calc(1) $grey-5; + } + + margin-bottom: 1em; +} + diff --git a/app/assets/stylesheets/organisms/search-result.scss b/app/assets/stylesheets/organisms/search-result.scss new file mode 100644 index 000000000..9156f7679 --- /dev/null +++ b/app/assets/stylesheets/organisms/search-result.scss @@ -0,0 +1,56 @@ +@include b(search-result) { + @extend %color-base; + @extend %clearfix; + + border-bottom: solid rem-calc(1) $grey-5; + padding: { + top: rem-calc(16); + bottom: rem-calc(16); + left: 0; + right: rem-calc(48); + } + + @include only-mobile { + padding-right: 0; + } + + @include e(title) { + @include color($search-result-title__color); + @include text(headline); + + margin-bottom: rem-calc(16); + } + + @include e(body) { + @include text(body, thin); + margin-bottom: rem-calc(24); + } + + @include e(details) { + list-style: none; + } + + @include e(detail) { + @include text--alt(body, thin); + @include color($grey-55); + + border-right: solid rem-calc(1) $grey-5; + float: left; + padding: rem-calc(0 20); + + &:first-child { padding-left: 0; } + &:last-child { border-right: 0; } + + } + + @include e(tag) { + @include text(small); + @extend %color-base; + + font-style: italic; + + background-color: $grey-5; + margin-right: rem-calc(20); + padding: rem-calc(5 16); + } +} diff --git a/app/assets/stylesheets/organisms/section.scss b/app/assets/stylesheets/organisms/section.scss new file mode 100644 index 000000000..73d9b619f --- /dev/null +++ b/app/assets/stylesheets/organisms/section.scss @@ -0,0 +1,28 @@ +@include b(section) { + max-width: $max-width--desktop; + padding: rem-calc(0 16); + margin-bottom: rem-calc(16); + margin: {left: auto; right: auto;} + + @include breakpoint($large){ padding: rem-calc(0 112); } + + @include m(padding-top) { + padding-top: rem-calc(32); + } + + @include e(header) { + @extend %color-base; + @include text(xlarge, thin); + + margin-bottom: rem-calc(40); + padding-left: rem-calc(20); + padding-bottom: rem-calc(24); + + border-bottom: solid rem-calc(1) $grey-15; + } + + @include e(body) { + @extend %clearfix; + padding: rem-calc(0 20); + } +} diff --git a/app/assets/stylesheets/organisms/tabs.scss b/app/assets/stylesheets/organisms/tabs.scss new file mode 100644 index 000000000..d63414608 --- /dev/null +++ b/app/assets/stylesheets/organisms/tabs.scss @@ -0,0 +1,34 @@ +.tab { + &-container { + margin-bottom: rem-calc(48); + } + + &__titles { + border-bottom: solid rem-calc(1) $tabs__title-border-color; + margin-bottom: rem-calc(24); + } + + &__title { + @include font-weight(x-bold); + + color: $tabs__title-color; + cursor: pointer; + font-family: 'MuseoSans'; + margin: rem-calc(0 15); + padding: rem-calc(15 0); + + display: inline-block; + + &:first-child { margin-left: 0; } + &:last-child { margin-right: 0; } + + &--active { + border-bottom: solid rem-calc(5) $tabs__title-border-color; + cursor: default; + } + } + + &__content { + @extend %clearfix; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/organisms/vertical-nav.scss b/app/assets/stylesheets/organisms/vertical-nav.scss new file mode 100644 index 000000000..198f01643 --- /dev/null +++ b/app/assets/stylesheets/organisms/vertical-nav.scss @@ -0,0 +1,74 @@ +@mixin vertical-nav { + margin-bottom: rem-calc(40); + + @include e(element) { + display: block; + + @include text(body, thin); + @include line-height(1.5rem); + + @include color-with-state($color--base, ( + hover: $link__color--hover, + active: $link__color--pressed, + )); + + border-bottom: solid rem-calc(1) $grey-5; + padding: { + left: rem-calc(20); + top: rem-calc(8); + bottom: rem-calc(8); + right: rem-calc(8); + } + + @include only-mobile { + padding-left: 0; + } + + @include m(child) { + padding-left: rem-calc(32); + } + + @include m(heading) { + @include color($vertical-nav-element-selected__color); + + padding-left: rem-calc(16); + border: { + top: solid rem-calc(1) $grey-15; + bottom: solid rem-calc(1) $grey-15; + left: solid rem-calc(5) $grey-15; + } + } + + @include m(selected) { + @include font-weight(normal); + @include color($vertical-nav-element-selected__color); + border-left: solid rem-calc(5) $grey-15; + padding-left: rem-calc(16); + } + + @include m(active) { + @include font-weight(normal); + @include color($vertical-nav-element-selected__color); + } + + @include m(expandable) { + &:after { @include color($vertical-nav-element-selected__color); } + + @include flexbox; + @include justify-content(space-between); + cursor: pointer; + } + + @include m(opened) { + &:after { @include fa(chevron-up); } + } + + @include m(closed) { + &:after { @include fa(chevron-down); } + } + } +} + +@include b(vertical-nav) { + @include vertical-nav; +} diff --git a/app/assets/stylesheets/scopes/article.scss b/app/assets/stylesheets/scopes/article.scss new file mode 100644 index 000000000..7ebfc77dc --- /dev/null +++ b/app/assets/stylesheets/scopes/article.scss @@ -0,0 +1,7 @@ +.s-article { + @import "article/_code.scss"; + @import "article/_lists.scss"; + @import "article/_misc.scss"; + @import "article/_tables.scss"; + @import "article/_text.scss"; +} diff --git a/app/assets/stylesheets/scopes/article/_code.scss b/app/assets/stylesheets/scopes/article/_code.scss new file mode 100644 index 000000000..df8b8219f --- /dev/null +++ b/app/assets/stylesheets/scopes/article/_code.scss @@ -0,0 +1,8 @@ +pre, code { + @extend .label, .label--code; +} + +pre > code { display: block; } + +// bring code section closer to previous paragraph +p + pre { margin-top: rem-calc(-16); } diff --git a/app/assets/stylesheets/scopes/article/_lists.scss b/app/assets/stylesheets/scopes/article/_lists.scss new file mode 100644 index 000000000..f93d1a96c --- /dev/null +++ b/app/assets/stylesheets/scopes/article/_lists.scss @@ -0,0 +1,18 @@ +ul, ol { + @extend .article__list; +} + +ol { + counter-reset: item; + + li { + &:before { + content: counter(item) ". "; + counter-increment: item; + } + } +} + +ul li, ol li { + @extend .article__list-item; +} diff --git a/app/assets/stylesheets/scopes/article/_misc.scss b/app/assets/stylesheets/scopes/article/_misc.scss new file mode 100644 index 000000000..5e511b4bf --- /dev/null +++ b/app/assets/stylesheets/scopes/article/_misc.scss @@ -0,0 +1,9 @@ +hr { + border: solid rem-calc(1) $grey-5; + margin: rem-calc(32) auto; + width: 80%; +} + +img { + @extend .article__image; +} diff --git a/app/assets/stylesheets/scopes/article/_tables.scss b/app/assets/stylesheets/scopes/article/_tables.scss new file mode 100644 index 000000000..68b2888e5 --- /dev/null +++ b/app/assets/stylesheets/scopes/article/_tables.scss @@ -0,0 +1,20 @@ +table { + @extend .table; + + tr:first-child { + @extend .table__header; + td { + @extend .table__column; + @extend .table__column--align-left; + } + } + + tr:not(:first-child) { + @extend .table__row; + padding: rem-calc(8); + td { + padding: rem-calc(8); + } + } +} + diff --git a/app/assets/stylesheets/scopes/article/_text.scss b/app/assets/stylesheets/scopes/article/_text.scss new file mode 100644 index 000000000..50c823247 --- /dev/null +++ b/app/assets/stylesheets/scopes/article/_text.scss @@ -0,0 +1,17 @@ +h1 { + @extend .article__title; + @extend .article__title--paragraph; +} + +h2, h3, h4, h5 { + @extend .article__title; + @extend .article__title--subparagraph; +} + +p { @extend .article__paragraph; } +p.bigger { @extend .article__paragraph--bigger; } + +b, strong { @extend .article__bold-text; } +i { @extend .article__cursive-text; } + +a { @extend .article__link; } diff --git a/app/assets/stylesheets/scopes/form.scss b/app/assets/stylesheets/scopes/form.scss new file mode 100644 index 000000000..b9836350a --- /dev/null +++ b/app/assets/stylesheets/scopes/form.scss @@ -0,0 +1,13 @@ +.s-form { + @extend .form; + + input, textarea { @extend .form__input; } + input.big, textarea { @extend .form__input--big; } + textarea { @extend .form__input--textarea; } + + select { @extend .form__input; } + select.big { @extend .form__input--big; } + + label { @extend .form__label; } + fieldset { @extend .form__fieldset; } +} diff --git a/app/assets/stylesheets/templates/marine.scss b/app/assets/stylesheets/templates/marine.scss new file mode 100644 index 000000000..c795457b5 --- /dev/null +++ b/app/assets/stylesheets/templates/marine.scss @@ -0,0 +1,166 @@ +//---------------------------------------- +// marine page template variables +//---------------------------------------- +$marine-accent-color: $orange--lighest; + +//---------------------------------------- +// marine page utility classes +//---------------------------------------- +.marine-4 { color: $blue--marine-4; } + +//---------------------------------------- +// marine page template +//---------------------------------------- +.template--marine { + color: $blue--marine-5; + + //---------------------------------------- + // html elements + //---------------------------------------- + h4 { + border-bottom: solid rem-calc(1) $blue--marine-5; + color: $blue--marine-5; + margin-bottom: rem-calc(14); + padding-bottom: rem-calc(4); + + @include breakpoint($medium){ + margin-bottom: rem-calc(18); + padding-bottom: rem-calc(6); + } + + @include breakpoint($large){ + margin-bottom: rem-calc(22); + padding-bottom: rem-calc(8); + } + } + + p { + font-family: 'MuseoSans'; + } + + a { + color: $blue--marine-3; + text-decoration: underline; + + &:hover { text-decoration: none; } + + &.button--basic-link { + text-decoration: none; + + &:hover { text-decoration: underline; } + } + + &.social--share { text-decoration: none; } + } + + //---------------------------------------- + // sections + //---------------------------------------- + .container--profile { + @media only screen and (max-width: $medium){ + padding-left: rem-calc(18); + padding-right: rem-calc(18); + } + + @media only screen and (min-width: $medium) and (max-width: $large){ + padding-left: rem-calc(38); + padding-right: rem-calc(38); + width: 100%; + } + } + + .section--block-color { + @extend .u-bg--marine-2; + + a { + color: $blue--marine-5; + text-decoration: underline; + + &:hover { text-decoration: none; } + + &.leaflet-control-zoom-in, + &.leaflet-control-zoom-out { + text-decoration: none; + + &:hover { background-color: lighten($blue--marine-1, 12%); } + } + + &.leaflet-popup-close-button { + text-decoration: none; + + &:hover { color: lighten($blue--marine-5, 12%); } + } + } + + .leaflet-popup-content a { + text-decoration: none; + + &:hover { color: lighten($blue--marine-5, 10%); } + } + } + + &__section { + padding-top: rem-calc(30); + padding-bottom: rem-calc(30); + position: relative; + + @include only-desktop { + padding-top: rem-calc(80); + padding-bottom: rem-calc(80); + } + } + + &__section__introduction { + @extend .text--standard; + line-height: 1.7; + margin-bottom: 2.25em; + + @include breakpoint($medium){ margin-bottom: 3.25em; } + + p { margin-bottom: rem-calc(14); } + } + + &__fact-padding-top { + margin-top: rem-calc(86); + + @include breakpoint($medium){ margin-top: 0; } + } + + &__fact-padding-bottom { + padding-bottom: rem-calc(44); + + @include breakpoint($medium){ padding-bottom: 0; } + } + + //---------------------------------------- + // sticky nav + //---------------------------------------- + .v-sticky-nav { + position: absolute; + right: 0; + bottom: 0; + left: 0; + } + + //---------------------------------------- + // page sections + //---------------------------------------- + @import 'marine/header'; + @import 'marine/map'; + @import 'marine/ecoregions'; + @import 'marine/distribution'; + @import 'marine/pledges'; + @import 'marine/greenlist'; + + //---------------------------------------- + // footer + //---------------------------------------- + &__footer { + a { + color: $green; + text-decoration: none; + } + + .reference__body { margin-bottom: rem-calc(14); } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/templates/marine/_distribution.scss b/app/assets/stylesheets/templates/marine/_distribution.scss new file mode 100644 index 000000000..f9d755e85 --- /dev/null +++ b/app/assets/stylesheets/templates/marine/_distribution.scss @@ -0,0 +1,166 @@ +.infographic { + padding: rem-calc(16 18 10 18); + + @include breakpoint($medium){ padding: rem-calc(30 24); } + + &__left { + @include breakpoint($medium){ padding-right: rem-calc(12); } + @include breakpoint($large){ padding-right: rem-calc(60); } + } + + &__right { + margin-top: rem-calc(22); + + @include breakpoint($medium){ + margin-top: 0; + padding-left: rem-calc(12); + text-align: right; + } + + @include breakpoint($large){ padding-left: rem-calc(60); } + } + + &__header { + font-size: rem-calc(22); + border-bottom: solid rem-calc(1) $blue--marine-5; + padding-bottom: rem-calc(8); + margin-bottom: rem-calc(14); + + @include breakpoint($medium){ margin-bottom: rem-calc(22); } + + &--fancy { + @include breakpoint($medium){ + border-bottom: none; + padding: 0; + text-align: center; + + position: relative; + } + + &:before, + &:after { + @include breakpoint($medium){ + background-color: $blue--marine-5; + content: ''; + width: 30%; height: rem-calc(1); + + position: absolute; + top: 50%; + } + + @include breakpoint($large){ width: 36%; } + } + + &:before { left: 0; } + &:after { right: 0; } + } + } + + &__intro { + margin-bottom: rem-calc(30); + + @include breakpoint($medium){ margin-bottom: rem-calc(50); } + + p { margin-bottom: rem-calc(14); } + } + + &__bar { + background-color: $blue--marine-1; + margin: rem-calc(14 0 14 0); + width: 100%; height: rem-calc(58); + + position: relative; + + @include breakpoint($medium){ + margin: rem-calc(34 0 20 0); + height: rem-calc(96); + } + + @include breakpoint($large){ + height: rem-calc(106); + margin: rem-calc(34 0 26 0); + } + + &--national { background-color: $blue--marine-4; } + + &--pa { + background-color: $marine-accent-color; + + transform-origin: left; + transform: scaleX(0); + + &--animate { animation: fullScaleX .8s linear forwards; } + } + + &--global { + margin-bottom: rem-calc(40); + + @include breakpoint($medium){ margin-bottom: rem-calc(60); } + } + } + + &__bar-layer { + height: 100%; + + display: block; + position: absolute; + left: 0; + + &--highseas { + @include breakpoint($medium){ + left: auto; + right: 0; + } + } + } + + &__pa { + margin-bottom: rem-calc(2); + + display: block; + } + + &__km { + font-size: rem-calc(14); + + @include breakpoint($medium){ font-size: rem-calc(22); } + @include breakpoint($large){ font-size: rem-calc(28); } + + sup { font-size: .6em; } + } + + &__percent { + height: 100%; + + position: absolute; + top: rem-calc(6); + + @include breakpoint($medium){ top: rem-calc(12); } + + &--national { + color: $blue--marine-1; + + left: rem-calc(4); + + @include breakpoint($medium){ left: rem-calc(14); } + } + + &--highseas { + color: $blue--marine-4; + text-align: right; + + right: rem-calc(4); + + @include breakpoint($medium){ right: rem-calc(14); } + } + + &__title { + font-size: rem-calc(12); + margin-bottom: rem-calc(10); + + display: block; + + @include breakpoint($medium){ font-size: rem-calc(22); } + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/templates/marine/_ecoregions.scss b/app/assets/stylesheets/templates/marine/_ecoregions.scss new file mode 100644 index 000000000..0b912e3d4 --- /dev/null +++ b/app/assets/stylesheets/templates/marine/_ecoregions.scss @@ -0,0 +1,14 @@ +//---------------------------------------- +// fact +//---------------------------------------- +&__fact { + position: absolute; + top: rem-calc(-150); + right: rem-calc(20); + + @include breakpoint($medium){ + flex: 0 0 25%; + + position: static; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/templates/marine/_greenlist.scss b/app/assets/stylesheets/templates/marine/_greenlist.scss new file mode 100644 index 000000000..c248f5d7c --- /dev/null +++ b/app/assets/stylesheets/templates/marine/_greenlist.scss @@ -0,0 +1,46 @@ +&__greenlist { + + // overwrite styles used in the partial so that it looks better on mobile etc. + &-result { + padding-bottom: rem-calc(30); + flex: 0 0 100%; + width: auto; + + @include breakpoint($medium){ + padding-right: rem-calc(30); + flex: 0 1 50%; + } + + @media (min-width: ($medium + 1)\0) { + flex-basis: calc(50% - 30px); //target IE11 + } + + @include breakpoint($large){ + padding: rem-calc(0 40 40 0); + flex: 0 0 33%; + } + + @media (min-width: ($large + 1)\0) { + flex-basis: calc(33% - 40px); //target IE11 + } + } +} + +.result { + margin: 0; + width: 100%; + + img { width: 100%; } +} + +.inner-result { + a { + color: $green; + text-decoration: none; + } + + p a { + color: $white; + text-decoration: none; + } +} diff --git a/app/assets/stylesheets/templates/marine/_header.scss b/app/assets/stylesheets/templates/marine/_header.scss new file mode 100644 index 000000000..57f926892 --- /dev/null +++ b/app/assets/stylesheets/templates/marine/_header.scss @@ -0,0 +1,25 @@ +&__header { + background: image_url('hero/hero-marine-min.jpg') center no-repeat; + background-size: cover; + padding: rem-calc(46 0 30 0); + + position: relative; + + flex-direction: column; //needed for IE11 + + @include breakpoint($medium){ + height: rem-calc(600); + padding: 0; + } +} + +.header__introduction { + color: $white; + font-size: rem-calc(16); + line-height: 1.3; + padding: rem-calc(12 18); + + @include breakpoint($medium){ font-size: rem-calc(18); } + + p:first-child { margin-bottom: rem-calc(14); } +} \ No newline at end of file diff --git a/app/assets/stylesheets/templates/marine/_map.scss b/app/assets/stylesheets/templates/marine/_map.scss new file mode 100644 index 000000000..6299c0302 --- /dev/null +++ b/app/assets/stylesheets/templates/marine/_map.scss @@ -0,0 +1,23 @@ +&__counter { + background: rgba(white, .4); + margin-top: rem-calc(40); + padding: rem-calc(20 0 20 24); + width: rem-calc(290); + + position: absolute; + top: 0; + right: 0; + + @include breakpoint($medium){ width: rem-calc(430); } +} + +&__map-disclaimer { + color: $blue--marine-4; + font-family: 'MuseoSans'; + font-size: rem-calc(8); + padding-top: rem-calc(14); + padding-bottom: rem-calc(14); + text-align: center; + + @include breakpoint($medium){ font-size: rem-calc(13); } +} \ No newline at end of file diff --git a/app/assets/stylesheets/templates/marine/_pledges.scss b/app/assets/stylesheets/templates/marine/_pledges.scss new file mode 100644 index 000000000..8002bdfb7 --- /dev/null +++ b/app/assets/stylesheets/templates/marine/_pledges.scss @@ -0,0 +1,55 @@ +&__pledges { + position: relative; + + &-title { + @extend .u-text-sans; + border-bottom: solid rem-calc(1) $blue--marine-5; + color: $blue--marine-5; + margin-bottom: rem-calc(20); + padding-bottom: rem-calc(4); + + @include breakpoint($medium){ + margin-bottom: rem-calc(24); + padding-top: rem-calc(21); + padding-bottom: rem-calc(6); + } + + @include breakpoint($large){ + margin-bottom: rem-calc(36); + padding-bottom: rem-calc(8); + } + + h4 { + border: none; + margin: 0; + padding: 0; + } + + a { text-decoration: none; } + } + + &-counter { + padding: rem-calc(20 0 20 24); + + width: rem-calc(226); + + position: absolute; + top: 0; + right: 0; + + @include breakpoint($medium){ width: rem-calc(320); } + @include breakpoint($large){ width: rem-calc(394); } + } + + &-sunburst { + padding-top: rem-calc(138); + width: 100%; + + @include breakpoint($medium){ + padding-top: 0; + width: 60%; + } + + @include breakpoint($large){ width: 64%; } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/templates/site.scss b/app/assets/stylesheets/templates/site.scss new file mode 100644 index 000000000..872cce200 --- /dev/null +++ b/app/assets/stylesheets/templates/site.scss @@ -0,0 +1,71 @@ +.template--site { + + .header__links { + margin-bottom: rem-calc(25); + + display: inline-block; + } + + .button--hide, + .button--show { + margin-left: rem-calc(16); + + position: relative; + top: rem-calc(-1); + } + + .fullscreen { + &__button-site { + top: rem-calc(230); + right: rem-calc(10); + z-index: 2000; + } + + + &__button-connections { + top: rem-calc(345); + right: rem-calc(10); + z-index: 2000; + } + + &--active { + + .map--hero, + .map--networks { + height: 100%; + } + + .fullscreen__button-site { + top: auto; + right: rem-calc(30); + bottom: rem-calc(130); + } + + .fullscreen__button-connections { + top: auto; + right: rem-calc(30); + bottom: rem-calc(130); + } + + .disclaimer { display: none; } + + .tab__content { height: 100%; } + + .key__list { height: 80%; } + } + } + + .section--factsheet { + @extend .flex-row-wrap; + + @include only-desktop { + @include flex-flow(row nowrap); + } + } + + .info-box--factsheet { + @include only-mobile { + margin-right: 0; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/utilities/_flexbox.scss b/app/assets/stylesheets/utilities/_flexbox.scss index 6fa026c10..dabb2d32b 100644 --- a/app/assets/stylesheets/utilities/_flexbox.scss +++ b/app/assets/stylesheets/utilities/_flexbox.scss @@ -252,7 +252,6 @@ // http://w3.org/tr/css3-flexbox/#flex-property @mixin flex($fg: 1, $fs: null, $fb: null) { - // Set a variable to be used by box-flex properties $fg-boxflex: $fg; diff --git a/app/assets/stylesheets/utilities/accessibility.scss b/app/assets/stylesheets/utilities/accessibility.scss new file mode 100644 index 000000000..3d658dffa --- /dev/null +++ b/app/assets/stylesheets/utilities/accessibility.scss @@ -0,0 +1,11 @@ +.screen-reader { + border: 0; + clip: rect(0 0 0 0); + height: rem-calc(1); + margin: - rem-calc(1); + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: rem-calc(1); +} \ No newline at end of file diff --git a/app/assets/stylesheets/utilities/bem.scss b/app/assets/stylesheets/utilities/bem.scss new file mode 100644 index 000000000..65855f48d --- /dev/null +++ b/app/assets/stylesheets/utilities/bem.scss @@ -0,0 +1,24 @@ +$elementSeparator: '__'; +$modifierSeparator: '--'; + +@mixin b($block) { + .#{$block} { + @content; + } +} + +@mixin e($element, $this: '&') { + @at-root { + @if($this != '&') { + #{&} #{$this}#{$elementSeparator+$element} { @content; } + } @else { + #{$this}#{$elementSeparator+$element} { @content; } + } + } +} + +@mixin m($modifier, $this: '&') { + @at-root { + #{$this}#{$modifierSeparator+$modifier} { @content; } + } +} diff --git a/app/assets/stylesheets/utilities/grid.scss b/app/assets/stylesheets/utilities/grid.scss new file mode 100644 index 000000000..9a08bb23c --- /dev/null +++ b/app/assets/stylesheets/utilities/grid.scss @@ -0,0 +1,238 @@ +%clearfix { + &:after { + clear: both; + content: ""; + display: table; + } +} + +@include b(half) { + @include span-columns(6); + + @include only-mobile { + @include span-columns(12); + } + + @include m(no-margin) { + width: 50%; + margin: 0; + } + + @include m(with-separator) { + position: relative; + border-right: solid rem-calc(2) $grey-15; + + &:before { top: 0; } + &:after { bottom: 0; } + &:before, &:after { + background-color: $grey-5; + + content: ""; + width: rem-calc(4); + height: rem-calc(8); + position: absolute; + right: -.25rem; + } + } +} + +@include b(one-thirds) { + @include span-columns(4); + + @include m(no-margin) { + width: 33.33%; + margin: 0; + } + + @media (max-width: 769px) { @include span-columns(12); } +} + +@include b(two-thirds) { + @include span-columns(8); + @media (max-width: 769px) { @include span-columns(12); } +} + +@include b(one-fourths) { + @include span-columns(3); + + @media (max-width: 769px) { @include span-columns(12); } +} + +@include b(three-fourths) { + @include span-columns(9); + @media (max-width: 769px) { @include span-columns(12); } +} + +//---------------------------------------- +// flex positioning +//---------------------------------------- +// *************************************** +// NB: IMPORTANT NOTE +// *************************************** +// +// Flexbox has unexpected results in IE +// it calculates percentage width using +// the box-sizing: content-box instead of +// border-box. +// +// If you are using borders or padding make +// sure you test it in IE before deploying +//---------------------------------------- + +@include b(flex-start) { + @extend %flexbox; + + @include only-mobile { + flex-direction: column; + } +} + +@include b(space-between) { + @extend %flexbox; + @include justify-content(space-between); +} + +.space-around { + @include justify-content(space-around); +} + +@include b(right-padded) { + padding-right: 5%; +} + +.justify-content-between { @include justify-content(space-between); } +.justify-content-center { @include justify-content(center); } + +.justify-content-end { + @extend .justify-content-center; + @include breakpoint($large){ @include justify-content(flex-end); } +} + + +.align-items-end { @include align-items(flex-end); } +.align-items-center { @include align-items(center); } + +//---------------------------------------- +// rows +//---------------------------------------- + +.flex-row { + @extend %flexbox; + @include flex-flow(row nowrap); +} + +.flex-row-wrap { + @extend %flexbox; + @include flex-flow(row wrap); +} + +.flex-row-responsive { + @extend %flexbox; + flex-flow: row wrap; + + @include breakpoint($medium){ flex-flow: row nowrap; } //required for IE 11 +} + +//---------------------------------------- +// column spacing +//---------------------------------------- +.flex-column-gap--left { + @include breakpoint($medium){ padding-left: rem-calc(12); } +} + +.flex-column-gap--right { + @include breakpoint($medium){ padding-right: rem-calc(12); } +} + +//---------------------------------------- +// 2 columns +//---------------------------------------- +.flex-column-2 { + flex: 0 0 50%; + + @include only-mobile { flex: 0 0 100%; } +} + +.flex-1-half { + flex: 0 0 100%; + margin-bottom: rem-calc(10); + + @include breakpoint($medium){ + flex: 0 1 50%; //shrink true required for IE + margin-bottom: 0; + } +} + +//---------------------------------------- +// 3 columns +//---------------------------------------- +.flex-column-3 { + flex: 0 0 100%; + + @include breakpoint($medium){ flex: 0 0 33.3%; } +} + +.flex-1-third { + flex: 0 0 100%; + + @include breakpoint($medium){ flex: 0 0 33.3%; } +} + +.flex-2-thirds { + flex: 0 0 100%; + + @include breakpoint($medium){ flex: 0 0 66.6%; } +} + +//---------------------------------------- +// 4 columns +//---------------------------------------- +.flex-1-quarter { + @include only-mobile { flex: 0 0 100%; } + + flex: 0 0 25%; +} + +.flex-3-quarters { + @include only-mobile { flex: 0 0 100%; } + + flex: 0 0 75%; +} + +//---------------------------------------- +// 5 columns +//---------------------------------------- +.flex-1-fith { + @include only-mobile { flex: 0 0 100%; } + + flex: 0 0 20%; +} + +.flex-2-fiths { + @include only-mobile { flex: 0 0 100%; } + + flex: 0 0 40%; +} + + +.flex-3-fiths { + @include only-mobile { flex: 0 0 100%; } + + flex: 0 0 60%; +} + +.flex-4-fiths { + @include only-mobile { flex: 0 0 100%; } + + flex: 0 0 80%; +} + +//---------------------------------------- +// mobile +//---------------------------------------- +.flex-column-mobile { + @media only screen and (max-width: $small) { + flex: 0 0 100%; + margin-bottom: rem-calc(10); + } +} diff --git a/app/assets/stylesheets/utilities/html-elements.scss b/app/assets/stylesheets/utilities/html-elements.scss new file mode 100644 index 000000000..6a6766e41 --- /dev/null +++ b/app/assets/stylesheets/utilities/html-elements.scss @@ -0,0 +1,5 @@ +sup { + font-size: rem-calc(10); + vertical-align: super; + font-family: inherit; +} \ No newline at end of file diff --git a/app/assets/stylesheets/utilities/keyframes.scss b/app/assets/stylesheets/utilities/keyframes.scss new file mode 100644 index 000000000..0c00ce3d6 --- /dev/null +++ b/app/assets/stylesheets/utilities/keyframes.scss @@ -0,0 +1,38 @@ +//---------------------------------------- +// keyframes +//---------------------------------------- +// - dash offset +// - opacity +// - scale +//---------------------------------------- +// dash offset +//---------------------------------------- +@keyframes dashOffsetNone { + to { + stroke-dashoffset: 0; + } +} + +//---------------------------------------- +// opacity +//---------------------------------------- +@keyframes fullOpacity { + to { + opacity: 1; + } +} + +//---------------------------------------- +// scale +//---------------------------------------- +@keyframes fullScaleX { + to { + transform: scaleX(1); + } +} + +@keyframes fullScaleXY { + to { + transform: scale(1); + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/utilities/rem-calc.scss b/app/assets/stylesheets/utilities/rem-calc.scss new file mode 100644 index 000000000..31687ef1a --- /dev/null +++ b/app/assets/stylesheets/utilities/rem-calc.scss @@ -0,0 +1,152 @@ +// Foundation for Sites by ZURB +// foundation.zurb.com +// Licensed under MIT Open Source + +//// +/// @group functions +//// + +$global-font-size: 100% !default; + +/// Removes the unit (e.g. px, em, rem) from a value, returning the number only. +/// +/// @param {Number} $num - Number to strip unit from. +/// +/// @returns {Number} The same number, sans unit. +@function strip-unit($num) { + @return $num / ($num * 0 + 1); +} + +/// Converts one or more pixel values into matching rem values. +/// +/// @param {Number|List} $values - One or more values to convert. Be sure to separate them with spaces and not commas. If you need to convert a comma-separated list, wrap the list in parentheses. +/// @param {Number} $base [null] - The base value to use when calculating the `rem`. If you're using Foundation out of the box, this is 16px. If this parameter is `null`, the function will reference the `$base-font-size` variable as the base. +/// +/// @returns {List} A list of converted values. +@function rem-calc($values, $base: null) { + $rem-values: (); + $count: length($values); + + // If no base is defined, defer to the global font size + @if $base == null { + $base: $global-font-size; + } + + // If the base font size is a %, then multiply it by 16px + // This is because 100% font size = 16px in most all browsers + @if unit($base) == '%' { + $base: ($base / 100%) * 16px; + } + + // Using rem as base allows correct scaling + @if unit($base) == 'rem' { + $base: strip-unit($base) * 16px; + } + + @if $count == 1 { + @return -zf-to-rem($values, $base); + } + + @for $i from 1 through $count { + $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base)); + } + + @return $rem-values; +} + +// Converts a unitless, pixel, or rem value to em, for use in breakpoints. +@function -zf-bp-to-em($value) { + // Pixel and unitless values are converted to rems + @if unit($value) == 'px' or unitless($value) { + $value: rem-calc($value, $base: 16px); + } + + // Then the value is converted to ems + @return strip-unit($value) * 1em; +} + +/// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$global-font-size` variable. +/// @access private +/// +/// @param {Number} $value - Pixel value to convert. +/// @param {Number} $base [null] - Base for pixel conversion. +/// +/// @returns {Number} A number in rems, calculated based on the given value and the base pixel value. rem values are passed through as is. +@function -zf-to-rem($value, $base: null) { + // Check if the value is a number + @if type-of($value) != 'number' { + @warn inspect($value) + ' was passed to rem-calc(), which is not a number.'; + @return $value; + } + + // Transform em into rem if someone hands over 'em's + @if unit($value) == 'em' { + $value: strip-unit($value) * 1rem; + } + + // Calculate rem if units for $value is not rem or em + @if unit($value) != 'rem' { + $value: strip-unit($value) / strip-unit($base) * 1rem; + } + + // Turn 0rem into 0 + @if $value == 0rem { + $value: 0; + } + + @return $value; +} + +/// Converts a pixel, percentage, rem or em value to a unitless value based on a given font size. Ideal for working out unitless line heights. +/// +/// @param {Number} $value - Value to convert to a unitless line height +/// @param {Number} $base - The font size to use to work out the line height - defaults to $global-font-size +/// +/// @return {Number} - Unitless number +@function unitless-calc($value, $base: null) { + + // If no base is defined, defer to the global font size + @if $base == null { + $base: $global-font-size; + } + + // First, lets convert our $base to pixels + + // If the base font size is a %, then multiply it by 16px + @if unit($base) == '%' { + $base: ($base / 100%) * 16px; + } + + @if unit($base) == 'rem' { + $base: strip-unit($base) * 16px; + } + + @if unit($base) == 'em' { + $base: strip-unit($base) * 16px; + } + + // Now lets convert our value to pixels too + @if unit($value) == '%' { + $value: ($value / 100%) * $base; + } + + @if unit($value) == 'rem' { + $value: strip-unit($value) * $base; + } + + @if unit($value) == 'em' { + $value: strip-unit($value) * $base; + } + + // 'px' + @if unit($value) == 'px' { + @return strip-unit($value) / strip-unit($base); + } + + // assume that line-heights greatern then 10 are meant to be absolute in 'px' + @if unitless($value) and ($value > 10) { + @return $value / strip-unit($base); + } + + @return $value; +} \ No newline at end of file diff --git a/app/assets/stylesheets/utilities/reset.css b/app/assets/stylesheets/utilities/reset.css new file mode 100644 index 000000000..ab47eb55b --- /dev/null +++ b/app/assets/stylesheets/utilities/reset.css @@ -0,0 +1,74 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +@media screen { + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, embed, + figure, figcaption, footer, header, hgroup, + menu, nav, output, ruby, section, summary, + time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + + } +} + +@media print { + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, embed, + figure, figcaption, footer, header, hgroup, + menu, nav, output, ruby, section, summary, + time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 12px; + vertical-align: baseline; + + } +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/app/assets/stylesheets/utilities/u-classes.scss b/app/assets/stylesheets/utilities/u-classes.scss new file mode 100644 index 000000000..3b6b259d7 --- /dev/null +++ b/app/assets/stylesheets/utilities/u-classes.scss @@ -0,0 +1,110 @@ +// responsive +.u-only-mobile { + @media only screen and (min-width: 768px) { + display: none; + } +} + +.u-only-desktop { + @media only screen and (max-width: 768px) { + display: none; + } +} + +// background +.u-bg--white { background-color: $white; } +.u-bg--marine-1 { background-color: $blue--marine-1; } +.u-bg--marine-2 { background-color: $blue--marine-2; } +.u-bg--black-transparent { background-color: rgba(black, .23); } +.u-bg--grey { background-color: $grey-5; } + +// position +.u-relative { position: relative; } +.u-fixed { position: fixed; } +.u-up-halfway { transform: translateY(-50%); } +.u-infront-map { z-index: 1000; } + +// display +.u-block { display: block; } +.u-inline-block { display: inline-block; } +.u-hide { display: none; } +.u-hide-mobile { @media only screen and (max-width: $small) { display: none; } } +.u-show-desktop { display: none; @include breakpoint($large){ display: block; } } +.u-clearfix { @extend %clearfix; } +.u-flex { @include flexbox; } + +// colors +.u-link-color { @include color($link__color); } +.u-base-color { @extend %color-base; } + +// sizes +.u-width-20 { width: 20%; } +.u-width-40 { width: 40%; } +.u-width-60 { width: 60%; } +.u-width-80 { width: 80%; } +.u-width-100 { width: 100%; } + +.u-height-100 { height: 100%; } +.u-map-height { height: 380px; } + +// text +.u-italic { font-style: italic; } +.u-font-inherit { font: inherit; } +.u-center { text-align: center; } +.u-normal { @include font-weight(normal); } +.u-bold { @include font-weight(bold); } +.u-x-bold { @include font-weight(x-bold); } +.u-medium { @include text(medium); } +.u-alt-xlarge { @include text--alt(xlarge, x-bold); } +.u-alt-xxlarge { @include text--alt(xxlarge, x-bold); } +.u-mono { font-family: monospace; } +.u-font-icon { font-family: FontAwesome; } +.u-alt-font { font-family: 'MuseoSlab'; } +.u-text-sans { font-family: 'MuseoSans'; } +.u-text-left { text-align: left; } +.u-text-right { text-align: right; } +.u-marine-accent-color { color: $marine-accent-color; } +.u-text-muted { color: $grey-33; } + +// floats +.u-left { float: left; } +.u-right { float: right; } + +// box model +.u-no-borders { border: none !important; } +.u-push-top { margin-top: auto; } +.u-margin-auto { margin: auto; } +.u-no-margin { margin: 0; } +.u-no-padding { padding: 0; } +.u-no-padding--bottom { padding-bottom: 0; } + +.u-margin--page { + @include only-desktop { + margin-right: rem-calc(20); margin-left: rem-calc(20); + } +} + +.u-padding--page { + @include only-desktop { + padding-right: rem-calc(20); padding-left: rem-calc(20); + } +} + +.u-margin--page-right { margin-right: rem-calc(20); } + +// spacing +.u-margin--y { margin: rem-calc(20 0); } +.u-margin--x { margin: rem-calc(0 20); } +.u-margin--top { margin-top: rem-calc(20); } +.u-margin--bottom { margin-bottom: rem-calc(20); } + +.u-padding--y { padding: rem-calc(20 0); } +.u-padding--x { padding: rem-calc(0 20); } +.u-padding--top { padding-top: rem-calc(20); } +.u-padding--bottom { padding-bottom: rem-calc(20); } + +// misc +.u-click-through { pointer-events: none; } +.u-no-click-through { pointer-events: all; } +.u-pdf-page-break { page-break-before: always; } +.u-pdf-no-break { page-break-inside: avoid; } diff --git a/app/assets/stylesheets/variables/colors.scss b/app/assets/stylesheets/variables/colors.scss index b543949e7..31c9c2876 100644 --- a/app/assets/stylesheets/variables/colors.scss +++ b/app/assets/stylesheets/variables/colors.scss @@ -3,7 +3,9 @@ $grey-blue: #848184; $blue: #317fce; // green palette +$green: #71a32b; $green--dark: #699728; +$green--darker: #415519; $green--light: #83af46; $green--lighter: #e3edd5; $brown: #702412; diff --git a/app/assets/stylesheets/variables/dimensions.scss b/app/assets/stylesheets/variables/dimensions.scss new file mode 100644 index 000000000..71c947ff2 --- /dev/null +++ b/app/assets/stylesheets/variables/dimensions.scss @@ -0,0 +1,60 @@ +$max-width--desktop: rem-calc(1280) !default; + +$gutter: rem-calc(40) !global; + +// atoms/overlay +$overlay--narrow__width: 45; + +// molecules/reference +$reference__margin-bottom: rem-calc(24) !default; +$reference-link-icon__margin-right: rem-calc(8) !default; +$reference-title__margin-right: .2rem !default; +$reference-body__margin-bottom: rem-calc(4) !default; + +// molecules/link-with-icon +$link-with-icon-icon__margin-sides: rem-calc(10) !default; + +// molecules/big-button +$big-button-icon__margin-right: rem-calc(10) !default; +$big-button__border-radius: rem-calc(5) !default; +$big-button__padding: (.5rem 1.875rem) !default; +$big-button-compact__padding: (.5rem .75rem) !default; + +// molecules/horizontal-bar +$horizontal-bar__height: 1.875rem !default; +$horizontal-bar__margin-bottom: rem-calc(20) !default; + +// molecules/map +$map__width: 100% !default; +$map--hero__height: 380px !default; +$map--main__height: 570px !default; +$map--networks__height: 495px !default; + +// molecules/search-bar +$search-bar__height: 1.875rem; +$search-bar--bigger__height: 2.375rem; + +// organisms/fact +$fact-header__border-bottom-size: 1px !default; +$fact-body__padding-top-bottom: 1rem; + +// organisms/container +$container-profile--width: 80% !default; + +// organisms/navbar +$navbar__height: 50px !default; +$navbar__height--thinner: 30px !default; + +// organisms/gallery +$gallery-body__height: 400px !default; +$gallery-control__padding: (0 .625rem) !default; +$gallery-current-index__padding: .5em .75em !default; +$gallery-current-index__border-radius: 3rem !default; + +// organisms/info-box +$info-box__padding: rem-calc(20) !default; +$info-box__margin-bottom: 2.5rem !default; +$info-box-padding-top-bottom__padding: (2rem 1.25rem) !default; +$info-box-body__padding: (1rem .2rem) !default; +$info-box-link-icon__margin-right: rem-calc(8) !default; +$info-box-link__padding-bottom: 1rem !default; diff --git a/app/assets/stylesheets/variables/font-faces.scss b/app/assets/stylesheets/variables/font-faces.scss new file mode 100644 index 000000000..30d000579 --- /dev/null +++ b/app/assets/stylesheets/variables/font-faces.scss @@ -0,0 +1,72 @@ +@font-face { + font-family: 'MuseoSans'; + font-weight: 700; + font-style: normal; + src: asset_url('fonts/MuseoSans-700.eot') format('oet'), + asset_url('fonts/MuseoSans-700.ttf') format('ttf'), + asset_url('fonts/MuseoSans-700.woff') format('woff'); +} + +@font-face { + font-family: 'MuseoSans'; + font-weight: 300; + font-style: normal; + src: asset_url('fonts/MuseoSans-300.eot') format('oet'), + asset_url('fonts/MuseoSans-300.ttf') format('ttf'), + asset_url('fonts/MuseoSans-300.woff') format('woff'); +} + +@font-face { + font-family: 'MuseoSans'; + font-weight: 500; + font-style: normal; + src: asset_url('fonts/MuseoSans-500.eot') format('oet'), + asset_url('fonts/MuseoSans-500.ttf') format('ttf'), + asset_url('fonts/MuseoSans-500.woff') format('woff'); +} + +@font-face { + font-family: 'MuseoSans'; + font-weight: 100; + font-style: normal; + src: asset_url('fonts/MuseoSans-100.eot') format('oet'), + asset_url('fonts/MuseoSans-100.ttf') format('ttf'), + asset_url('fonts/MuseoSans-100.woff') format('woff'); +} + +@font-face { + font-family: 'MuseoSlab'; + font-weight: 900; + font-style: normal; + src: asset_url('fonts/MuseoSlab-900.otf') format('opentype'); +} + +@font-face { + font-family: 'MuseoSlab'; + font-weight: 700; + font-style: normal; + src: asset_url('fonts/MuseoSlab-700.otf') format('opentype'); +} + +@font-face { + font-family: 'MuseoSlab'; + font-weight: 500; + font-style: normal; + src: asset_url('fonts/MuseoSlab-500.eot') format('oet'), + asset_url('fonts/MuseoSlab-500.ttf') format('ttf'), + asset_url('fonts/MuseoSlab-500.woff') format('woff'); +} + +@font-face { + font-family: 'MuseoSlab'; + font-weight: 300; + font-style: normal; + src: asset_url('fonts/MuseoSlab-300.otf') format('opentype'); +} + +@font-face { + font-family: 'MuseoSlab'; + font-weight: 100; + font-style: normal; + src: asset_url('fonts/MuseoSlab-100.otf') format('opentype'); +} \ No newline at end of file diff --git a/app/assets/stylesheets/variables/z-index.scss b/app/assets/stylesheets/variables/z-index.scss new file mode 100644 index 000000000..e4dc5fb4f --- /dev/null +++ b/app/assets/stylesheets/variables/z-index.scss @@ -0,0 +1,10 @@ +$z-index-1: 100; +$z-index-2: 200; +$z-index-3: 300; +$z-index-4: 400; +$z-index-5: 500; +$z-index-6: 600; +$z-index-7: 700; +$z-index-8: 800; +$z-index-9: 900; +$z-index-10: 1000; diff --git a/app/controllers/admin/home_carousel_slides_controller.rb b/app/controllers/admin/home_carousel_slides_controller.rb index 679591100..d853494a7 100644 --- a/app/controllers/admin/home_carousel_slides_controller.rb +++ b/app/controllers/admin/home_carousel_slides_controller.rb @@ -1,5 +1,4 @@ class Admin::HomeCarouselSlidesController < Comfy::Admin::Cms::BaseController - before_action :build_home_carousel_slide, :only => [:new, :create] before_action :load_home_carousel_slide, :only => [:show, :edit, :update, :destroy] @@ -59,4 +58,4 @@ def load_home_carousel_slide def home_carousel_slide_params params.fetch(:home_carousel_slide, {}).permit(:title, :description, :url, :published) end -end \ No newline at end of file +end diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb index 515f6dcd4..e22aec89d 100644 --- a/app/controllers/application_controller.rb +++ b/app/controllers/application_controller.rb @@ -3,9 +3,9 @@ class PageNotFound < StandardError; end; protect_from_forgery with: :exception - after_filter :store_location - before_filter :load_cms_pages - before_filter :check_for_pdf + after_action :store_location + before_action :load_cms_pages + before_action :check_for_pdf def raise_404 raise PageNotFound diff --git a/app/controllers/cms/resources_controller.rb b/app/controllers/cms/resources_controller.rb index b91a25f46..5b3cf0644 100644 --- a/app/controllers/cms/resources_controller.rb +++ b/app/controllers/cms/resources_controller.rb @@ -1,5 +1,5 @@ class Cms::ResourcesController < ApplicationController - before_filter :load_category + before_action :load_category def index @all_resources = Comfy::Cms::Page.for_category(@category.label) diff --git a/app/controllers/country_controller.rb b/app/controllers/country_controller.rb index ddbe98246..f406cb018 100644 --- a/app/controllers/country_controller.rb +++ b/app/controllers/country_controller.rb @@ -1,6 +1,6 @@ class CountryController < ApplicationController - after_filter :enable_caching - before_filter :load_vars, except: [:codes, :compare] + after_action :enable_caching + before_action :load_vars, except: [:codes, :compare] def show respond_to do |format| diff --git a/app/controllers/green_list_controller.rb b/app/controllers/green_list_controller.rb index e45d50bb6..89b7dccd9 100644 --- a/app/controllers/green_list_controller.rb +++ b/app/controllers/green_list_controller.rb @@ -1,10 +1,10 @@ class GreenListController < ApplicationController # Show page for green listed protected areas # Will only show if that area is a green listed area, otherwise redirects to wdpa page - before_filter :find_protected_area - before_filter :redirect_if_not_green_listed - after_filter :record_visit - after_filter :enable_caching + before_action :find_protected_area + before_action :redirect_if_not_green_listed + after_action :record_visit + after_action :enable_caching def show @presenter = ProtectedAreaPresenter.new @protected_area diff --git a/app/controllers/protected_areas_controller.rb b/app/controllers/protected_areas_controller.rb index de45a977d..e9d069e1f 100644 --- a/app/controllers/protected_areas_controller.rb +++ b/app/controllers/protected_areas_controller.rb @@ -1,6 +1,6 @@ class ProtectedAreasController < ApplicationController - after_filter :record_visit - after_filter :enable_caching + after_action :record_visit + after_action :enable_caching def show id = params[:id] diff --git a/app/controllers/region_controller.rb b/app/controllers/region_controller.rb index bb97f983b..dec86f34f 100644 --- a/app/controllers/region_controller.rb +++ b/app/controllers/region_controller.rb @@ -1,5 +1,5 @@ class RegionController < ApplicationController - before_filter :load_vars + before_action :load_vars def show end diff --git a/app/controllers/search_controller.rb b/app/controllers/search_controller.rb index 0dd7f8006..47633d611 100644 --- a/app/controllers/search_controller.rb +++ b/app/controllers/search_controller.rb @@ -1,8 +1,8 @@ class SearchController < ApplicationController - after_filter :enable_caching + after_action :enable_caching - before_filter :ignore_empty_query, only: [:index, :map] - before_filter :load_search, only: [:index, :map] + before_action :ignore_empty_query, only: [:index, :map] + before_action :load_search, only: [:index, :map] def index render partial: 'grid' if request.xhr? diff --git a/app/helpers/marine_helper.rb b/app/helpers/marine_helper.rb new file mode 100644 index 000000000..5f508aac7 --- /dev/null +++ b/app/helpers/marine_helper.rb @@ -0,0 +1,7 @@ +module MarineHelper + def marine_stats(key) + statistic = @marine_statistics[key] + + statistic == nil ? 0 : statistic + end +end \ No newline at end of file diff --git a/app/helpers/search_helper.rb b/app/helpers/search_helper.rb index 9f53ac84c..840c6fa9e 100644 --- a/app/helpers/search_helper.rb +++ b/app/helpers/search_helper.rb @@ -1,5 +1,7 @@ module SearchHelper include ApplicationHelper + ALLOWED_PARAMS = Search::ALLOWED_FILTERS + [:q, :main] + def type_li_tag type, current_type selected_class = (type == current_type) ? "selected" : "" @@ -15,7 +17,8 @@ def autocomplete_link result end def facet_link facet - link_params = params.merge({facet[:query] => facet[:identifier]}) + search_params = params.permit(ALLOWED_PARAMS) + link_params = search_params.merge({facet[:query] => facet[:identifier]}) link_to(url_for(link_params), class: "filter-bar__value") do facet_count = content_tag( @@ -29,15 +32,16 @@ def facet_link facet end def clear_filters_link params - if params[:main] && params[:q].nil? - return '' if params.length <= 4 + search_params = params.permit(ALLOWED_PARAMS) + if search_params[:main] && search_params[:q].nil? + return '' if search_params.to_h.length <= 2 - path = search_path(params.slice(:main, params[:main].to_sym)) + path = search_path(search_params.slice(:main, search_params[:main].to_sym)) link_to "Clear Filters", path, class: "filter-bar__clear" else - return '' if params.length <= 3 + return '' if search_params.to_h.length <= 1 - path = search_path(params.slice(:q)) + path = search_path(search_params.slice(:q)) link_to "Clear Filters", path, class: "filter-bar__clear" end end diff --git a/app/javascript/components/carousel/Carousel.vue b/app/javascript/components/carousel/Carousel.vue new file mode 100644 index 000000000..eab6a2cdb --- /dev/null +++ b/app/javascript/components/carousel/Carousel.vue @@ -0,0 +1,272 @@ + + + diff --git a/app/javascript/components/carousel/CarouselSlide.vue b/app/javascript/components/carousel/CarouselSlide.vue new file mode 100644 index 000000000..06e8d4cec --- /dev/null +++ b/app/javascript/components/carousel/CarouselSlide.vue @@ -0,0 +1,51 @@ + + + \ No newline at end of file diff --git a/app/assets/javascripts/vue/components/carousel/carousel-helpers.js b/app/javascript/components/carousel/carousel-helpers.js similarity index 50% rename from app/assets/javascripts/vue/components/carousel/carousel-helpers.js rename to app/javascript/components/carousel/carousel-helpers.js index 38ede25ba..b64cd33f8 100644 --- a/app/assets/javascripts/vue/components/carousel/carousel-helpers.js +++ b/app/javascript/components/carousel/carousel-helpers.js @@ -1,9 +1,9 @@ -var getWidthWithMargins = function (el) { - return el.offsetWidth + getNumericCssProperty(el, 'marginLeft') + getNumericCssProperty(el, 'marginRight') -} +export const getWidthWithMargins = el => el.offsetWidth + + getNumericCssProperty(el, 'marginLeft') + + getNumericCssProperty(el, 'marginRight') -var getNumericCssProperty = function (el, property) { - var propertyStyle = getElementStyle(el)[property] +const getNumericCssProperty = (el, property) => { + const propertyStyle = getElementStyle(el)[property] if(propertyStyle.indexOf('rem') !== -1) { return convertRem(parseFloat(propertyStyle)) @@ -11,21 +11,18 @@ var getNumericCssProperty = function (el, property) { return parseInt(propertyStyle, 10) } -var getElementStyle = function (el) { - return el.currentStyle || window.getComputedStyle(el) -} +const convertRem = value => value * getRootElementFontSize() -var convertRem = function (value) { - return value * getRootElementFontSize() -} +//for ie - maybe not the safest method - assumes returns pxs +const getRootElementFontSize = () => + parseFloat(getComputedStyle(document.documentElement).fontSize) -var getRootElementFontSize = function () { - return parseFloat(getComputedStyle(document.body).fontSize) -} +const getElementStyle = el => + el.currentStyle || window.getComputedStyle(el) -var getNewOrder = function (oldOrder, changeInIndex, totalSlides) { - var newOrderBeforeMod = oldOrder - changeInIndex - var newOrder; +export const getNewOrder = (oldOrder, changeInIndex, totalSlides) => { + const newOrderBeforeMod = oldOrder - changeInIndex + let newOrder if (newOrderBeforeMod < 0) { newOrder = newOrderBeforeMod + totalSlides * 3 @@ -38,9 +35,9 @@ var getNewOrder = function (oldOrder, changeInIndex, totalSlides) { return newOrder } -var getChangeInIndex = function (newSlide, oldSlide, totalSlides, forceDirection) { - var directSlideDisplacement = newSlide - oldSlide - var indirectSlideDisplacement +export const getChangeInIndex = (newSlide, oldSlide, totalSlides, forceDirection) => { + const directSlideDisplacement = newSlide - oldSlide + let indirectSlideDisplacement if (directSlideDisplacement > 0) { indirectSlideDisplacement = - (oldSlide + totalSlides - newSlide) @@ -61,6 +58,4 @@ var getChangeInIndex = function (newSlide, oldSlide, totalSlides, forceDirection } } -var modGreaterThanZero = function (x, base) { - return ((x - 1 + base) % base + 1) -} \ No newline at end of file +export const modGreaterThanZero = (x, base) => ((x - 1 + base) % base + 1) \ No newline at end of file diff --git a/app/assets/javascripts/vue/charts/HorizontalBarChart.vue b/app/javascript/components/charts/chart-bar/ChartBar.vue similarity index 75% rename from app/assets/javascripts/vue/charts/HorizontalBarChart.vue rename to app/javascript/components/charts/chart-bar/ChartBar.vue index 5f6133055..2bd160faa 100644 --- a/app/assets/javascripts/vue/charts/HorizontalBarChart.vue +++ b/app/javascript/components/charts/chart-bar/ChartBar.vue @@ -3,8 +3,11 @@ diff --git a/app/assets/javascripts/vue/components/horizontal_bars/HorizontalBar.vue b/app/javascript/components/charts/chart-bar/ChartBarSimpleBar.vue similarity index 85% rename from app/assets/javascripts/vue/components/horizontal_bars/HorizontalBar.vue rename to app/javascript/components/charts/chart-bar/ChartBarSimpleBar.vue index 0416cdaf3..8a781bb74 100644 --- a/app/assets/javascripts/vue/components/horizontal_bars/HorizontalBar.vue +++ b/app/javascript/components/charts/chart-bar/ChartBarSimpleBar.vue @@ -11,8 +11,8 @@ diff --git a/app/assets/javascripts/vue/charts/interactive_multiline/InteractiveMultiline.vue b/app/javascript/components/charts/chart-line/ChartLine.vue similarity index 70% rename from app/assets/javascripts/vue/charts/interactive_multiline/InteractiveMultiline.vue rename to app/javascript/components/charts/chart-line/ChartLine.vue index cc9891f9a..7492716b6 100644 --- a/app/assets/javascripts/vue/charts/interactive_multiline/InteractiveMultiline.vue +++ b/app/javascript/components/charts/chart-line/ChartLine.vue @@ -2,13 +2,13 @@
- + >
@@ -18,20 +18,21 @@ \ No newline at end of file diff --git a/app/assets/javascripts/vue/charts/Sunburst.vue b/app/javascript/components/charts/chart-sunburst/ChartSunburst.vue similarity index 73% rename from app/assets/javascripts/vue/charts/Sunburst.vue rename to app/javascript/components/charts/chart-sunburst/ChartSunburst.vue index 647a1ed27..9d2b4eb5c 100644 --- a/app/assets/javascripts/vue/charts/Sunburst.vue +++ b/app/javascript/components/charts/chart-sunburst/ChartSunburst.vue @@ -20,14 +20,16 @@