Merge branch 'master' into redux-polling

2016-12-27 18:22:06 +01:00
parent 3ad648dd63 48fa7ab919
commit 5ec12e4b5b
235 changed files with 3445 additions and 1099 deletions
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -45,6 +45,7 @@
 //= require valuation_spending_proposal_form
 //= require embed_video
 //= require banners
+//= require social_share
 //= require custom

 var initialize_modules = function() {
@@ -66,6 +67,7 @@ var initialize_modules = function() {
  App.ValuationSpendingProposalForm.initialize();
  App.EmbedVideo.initialize();
  App.Banners.initialize();
+  App.SocialShare.initialize();
 };

 $(function(){
--- a/app/assets/javascripts/comments.js.coffee
+++ b/app/assets/javascripts/comments.js.coffee
@@ -52,5 +52,6 @@ App.Comments =
        children_container_id = "#{$(this).data().id}_children"
        $("##{children_container_id}").toggle('slow')
        App.Comments.toggle_arrow(children_container_id)
+        $(this).children('.js-child-toggle').toggle()
        false
      )
--- a/app/assets/javascripts/social_share.js.coffee
+++ b/app/assets/javascripts/social_share.js.coffee
@@ -0,0 +1,7 @@
+App.SocialShare =
+
+  initialize: ->
+    $(".social-share-button a").each ->
+      element = $(this)
+      site = element.data('site')
+      element.append("<span class='sr-only'>#{site}</span>")
--- a/app/assets/stylesheets/_settings.scss
+++ b/app/assets/stylesheets/_settings.scss
@@ -51,22 +51,22 @@ $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%);

 $text:              #222222;
-$text-medium:       #999999;
-$text-light:        #CCCCCC;
+$text-medium:       #515151;
+$text-light:        #BFBFBF;

 $border:            #DEE0E3;

-$link:              #2895F1;
+$link:              $brand;
 $link-hover:        darken($link, 20%);

-$debates:           #008CCF;
+$debates:           $brand;

-$votes:             #26AEEE;
 $like:              #7BD2A8;
 $unlike:            #EF8585;

@@ -74,13 +74,14 @@ $delete:            #F04124;
 $check:             #46DB91;

 $proposals:         #FFA42D;
+$proposals-dark:    #794500;

 $budget:            #454372;
 $budget-hover:      #7571BF;

 $highlight:         #E7F2FC;
 $light:             #F5F7FA;
-$featured:          #FED900;
+$featured:          #FFDC5C;

 $footer-border:     #BFC1C3;

--- a/app/assets/stylesheets/foundation_and_overrides.scss
+++ b/app/assets/stylesheets/foundation_and_overrides.scss
@@ -34,3 +34,4 @@
@include foundation-thumbnail;
@include foundation-title-bar;
@include foundation-top-bar;
+@include foundation-menu-icon;
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -56,6 +56,7 @@ a {
  }

  &:focus {
+    color: $link-hover;
    outline: 3px solid #ffbf47;
  }
 }
@@ -273,7 +274,7 @@ a {
    }
  }

-  h2 {
+  h2, h3 {
    font-size: $base-font-size;
  }
 }
@@ -286,6 +287,10 @@ a {
  margin: 0 $line-height/2;
 }

+.pagination .current {
+  background: $brand;
+}
+
 // 02. Header
 // ----------

@@ -394,6 +399,10 @@ header {
      text-decoration: underline;
    }
  }
+
+  ul {
+    margin-bottom: 0;
+  }
 }

 .subnavigation {
@@ -503,8 +512,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] {
@@ -529,7 +546,7 @@ footer {
  p {
    font-size: $small-font-size;

-    .info a {
+    &.info a {
      text-decoration: underline;
    }
  }
@@ -566,6 +583,7 @@ footer {

 .subfooter {
  border-top: 1px solid $text-light;
+  font-size: $small-font-size;
  padding-top: $line-height/2;
 }

@@ -598,7 +616,7 @@ footer {
  }
 }

-h3.sidebar-title {
+h2.sidebar-title {
  border-top: 2px solid $brand;
  display: inline-block;
  font-size: rem-calc(16);
@@ -912,16 +930,12 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
 }

 .author-deleted, .user-deleted {
-  background-color: rgba(255,255,255,.5);
  color: rgba(0,0,0,.4);
-  font-size: rem-calc(40);
-  left: 11px;
-  position: absolute;
-  top: 72px;
-}
-
-.user-deleted {
-  top: -4px;
+  display: inline-block;
+  font-size: rem-calc(32);
+  line-height: rem-calc(32);
+  height: rem-calc(32);
+  vertical-align: top;
 }

 .user-permissions {
@@ -1176,7 +1190,7 @@ table {
    top: 0;
  }

-  &:hover {
+  &:hover, &:focus {
    background: white;
    color: #40A2D1;
  }
@@ -1216,7 +1230,7 @@ table {
    top: 0;
  }

-  &:hover {
+  &:hover, &:focus {
    background: white;
    color: #354F88;
  }
@@ -1256,7 +1270,7 @@ table {
    top: 0;
  }

-  &:hover {
+  &:hover, &:focus {
    background: white;
    color: #CE3E26;
  }
@@ -1276,13 +1290,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;
@@ -1299,13 +1314,14 @@ table {
      top: 0;
    }

-    &:hover {
+    &:hover, &:focus {
+      background: white;
      color: #40A2D1;
    }
  }

  .ssb-facebook {
-    background: none;
+    background: #3B5998;
    color: white;
    height: rem-calc(24);
    position: relative;
@@ -1322,13 +1338,14 @@ table {
      top: 0;
    }

-    &:hover {
+    &:hover, &:focus {
+      background: white;
      color: #354F88;
    }
  }

  .ssb-google_plus {
-    background: none;
+    background: #DE4C34;
    color: white;
    height: rem-calc(24);
    position: relative;
@@ -1345,7 +1362,8 @@ table {
      top: 0;
    }

-    &:hover {
+    &:hover, &:focus {
+      background: white;
      color: #CE3E26;
    }
  }
@@ -1579,7 +1597,7 @@ table {

    .comment-votes {
      color: $text-medium;
-      font-size: rem-calc(14);
+      font-size: $small-font-size;
      line-height: $line-height;

      a {
@@ -1589,17 +1607,29 @@ 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;
      }
    }

    .comment-body {
-      margin-left: rem-calc(42);
+
+      img {
+        margin-right: $line-height/2;
+      }

      .reply {
        background: white;
@@ -1607,20 +1637,28 @@ table {
        border-left: 0;
        border-right: 0;
        font-size: $small-font-size;
-        margin: rem-calc(6) 0;
-        padding: rem-calc(6);
+        margin: $line-height/4 0;
+        padding: $line-height/4;
        position: relative;

+        a.relative, [class^="icon-arrow"] {
+          padding-left: $line-height/2;
+        }
+
        [class^="icon-arrow"] {
-          font-size: rem-calc(18);
+          font-size: $base-font-size;
          left: -20px;
          position: absolute;
-          top: 0;
+          top: -1px;
        }

        .divider {
          color: $text-light;
        }
+
+        form {
+          margin-top: $line-height/2;
+        }
      }

      .comment-user {
@@ -1650,13 +1688,13 @@ table {

    .is-deleted {
      background: #E7E7E7;
-      margin-left: rem-calc(42);
-      padding: $line-height/4 $line-height/2;
+      margin-left: $line-height;
+      padding: $line-height/2;
    }

    .comment-children {
      border-left: 1px dashed $border;
-      margin-left: rem-calc(42);
+      margin-left: $line-height;
      padding-left: $line-height/4;

      @media only screen and (max-width: 40em) {
@@ -1666,9 +1704,9 @@ table {

    .comment-info {
      color: $text-medium;
+      display: inline-block;
      font-size: $small-font-size;
-      margin-top: $line-height/4;
-      vertical-align: middle;
+      line-height: rem-calc(32); // Same as avatar height

      span.user-name {
        color: $text;
@@ -1714,7 +1752,8 @@ table {
 }

 .flag-disable, .flag-active {
-  vertical-align: middle;
+  line-height: 0;
+  vertical-align: sub;
 }

 .flag-disable {
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -13,14 +13,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;
@@ -30,7 +37,6 @@
    position: relative;

    &:hover, &:active {
-      border-color: white;
      color: white;
      cursor: pointer;
      opacity: 1 !important;
@@ -41,6 +47,7 @@

    &:hover, &:active {
      background: $like;
+      border: 2px solid $like;
    }
  }

@@ -48,50 +55,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 {
@@ -100,64 +121,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;
    }
  }

@@ -166,23 +188,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;
  }
 }

@@ -277,7 +293,9 @@
 // 03. Show participation
 // ----------------------

-.debate-show, .proposal-show, .investment-project-show {
+.debate-show,
+.proposal-show,
+.investment-project-show {

  p {
    word-wrap: break-word;
@@ -308,9 +326,13 @@
    clear: both;
    color: $text-medium;
    font-size: $small-font-size;
-    min-height: $line-height*2;
+    margin-bottom: $line-height/2;
    position: relative;

+    span {
+      line-height: rem-calc(32); // Same as avatar height
+    }
+
    a {
      color: $text-medium;
    }
@@ -320,15 +342,6 @@
      line-height: $line-height;
      margin: 0;
    }
-
-    .author-deleted {
-      left: 0;
-      top: 4px;
-    }
-
-    .author.deleted {
-      margin-left: rem-calc(48);
-    }
  }

  .debate-description, .proposal-description {
@@ -343,12 +356,19 @@
      font-size: rem-calc(15);
      margin-bottom: rem-calc(15);
    }
+
+    &.tags, &.geozone {
+
+      li {
+        margin-bottom: 0;
+      }
+    }
  }

  .author-photo {
-    line-height: $line-height*2;
+    line-height: rem-calc(32);
    margin-right: rem-calc(6);
-    vertical-align: middle;
+    vertical-align: top;
    width: 32px;
  }

@@ -366,7 +386,7 @@

  aside {

-    h3 {
+    h2 {
      border-top: 2px solid $brand;
      display: inline-block;
      font-size: rem-calc(16);
@@ -414,47 +434,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 {
@@ -479,6 +460,17 @@
  word-break: break-word;
 }

+.proposal-show, .investment-project-show {
+
+  .supports {
+    padding: $line-height/2 0 0;
+  }
+
+  .share-supported {
+    display: none;
+  }
+}
+
 // 04. List participation
 // ----------------------

@@ -497,8 +489,7 @@
 }

 .debate, .proposal, .investment-project {
-  margin-bottom: 0;
-  margin-top: 0;
+  margin: $line-height/4 0;

  .panel {
    background: white;
@@ -533,7 +524,7 @@
    }

    .label-proposal {
-      color: $proposals;
+      color: $proposals-dark;
    }

    .label-investment-project {
@@ -571,7 +562,7 @@
    }

    .icon-proposals {
-      color: $proposals;
+      color: $proposals-dark;
    }

    .icon-budget {
@@ -652,107 +643,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;
-      }
-    }
  }
 }

@@ -760,20 +674,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;
@@ -803,33 +703,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 {
@@ -904,7 +785,14 @@
    }

    .button-support {
+      background: $text;
+      color: $featured;
      margin-top: 0;
+
+      &:hover {
+        background: white;
+        color: $text;
+      }
    }

    .participation-not-allowed {
@@ -925,6 +813,7 @@

    .supported {
      margin-top: 0;
+      font-size: $small-font-size;
    }

    .share-supported {
@@ -932,7 +821,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);
@@ -946,7 +838,37 @@
 // 06. Proposals successful
 // -------------------------

-.sucessfull-proposals-banner {
+.dark-heading {
+  background: #2D3E50;
+  color: white;
+
+  @include breakpoint(medium) {
+    padding-bottom: $line-height;
+  }
+
+  p {
+
+    &.title {
+      color: #FFD200;
+    }
+
+    &.title-date {
+      font-size: rem-calc(24);
+      font-weight: bold;
+    }
+  }
+
+  .info {
+    background: #314253;
+    padding-top: $line-height;
+
+    @include breakpoint(medium) {
+      border-top: rem-calc(6) solid #FFD200;
+    }
+  }
+}
+
+.featured-proposals-ballot-banner, .sucessfull-proposals-banner {
  background: #2D3E50 image-url("ballot_tiny.gif") no-repeat;
  background-position: 75% 0;
  position: relative;