diff --git a/app/assets/images/welcome_process.png b/app/assets/images/welcome_process.png new file mode 100644 index 000000000..1fd74d2d2 Binary files /dev/null and b/app/assets/images/welcome_process.png differ diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 4faf2221c..5ad5e963c 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -2227,8 +2227,8 @@ table { .section-recommended { background: #fafafa; - border-bottom: 1px solid $border; border-top: 1px solid $border; + margin-bottom: rem-calc(-48); padding: $line-height 0; h2 { @@ -2598,6 +2598,70 @@ table { color: #fff; } } + + .background-header { + clip-path: ellipse(60% 80% at 50% 0%); + height: $line-height * 2; + background: $highlight; + margin-top: rem-calc(-48); + } + + h3 { + + &.title { + display: inline-block; + border-top: 4px solid $brand; + min-width: rem-calc(240); + padding-top: $line-height / 2; + } + } +} + +.feeds-list { + + .proposal { + clear: both; + } + + .debate { + margin: $line-height 0; + } +} + +.feed-image { + background: #fafafa; + display: inline-block; + height: rem-calc(120); + margin: $line-height / 2 0; + overflow: hidden; + width: rem-calc(120); + + img { + margin-left: rem-calc(-15); + max-width: none; + width: rem-calc(120); + } +} + +.feed-description { + padding-top: $line-height; + + p { + font-size: $small-font-size; + } +} + +.feed-content { + border-bottom: 1px solid $border; + display: inline-block; + + a { + + &.see-all { + font-size: $small-font-size; + margin: $line-height 0 $line-height / 2; + } + } } .figure-card { @@ -2617,11 +2681,16 @@ table { } } + img { + height: 100%; + width: 100%; + } + figcaption { bottom: 0; color: #fff; - font-size: rem-calc(36); - line-height: rem-calc(36); + font-size: rem-calc(24); + line-height: rem-calc(24); text-transform: uppercase; padding: $line-height / 4 $line-height / 2; position: absolute; @@ -2629,16 +2698,18 @@ table { h3, .title { - font-size: rem-calc(36); - line-height: rem-calc(36); + font-size: rem-calc(24); + line-height: rem-calc(24); } span { background: #fff; border-radius: rem-calc(4); color: #000; - display: inline; - font-size: $base-font-size; + display: inline-block; + font-size: $small-font-size; + font-weight: bold; + margin-bottom: $line-height / 4; padding: rem-calc(4) rem-calc(8); } } diff --git a/app/helpers/feeds_helper.rb b/app/helpers/feeds_helper.rb new file mode 100644 index 000000000..b83efb70a --- /dev/null +++ b/app/helpers/feeds_helper.rb @@ -0,0 +1,15 @@ +module FeedsHelper + + def feed_debates?(feed) + feed.kind == "debates" + end + + def feed_proposals?(feed) + feed.kind == "proposals" + end + + def feed_processes?(feed) + feed.kind == "processes" + end + +end diff --git a/app/views/welcome/_card.html.erb b/app/views/welcome/_card.html.erb index 0ae4a153a..dec54b193 100644 --- a/app/views/welcome/_card.html.erb +++ b/app/views/welcome/_card.html.erb @@ -1,4 +1,4 @@ -
+
<%= link_to card.link_url do %>
<% if card.image.present? %> diff --git a/app/views/welcome/_cards.html.erb b/app/views/welcome/_cards.html.erb index 89596901d..15347f384 100644 --- a/app/views/welcome/_cards.html.erb +++ b/app/views/welcome/_cards.html.erb @@ -1,3 +1,5 @@ +

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

+
<% @cards.all.each do |card| %> <%= render "card", card: card %> diff --git a/app/views/welcome/_feeds.html.erb b/app/views/welcome/_feeds.html.erb index 9c72efc43..8a0804705 100644 --- a/app/views/welcome/_feeds.html.erb +++ b/app/views/welcome/_feeds.html.erb @@ -1,14 +1,46 @@ -
-
- <% @feeds.each do |feed| %> +
+ <% @feeds.each do |feed| %> - Most active <%= feed.kind %> + <% if feed_proposals?(feed) %> +
+
+

<%= t("welcome.feed.most_active.#{feed.kind}") %>

- <% feed.items.each do |item| %> -
- <%= item.title %> + <% feed.items.each do |item| %> +
+
+ <% if feature?(:allow_images) && item.image.present? %> + <%= image_tag item.image_url(:thumb), + alt: item.image.title.unicode_normalize %> + <% end %> +
+
+ <%= link_to item.title, url_for(item) %>
+

<%= item.summary %>

+
+
+ <% end %> + + <%= link_to t("welcome.feed.see_all_proposals"), proposals_path, class: "float-right see-all" %>
- <% end %> +
<% end %> -
+ + <% if feed_debates?(feed) %> +
+
+

<%= t("welcome.feed.most_active.#{feed.kind}") %>

+ + <% feed.items.each do |item| %> +
+ <%= link_to item.title, url_for(item) %> +
+ <% end %> + + <%= link_to t("welcome.feed.see_all_debates"), debates_path, class: "float-right see-all" %> +
+
+ <% end %> + + <% end %>
diff --git a/app/views/welcome/_header.html.erb b/app/views/welcome/_header.html.erb index 3b49233bc..924eba262 100644 --- a/app/views/welcome/_header.html.erb +++ b/app/views/welcome/_header.html.erb @@ -18,4 +18,5 @@ <% end %>
+
<% end %> diff --git a/app/views/welcome/_processes.html.erb b/app/views/welcome/_processes.html.erb new file mode 100644 index 000000000..ea02baeb4 --- /dev/null +++ b/app/views/welcome/_processes.html.erb @@ -0,0 +1,29 @@ +
+ <% @feeds.each do |feed| %> + + <% if feed_processes?(feed) %> +
+
+

<%= t("welcome.feed.most_active.#{feed.kind}") %>

+ + <% feed.items.each do |item| %> + <%= link_to url_for(item) do %> +
+ <%= image_tag("welcome_process.png", alt: "") %> +
+ <%= t("welcome.feed.process_label") %>
+

<%= item.title %>

+
+
+

<%= item.summary %>

+

<%= t("welcome.feed.see_process") %>

+ <% end %> + <% end %> + + <%= link_to t("welcome.feed.see_all_processes"), legislation_processes_path, class: "float-right see-all" %> +
+
+ <% end %> + + <% end %> +
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb index 1bea29cf7..ab4148712 100644 --- a/app/views/welcome/index.html.erb +++ b/app/views/welcome/index.html.erb @@ -14,7 +14,16 @@
<%= render "feeds" %> - <%= render "cards" %> + +
+
+ <%= render "cards" %> +
+ +
+ <%= render "processes" %> +
+
<% if feature?("user.recommendations") && (@recommended_debates.present? || @recommended_proposals.present?) %> <%= render "recommended", diff --git a/config/locales/en/activerecord.yml b/config/locales/en/activerecord.yml index 6bad6d150..8469d025d 100644 --- a/config/locales/en/activerecord.yml +++ b/config/locales/en/activerecord.yml @@ -246,7 +246,7 @@ en: from: From body: Email content widget/card: - label: Label + label: Label (optional) title: Title description: Description link_text: Link text diff --git a/config/locales/en/general.yml b/config/locales/en/general.yml index b307a1c77..8d485e023 100644 --- a/config/locales/en/general.yml +++ b/config/locales/en/general.yml @@ -784,6 +784,18 @@ en: one: "You can only support investment projects in %{count} district" other: "You can only support investment projects in %{count} districts" welcome: + feed: + most_active: + debates: "Most active debates" + proposals: "Most active proposals" + processes: "Open processes" + see_all_debates: See all debates + see_all_proposals: See all proposals + see_all_processes: See all processes + process_label: Process + see_process: See process + cards: + title: Featured recommended: title: Recommendations that may interest you help: "These recommendations are generated by the tags of the debates and proposals you are following." diff --git a/config/locales/es/activerecord.yml b/config/locales/es/activerecord.yml index e7e3c3761..564d48159 100644 --- a/config/locales/es/activerecord.yml +++ b/config/locales/es/activerecord.yml @@ -242,7 +242,7 @@ es: from: Enviado por body: Contenido del email widget/card: - label: Etiqueta + label: Etiqueta (opcional) title: Título description: Descripción link_text: Texto del enlace diff --git a/config/locales/es/general.yml b/config/locales/es/general.yml index 4a3991b3f..fee56b4c9 100644 --- a/config/locales/es/general.yml +++ b/config/locales/es/general.yml @@ -783,6 +783,18 @@ es: one: "Sólo puedes apoyar proyectos de gasto de %{count} distrito" other: "Sólo puedes apoyar proyectos de gasto de %{count} distritos" welcome: + feed: + most_active: + debates: "Debates más activos" + proposals: "Propuestas más activas" + processes: "Procesos abiertos" + see_all_debates: Ver todos los debates + see_all_proposals: Ver todas las propuestas + see_all_processes: Ver todos los procesos + process_label: Proceso + see_process: Ver proceso + cards: + title: Destacados recommended: title: Recomendaciones que te pueden interesar help: "Estas recomendaciones se generan por las etiquetas de los debates y propuestas que estás siguiendo."