Adds view mode i18n, styles and new icon

app/assets/fonts/icons.svg

@@ -70,4 +70,5 @@
 <glyph glyph-name="user-plus" unicode="&#56;" d="M165 256c-31 0-57 11-78 32-21 22-32 47-32 78 0 30 11 56 32 77 21 22 47 32 78 32 30 0 56-10 77-32 22-21 32-47 32-77 0-31-10-56-32-78-21-21-47-32-77-32z m274-37l100 0c3 0 5 0 7-2 2-2 3-4 3-7l0-55c0-2-1-4-3-6-2-2-4-3-7-3l-100 0 0-100c0-3-1-5-3-7-2-2-4-2-6-2l-55 0c-3 0-5 0-7 2-1 2-2 4-2 7l0 100-101 0c-2 0-4 1-6 3-2 2-3 4-3 6l0 55c0 3 1 5 3 7 2 2 4 2 6 2l101 0 0 101c0 2 1 5 2 6 2 2 4 3 7 3l55 0c2 0 4-1 6-3 2-1 3-4 3-6z m-210-64c0-9 3-18 10-25 8-8 16-11 26-11l73 0 0-68c-13-10-29-14-49-14l-249 0c-23 0-42 6-56 19-14 13-21 32-21 55 0 10 1 20 1 29 1 10 2 20 4 31 2 11 5 22 8 31 3 10 7 19 12 28 5 9 11 17 18 23 7 7 15 12 24 16 10 3 21 5 32 5 4 0 8-1 11-5 15-11 30-20 45-26 14-6 30-8 47-8 17 0 32 2 47 8 14 6 29 15 44 26 4 4 7 5 11 5 25 0 46-9 62-27l-64 0c-10 0-18-4-26-11-7-7-10-16-10-26z"/>
 <glyph glyph-name="file-text-o" unicode="&#57;" d="M456 403c5-5 10-12 14-21 4-9 5-18 5-25l0-330c0-7-2-14-8-19-5-5-11-8-19-8l-384 0c-8 0-14 3-19 8-6 5-8 12-8 19l0 458c0 7 2 14 8 19 5 5 11 8 19 8l256 0c8 0 16-2 25-6 9-4 17-8 22-13z m-127 70l0-107 108 0c-2 5-4 9-7 11l-89 90c-2 2-6 4-12 6z m110-436l0 292-119 0c-8 0-14 3-19 8-6 5-8 12-8 20l0 118-220 0 0-438z m-293 246c0 3 1 5 3 7 2 2 4 3 6 3l202 0c2 0 4-1 6-3 2-2 3-4 3-7l0-18c0-3-1-5-3-6-2-2-4-3-6-3l-202 0c-2 0-4 1-6 3-2 1-3 3-3 6z m211-64c2 0 4 0 6-2 2-2 3-4 3-7l0-18c0-3-1-5-3-7-2-1-4-2-6-2l-202 0c-2 0-4 1-6 2-2 2-3 4-3 7l0 18c0 3 1 5 3 7 2 2 4 2 6 2z m0-73c2 0 4-1 6-2 2-2 3-4 3-7l0-18c0-3-1-5-3-7-2-1-4-2-6-2l-202 0c-2 0-4 1-6 2-2 2-3 4-3 7l0 18c0 3 1 5 3 7 2 1 4 2 6 2z"/>
 <glyph glyph-name="file-text" unicode="&#33;" d="M456 376c3-3 5-6 8-10l-135 0 0 135c4-3 8-6 10-8z m-136-47l155 0 0-302c0-7-2-14-8-19-5-5-11-8-19-8l-384 0c-8 0-14 3-19 8-6 5-8 12-8 19l0 458c0 7 2 14 8 19 5 5 11 8 19 8l229 0 0-155c0-8 2-15 8-20 5-5 11-8 19-8z m46-210l0 18c0 3-1 5-3 7-2 1-4 2-6 2l-202 0c-2 0-4-1-6-2-2-2-3-4-3-7l0-18c0-3 1-5 3-7 2-1 4-2 6-2l202 0c2 0 4 1 6 2 2 2 3 4 3 7z m0 73l0 18c0 3-1 5-3 7-2 2-4 2-6 2l-202 0c-2 0-4 0-6-2-2-2-3-4-3-7l0-18c0-3 1-5 3-7 2-1 4-2 6-2l202 0c2 0 4 1 6 2 2 2 3 4 3 7z m0 73l0 18c0 3-1 5-3 7-2 2-4 3-6 3l-202 0c-2 0-4-1-6-3-2-2-3-4-3-7l0-18c0-3 1-5 3-6 2-2 4-3 6-3l202 0c2 0 4 1 6 3 2 1 3 3 3 6z"/>
+<glyph glyph-name="bars" unicode="&#34;" d="M475 128l0-37c0-5-1-9-5-12-4-4-8-6-13-6l-402 0c-5 0-9 2-13 6-4 3-5 7-5 12l0 37c0 5 1 9 5 13 4 3 8 5 13 5l402 0c5 0 9-2 13-5 4-4 5-8 5-13z m0 146l0-36c0-5-1-10-5-13-4-4-8-6-13-6l-402 0c-5 0-9 2-13 6-4 3-5 8-5 13l0 36c0 5 1 10 5 13 4 4 8 6 13 6l402 0c5 0 9-2 13-6 4-3 5-8 5-13z m0 147l0-37c0-5-1-9-5-13-4-3-8-5-13-5l-402 0c-5 0-9 2-13 5-4 4-5 8-5 13l0 37c0 5 1 9 5 12 4 4 8 6 13 6l402 0c5 0 9-2 13-6 4-3 5-7 5-12z"/>
 </font></defs></svg>

app/assets/stylesheets/icons.scss

@@ -288,3 +288,7 @@
 .icon-file-text::before {
   content: '\21';
 }
+
+.icon-bars::before {
+  content: '\22';
+}

app/assets/stylesheets/participation.scss

@@ -634,6 +634,25 @@
   }
 }
 
+.additional-content {
+
+  .tabs {
+    background: none;
+    border: 0;
+    margin-bottom: 0;
+
+    a {
+      background: none;
+    }
+  }
+
+  .filter-subnav {
+    background: $highlight;
+    margin-bottom: $line-height;
+    padding-top: $line-height / 4;
+  }
+}
+
 // 04. List participation
 // ----------------------
 
@@ -986,6 +1005,112 @@
   }
 }
 
+.view-mode {
+
+  ul {
+    margin-bottom: 0;
+
+    li {
+      padding: $line-height / 4 0;
+      padding-left: $line-height;
+    }
+  }
+
+  .dropdown-pane {
+    width: auto;
+  }
+
+  .button {
+    background: #eee;
+    height: rem-calc(36);
+    margin-bottom: 0;
+    padding: $line-height / 4;
+    width: rem-calc(36);
+
+    &::before {
+      color: $text;
+      font-family: 'icons';
+    }
+  }
+
+  &.default {
+
+    .button {
+
+      &::before {
+        content: '\51';
+      }
+    }
+  }
+
+  &.minimal {
+
+    .button {
+
+      &::before {
+        content: '\22';
+      }
+    }
+  }
+
+  .view-list {
+    position: relative;
+
+    &::before {
+      content: '\22';
+      font-family: 'icons';
+      left: 0;
+      position: absolute;
+      top: 6px;
+    }
+  }
+
+  .view-card {
+    position: relative;
+
+    &::before {
+      content: '\51';
+      font-family: 'icons';
+      left: 0;
+      position: absolute;
+      top: 6px;
+    }
+  }
+
+  .active {
+    color: $brand;
+
+    &::after {
+      content: '\6c';
+      font-family: 'icons';
+      font-size: $tiny-font-size;
+    }
+  }
+}
+
+.debate,
+.proposal,
+.budget-investment {
+
+  &.minimal {
+
+    .panel,
+    .debate-content,
+    .proposal-content,
+    .budget-investment-content {
+      min-height: 0;
+    }
+
+    .panel h3 {
+      margin: 0 0 $line-height / 2;
+
+      @include breakpoint(medium) {
+        margin: 0;
+      }
+    }
+  }
+}
+
 // 05. Featured
 // ------------
 
@@ -1122,7 +1247,7 @@
 
     .callout {
 
-      &.primary a {
+      &.primary a {
         color: $link;
       }
     }

config/locales/en/general.yml

@@ -631,6 +631,10 @@ en:
       next_slide: Next Slide
     documentation: Additional documentation
     more_info: More information
+    view_mode:
+      title: View mode
+      cards: Cards
+      list: List
   social:
     blog: "%{org} Blog"
     facebook: "%{org} Facebook"

config/locales/es/general.yml

@@ -630,6 +630,10 @@ es:
       next_slide: Siguiente imagen
     documentation: Documentación adicional
     more_info: Más información
+    view_mode:
+      title: Modo de vista
+      cards: Tarjetas
+      list: Lista
   social:
     blog: "Blog de %{org}"
     facebook: "Facebook de %{org}"