Merge branch 'sandbox-html' into legislation-module-stable

app/assets/fonts/icons.svg

@@ -56,6 +56,8 @@
 <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"/>
 <glyph glyph-name="check-circle" unicode="&#86;" d="M256 480c-124 0-224-100-224-224 0-124 100-224 224-224 124 0 224 100 224 224 0 124-100 224-224 224z m115-149l-139-179c-1-1-3-3-5-3-3 0-4 1-5 3-2 1-79 76-79 76l-2 1c0 1-1 2-1 3 0 2 1 3 1 4 1 0 1 0 1 1 8 8 24 24 25 25 1 2 2 3 4 3 3 0 5-2 6-3 1-1 45-43 45-43l111 143c1 0 2 1 4 1 1 0 2 0 3-1l31-24c0-1 1-3 1-4 0-1 0-2-1-3z"/>
 <glyph glyph-name="arrow-top" unicode="&#87;" d="M402 165c0-5-2-10-5-13-4-4-8-6-13-6l-256 0c-5 0-9 2-13 6-3 3-5 8-5 13 0 5 2 9 5 12l128 128c4 4 8 6 13 6 5 0 9-2 13-6l128-128c3-3 5-7 5-12z"/>
-<glyph glyph-name="help-1" unicode="&#88;" d="M345 435c-27 21-58 28-98 28-29 0-55-6-75-20-30-20-44-54-44-108l77 0c0 14-2 30 7 43 8 13 20 24 40 24 20 0 31-6 41-18 8-11 11-23 11-36 0-12-5-22-12-32-4-5-9-10-15-15 0 0-42-25-56-48-11-18-15-40-16-66 0-2 0-5 7-5 7 0 56 0 62 0 6 0 7 4 7 6 0 9 2 24 3 29 4 11 10 20 20 28l21 14c18 15 33 26 40 36 11 15 19 34 19 57 0 36-13 64-39 83z m-103-293c-26 1-47-17-48-46-1-28 19-46 45-47 27-1 48 17 49 45 1 28-19 47-46 48z"/>
 <glyph glyph-name="checkmark-circle" unicode="&#89;" d="M171 296l-29-30 93-93 208 208-29 29-179-178z m251-40c0-92-74-166-166-166-92 0-166 74-166 166 0 92 74 166 166 166 16 0 31-2 46-6l32 32c-24 11-50 16-78 16-114 0-208-94-208-208 0-114 94-208 208-208 114 0 208 94 208 208z"/>
+<glyph glyph-name="minus-square" unicode="&#88;" d="M357 402c17 0 32-6 45-18 12-13 19-28 19-46l0-201c0-17-7-32-19-45-13-13-28-19-45-19l-202 0c-17 0-32 6-45 19-12 13-19 28-19 45l0 201c0 18 7 33 19 46 13 12 28 18 45 18z m27-265l0 201c0 8-3 14-8 20-5 5-12 8-19 8l-202 0c-7 0-14-3-19-8-5-6-8-12-8-20l0-201c0-7 3-14 8-19 5-6 12-8 19-8l202 0c7 0 14 2 19 8 5 5 8 12 8 19z m-46 119c3 0 5-1 7-3 2-1 2-3 2-6l0-18c0-3 0-5-2-7-2-2-4-3-7-3l-164 0c-3 0-5 1-7 3-2 2-2 4-2 7l0 18c0 3 0 5 2 6 2 2 4 3 7 3z"/>
+<glyph glyph-name="plus-square" unicode="&#90;" d="M347 247l0-18c0-3 0-5-2-7-2-2-4-3-7-3l-64 0 0-64c0-2-1-4-2-6-2-2-4-3-7-3l-18 0c-3 0-5 1-7 3-1 2-2 4-2 6l0 64-64 0c-3 0-5 1-7 3-2 2-2 4-2 7l0 18c0 3 0 5 2 6 2 2 4 3 7 3l64 0 0 64c0 3 1 5 2 7 2 1 4 2 7 2l18 0c3 0 5-1 7-2 1-2 2-4 2-7l0-64 64 0c3 0 5-1 7-3 2-1 2-3 2-6z m37-110l0 201c0 8-3 14-8 20-5 5-12 8-19 8l-202 0c-7 0-14-3-19-8-5-6-8-12-8-20l0-201c0-7 3-14 8-19 5-6 12-8 19-8l202 0c7 0 14 2 19 8 5 5 8 12 8 19z m37 201l0-201c0-17-7-32-19-45-13-13-28-19-45-19l-202 0c-17 0-32 6-45 19-12 13-19 28-19 45l0 201c0 18 7 33 19 46 13 12 28 18 45 18l202 0c17 0 32-6 45-18 12-13 19-28 19-46z"/>
+<glyph glyph-name="expand" unicode="&#48;" d="M26 168l-26-158c0-2 1-5 3-7 0 0 0 0 0 0 2-2 5-3 7-3l158 27c3 0 6 3 7 6 1 3 0 7-3 9l-30 31 82 82c4 4 4 9 0 13l-57 57c-3 3-9 3-12 0l-83-83-31 31c-2 2-5 3-9 2-3-1-5-4-6-7z m460 176l26 158c0 2-1 5-3 7 0 0 0 0 0 0-2 2-5 3-7 3l-158-27c-3 0-6-3-7-6-1-3 0-7 3-9l30-31-82-82c-4-4-4-9 0-13l57-57c3-3 9-3 12 0l83 83 31-31c2-2 5-3 9-2 3 1 5 4 6 7z"/>
 </font></defs></svg>

app/assets/javascripts/allegations.js.coffee

@@ -0,0 +1,16 @@
+App.Allegations =
+  
+  toggle_comments: ->
+    $('.draft-allegation').toggleClass('comments-on');
+    
+  toggle_index: ->
+    $('.draft-allegation').toggleClass('comments-on');
+      
+  initialize: ->
+    $('#js-toggle-allegation-comments').on
+      click: ->
+        App.Allegations.toggle_comments()
+          
+    $('#js-toggle-allegation-index').on
+      click: ->
+        App.Allegations.toggle_index()

app/assets/javascripts/application.js

@@ -49,6 +49,7 @@
 //= require markdown-it
 //= require markdown_editor
 //= require cocoon
+//= require allegations
 //= require custom
 
 var initialize_modules = function() {
@@ -72,6 +73,7 @@ var initialize_modules = function() {
   App.Banners.initialize();
   App.SocialShare.initialize();
   App.MarkdownEditor.initialize();
+  App.Allegations.initialize();
 };
 
 $(function(){

app/assets/stylesheets/application.scss

@@ -6,6 +6,8 @@
 @import "admin";
 @import "layout";
 @import "participation";
+@import "legislation";
+@import "legislation_process";
 @import "custom";
 @import "c3";
 @import "annotator.min";

app/assets/stylesheets/icons.scss

@@ -1,5 +1,4 @@
 @charset "UTF-8";
-
 @font-face {
   font-family: 'icons';
   src: font-url('icons.eot');
@@ -10,7 +9,6 @@
   font-weight: normal;
   font-style: normal;
 }
-
 [data-icon]:before {
   font-family: "icons" !important;
   content: attr(data-icon);
@@ -23,7 +21,6 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
 [class^="icon-"]:before,
 [class*=" icon-"]:before {
   font-family: "icons" !important;
@@ -36,7 +33,6 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
 .icon-angle-down:before {
   content: "\61";
 }
@@ -163,6 +159,12 @@
 .icon-whatsapp:before {
   content: "\50";
 }
+.icon-zip:before {
+  content: "\4f";
+}
+.icon-banner:before {
+  content: "\51";
+}
 .icon-arrow-down:before {
   content: "\52";
 }
@@ -172,6 +174,21 @@
 .icon-arrow-right:before {
   content: "\55";
 }
+.icon-check-circle:before {
+  content: "\56";
+}
+.icon-arrow-top:before {
+  content: "\57";
+}
 .icon-checkmark-circle:before {
   content: "\59";
 }
+.icon-minus-square:before {
+  content: "\58";
+}
+.icon-plus-square:before {
+  content: "\5a";
+}
+.icon-expand:before {
+  content: "\30";
+}

app/assets/stylesheets/legislation.scss

@@ -0,0 +1,131 @@
+// Table of Contents
+//
+// 01. Hero
+// 02. Sidebar menu
+// 03. Legislation cards
+//
+
+// 01. Hero
+// -----------------
+.legislation-hero {
+    margin-bottom: 4rem;
+}
+
+.brand-heading {
+  background: $brand;
+  
+  .column {
+    padding-top: 10rem;
+    padding-bottom: 10rem;
+    
+    h4 {
+      font-weight: 400;
+      text-align: center;
+      color: white;
+    }
+  }
+}
+
+// 02. Sidebar menu
+// -----------------
+.legislation-categories {
+  ul {
+    list-style: none;
+    padding-left: 0;
+    margin-left: 0;
+    
+    li {
+      cursor: pointer;
+      
+      @include breakpoint(medium) {
+        max-width: 80%;
+      }
+      
+      h4 {
+        font-weight: 400;
+        color: $text-medium;
+        margin-bottom: 3rem;
+        transition: color 0.25s ease-out, color 0.25s ease-out;
+      }
+      
+      &:hover h4, &:active h4 {
+        color: $brand;
+      }
+    }
+
+    .active h4 {
+      font-weight: 700;
+      color: $brand;
+      padding-bottom: 0.5rem;
+      border-bottom: 2px solid $brand;
+    }
+  }
+}
+
+// 03. Legislation cards
+// -----------------
+.legislation {
+  margin: 0 0 4rem 0;
+}
+
+.legislation {
+  background: white;
+  border: 1px solid;
+  border-color: #e5e6e9 #dfe0e4 #d0d1d5;
+  border-radius: 0;
+  box-shadow: 0px 1px 3px 0 #DEE0E3;
+  min-height: 12rem;
+  padding: 2rem 0 0 0;
+}
+
+.button-legislation {
+  background: white;
+  border: 1px solid #2C9BE5;
+  color: #2C9BE5;
+  display: inline-block;
+  font-weight: 700;
+  margin-top: rem-calc(12);
+  
+  .icon-comments {
+    margin-right: 0.5rem;
+    color: $text-medium;
+    transition: color 0.25s ease-out, color 0.25s ease-out;
+  }
+
+  &:hover, &:active {
+    border: 1px solid lighten(#2C9BE5, 25%);
+    cursor: pointer;
+  }
+  
+  &:hover .icon-comments, &:active .icon-comments {
+    color: white;
+  }
+}
+
+.legislation-text {
+  margin-bottom: 1rem;
+  
+  h3 a {
+    color: $black;
+  }
+}
+
+.legislation-calendar-info p {
+  font-size: $small-font-size;
+  color: $text-medium;
+  margin-bottom: 0;
+}
+
+.legislation-calendar {
+  background: #E5ECF2;
+  padding-top: 1rem;
+  
+  h5 {
+    margin-bottom: 0;
+    color: #61686E;
+  }
+  
+  p {
+    font-size: $small-font-size;
+  }
+}

app/assets/stylesheets/participation.scss

@@ -294,7 +294,8 @@
 
 .debate-show,
 .proposal-show,
-.investment-project-show {
+.investment-project-show,
+.debate-quiz {
 
   p {
     word-wrap: break-word;
@@ -492,7 +493,7 @@
   }
 }
 
-.debate, .proposal, .investment-project {
+.debate, .proposal, .investment-project, .legislation {
   margin: $line-height/4 0;
 
   .panel {