Skip to content

Commit

Permalink
Work on themes carousel
Browse files Browse the repository at this point in the history
  • Loading branch information
stacytalbot committed Jan 8, 2020
1 parent 19bfab6 commit 5258a01
Show file tree
Hide file tree
Showing 21 changed files with 553 additions and 226 deletions.
12 changes: 12 additions & 0 deletions app/assets/images/icons/circle-chevron-green.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
Expand Up @@ -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 {
Expand Down
10 changes: 10 additions & 0 deletions app/assets/stylesheets/base/_buttons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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
//--------------------------------------------------
Expand Down
1 change: 1 addition & 0 deletions app/assets/stylesheets/base/_icons.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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; }

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

&__nav {
Expand Down
63 changes: 2 additions & 61 deletions app/assets/stylesheets/components/_vue-agile.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}
}
65 changes: 65 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,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%;
}
}
}
5 changes: 4 additions & 1 deletion app/assets/stylesheets/helpers/_helpers.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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); }
Expand Down
13 changes: 11 additions & 2 deletions app/controllers/home_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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'),
Expand All @@ -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'),
Expand Down
Loading

0 comments on commit 5258a01

Please sign in to comment.