Merge pull request #1080 from consul/collapse-comments

Collapse comments

app/assets/fonts/icons.svg

@@ -49,4 +49,9 @@
 <glyph glyph-name="notification" unicode="&#110;" d="M256 48c23 0 41 19 41 42l-82 0c0-23 18-42 41-42z m135 125l0 114c0 64-45 118-104 131l0 15c0 17-13 31-31 31-18 0-31-14-31-31l0-15c-59-13-104-67-104-131l0-114-41-42 0-21 352 0 0 21z"/>
 <glyph glyph-name="no-notification" unicode="&#120;" d="M257 392c7 0 24-5 24-5 46-10 78-52 78-100l0-127 9-10 8-8-240 0 8 8 9 10 0 127c0 48 33 90 78 100 0 0 18 5 24 5m1 72c-18 0-31-14-31-31l0-15c-59-13-104-67-104-131l0-114-41-42 0-21 352 0 0 21-41 42 0 114c0 64-45 118-104 131l0 15c0 17-13 31-31 31z m41-374l-82 0c0-23 18-42 41-42 23 0 41 19 41 42z"/>
 <glyph glyph-name="whatsapp" unicode="&#80;" d="M318 234c2 0 12-4 28-13 16-8 24-13 25-15 1-1 1-2 1-4 0-7-2-14-5-22-3-7-10-14-20-19-11-5-20-7-29-7-11 0-29 6-55 17-18 9-34 20-48 34-14 14-28 32-42 53-14 20-21 39-21 55l0 3c1 17 8 32 21 45 5 4 10 6 15 6 1 0 3 0 5 0 3-1 5-1 6-1 3 0 6 0 7-2 2-1 3-3 5-7 1-4 5-13 9-26 5-13 7-20 7-21 0-4-3-9-9-16-7-7-10-12-10-14 0-1 0-2 1-4 7-14 16-27 29-39 11-10 25-20 43-29 3-1 5-2 7-2 3 0 8 5 15 14 8 9 13 14 15 14z m-58-152c24 0 47 5 70 15 22 9 41 22 57 38 16 16 29 35 38 57 10 22 14 46 14 70 0 24-4 47-14 69-9 22-22 42-38 58-16 16-35 28-57 38-23 9-46 14-70 14-24 0-47-5-70-14-22-10-41-22-57-38-16-16-29-36-38-58-10-22-14-45-14-69 0-39 11-74 34-105l-23-67 69 22c31-20 63-30 99-30z m0 395c29 0 57-6 84-17 26-11 49-27 68-46 20-19 35-42 46-69 12-26 17-54 17-83 0-29-5-57-17-84-11-26-26-49-46-69-19-19-42-34-68-46-27-11-55-17-84-17-37 0-72 9-104 27l-119-38 38 116c-20 33-30 71-30 111 0 29 5 57 17 83 11 27 26 50 46 69 19 19 42 35 68 46 27 11 55 17 84 17z"/>
+<glyph glyph-name="zip" unicode="&#79;" d="M192 160l128 0 0-128-128 0z m96 32l-32 0 0 32 32 0z m0 96l0-32-32 0 0-32-32 0 0 32 32 0 0 32z m32 147l96-96 0-275-64 0 0 128-32 0z m-224 13l96 0 0-256-32 0 0-128-64 0z m128 0l32 0 0-32 32 0 0-32-32 0 0-32 32 0 0-32-32 0 0-32-32 0 0 32 32 0 0 32-32 0 0 32 32 0 0 32-32 0z m-192 64l0-512 448 0 0 365-147 147z m192-384l64 0 0-32-64 0z"/>
+<glyph glyph-name="banner" unicode="&#81;" d="M146 155l0-54c0-8-2-15-8-20-5-5-12-8-19-8l-92 0c-7 0-14 3-19 8-5 5-8 12-8 20l0 54c0 8 3 15 8 20 5 5 12 8 19 8l92 0c7 0 14-3 19-8 6-5 8-12 8-20z m0 147l0-55c0-8-2-14-8-20-5-5-12-8-19-8l-92 0c-7 0-14 3-19 8-5 6-8 12-8 20l0 55c0 7 3 14 8 19 5 5 12 8 19 8l92 0c7 0 14-3 19-8 6-5 8-12 8-19z m366-147l0-54c0-8-3-15-8-20-5-5-12-8-19-8l-275 0c-7 0-14 3-19 8-5 5-8 12-8 20l0 54c0 8 3 15 8 20 5 5 12 8 19 8l275 0c7 0 14-3 19-8 5-5 8-12 8-20z m-366 293l0-55c0-7-2-14-8-19-5-6-12-8-19-8l-92 0c-7 0-14 2-19 8-5 5-8 12-8 19l0 55c0 8 3 14 8 19 5 6 12 8 19 8l92 0c7 0 14-2 19-8 6-5 8-11 8-19z m366-146l0-55c0-8-3-14-8-20-5-5-12-8-19-8l-275 0c-7 0-14 3-19 8-5 6-8 12-8 20l0 55c0 7 3 14 8 19 5 5 12 8 19 8l275 0c7 0 14-3 19-8 5-5 8-12 8-19z m0 146l0-55c0-7-3-14-8-19-5-6-12-8-19-8l-275 0c-7 0-14 2-19 8-5 5-8 12-8 19l0 55c0 8 3 14 8 19 5 6 12 8 19 8l275 0c7 0 14-2 19-8 5-5 8-11 8-19z"/>
+<glyph glyph-name="arrow-down" unicode="&#82;" d="M402 311c0-5-2-9-5-13l-128-128c-4-4-8-5-13-5-5 0-9 1-13 5l-128 128c-3 4-5 8-5 13 0 5 2 9 5 13 4 3 8 5 13 5l256 0c5 0 9-2 13-5 3-4 5-8 5-13z"/>
+<glyph glyph-name="arrow-left" unicode="&#84;" d="M347 384l0-256c0-5-1-9-5-13-4-3-8-5-13-5-5 0-9 2-13 5l-128 128c-3 4-5 8-5 13 0 5 2 9 5 13l128 128c4 3 8 5 13 5 5 0 9-2 13-5 4-4 5-8 5-13z"/>
+<glyph glyph-name="arrow-right" unicode="&#85;" d="M329 256c0-5-2-9-5-13l-128-128c-4-3-8-5-13-5-5 0-9 2-13 5-4 4-5 8-5 13l0 256c0 5 1 9 5 13 4 3 8 5 13 5 5 0 9-2 13-5l128-128c3-4 5-8 5-13z"/>
 </font></defs></svg>

app/assets/javascripts/comments.js.coffee

@@ -30,11 +30,11 @@ App.Comments =
     $("#js-comment-form-#{id}").toggle()
 
   toggle_arrow: (id) ->
-    arrow = "i##{id}_arrow"
-    if $(arrow).hasClass("icon-angle-right")
-      $(arrow).removeClass("icon-angle-right").addClass("icon-angle-down")
+    arrow = "span##{id}_arrow"
+    if $(arrow).hasClass("icon-arrow-right")
+      $(arrow).removeClass("icon-arrow-right").addClass("icon-arrow-down")
     else
-      $(arrow).removeClass("icon-angle-down").addClass("icon-angle-right")
+      $(arrow).removeClass("icon-arrow-down").addClass("icon-arrow-right")
 
   initialize: ->
     $('body .js-add-comment-link').each ->

app/assets/stylesheets/icons.scss

@@ -163,3 +163,12 @@
 .icon-whatsapp:before {
   content: "\50";
 }
+.icon-arrow-down:before {
+  content: "\52";
+}
+.icon-arrow-left:before {
+  content: "\54";
+}
+.icon-arrow-right:before {
+  content: "\55";
+}

app/assets/stylesheets/layout.scss

@@ -161,7 +161,7 @@ a {
   margin-top: rem-calc(-24);
 }
 
-.padding  {
+.padding {
   padding-bottom: $line-height;
   padding-top: $line-height;
 }
@@ -533,6 +533,7 @@ footer {
 .footer {
   background: $footer-bg;
   border-top: 6px solid $brand;
+  margin-top: $line-height*2;
   padding-top: $line-height;
 }
 
@@ -1586,6 +1587,13 @@ table {
         margin: rem-calc(6) 0;
         padding: rem-calc(6);
 
+        [class^="icon-arrow"] {
+          font-size: rem-calc(18);
+          left: -20px;
+          position: absolute;
+          top: 0;
+        }
+
         .divider {
           color: $text-light;
         }

app/assets/stylesheets/participation.scss

@@ -541,16 +541,27 @@
   color: $border;
 }
 
+.investment-project-show p {
+  word-break: break-word;
+}
+
 // 04. List participation
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-.debates-list, .proposals-list {
+.debates-list, .proposals-list, .investment-projects-list {
 
   @media (min-width: $small-breakpoint) {
     margin-bottom: rem-calc(48);
   }
 }
 
+.investment-projects-list {
+
+  @media (min-width: $small-breakpoint) {
+    min-height: $line-height*15;
+  }
+}
+
 .debate, .proposal, .investment-project {
   margin-bottom: 0;
   margin-top: 0;
@@ -820,7 +831,7 @@
     border-left: 1px solid $border;
     margin: 0 rem-calc(-12);
     min-height: rem-calc(180);
-    padding-top: $line-height*2;
+    padding-top: $line-height*1.5;
 
     &:after {
       content: none;
@@ -860,6 +871,15 @@
     .no-supports-allowed p, .no-supports-allowed a {
       color: white;
     }
+
+    .share-supported {
+
+      .social-share-button-twitter,
+      .social-share-button-facebook,
+      .social-share-button-google_plus {
+        color: $budget;
+      }
+    }
   }
 }
 

app/views/comments/_comment.html.erb

@@ -73,8 +73,8 @@
             </span>
 
             <% if comment.children.size > 0 %>
-              <%= link_to "", class: "js-toggle-children", data:  {'id': "#{dom_id(comment)}"} do %>
-                <span id="<%= dom_id(comment) %>_children_arrow" class="icon-angle-down"></span> <%= t("comments.comment.responses", count: comment.children.size) %>
+              <%= link_to "", class: "js-toggle-children relative", data:  {'id': "#{dom_id(comment)}"} do %>
+                <span id="<%= dom_id(comment) %>_children_arrow" class="icon-arrow-down"></span> <%= t("comments.comment.responses", count: comment.children.size) %>
               <% end %>
             <% else %>
               <%= t("comments.comment.responses", count: 0) %>