diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 7a5705f60..5c4dcb567 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -18,6 +18,7 @@ // 16. Flags // 17. Activity // 18. Banners +// 19. Recommended Section Home // // 01. Global styles @@ -319,6 +320,14 @@ a { background: $brand; } +.truncate-horizontal-text { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + -ms-text-overflow: ellipsis; +} + // 02. Header // ---------- @@ -2128,3 +2137,95 @@ table { text-decoration: none; } } + +// 19. Recommended Section Home +// ----------- +.section-recommended { + padding-top: $line-height * 2; + + h2 { + margin-bottom: $line-height * 2; + } + + .debates, + .proposals, + .budget-investments { + + @include breakpoint(medium) { + margin-bottom: 0; + } + + @include breakpoint(small) { + margin-bottom: $line-height; + } + } + + .card { + + .card-section { + padding: $line-height; + + p { + font-size: rem-calc(15); + } + } + + .orbit { + height: 300px; + + .orbit-wrapper { + max-height: 250px; + overflow: hidden; + position: relative; + } + + .orbit-bullets { + @include orbit-bullets; + width: 100%; + } + } + } + + .card .orbit .orbit-wrapper .truncate { + background: image-url('truncate.png'); + background-repeat: repeat-x; + bottom: 0; + height: 20px; + position: absolute; + 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 { + background: #fff; + max-height: 350px; + + @include breakpoint(small) { + max-height: 400px; + } + + h4 { + margin-top: $line-height; + margin-bottom: 0; + font-size: rem-calc(18); + min-height: 50px; + } + + h5 { + font-size: rem-calc(14); + } + } +} diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss index 401a2ec81..70f4c179d 100644 --- a/app/assets/stylesheets/mixins.scss +++ b/app/assets/stylesheets/mixins.scss @@ -1,6 +1,7 @@ // Table of Contents // // 01. Logo +// 02. Orbit bullets // // 01. Logo @@ -30,3 +31,30 @@ } } } + + +//02. Orbit bullet +@mixin orbit-bullets { + @include disable-mouse-outline; + position: relative; + margin-top: $orbit-bullet-margin-top; + margin-bottom: $orbit-bullet-margin-bottom; + text-align: center; + + button { + width: $orbit-bullet-diameter; + height: $orbit-bullet-diameter; + margin: $orbit-bullet-margin; + + border-radius: 50%; + background-color: $orbit-bullet-background; + + &:hover { + background-color: $orbit-bullet-background-active; + } + + &.is-active { + background-color: $orbit-bullet-background-active; + } + } +} diff --git a/app/views/welcome/_recommended_no_image.html.erb b/app/views/welcome/_recommended_no_image.html.erb index 495bccc5c..e151c06c0 100644 --- a/app/views/welcome/_recommended_no_image.html.erb +++ b/app/views/welcome/_recommended_no_image.html.erb @@ -1,108 +1,108 @@ -
-

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

+
+
+

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

-
-
+
+
-

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

+

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

-
-
+
+
+
    + <% current_user.recommended_debates.each_with_index do |debate, index| %> +
  • +
    +
    + <%= link_to debate_path(debate) do %> +
    <%= debate.title %>
    + <% end %> +

    <%= debate.description %>

    +
    +
    +
    • + <% end %> +
+
+
-
    +
- -
- -
- - -
-
+ +
+
-
-
-
+
+
-

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

+

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

-
-
- -
    +
    +
    +
      + <% current_user.recommended_proposals.each_with_index do |proposal, index| %> +
    • +
      +
      + <%= link_to proposal_path(proposal) do %> +
      <%= proposal.title %>
      + <% end %> +

      <%= proposal.description %>

      +
      +
      +
      • + <% end %> +
    +
    +
    +
- -
- -
- - -
- -
+ +
+
-
-
-
+
+
-

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

+

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

-
-
- -
    - <% current_user.recommended_budget_investments.each_with_index do |budget_investment, index| %> - -
  • -
    -
    -
    <%= budget_investment.title %>
    -

    <%= budget_investment.description %>

    - +
    +
    +
      + <% current_user.recommended_budget_investments.each_with_index do |budget_investment, index| %> +
    • +
      +
      + <%= link_to budget_path(budget_investment) do %> +
      <%= budget_investment.title %>
      + <% end %> +

      <%= budget_investment.description %>

      +
      -
    -
    • - + + <% end %> +
+
+
+
- -
- - -
-
-
diff --git a/db/schema.rb b/db/schema.rb index 91a26adeb..f12afd6a6 100644 --- a/db/schema.rb +++ b/db/schema.rb @@ -919,7 +919,7 @@ ActiveRecord::Schema.define(version: 20170719174326) do t.boolean "email_digest", default: true t.boolean "email_on_direct_message", default: true t.boolean "official_position_badge", default: false - t.datetime "password_changed_at", default: '2017-06-22 11:21:30', null: false + t.datetime "password_changed_at", default: '2017-07-21 18:09:48', null: false t.boolean "created_from_signature", default: false t.integer "failed_email_digests_count", default: 0 t.text "former_users_data_log", default: ""