diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss index 22e7ac8de..1e181e1c1 100644 --- a/app/assets/stylesheets/_settings.scss +++ b/app/assets/stylesheets/_settings.scss @@ -3,6 +3,7 @@ // // Table of Contents: // +// 0. Custom variables // 1. Global // 2. Breakpoints // 3. The Grid @@ -43,6 +44,70 @@ @import 'util/util'; +// 0. Custom variables +// -------------------- + +$base-font-size: rem-calc(17); +$base-line-height: rem-calc(26); +$small-font-size: rem-calc(14); +$line-height: rem-calc(24); + +$brand: #004A83; +$body: #E9E9E9; +$background: #EDEFF0; +$border: #DEE0E3; +$dark: darken($brand, 10%); + +$text: #222222; +$text-medium: #999999; +$text-light: #CCCCCC; + +$link: #2895F1; +$link-hover: #2178BF; + +$debates: #008CCF; +$votes-bg: #26AEEE; +$votes-border: #1F94CB; + +$votes-like: #7BD2A8; +$votes-like-act: #5D9E7F; +$votes-unlike: #EF8585; +$votes-unlike-act: #BD6A6A; + +$delete: #F04124; +$check: #46DB91; + +$proposals: #FFA42D; +$proposals-border: #CC8425; + +$budget: #454372; +$budget-hover: #7571BF; + +$highlight: #E7F2FC; +$featured: #FED900; + +$footer-bg: #DEE0E2; +$footer-color: #171819; +$footer-link: #454A4C; +$footer-border: #BFC1C3; + +$success-bg: #DFF0D8; +$success-border: #D6E9C6; +$color-success: #3C763D; + +$info-bg: #D9EDF7; +$info-border: #BCE8F1; +$color-info: #31708F; + +$warning-bg: #FCF8E3; +$warning-border: #FAEBCC; +$color-warning: #8A6D3B; + +$alert-bg: #F2DEDE; +$alert-border: #EBCCD1; +$color-alert: #A94442; + + // 1. Global // --------- @@ -510,13 +575,13 @@ $show-header-for-stacked: false; $tab-margin: 0; $tab-background: $white; -$tab-background-active: $light-gray; -$tab-item-font-size: rem-calc(12); +$tab-background-active: $white; +$tab-item-font-size: $base-font-size; $tab-item-background-hover: $white; -$tab-item-padding: 1.25rem 1.5rem; +$tab-item-padding: $line-height/2 0; $tab-expand-max: 6; $tab-content-background: $white; -$tab-content-border: $light-gray; +$tab-content-border: $border; $tab-content-color: foreground($tab-background, $primary-color); $tab-content-padding: 1rem; @@ -563,66 +628,3 @@ $topbar-submenu-background: $topbar-background; $topbar-title-spacing: 1rem; $topbar-input-width: 200px; $topbar-unstack-breakpoint: medium; - -// 37. Custom variables -// -------------------- - -$base-font-size: rem-calc(17); -$base-line-height: rem-calc(26); -$small-font-size: rem-calc(14); -$line-height: rem-calc(24); - -$brand: #004A83; -$body: #E9E9E9; -$background: #EDEFF0; -$border: #DEE0E3; -$dark: darken($brand, 10%); - -$text: #222222; -$text-medium: #999999; -$text-light: #CCCCCC; - -$link: #2895F1; -$link-hover: #2178BF; - -$debates: #008CCF; -$votes-bg: #26AEEE; -$votes-border: #1F94CB; - -$votes-like: #7BD2A8; -$votes-like-act: #5D9E7F; -$votes-unlike: #EF8585; -$votes-unlike-act: #BD6A6A; - -$delete: #F04124; -$check: #46DB91; - -$proposals: #FFA42D; -$proposals-border: #CC8425; - -$budget: #454372; -$budget-hover: #7571BF; - -$highlight: #E7F2FC; -$featured: #FED900; - -$footer-bg: #DEE0E2; -$footer-color: #171819; -$footer-link: #454A4C; -$footer-border: #BFC1C3; - -$success-bg: #DFF0D8; -$success-border: #D6E9C6; -$color-success: #3C763D; - -$info-bg: #D9EDF7; -$info-border: #BCE8F1; -$color-info: #31708F; - -$warning-bg: #FCF8E3; -$warning-border: #FAEBCC; -$color-warning: #8A6D3B; - -$alert-bg: #F2DEDE; -$alert-border: #EBCCD1; -$color-alert: #A94442; diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index 42f6f177d..ea426cf45 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -219,6 +219,35 @@ a { float: left; } +.tabs-content { + border: 0; +} + +.tabs { + border: { + left: 0; + right: 0; + top: 0; + }; + + .tabs-title > a { + color: $text-medium; + margin-bottom: rem-calc(-1); + margin-right: $line-height; + + &[aria-selected='true'], + &.is-active { + color: $brand; + border-bottom: 2px solid $brand; + font-weight: bold; + } + } + + h2 { + font-size: $base-font-size; + } +} + // 02. Header // ---------- @@ -1460,7 +1489,6 @@ table { .comments { background: $white; background-repeat: repeat-x; - padding-top: $line-height; padding-bottom: $line-height*4; h2 { @@ -1647,7 +1675,7 @@ table { &:first-child { padding-left: $line-height*1.5; - width: 80%; + width: 75%; } &:before { diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 502fe62aa..6e5b4273a 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -715,6 +715,16 @@ } } +.more-info { + clear: both; + color: $text-medium; + font-size: $small-font-size; + + a { + color: $text-medium; + } +} + .debate { .votes { diff --git a/app/views/proposals/_comments.html.erb b/app/views/proposals/_comments.html.erb index 31f1cb8ba..094814cf1 100644 --- a/app/views/proposals/_comments.html.erb +++ b/app/views/proposals/_comments.html.erb @@ -1,11 +1,13 @@ <% cache [locale_and_user_status, @current_order, commentable_cache_key(@proposal), @comment_tree.comments, @comment_tree.comment_authors, @proposal.comments_count, @comment_flags] do %> -
+
-

- <%= t("proposals.show.comments_title") %> - (<%= @proposal.comments_count %>) -

+ <% if @notifications.blank? %> +

+ <%= t("proposals.show.comments_title") %> + (<%= @proposal.comments_count %>) +

+ <% end %> <%= render 'shared/wide_order_selector', i18n_namespace: "comments" %> diff --git a/app/views/proposals/_filter_subnav.html.erb b/app/views/proposals/_filter_subnav.html.erb new file mode 100644 index 000000000..b7bc85dd6 --- /dev/null +++ b/app/views/proposals/_filter_subnav.html.erb @@ -0,0 +1,22 @@ +
+
+
    +
  • + <%= link_to "#tab-comments" do %> +

    + <%= t("proposals.show.comments_tab") %> + (<%= @proposal.comments_count %>) +

    + <% end %> +
    • +
  • + <%= link_to "#tab-notifications" do %> +

    + <%= t("proposals.show.notifications_tab") %> + (<%= @notifications.count %>) +

    + <% end %> +
    • +
+
+
diff --git a/app/views/proposals/_notifications.html.erb b/app/views/proposals/_notifications.html.erb index 9e3af3e9e..44bb9f4a2 100644 --- a/app/views/proposals/_notifications.html.erb +++ b/app/views/proposals/_notifications.html.erb @@ -1,8 +1,11 @@ -<% if @notifications.present? %> -
- <% @notifications.each do |notification| %> -
<%= notification.title %>
-
<%= notification.body %>
- <% end %> +
+
+
+ <% @notifications.each do |notification| %> +

<%= notification.title %>

+

<%= notification.created_at.to_date %>

+

<%= notification.body %>

+ <% end %> +
-<% end %> \ No newline at end of file +
diff --git a/app/views/proposals/show.html.erb b/app/views/proposals/show.html.erb index 9d8c3b739..2a6ae7185 100644 --- a/app/views/proposals/show.html.erb +++ b/app/views/proposals/show.html.erb @@ -118,5 +118,14 @@
<% end %> -<%= render "proposals/notifications" %> -<%= render "proposals/comments" %> + +
+ <% if @notifications.present? %> + <%= render "proposals/filter_subnav" %> + <%= render "proposals/notifications" %> + <% end %> + +
+ <%= render "proposals/comments" %> +
+
diff --git a/app/views/users/_proposals.html.erb b/app/views/users/_proposals.html.erb index d23e865ca..a56b096f6 100644 --- a/app/views/users/_proposals.html.erb +++ b/app/views/users/_proposals.html.erb @@ -9,7 +9,8 @@ <% if author? %> - <%= link_to t("users.proposals.send_message"), new_proposal_notification_path(proposal_id: proposal.id) %> + <%= link_to t("users.proposals.send_message"), new_proposal_notification_path(proposal_id: proposal.id), + class: 'button hollow' %> <% end %> @@ -20,7 +21,7 @@ <% else %> <%= link_to t('users.proposals.retire'), retire_form_proposal_path(proposal), - class: 'delete' %> + class: 'button hollow alert' %> <% end %> <% end %> diff --git a/config/locales/en.yml b/config/locales/en.yml index 5a0dec0c6..4d5816f4c 100755 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -351,10 +351,12 @@ en: one: 1 comment other: "%{count} comments" zero: No comments + comments_tab: Comments comments_title: Comments edit_proposal_link: Edit flag: This proposal has been flagged as inappropriate by several users. login_to_comment: You must %{signin} or %{signup} to leave a comment. + notifications_tab: Notifications retired_warning: "The author considers this proposal should not receive more supports." retired_warning_link_to_explanation: Read the explanation before voting for it. retired: Proposal retired by the author diff --git a/config/locales/es.yml b/config/locales/es.yml index 909e20bbc..36b318cc7 100755 --- a/config/locales/es.yml +++ b/config/locales/es.yml @@ -351,10 +351,12 @@ es: one: 1 Comentario other: "%{count} Comentarios" zero: Sin comentarios + comments_tab: Comentarios comments_title: Comentarios edit_proposal_link: Editar propuesta flag: Esta propuesta ha sido marcada como inapropiada por varios usuarios. login_to_comment: Necesitas %{signin} o %{signup} para comentar. + notifications_tab: Notificaciones retired_warning: "El autor de esta propuesta considera que ya no debe seguir recogiendo apoyos." retired_warning_link_to_explanation: Revisa su explicación antes de apoyarla. retired: Propuesta retirada por el autor