From 0ac6531612cbf9cc5b8a55f96a1615e26aea7406 Mon Sep 17 00:00:00 2001 From: decabeza Date: Wed, 23 May 2018 17:41:23 +0200 Subject: [PATCH] Adds styles for homepage users view --- app/assets/stylesheets/layout.scss | 120 ++++++++++++++---- app/views/welcome/_card.html.erb | 24 ++-- app/views/welcome/_cards.html.erb | 10 +- app/views/welcome/_feeds.html.erb | 26 ++-- app/views/welcome/_header.html.erb | 32 +++-- app/views/welcome/_recommended.html.erb | 10 +- .../welcome/_recommended_carousel.html.erb | 6 +- app/views/welcome/index.html.erb | 56 ++------ config/locales/en/general.yml | 1 + config/locales/es/general.yml | 1 + 10 files changed, 167 insertions(+), 119 deletions(-) diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index bafe9bf0a..4faf2221c 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -23,6 +23,7 @@ // 21. Related content // 22. Images // 23. Maps +// 24. Homepage // // 01. Global styles @@ -2224,17 +2225,17 @@ table { // 19. Recommended Section Home // ---------------------------- -.home-page { - - .push { - display: none; - } -} - .section-recommended { - padding: $line-height * 2 0; + background: #fafafa; + border-bottom: 1px solid $border; + border-top: 1px solid $border; + padding: $line-height 0; h2 { + margin-bottom: 0; + } + + p { margin-bottom: $line-height * 2; } @@ -2258,12 +2259,12 @@ table { .card { .card-section { - padding: $line-height 0; - max-width: rem-calc(300); margin: 0 auto; + max-width: none; + padding: 0; p { - font-size: rem-calc(15); + font-size: $base-font-size; text-align: left; } } @@ -2293,18 +2294,6 @@ table { width: 100%; } - .debates-inner { - border-top: 4px solid $debates; - } - - .proposals-inner { - border-top: 4px solid $proposals; - } - - .budget-investments-inner { - border-top: 4px solid $budget; - } - .debates-inner, .proposals-inner, .budget-investments-inner { @@ -2316,10 +2305,10 @@ table { } h4 { - margin-top: $line-height; - margin-bottom: 0; + margin-top: 0; + margin-bottom: $line-height; font-size: rem-calc(18); - min-height: rem-calc(50); + min-height: 0; } h5 { @@ -2338,9 +2327,21 @@ table { } } + .debates, + .proposals { + + a { + display: block; + margin-top: $line-height; + } + } + .debates-inner, .proposals-inner, .budget-investments-inner { + border: 1px solid $border; + padding: $line-height; + margin-right: $line-height; max-height: rem-calc(500); @include breakpoint(small) { @@ -2575,3 +2576,70 @@ table { color: #525252 !important; } } + +// 24. Homepage +// ------------ + +.home-page { + + a { + + p { + + &.description { + color: $text; + } + } + } + + a:hover { + + h3 { + color: #fff; + } + } +} + +.figure-card { + display: flex; + margin: 0 0 $line-height; + position: relative; + + a { + + h3, + .title { + color: #fff; + } + + &:hover { + text-decoration: none; + } + } + + figcaption { + bottom: 0; + color: #fff; + font-size: rem-calc(36); + line-height: rem-calc(36); + text-transform: uppercase; + padding: $line-height / 4 $line-height / 2; + position: absolute; + width: 100%; + + h3, + .title { + font-size: rem-calc(36); + line-height: rem-calc(36); + } + + span { + background: #fff; + border-radius: rem-calc(4); + color: #000; + display: inline; + font-size: $base-font-size; + padding: rem-calc(4) rem-calc(8); + } + } +} diff --git a/app/views/welcome/_card.html.erb b/app/views/welcome/_card.html.erb index 0d8ecdda8..a3ed3e37c 100644 --- a/app/views/welcome/_card.html.erb +++ b/app/views/welcome/_card.html.erb @@ -1,11 +1,15 @@ -
- <%= card.title %> - <%= card.description %> - <%= link_to card.link_text, card.link_url %> - - <% if card.image.present? %> - <%= image_tag(card.image_url(:large), - class: "margin", - alt: card.image.title) %> +
+ <%= link_to card.link_url do %> +
+ <% if card.image.present? %> + <%= image_tag(card.image_url(:large), alt: card.image.title) %> + <% end %> +
+ LABEL
+

<%= card.title %>

+
+
+

<%= card.description %>

+

<%= card.link_text %>

<% end %> -
\ No newline at end of file +
diff --git a/app/views/welcome/_cards.html.erb b/app/views/welcome/_cards.html.erb index 2e741363f..89596901d 100644 --- a/app/views/welcome/_cards.html.erb +++ b/app/views/welcome/_cards.html.erb @@ -1,5 +1,5 @@ -

Cards

- -<% @cards.all.each do |card| %> - <%= render "card", card: card %> -<% end %> \ No newline at end of file +
+ <% @cards.all.each do |card| %> + <%= render "card", card: card %> + <% end %> +
diff --git a/app/views/welcome/_feeds.html.erb b/app/views/welcome/_feeds.html.erb index 0f735d5d4..9c72efc43 100644 --- a/app/views/welcome/_feeds.html.erb +++ b/app/views/welcome/_feeds.html.erb @@ -1,16 +1,14 @@ -

Feeds

+
+
+ <% @feeds.each do |feed| %> -<% @feeds.each do |feed| %> - -
- Most active <%= feed.kind %> + Most active <%= feed.kind %> + + <% feed.items.each do |item| %> +
+ <%= item.title %> +
+ <% end %> + <% end %>
- - <% feed.items.each do |item| %> -
- <%= item.title %> -
-
- <% end %> - -<% end %> \ No newline at end of file +
diff --git a/app/views/welcome/_header.html.erb b/app/views/welcome/_header.html.erb index 610083c5a..3b49233bc 100644 --- a/app/views/welcome/_header.html.erb +++ b/app/views/welcome/_header.html.erb @@ -1,13 +1,21 @@ <% if header.present? %> - <%= header.title %> - <%= header.description %> - - <% if header.image.present? %> - <%= image_tag(header.image_url(:large), - class: "margin", - alt: header.image.title) %> - <% end %> - - <%= link_to header.button_text, header.button_url %> - <%= header.alignment %> -<% end %> \ No newline at end of file +
+
+
+

<%= header.title %>

+

<%= header.description %>

+
+ <%= link_to header.link_text, header.link_url, class: "button expanded large" %> +
+
+ + <% if header.image.present? %> +
+ <%= image_tag(header.image_url(:large), + class: "margin", + alt: header.image.title) %> +
+ <% end %> +
+
+<% end %> diff --git a/app/views/welcome/_recommended.html.erb b/app/views/welcome/_recommended.html.erb index 67251e749..fece2996a 100644 --- a/app/views/welcome/_recommended.html.erb +++ b/app/views/welcome/_recommended.html.erb @@ -1,8 +1,12 @@ -
+
-

<%= t("welcome.recommended.title") %>

-
+
+

<%= t("welcome.recommended.title") %>

+

<%= t("welcome.recommended.help") %>

+
+ +
<% if recommended_debates.any? %> <% carousel_size = calculate_carousel_size(recommended_debates, recommended_proposals, true) %> <%= render "recommended_carousel", recommendeds: recommended_debates, diff --git a/app/views/welcome/_recommended_carousel.html.erb b/app/views/welcome/_recommended_carousel.html.erb index ce006f354..15eaea653 100644 --- a/app/views/welcome/_recommended_carousel.html.erb +++ b/app/views/welcome/_recommended_carousel.html.erb @@ -1,9 +1,9 @@ -
+

<%= t("welcome.recommended.#{key.underscore}.title") %>

-
+
    @@ -38,5 +38,5 @@
- <%= link_to btn_text_link, btn_path_link, class: 'button hollow expanded' %> + <%= link_to btn_text_link, btn_path_link %>
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb index a0ef26543..1bea29cf7 100644 --- a/app/views/welcome/index.html.erb +++ b/app/views/welcome/index.html.erb @@ -9,52 +9,16 @@ social_url: root_url %> <% end %> -
-
-
-

<%= t("layouts.header.open_city_title") %>

-

- <%= t("layouts.header.open_city_slogan_html") %> -

-
- <%= link_to t("shared.more_info"), help_path, class: "button expanded large" %> -
-
-
-
- <%= render "header", header: @header %> -<%= render "feeds" %> -<%= render "cards" %> -<% if feature?("user.recommendations") && (@recommended_debates.present? || @recommended_proposals.present?) %> - <%= render "recommended", - recommended_debates: @recommended_debates, - recommended_proposals: @recommended_proposals %> -
-<% end %> +
+ <%= render "feeds" %> -<% cache [locale_and_user_status, @featured_debates, @featured_proposals, 'featured'] do %> -
-
-
-
-

<%= t("welcome.debates.title") %>

-

<%= t("welcome.debates.description") %>

-
-
-

<%= t("welcome.proposal.title") %>

-

<%= t("welcome.proposal.description") %>

-
-
-

<%= t("welcome.decide.title") %>

-

<%= t("welcome.decide.description") %>

-
-
-

<%= t("welcome.do.title") %>

-

<%= t("welcome.do.description") %>

-
-
-
-
-<% end %> + <%= render "cards" %> + + <% if feature?("user.recommendations") && (@recommended_debates.present? || @recommended_proposals.present?) %> + <%= render "recommended", + recommended_debates: @recommended_debates, + recommended_proposals: @recommended_proposals %> + <% end %> +
diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml index 24f0bdfda..c1952e7c6 100644 --- a/config/locales/en/general.yml +++ b/config/locales/en/general.yml @@ -801,6 +801,7 @@ en: title: You propose recommended: title: Recommendations that may interest you + help: "These recommendations are generated by the tags of the debates and proposals you are following." debates: title: Recommended debates btn_text_link: All recommended debates diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml index 81e37d53d..5a9d37ae3 100644 --- a/config/locales/es/general.yml +++ b/config/locales/es/general.yml @@ -800,6 +800,7 @@ es: title: Propones recommended: title: Recomendaciones que te pueden interesar + help: "Estas recomendaciones se generan por las etiquetas de los debates y propuestas que estás siguiendo." debates: title: Debates recomendados btn_text_link: Todos los debates recomendados