Skip to content

Commit

Permalink
Showing 22 changed files with 573 additions and 226 deletions.
1 change: 1 addition & 0 deletions app/assets/images/icons/circle-chevron-green-left.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 12 additions & 0 deletions app/assets/images/icons/circle-chevron-green-right.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions app/assets/images/icons/circle-chevron-white.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
435 changes: 294 additions & 141 deletions app/assets/images/logos/protected-planet.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 4 additions & 2 deletions app/assets/stylesheets/base/_base.scss
Original file line number Diff line number Diff line change
@@ -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 {
2 changes: 2 additions & 0 deletions app/assets/stylesheets/base/_buttons.scss
Original file line number Diff line number Diff line change
@@ -69,6 +69,8 @@ $padding-medium: rem-calc(27);
//--------------------------------------------------
// specific mixins
//--------------------------------------------------
@mixin button-next { @include button-basic; }
@mixin button-prev { @include button-basic; }

//--------------------------------------------------
// classes
3 changes: 3 additions & 0 deletions app/assets/stylesheets/base/_icons.scss
Original file line number Diff line number Diff line change
@@ -9,6 +9,9 @@
&--cross { @include icon-cross; }

&--circle-chevron-black { @include icon-circle-chevron-black; }
&--circle-chevron-white { @include icon-circle-chevron-white; }
&--circle-chevron-green-prev { @include icon-circle-chevron-green-left; }
&--circle-chevron-green-next { @include icon-circle-chevron-green-right; }

&--info-circle { @include icon-info; }

2 changes: 1 addition & 1 deletion app/assets/stylesheets/base/_logos.scss
Original file line number Diff line number Diff line change
@@ -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 {}
24 changes: 24 additions & 0 deletions app/assets/stylesheets/base/mixins/_icons.scss
Original file line number Diff line number Diff line change
@@ -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() {
@@ -19,6 +21,12 @@ $icon-search-width: rem-calc(21);
padding: 0;
}

@mixin icon-circle-chevron() {
@include icon-basic;
@include responsive(width, rem-calc(50), rem-calc(72), rem-calc(72));
@include responsive(height, rem-calc(50), rem-calc(72), rem-calc(72));
}

//--------------------------------------------------
// mixins for specific classes
//--------------------------------------------------
@@ -60,6 +68,22 @@ $icon-search-width: rem-calc(21);
width: rem-calc(34); height: rem-calc(34);
}

@mixin icon-circle-chevron-green-left() {
@include icon-circle-chevron;
background-image: image-url('icons/circle-chevron-green-left.svg');
}

@mixin icon-circle-chevron-green-right() {
@include icon-circle-chevron;
background-image: image-url('icons/circle-chevron-green-right.svg');
}

@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');
16 changes: 8 additions & 8 deletions app/assets/stylesheets/base/mixins/_text.scss
Original file line number Diff line number Diff line change
@@ -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;
2 changes: 1 addition & 1 deletion app/assets/stylesheets/components/_topbar.scss
Original file line number Diff line number Diff line change
@@ -15,7 +15,7 @@
@include flex;
@include flex-center;
background-color: $primary;
padding: rem-calc(0 10);
padding: rem-calc(0 30);
}

&__nav {
63 changes: 2 additions & 61 deletions app/assets/stylesheets/components/_vue-agile.scss
Original file line number Diff line number Diff line change
@@ -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';
}
61 changes: 61 additions & 0 deletions app/assets/stylesheets/components/vue-agile/_agile-basic.scss
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
73 changes: 73 additions & 0 deletions app/assets/stylesheets/components/vue-agile/_agile-themes.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
$agile-themes-margin-sides-mobile: 10%;
$agile-themes-margin-sides-tablet: 14%;
$agile-themes-margin-sides-desktop: 8%;

&--themes {
color: $white;
overflow: hidden;

.agile {
&__dots {
display: none;
}

&__actions {
@include responsive(padding-right, $agile-themes-margin-sides-mobile, $agile-themes-margin-sides-tablet, $agile-themes-margin-sides-desktop);
@include responsive(padding-left, $agile-themes-margin-sides-mobile, $agile-themes-margin-sides-tablet, $agile-themes-margin-sides-desktop);
width: 100%;

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, $agile-themes-margin-sides-mobile, $agile-themes-margin-sides-tablet, $agile-themes-margin-sides-desktop);
@include responsive(margin-left, $agile-themes-margin-sides-mobile, $agile-themes-margin-sides-tablet, $agile-themes-margin-sides-desktop);
overflow: visible;
width: auto;
}

&__slides {
align-items: stretch;
}

&__slide {
@include responsive(padding-right, rem-calc(5), rem-calc(10), rem-calc(10));
@include responsive(padding-left, rem-calc(5), rem-calc(10), rem-calc(10));
}

&__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%;
}
}
}
5 changes: 4 additions & 1 deletion app/assets/stylesheets/helpers/_helpers.scss
Original file line number Diff line number Diff line change
@@ -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); }
13 changes: 11 additions & 2 deletions app/controllers/home_controller.rb
Original file line number Diff line number Diff line change
@@ -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'),
30 changes: 30 additions & 0 deletions app/helpers/application_helper.rb
Original file line number Diff line number Diff line change
@@ -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: false,
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
12 changes: 8 additions & 4 deletions app/views/home/index.html.erb
Original file line number Diff line number Diff line change
@@ -16,7 +16,7 @@
<%= render "partials/search/protected-areas" %>

<section class="container section-padding">
<h2><%= @pas_title %></h2>
<h2 class="text-center"><%= @pas_title %></h2>

<%= render partial: "partials/cards/circles", locals: { cards: @pas_levels } %>

@@ -30,15 +30,20 @@
</section>

<section>
thematic areas carousel
<%= render partial: "partials/carousels/themes", locals:
{
title: @themes_title,
slides: @themes,
url: @themes_url
}
%>
</section>

<%= render "partials/ctas/api" %>

<section class="container section-padding">
<%= 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 @@
<section class="container section-padding">
<%= 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
2 changes: 1 addition & 1 deletion app/views/partials/cards/_articles.html.erb
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
<div class="flex flex-v-center flex-h-between">
<h2><%= title %></h2>

<%= 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' %>
</div>

<div class="cards__cards">
2 changes: 1 addition & 1 deletion app/views/partials/cards/_resources.html.erb
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
<div class="flex flex-v-center flex-h-between">
<h2><%= title %></h2>

<%= 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' %>
</div>

<div class="cards__cards">
3 changes: 0 additions & 3 deletions app/views/partials/carousels/_thematic.html.erb

This file was deleted.

24 changes: 24 additions & 0 deletions app/views/partials/carousels/_themes.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<section>
<h2 class="text-center"><%= title %></h2>

<agile class="agile--themes" :options="<%= get_agile_config_themes %>">
<template slot="prevButton">
<i class="icon--circle-chevron-green-prev"></i>
</template>
<template slot="nextButton">
<i class="icon--circle-chevron-green-next"></i>
</template>

<% slides.each do |slide| %>
<div class="agile__slide">
<%= link_to slide[:url], title: slide[:label], class: "agile__slide-link bg-image-overlay" do %>
<div class="agile__slide-content">
<h3 class="agile__slide-title h3-big-white"><%= slide[:label] %></h3>
<p class="agile__slide-intro"><%= slide[:intro] %></p>
<i class="agile__slide-icon icon--circle-chevron-white %>"></i>
</div>
<% end %>
</div>
<% end %>
</agile>
</section>

0 comments on commit 072e2b3

Please sign in to comment.