diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss index 242a03b82..4149020fa 100644 --- a/app/assets/stylesheets/_settings.scss +++ b/app/assets/stylesheets/_settings.scss @@ -51,6 +51,7 @@ $base-font-size: rem-calc(17); $base-line: rem-calc(26); $small-font-size: rem-calc(14); $line-height: rem-calc(24); +$tiny-font-size: rem-calc(12); $brand: #004A83; $dark: darken($brand, 10%); @@ -66,7 +67,6 @@ $link-hover: darken($link, 20%); $debates: #008CCF; -$votes: #26AEEE; $like: #7BD2A8; $unlike: #EF8585; @@ -79,7 +79,7 @@ $budget: #454372; $budget-hover: #7571BF; $highlight: #E7F2FC; -$featured: #FED900; +$featured: #FFDC5C; $footer-border: #BFC1C3; diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss index c3dded973..6c6d739af 100644 --- a/app/assets/stylesheets/layout.scss +++ b/app/assets/stylesheets/layout.scss @@ -475,8 +475,16 @@ header { &.active { border-bottom: 2px solid $brand; color: $brand; + + &:hover { + text-decoration: none; + } } } + + h2 { + font-size: $base-font-size; + } } .search-form-header input[type=text] { @@ -1247,13 +1255,14 @@ table { } .share-supported { + text-align: center; .social-share-button { display: inline-block; } .ssb-twitter { - background: none; + background: #45B0E3; color: white; height: $line-height; position: relative; @@ -1276,7 +1285,7 @@ table { } .ssb-facebook { - background: none; + background: #3B5998; color: white; height: rem-calc(24); position: relative; @@ -1299,7 +1308,7 @@ table { } .ssb-google_plus { - background: none; + background: #DE4C34; color: white; height: rem-calc(24); position: relative; @@ -1550,7 +1559,7 @@ table { .comment-votes { color: $text-medium; - font-size: rem-calc(14); + font-size: $small-font-size; line-height: $line-height; a { @@ -1560,12 +1569,21 @@ table { &:hover { color: $text-medium; + text-decoration: none; + + .icon-like { + color: $like; + } + + .icon-unlike { + color: $unlike; + } } } [class^="icon-"] { - font-size: rem-calc(20); - vertical-align: middle; + font-size: $base-font-size; + vertical-align: sub; } } @@ -1685,7 +1703,8 @@ table { } .flag-disable, .flag-active { - vertical-align: middle; + line-height: 0; + vertical-align: sub; } .flag-disable { diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss index 1ab1eb726..6dbaac394 100644 --- a/app/assets/stylesheets/participation.scss +++ b/app/assets/stylesheets/participation.scss @@ -12,14 +12,21 @@ // ---------------------- @mixin votes { - background: $votes; - margin: 0 rem-calc(-12); - padding: rem-calc(14) rem-calc(12); + border-top: 1px solid $border; + margin-top: $line-height; + padding: $line-height 0; position: relative; + @include breakpoint(medium) { + border-left: 1px solid $border; + border-top: 0; + margin-top: 0; + padding-top: $line-height*2; + } + .icon-like, .icon-unlike { background: white; - border: 2px solid $votes; + border: 2px solid $text-light; border-radius: rem-calc(3); color: $text-light; display: inline-block; @@ -29,7 +36,6 @@ position: relative; &:hover, &:active { - border-color: white; color: white; cursor: pointer; opacity: 1 !important; @@ -40,6 +46,7 @@ &:hover, &:active { background: $like; + border: 2px solid $like; } } @@ -47,50 +54,64 @@ &:hover, &:active { background: $unlike; + border: 2px solid $unlike; } } .like, .unlike { line-height: rem-calc(48); vertical-align: super; + text-decoration: none; span.percentage { - color: white; + color: $text; display: inline-block; - font-size: rem-calc(16); + font-size: $small-font-size; line-height: $line-height*2; - padding-left: rem-calc(8); + padding-right: $line-height/2; vertical-align: top; + + @include breakpoint(medium) { + display: block; + line-height: $line-height; + padding-right: 0; + } } } .voted { .icon-like, .icon-unlike { - border-color: white; color: white; } .icon-like { background: $like; + border: 2px solid $like; } .icon-unlike { background: $unlike; + border: 2px solid $unlike; } } .no-voted { .icon-like, .icon-unlike { - opacity: .5; + opacity: .3; } } .total-votes { - color: white; + font-weight: bold; float: right; line-height: $line-height*2; + + @include breakpoint(medium) { + display: block; + float: none; + } } .divider { @@ -99,64 +120,65 @@ } @mixin supports { - background: $proposals; - margin: 0 rem-calc(-12); - padding: rem-calc(14) rem-calc(12); + padding: $line-height 0; position: relative; .progress { - background-color: rgba(255,255,255,.8); - height: $line-height/2; + background: lighten($proposals, 35%); + border: 1px solid lighten($proposals, 35%); + height: rem-calc(14); + position: relative; .meter { - background: $like; + background: $proposals; + border-radius: 0; + border-bottom-right-radius: rem-calc(3); + border-top-right-radius: rem-calc(3); display: block; height: $line-height/2; } } .percentage { - font-size: rem-calc(10); - color: $brand; - vertical-align: top; + color: $text; + font-size: $tiny-font-size; position: absolute; - top: 13px; - right: 20px; + right: 6px; + top: -2px; + vertical-align: top; } abbr { - color: white; + color: $text-medium; &[title] { - border-bottom: 1px dotted white; + border-bottom: 1px dotted $text-medium; } } .button-support { - background: white; + background: $proposals; color: $text; display: inline-block; font-size: $small-font-size; margin-top: rem-calc(12); - &:hover { - background: darken($proposals, 35%); - color: white; + &:hover, &:active { + background: lighten($proposals, 25%); cursor: pointer; } - - &:active { - opacity: .75; - } } .total-supports { - color: white; + color: $text; + display: block; + font-weight: bold; text-align: center; - font-size: $small-font-size; span { display: block; + font-size: $small-font-size; + font-weight: normal; } } @@ -165,23 +187,17 @@ } .supported { - color: white; + color: $text; margin-top: rem-calc(12); } } -.message { - @include supports; - background: none; - border-top: 0; +.supports-container { + border-top: 1px solid $border; @include breakpoint(medium) { border-left: 1px solid $border; - margin: $line-height rem-calc(-25) 0 rem-calc(12); - } - - p { - font-size: $small-font-size; + border-top: 0; } } @@ -276,7 +292,9 @@ // 03. Show participation // ---------------------- -.debate-show, .proposal-show, .investment-project-show { +.debate-show, +.proposal-show, +.investment-project-show { p { word-wrap: break-word; @@ -413,47 +431,8 @@ } } - .votes { - @include votes; - border: 0; - border-radius: 0; - margin: 0; - - .total-votes { - display: block; - float: none; - line-height: $line-height; - } - - @include breakpoint(small + rem-calc(1) and medium down) { - .in-favor, .against { - text-align: left; - width: rem-calc(100); - } - } - - .divider { - display: none; - } - - @include breakpoint(medium) { - .divider { - display: inline-block; - } - } - } - .supports { @include supports; - border: 0; - border-radius: 0; - margin: 0; - - .total-supports { - display: block; - float: none; - line-height: $line-height; - } } .leave-comment { @@ -478,6 +457,17 @@ word-break: break-word; } +.proposal-show, .investment-project-show { + + .supports { + padding: $line-height/2 0 0; + } + + .share-supported { + display: none; + } +} + // 04. List participation // ---------------------- @@ -496,8 +486,7 @@ } .debate, .proposal, .investment-project { - margin-bottom: 0; - margin-top: 0; + margin: $line-height/4 0; .panel { background: white; @@ -651,107 +640,30 @@ } } -.debate { +.debate, .debate-show { .votes { @include votes; - border: 1px solid $votes; - margin: 0 rem-calc(-12); - @include breakpoint(medium) { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - margin: 0 rem-calc(-25) 0 rem-calc(12); - } - - &:after { - content: none; - position: absolute; - display: block; - border-style: solid; - border-color: #166387 transparent transparent transparent; - bottom: -14px; - border-left-width: 0; - border-right-color: transparent; - right: -1px; - border-width: 13px 13px 0 0; - - @include breakpoint(medium) { - content: ""; - } - } - - .total-votes { - display: inline-block; - line-height: $line-height; - margin-left: rem-calc(24); - padding-top: rem-calc(12); - vertical-align: top; - - @include breakpoint(medium) { - display: block; - float: none; - line-height: $line-height*2; - margin-left: 0; - padding-top: 0; - } + .against { + margin-left: $line-height/4; } @include breakpoint(medium) { - .like, .unlike { - - span.percentage { - display: block; - line-height: $line-height/2; - } - } + text-align: center; } } } +.debate-show .votes { + border: 0; + padding: $line-height/2 0; +} + .proposal { .supports { @include supports; - border: 1px solid $proposals; - margin: 0 rem-calc(-12); - - @include breakpoint(medium) { - border-top-left-radius: 3px; - border-bottom-left-radius: 3px; - margin: 0 rem-calc(-25) 0 rem-calc(12); - } - - &:after { - content: none; - position: absolute; - display: block; - border-style: solid; - border-color: #664212 transparent transparent transparent; - bottom: -14px; - border-left-width: 0; - border-right-color: transparent; - right: -1px; - border-width: 13px 13px 0 0; - - @include breakpoint(medium) { - content: ""; - } - } - - .total-supports { - display: inline-block; - line-height: $line-height; - padding-top: rem-calc(12); - vertical-align: top; - - @include breakpoint(medium) { - display: block; - float: none; - margin-left: 0; - padding-top: 0; - } - } } } @@ -759,20 +671,6 @@ .supports { @include supports; - background: none; - border: 0; - border-left: 1px solid $border; - margin: 0 rem-calc(-12); - min-height: rem-calc(180); - padding-top: 0; - - @include breakpoint(medium) { - padding-top: $line-height*1.5; - } - - &:after { - content: none; - } .investment-project-amount { color: $budget; @@ -802,33 +700,14 @@ font-weight: bold; } - .supported { - color: $budget; - margin-top: 0; - width: 100%; - } - .remove .icon-check-circle { display: block; font-size: rem-calc(70); line-height: rem-calc(70); } - - .share-supported { - - .ssb-twitter, - .ssb-facebook, - .ssb-google_plus { - color: $budget; - } - } } } -.investment-project-show .supports { - border: 0; -} - .proposals-summary { .panel { @@ -903,7 +782,14 @@ } .button-support { + background: $text; + color: $featured; margin-top: 0; + + &:hover { + background: white; + color: $text; + } } .participation-not-allowed { @@ -924,6 +810,7 @@ .supported { margin-top: 0; + font-size: $small-font-size; } .share-supported { @@ -931,7 +818,10 @@ .ssb-twitter, .ssb-facebook, .ssb-google_plus { - height: rem-calc(33); + background: none; + color: $text; + height: rem-calc(33) !important; + &:before { font-size: rem-calc(18); diff --git a/app/views/comments/_votes.html.erb b/app/views/comments/_votes.html.erb index 0de92a675..93af5b2dd 100644 --- a/app/views/comments/_votes.html.erb +++ b/app/views/comments/_votes.html.erb @@ -6,13 +6,17 @@ <% if can?(:vote, comment) %> <%= link_to vote_comment_path(comment, value: 'yes'), - method: "post", remote: true do %> - + method: "post", remote: true, title: t('votes.agree') do %> + <%= t('votes.agree') %> <% end %> <% else %> - + <%= link_to new_user_session_path do %> + + <%= t('votes.agree') %> + + <% end %> <% end %> <%= comment.total_likes %> @@ -20,13 +24,15 @@ <% if can?(:vote, comment) %> <%= link_to vote_comment_path(comment, value: 'no'), - method: "post", remote: true do %> - + method: "post", remote: true, title: t('votes.disagree') do %> + <%= t('votes.disagree') %> <% end %> <% else %> - + + <%= t('votes.disagree') %> + <% end %> <%= comment.total_dislikes %> @@ -40,26 +46,40 @@ <% if can?(:vote, comment) %> <%= link_to vote_comment_path(comment, value: 'yes'), - method: "post", remote: true do %> - + method: "post", remote: true, title: t('votes.agree') do %> + + <%= t('votes.agree') %> + <% end %> <% else %> - + <%= link_to new_user_session_path do %> + + <%= t('votes.agree') %> + + <% end %> <% end %> <%= comment.total_likes %> + <% if can?(:vote, comment) %> <%= link_to vote_comment_path(comment, value: 'no'), - method: "post", remote: true do %> - + method: "post", remote: true, title: t('votes.disagree') do %> + + <%= t('votes.disagree') %> + <% end %> <% else %> - + <%= link_to new_user_session_path do %> + + <%= t('votes.disagree') %> + + <% end %> <% end %> <%= comment.total_dislikes %> - + + -
+
<%= render 'debates/votes', debate: debate %>
diff --git a/app/views/debates/index.html.erb b/app/views/debates/index.html.erb index 2cd3f2d53..45d27bd56 100644 --- a/app/views/debates/index.html.erb +++ b/app/views/debates/index.html.erb @@ -6,6 +6,8 @@ <% end %>
+

<%= t("shared.outline.debates") %>

+
diff --git a/app/views/debates/show.html.erb b/app/views/debates/show.html.erb index 9625ab42d..dca39677e 100644 --- a/app/views/debates/show.html.erb +++ b/app/views/debates/show.html.erb @@ -45,10 +45,8 @@