From 5258a01d2b71cac5a7811cde4fc66734d6d00529 Mon Sep 17 00:00:00 2001 From: stacytalbot Date: Wed, 8 Jan 2020 15:38:56 +0000 Subject: [PATCH] Work on themes carousel --- .../images/icons/circle-chevron-green.svg | 12 + .../images/icons/circle-chevron-white.svg | 8 + app/assets/images/logos/protected-planet.svg | 435 ++++++++++++------ app/assets/stylesheets/base/_base.scss | 6 +- app/assets/stylesheets/base/_buttons.scss | 10 + app/assets/stylesheets/base/_icons.scss | 1 + app/assets/stylesheets/base/_logos.scss | 2 +- .../stylesheets/base/mixins/_icons.scss | 14 + app/assets/stylesheets/base/mixins/_text.scss | 16 +- .../stylesheets/components/_topbar.scss | 2 +- .../stylesheets/components/_vue-agile.scss | 63 +-- .../components/vue-agile/_agile-basic.scss | 61 +++ .../components/vue-agile/_agile-themes.scss | 65 +++ app/assets/stylesheets/helpers/_helpers.scss | 5 +- app/controllers/home_controller.rb | 13 +- app/helpers/application_helper.rb | 30 ++ app/views/home/index.html.erb | 12 +- app/views/partials/cards/_articles.html.erb | 2 +- app/views/partials/cards/_resources.html.erb | 2 +- .../partials/carousels/_thematic.html.erb | 3 - app/views/partials/carousels/_themes.html.erb | 17 + 21 files changed, 553 insertions(+), 226 deletions(-) create mode 100755 app/assets/images/icons/circle-chevron-green.svg create mode 100644 app/assets/images/icons/circle-chevron-white.svg create mode 100644 app/assets/stylesheets/components/vue-agile/_agile-basic.scss create mode 100644 app/assets/stylesheets/components/vue-agile/_agile-themes.scss delete mode 100644 app/views/partials/carousels/_thematic.html.erb create mode 100644 app/views/partials/carousels/_themes.html.erb diff --git a/app/assets/images/icons/circle-chevron-green.svg b/app/assets/images/icons/circle-chevron-green.svg new file mode 100755 index 000000000..7df23f19e --- /dev/null +++ b/app/assets/images/icons/circle-chevron-green.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/app/assets/images/icons/circle-chevron-white.svg b/app/assets/images/icons/circle-chevron-white.svg new file mode 100644 index 000000000..0a3bc7665 --- /dev/null +++ b/app/assets/images/icons/circle-chevron-white.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/app/assets/images/logos/protected-planet.svg b/app/assets/images/logos/protected-planet.svg index 5889245e8..c0aa636b1 100644 --- a/app/assets/images/logos/protected-planet.svg +++ b/app/assets/images/logos/protected-planet.svg @@ -1,141 +1,294 @@ - - - - PP logo2-01 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + + + + +Protected-planet-Logo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/assets/stylesheets/base/_base.scss b/app/assets/stylesheets/base/_base.scss index 58ad5774e..5ac324fc6 100644 --- a/app/assets/stylesheets/base/_base.scss +++ b/app/assets/stylesheets/base/_base.scss @@ -33,12 +33,14 @@ h1 { h2 { @include h2; - &.h2-big { @include h2-big; } - &.h2-big-white { @include h2-big; color: $white; } + &.h2-big { @include h-big; } + &.h2-big-white { @include h-big; color: $white; } } h3 { @include h3; + + &.h3-big-white { @include h-big; color: $white; } } p,a { diff --git a/app/assets/stylesheets/base/_buttons.scss b/app/assets/stylesheets/base/_buttons.scss index e1266cfcc..771bcf956 100644 --- a/app/assets/stylesheets/base/_buttons.scss +++ b/app/assets/stylesheets/base/_buttons.scss @@ -69,7 +69,17 @@ $padding-medium: rem-calc(27); //-------------------------------------------------- // specific mixins //-------------------------------------------------- +@mixin button-next { + @include button-basic; + @include icon-circle-chevron-green; +} +@mixin button-prev { + @include button-basic; + @include icon-circle-chevron-green; + + transform: rotate(180deg); +} //-------------------------------------------------- // classes //-------------------------------------------------- diff --git a/app/assets/stylesheets/base/_icons.scss b/app/assets/stylesheets/base/_icons.scss index 69325b76b..a64edcb86 100644 --- a/app/assets/stylesheets/base/_icons.scss +++ b/app/assets/stylesheets/base/_icons.scss @@ -9,6 +9,7 @@ &--cross { @include icon-cross; } &--circle-chevron-black { @include icon-circle-chevron-black; } + &--circle-chevron-white { @include icon-circle-chevron-white; } &--info-circle { @include icon-info; } diff --git a/app/assets/stylesheets/base/_logos.scss b/app/assets/stylesheets/base/_logos.scss index c06437817..f748377ae 100644 --- a/app/assets/stylesheets/base/_logos.scss +++ b/app/assets/stylesheets/base/_logos.scss @@ -12,7 +12,7 @@ &--protected-planet { @include logo-basic; background-image: image_url('logos/protected-planet.svg'); - width: rem-calc(226); height: rem-calc(38); + width: rem-calc(216); height: rem-calc(33); } &--footer {} diff --git a/app/assets/stylesheets/base/mixins/_icons.scss b/app/assets/stylesheets/base/mixins/_icons.scss index 4aef01850..db44d7d9b 100644 --- a/app/assets/stylesheets/base/mixins/_icons.scss +++ b/app/assets/stylesheets/base/mixins/_icons.scss @@ -10,6 +10,8 @@ $icon-search-width: rem-calc(21); background-position: center; background-repeat: no-repeat; background-size: contain; + + display: block; } @mixin icon-button-reset() { @@ -60,6 +62,18 @@ $icon-search-width: rem-calc(21); width: rem-calc(34); height: rem-calc(34); } +@mixin icon-circle-chevron-green() { + @include icon-basic; + background-image: image-url('icons/circle-chevron-green.svg'); + width: rem-calc(72); height: rem-calc(72); +} + +@mixin icon-circle-chevron-white() { + @include icon-basic; + background-image: image-url('icons/circle-chevron-white.svg'); + width: rem-calc(34); height: rem-calc(34); +} + @mixin icon-info() { @include icon-basic; background-image: image-url('icons/info.svg'); diff --git a/app/assets/stylesheets/base/mixins/_text.scss b/app/assets/stylesheets/base/mixins/_text.scss index 082a034e4..4ac2f36e9 100644 --- a/app/assets/stylesheets/base/mixins/_text.scss +++ b/app/assets/stylesheets/base/mixins/_text.scss @@ -50,14 +50,6 @@ color: $header-font-color; } -@mixin h2-big { - @include text-1; - @include responsive(font-size, rem-calc(25), rem-calc(40), rem-calc(40)); - font-weight: $regular; - color: inherit; - margin: 0 0 .5em 0; -} - @mixin h3 { @include text-2; @include responsive(font-size, rem-calc(18), rem-calc(20), rem-calc(20)); @@ -69,6 +61,14 @@ @include responsive(font-size, rem-calc(18), rem-calc(18), rem-calc(16)); } +@mixin h-big { + @include text-1; + @include responsive(font-size, rem-calc(25), rem-calc(40), rem-calc(40)); + font-weight: $regular; + color: inherit; + margin: 0 0 .5em 0; +} + @mixin text-small { @include text-2; color: $grey; diff --git a/app/assets/stylesheets/components/_topbar.scss b/app/assets/stylesheets/components/_topbar.scss index 716866ba3..16a5ec4a2 100644 --- a/app/assets/stylesheets/components/_topbar.scss +++ b/app/assets/stylesheets/components/_topbar.scss @@ -15,7 +15,7 @@ @include flex; @include flex-center; background-color: $primary; - padding: rem-calc(0 10); + padding: rem-calc(0 30); } &__nav { diff --git a/app/assets/stylesheets/components/_vue-agile.scss b/app/assets/stylesheets/components/_vue-agile.scss index 10c869976..49f257e66 100644 --- a/app/assets/stylesheets/components/_vue-agile.scss +++ b/app/assets/stylesheets/components/_vue-agile.scss @@ -12,65 +12,6 @@ $agile-basic-slide-width-desktop: calc(20% - 2*#{$agile-basic-slide-margin-deskt // basic vue agile //-------------------------------------------------- .agile { - &--basic { - overflow: hidden; - - .agile { - &__dots { - margin: rem-calc(30) auto 0 auto; - } - - &__dot { - background-color: $grey-light; - border-radius: 100%; - margin-right: $agile-basic-dot-size/2; - width: $agile-basic-dot-size; height: $agile-basic-dot-size; - - &--current { background-color: $grey; } - } - - &__list { - @include responsive(margin-right, 10%, 25%, 25%, 0); - @include responsive(overflow, visible, visible, visible, hidden); - width: auto; - } - - &__slides { - align-items: stretch; - } - - &__slide { - display: flex; - - &:last-child { - @include breakpoint($large) { - @include tooltip-last-slide; - } - } - } - - &__slide-content { - @include box-shadow-grey-light; - @include responsive(margin, 0 $agile-basic-slide-margin-mobile, 0 $agile-basic-slide-margin-tablet, 0 $agile-basic-slide-margin-tablet, 0 $agile-basic-slide-margin-desktop); - background-color: $white; - border: solid 1px $grey-light; - font-size: rem-calc(18); - padding: rem-calc(16); - width: 100%; - - position: relative; - } - - &__slide-title { - @include responsive(margin, 0, rem-calc(0 5), rem-calc(0 5), rem-calc(0 10)); - font-family: $header-font; - } - - &__tooltip { - position: absolute; - top: rem-calc(10); - right: rem-calc(10); - } - } - } + @import './vue-agile/agile-basic'; + @import './vue-agile/agile-themes'; } \ No newline at end of file diff --git a/app/assets/stylesheets/components/vue-agile/_agile-basic.scss b/app/assets/stylesheets/components/vue-agile/_agile-basic.scss new file mode 100644 index 000000000..121a28610 --- /dev/null +++ b/app/assets/stylesheets/components/vue-agile/_agile-basic.scss @@ -0,0 +1,61 @@ +&--basic { + overflow: hidden; + + .agile { + &__dots { + margin: rem-calc(30) auto 0 auto; + } + + &__dot { + background-color: $grey-light; + border-radius: 100%; + margin-right: $agile-basic-dot-size/2; + width: $agile-basic-dot-size; height: $agile-basic-dot-size; + + &--current { background-color: $grey; } + } + + &__list { + @include responsive(margin-right, 10%, 25%, 25%, 0); + @include responsive(overflow, visible, visible, visible, hidden); + width: auto; + } + + &__slides { + align-items: stretch; + } + + &__slide { + display: flex; + + &:last-child { + @include breakpoint($large) { + @include tooltip-last-slide; + } + } + } + + &__slide-content { + @include box-shadow-grey-light; + @include responsive(margin, 0 $agile-basic-slide-margin-mobile, 0 $agile-basic-slide-margin-tablet, 0 $agile-basic-slide-margin-tablet, 0 $agile-basic-slide-margin-desktop); + background-color: $white; + border: solid 1px $grey-light; + font-size: rem-calc(18); + padding: rem-calc(16); + width: 100%; + + position: relative; + } + + &__slide-title { + @include responsive(margin, 0, rem-calc(0 5), rem-calc(0 5), rem-calc(0 10)); + font-family: $header-font; + } + + &__tooltip { + position: absolute; + top: rem-calc(10); + right: rem-calc(10); + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/components/vue-agile/_agile-themes.scss b/app/assets/stylesheets/components/vue-agile/_agile-themes.scss new file mode 100644 index 000000000..226045fa0 --- /dev/null +++ b/app/assets/stylesheets/components/vue-agile/_agile-themes.scss @@ -0,0 +1,65 @@ +&--themes { + color: $white; + overflow: hidden; + + .agile { + &__dots { + display: none; + } + + &__actions { + width: 75%; + + position: absolute; + top: 50%; + + transform: translateY(-50%); + } + + &__nav-button--prev { + @include button-prev; + + transform: translateX(-50%); + } + + &__nav-button--next { + @include button-next; + + transform: translateX(50%); + } + + &__list { + @include responsive(margin-right, 10%, 25%, 25%, 0); + @include responsive(overflow, visible, visible, visible, hidden); + width: auto; + } + + &__slides { + align-items: stretch; + } + + &__slide { + @include responsive(padding-right, rem-calc(11), rem-calc(11), rem-calc(22)); + } + + &__slide-link { + @include border-radius; + @include responsive(height, rem-calc(460), rem-calc(460), rem-calc(760)); + background-color: $grey-dark; + padding: rem-calc(22 26); + text-decoration: none; + width: 100%; + + display: flex; + + &:hover::before { background-color: rgba(black, 0.6); } + + &::before { @include border-radius; } + } + + &__slide-content { + @include flex-vs-end; + width: 100%; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/helpers/_helpers.scss b/app/assets/stylesheets/helpers/_helpers.scss index 0858e5c28..eaa9a4cc4 100644 --- a/app/assets/stylesheets/helpers/_helpers.scss +++ b/app/assets/stylesheets/helpers/_helpers.scss @@ -113,7 +113,10 @@ //-------------------------------------------------- .no-margin--top { margin-top: 0; } .no-margin { margin: 0; } -.margin-center { margin: 0 auto; } +.margin-center { + margin-right: auto; + margin-left: auto; +} .margin-space--right { margin-right: rem-calc(14); } .margin-space--left { margin-left: rem-calc(14); } diff --git a/app/controllers/home_controller.rb b/app/controllers/home_controller.rb index cbd7147ca..9e09dcaf4 100644 --- a/app/controllers/home_controller.rb +++ b/app/controllers/home_controller.rb @@ -18,9 +18,19 @@ def index @pas_levels = home_yml[:pas][:levels] @pas_categories = home_yml[:pas][:categories] + comfy_themes = Comfy::Cms::Page.find_by_slug("thematic-areas") + @themes_title = comfy_themes.label + @themes_url = comfy_themes.full_path + @themes = comfy_themes.children.published.map{ |page| { + "label": page.label, + "url": page.url, + "intro": "field needs created in the CMS", #TODO create field in CMS + "image": "field needs created in the CMS" #TODO create field in CMS + } + } + comfy_news = Comfy::Cms::Page.find_by_slug("blog") @news_articles_title = comfy_news.label - @news_articles_url = comfy_news.full_path @news_articles = comfy_news.children.published.order(created_at: :desc).limit(2).map{ |page| { "label": page.label, "created_at": page.created_at.strftime('%d %B %y'), @@ -32,7 +42,6 @@ def index comfy_resources = Comfy::Cms::Page.find_by_slug("resources") @resources_title = comfy_resources.label - @resources_url = comfy_resources.full_path @resources = comfy_resources.children.published.order(created_at: :desc).limit(4).map{ |page| { "label": page.label, "created_at": page.created_at.strftime('%d %B %y'), diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 5963f9571..3e4ef9529 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -259,4 +259,34 @@ def get_nav_primary_links def link_to_page? card !card[:pdf].present? && !card[:external_link].present? end + + def get_agile_config_themes + { + navButtons: true, + infinite: true, + responsive: [ + { + breakpoint: 628, + settings: { + dots: false, + slidesToShow: 1, + } + }, + { + breakpoint: 768, + settings: { + dots: false, + slidesToShow: 1, + } + }, + { + breakpoint: 1024, + settings: { + dots: false, + slidesToShow: 2 + } + } + ] + }.to_json + end end diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb index 39b26f046..927a4ece2 100644 --- a/app/views/home/index.html.erb +++ b/app/views/home/index.html.erb @@ -16,7 +16,7 @@ <%= render "partials/search/protected-areas" %>
-

<%= @pas_title %>

+

<%= @pas_title %>

<%= render partial: "partials/cards/circles", locals: { cards: @pas_levels } %> @@ -30,7 +30,13 @@
- thematic areas carousel + <%= render partial: "partials/carousels/themes", locals: + { + title: @themes_title, + slides: @themes, + url: @themes_url + } + %>
<%= render "partials/ctas/api" %> @@ -38,7 +44,6 @@
<%= render partial: "partials/cards/resources", locals: { - all_url: 'link to resources page', #TODO add url title: @resources_title, cards: @resources, url: @resources_url @@ -49,7 +54,6 @@
<%= render partial: "partials/cards/articles", locals: { - all_url: 'link to news page', #TODO add url title: @news_articles_title, cards: @news_articles, url: @news_articles_url diff --git a/app/views/partials/cards/_articles.html.erb b/app/views/partials/cards/_articles.html.erb index 76b67474f..7ff36a34b 100644 --- a/app/views/partials/cards/_articles.html.erb +++ b/app/views/partials/cards/_articles.html.erb @@ -2,7 +2,7 @@

<%= title %>

- <%= link_to t('global.button.all'), all_url, target: '_blank', title: t('global.button.all'), class: 'button--all' %> + <%= link_to t('global.button.all'), url, target: '_blank', title: t('global.button.all'), class: 'button--all' %>
diff --git a/app/views/partials/cards/_resources.html.erb b/app/views/partials/cards/_resources.html.erb index 889f7d784..52c5219aa 100644 --- a/app/views/partials/cards/_resources.html.erb +++ b/app/views/partials/cards/_resources.html.erb @@ -2,7 +2,7 @@

<%= title %>

- <%= link_to t('global.button.all'), all_url, target: '_blank', title: t('global.button.all'), class: 'button--all' %> + <%= link_to t('global.button.all'), url, target: '_blank', title: t('global.button.all'), class: 'button--all' %>
diff --git a/app/views/partials/carousels/_thematic.html.erb b/app/views/partials/carousels/_thematic.html.erb deleted file mode 100644 index 691698995..000000000 --- a/app/views/partials/carousels/_thematic.html.erb +++ /dev/null @@ -1,3 +0,0 @@ -
- Thematics areas carousel -
\ No newline at end of file diff --git a/app/views/partials/carousels/_themes.html.erb b/app/views/partials/carousels/_themes.html.erb new file mode 100644 index 000000000..c5d25a0b8 --- /dev/null +++ b/app/views/partials/carousels/_themes.html.erb @@ -0,0 +1,17 @@ +
+

<%= title %>

+ + + <% slides.each do |slide| %> +
+ <%= link_to slide[:url], title: slide[:label], class: "agile__slide-link bg-image-overlay" do %> +
+

<%= slide[:label] %>

+

<%= slide[:intro] %>

+ +
+ <% end %> +
+ <% end %> + +
\ No newline at end of file