Merge pull request #501 from AyuntamientoMadrid/improve_design

Improve design

app/assets/fonts/icons.svg

@@ -38,4 +38,6 @@
 <glyph unicode="&#67;" d="M256 475c40 0 77-9 110-29 34-20 60-46 80-80 20-33 29-70 29-110 0-40-9-77-29-110-20-34-46-60-80-80-33-20-70-29-110-29-40 0-77 9-110 29-34 20-60 46-80 80-20 33-29 70-29 110 0 40 9 77 29 110 20 34 46 60 80 80 33 20 70 29 110 29z m78-148c0-1-1-2-2-3-2-2-3-3-4-3 0 0 1 1 1 2 0 1 1 2 1 3 1 1 1 2 1 2 2 1 4 2 7 4 2 1 7 2 15 3 6 2 11 1 14-3 0 1 1 2 3 4 2 2 3 3 4 3 1 1 2 1 4 2 3 0 4 1 5 2l0 6c-2 0-4 1-5 2-1 2-2 4-2 6 0 0 0-1-1-2 0 1-1 2-2 2-1 0-2 0-3 0-1-1-2-1-3 0-1 0-3 1-4 2-1 1-2 2-2 4-1 3-1 4-1 5-1 1-2 2-3 3-1 1-2 2-3 3 0 0 0 1 0 1-1 1-1 2-1 2-1 1-1 1-1 2-1 0-1 0-2 0-1 0-1 0-2-1-1-1-1-2-2-3-1-1-1-1-1-1-1 0-2 0-2 0-1 0-1 0-1 0-1 0-1-1-2-1 0 0-1-1-1-1-1 0-2-1-3-1-1 0-1 0-2 0 3 1 3 2 0 3-2 0-4 1-5 1 2 0 3 1 2 3 0 2-1 3-2 4l1 0c0 1-1 2-2 2-2 1-3 2-5 3-2 1-3 1-4 2-1 1-5 1-10 2-5 1-8 1-9 0-1-1-1-2-1-3 0 0 0-2 1-4 1-1 1-3 1-3 0-1 0-3-2-4-1-1-2-2-2-3 0-2 2-3 4-5 3-1 4-3 3-6 0-1-2-3-4-4-3-2-4-3-5-4-1-1-1-3 0-5 0-2 1-4 3-5 0 0 0-1 0-1 0 0 0-1-1-1 0-1-1-1-1-1-1-1-2-1-2-1l-1-1c-2-1-4 0-6 2-2 2-3 4-4 7-1 5-3 8-4 9-5 1-8 1-9-1-1 3-5 5-11 8-5 2-11 2-17 1 1 0 1 2 0 4-1 3-3 4-5 4 0 1 1 3 1 5 0 2 0 3 0 4 1 2 2 4 3 6 1 0 1 1 2 3 2 1 2 2 3 3 1 2 1 2 0 2 7-1 12 0 15 3 1 1 2 3 3 5 1 2 2 4 3 5 2 1 3 2 4 2 1-1 2-1 4-2 2-1 3-1 4-1 3-1 4 0 5 3 0 2-1 4-3 5 3 0 3 2 1 5-1 2-1 2-2 3-2 1-5 0-8-2-1 0-1-1 1-2 0 0-1-1-3-3-1-2-3-4-5-5-1-1-3-1-4 2 0 0-1 1-2 3-1 3-1 4-2 4-2 0-3-1-5-4 1 2 0 3-3 4-3 2-5 2-7 3 4 2 3 4-2 7-2 1-4 2-6 2-3 0-5 0-6-1-1-2-1-3-1-4 0-1 0-1 1-2 1-1 2-1 3-2 1 0 2 0 3-1 2 0 2 0 3-1 3-1 3-3 2-4 0 0-1 0-2-1-2 0-3 0-4-1-1 0-1-1-1-1-1-1-1-2 0-4 0-2 0-3-1-4-1 1-2 3-2 5-1 2-2 4-2 5 1-2-1-3-8-2l-2 0c-1 0-3 0-5 0-2-1-4-1-6-1-1 1-3 1-4 3 0 1 0 3 0 5 0 1 1 1 1 1 0 1-1 1-3 3-1 1-2 2-3 2-8-3-17-7-26-12 1 0 2 0 3 1 1 0 2 1 4 2 1 0 2 1 3 1 6 3 10 3 12 2l1 2c3-3 5-6 6-8-2 1-4 1-9 1-4-1-6-3-6-4 1-2 2-4 1-5 0 1-2 2-3 3-1 1-3 2-4 3-1 1-3 1-4 2-3 0-6-1-7-1-28-15-50-36-67-63 1-1 3-2 4-2 0-1 1-1 1-3 0-2 0-3 1-3 0-1 1 0 3 1 2-2 2-4 1-6 0 0 4-2 12-7 4-4 6-6 6-6 1-3 0-4-2-6-1 1-1 2-3 3-2 1-2 2-3 1 0-1 0-3 1-5 0-3 1-4 3-4-2 0-3-1-3-4-1-3-1-7-1-10 0-4 0-6 0-7l0 0c0-3 0-6 2-10 2-5 4-6 6-6-2 0 0-5 6-12 1-2 2-3 2-3 1 0 2-1 4-2 1-1 3-2 4-3 1-1 2-2 3-3 0-1 1-3 3-6 1-3 2-6 4-7-1-1 0-3 2-6 2-2 3-4 3-6 0 0 0 0 0 0-1-1-1-1-1-1 0-1 2-2 4-4 3-1 4-2 5-3 0-1 0-2 0-3 0-2 1-3 1-3 1-1 1-1 2-1 1 4-1 10-6 18-3 4-5 7-5 8-1 1-1 2-2 4 0 2-1 4-1 5 0 0 1-1 2-1 0 0 1 0 2-1 1 0 2-1 2-1 1 0 1-1 1-1-1-1-1-3 0-5 1-2 2-4 4-5 1-2 3-3 5-6 1-2 3-3 3-3 1-1 2-3 4-6 2-2 2-4 0-4 2 0 4-1 6-3 2-1 3-3 5-5 1-2 1-4 2-8 0-3 1-5 1-7 1-1 1-2 3-3 1-2 2-3 3-3l5-2c0 0 1-1 4-2 1-1 2-2 5-3 2-2 4-3 6-4 2 0 3-1 5-1 1 0 2 0 4 1 1 0 3 1 4 1 2 0 5-1 8-4 3-4 5-6 6-6 7-4 12-5 16-4-1 0-1 0 0-2 0-1 1-2 2-4 1-2 2-3 3-4 0-1 1-2 1-3 1-1 3-2 5-4 3-2 4-3 5-4 2 0 2 1 2 2 0-1 1-3 2-5 2-3 4-4 6-3 2 0 4 3 4 9-6-3-11-1-14 5 0 0-1 1-1 2-1 0-1 1-1 2-1 1-1 2-1 2 0 1 0 2 0 3 0 0 1 0 1 0 2 0 3 1 3 1 0 1 0 2 0 4-1 2-1 3-1 4-1 1-2 3-4 5-1 3-3 4-3 5-1-2-2-3-5-3-2 1-3 1-4 3 0 0 0-1-1-2 0 0 0-1 0-1-2 0-4 0-4 0 0 0 0 2 0 5 1 3 1 5 1 6 1 1 1 2 2 4 1 1 2 3 2 4 1 1 1 2 1 3 0 2 0 2-1 3-1 1-3 1-5 1-4 0-6-2-7-6-1 0-1-1-1-3-1-1-1-2-2-3 0-1-1-2-2-2-2-1-4-1-7-1-3 0-6 1-7 2-2 1-5 4-6 8-2 4-3 8-3 11 0 1 0 4 1 7 0 3 0 6 0 7 1 2 0 4-1 7 0 1 1 2 2 3 2 1 3 2 3 3 1 0 1 0 2 0 0 1 0 1 1 0 0 0 1 0 1 1 0 0 1 1 1 2 0 0-1 0-1 0-1 1-1 1-1 1 1 0 4 0 8 1 4 1 6 0 8-1 2-2 5-2 6 1 0 0 0 1-1 3 0 1 0 2 0 3 1-5 4-6 8-2 1-1 2-1 5-2 2 0 4 0 5-1 0 0 1-1 2-2 0 0 1-1 1-1 1 0 1 0 2 0 0 1 1 1 2 2 2-3 3-5 4-7 2-7 3-12 5-12 1-1 2-1 3-1 1 0 1 1 1 3 1 1 1 3 0 4 0 1 0 2 0 3l0 3 0 5-1 2c-2 1-4 2-5 4-1 1 0 3 1 5 1 2 2 3 4 5 0 0 1 1 2 1 1 1 3 1 5 2 1 1 2 2 3 2 4 4 6 7 4 10 2 0 3 1 4 3-1 0-1 0-2 1-1 0-1 1-2 1-1 1-1 1-1 1 1 1 2 2 0 4 1 1 2 2 2 3 1 2 2 3 3 3 1-2 3-2 6 0 1 1 1 3 0 4 1 2 3 3 6 3 3 1 4 2 5 3 1 0 2 0 2 1 0 0 1 1 1 3 0 2 0 3 0 3 1 1 3 2 5 3 2 1 3 1 3 1l5 4c1 0 1 1 0 1 4-1 7 0 9 3 2 2 1 4-2 6 1 1 1 2 0 2-2 1-3 1-5 2 1 0 2 0 4 0 1 0 2 0 3 0 2 2 2 4-2 5-4 1-8 0-13-3z m-46-251c39 7 72 25 100 54-1 1-2 1-4 1-1 1-3 1-3 1-4 2-6 2-7 3 0 1 0 2-1 3 0 1-1 2-2 3-1 0-2 1-4 2-1 1-2 2-3 2 0 1-1 1-2 2-1 1-1 1-2 1 0 1-1 1-2 2-1 0-2 0-2 0-1 0-2 0-3 0l-1 0c-1 0-1-1-2-1 0 0-1-1-1-1-1 0-1 0-1-1 0 0 0 0 0 0-4 3-8 5-11 6-1 0-2 1-3 1-1 1-2 2-3 2-1 1-2 1-3 1-1 0-2-1-3-2-1-1-1-3-2-4 0-2 0-4 0-4-1 1-1 2 0 5 1 2 1 4 0 5 0 1-1 2-3 1-1 0-2 0-3-1-1 0-2-1-3-2-2-1-2-2-3-2 0 0-1-1-2-2-2-1-2-1-3-2 0-1-1-2-1-3-1-2-1-3-2-3 0 0-1 1-3 1-2 1-3 1-3 2 1-2 1-5 1-10 1-5 1-8 2-11 1-6 0-10-4-14-5-4-8-8-8-11-1-4 0-7 3-7 0-2 0-4-2-6-1-3-2-5-2-6 0-2 0-3 1-5z"/>
 <glyph unicode="&#69;" d="M347 274c0 36-12 66-37 91-25 25-55 37-91 37-35 0-65-12-90-37-25-25-38-55-38-91 0-35 13-65 38-90 25-25 55-38 90-38 36 0 66 13 91 38 25 25 37 55 37 90z m147-237c0-10-4-19-11-26-7-7-16-11-26-11-10 0-19 4-26 11l-98 98c-34-24-72-36-114-36-27 0-53 5-78 16-25 11-46 25-64 43-18 18-32 39-43 64-10 25-16 51-16 78 0 28 6 54 16 78 11 25 25 47 43 65 18 18 39 32 64 43 25 10 51 15 78 15 28 0 54-5 79-15 24-11 46-25 64-43 18-18 32-40 43-65 10-24 16-50 16-78 0-42-12-80-36-114l98-98c7-7 11-15 11-25z"/>
 <glyph unicode="&#70;" d="M402 247l0-92c0-22-8-42-24-58-16-16-35-24-58-24l-238 0c-22 0-42 8-58 24-16 16-24 36-24 58l0 238c0 23 8 42 24 58 16 16 36 24 58 24l201 0c3 0 5 0 7-2 2-2 3-4 3-7l0-18c0-3-1-5-3-7-2-1-4-2-7-2l-201 0c-12 0-23-5-32-14-9-9-13-19-13-32l0-238c0-12 4-23 13-32 9-9 20-13 32-13l238 0c13 0 23 4 32 13 9 9 14 20 14 32l0 92c0 3 1 5 2 6 2 2 4 3 7 3l18 0c3 0 5-1 7-3 1-1 2-3 2-6z m110 247l0-147c0-5-2-9-5-12-4-4-8-6-13-6-5 0-10 2-13 6l-50 50-187-186c-2-2-4-3-6-3-3 0-5 1-7 3l-32 32c-2 2-3 4-3 7 0 2 1 4 3 6l186 187-50 50c-4 3-6 8-6 13 0 5 2 9 6 13 3 3 7 5 12 5l147 0c5 0 9-2 13-5 3-4 5-8 5-13z"/>
+<glyph unicode="&#68;" d="M438 99c14 0 25 11 25 26l0 262c0 15-11 26-25 26l-364 0c-14 0-25-11-25-26l0-262c0-15 11-26 25-26z m-26 51l-312 0 0 212 312 0z m-80 105l-61-36-62-35 0 141 62-35z"/>
+<glyph unicode="&#71;" d="M411 448l0 0 0 21c0 4-4 8-9 8l-168 0-133-132 0-302c0-4 4-8 9-8l292 0c5 0 9 4 9 8l0 13 0 0z m-259-362l0 241 91 0c5 0 9 4 9 9l0 90 108 0 0-340z"/>
 </font></defs></svg>

app/assets/stylesheets/admin.scss

@@ -203,6 +203,12 @@ body.admin {
   margin-left: rem-calc(12);
 }
 
+.proposal-description {
+  height: rem-calc(60);
+  overflow: hidden;
+  max-width: rem-calc(750);
+}
+
 // 04. Stats
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 

app/assets/stylesheets/debates.scss

@@ -467,11 +467,17 @@
     }
   }
 
+  .debate-description {
+    font-size: rem-calc(15);
+    line-height: rem-calc(30);
+  }
+
   ul, ol {
+    margin: rem-calc(12) 0;
 
     li {
-      font-size: rem-calc(13);
+      font-size: rem-calc(15);
-      margin-bottom: rem-calc(12);
+      margin-bottom: rem-calc(15);
     }
   }
 

app/assets/stylesheets/icons.scss

@@ -130,3 +130,9 @@
 .icon-external:before {
   content: "F";
 }
+.icon-video:before {
+  content: "D";
+}
+.icon-document:before {
+  content: "G";
+}

app/assets/stylesheets/proposals.scss

@@ -39,6 +39,15 @@
     }
   }
 
+  .percentage {
+    font-size: rem-calc(10);
+    color: $brand;
+    vertical-align: top;
+    position: absolute;
+    top: 17px;
+    right: 18px;
+  }
+
   abbr {
     color: white;
 
@@ -400,6 +409,10 @@
     }
   }
 
+  h4 {
+    margin: rem-calc(12) 0;
+  }
+
   .edit-proposal {
     margin-bottom: 0;
   }
@@ -422,11 +435,17 @@
     }
   }
 
+  .proposal-description {
+    font-size: rem-calc(15);
+    line-height: rem-calc(30);
+  }
+
   ul, ol {
+    margin: rem-calc(12) 0;
 
     li {
-      font-size: rem-calc(13);
+      font-size: rem-calc(15);
-      margin-bottom: rem-calc(12);
+      margin-bottom: rem-calc(15);
     }
   }
 
@@ -454,6 +473,45 @@
     }
   }
 
+  blockquote {
+    margin-top: rem-calc(12);
+    padding-top: 0;
+    font-size: rem-calc(15);
+    line-height: rem-calc(30);
+  }
+
+  .document-link {
+    border: 1px solid $border;
+    display: block;
+    margin-top: rem-calc(12);
+    padding: rem-calc(12);
+    position: relative;
+
+    a {
+      padding-left: rem-calc(24);
+    }
+
+    :before {
+      color: #007BB7;
+      content: "G";
+      font-family: "icons" !important;
+      font-size: rem-calc(24);
+      left: rem-calc(6);
+      padding-top: rem-calc(3);
+      position: absolute;
+      top: 0;
+    }
+  }
+
+  .video-link {
+    @extend .document-link;
+
+    :before {
+      color: #CC181E;
+      content: "D";
+    }
+  }
+
   .supports {
     @include supports;
     border: 0;
@@ -470,23 +528,6 @@
       line-height: $line-height;
       padding: rem-calc(24);
     }
-
-    @media (min-width: $small-breakpoint  + em-calc(1)) and (max-width:$medium-breakpoint) {
-      .in-favor, .against {
-        text-align: left;
-        width: rem-calc(100);
-      }
-    }
-
-    .divider {
-      display: none;
-    }
-
-    @media (min-width: $medium-breakpoint) {
-      .divider {
-        display: inline-block;
-      }
-    }
   }
 
   .leave-comment {

app/views/moderation/proposals/index.html.erb

@@ -40,7 +40,7 @@
           <span class="bullet">&nbsp;&bull;&nbsp;</span>
           <%= proposal.author.username %>
           <br>
-          <div style="height: 4rem; overflow: hidden;">
+          <div style="proposal-description">
             <%= proposal.description %>
           </div>
         </td>
@@ -51,7 +51,6 @@
     <% end %>
   </table>
 
-
   <%= submit_tag t('moderation.proposals.index.block_authors'),
     name: "block_authors",
     class: "button radius alert",

app/views/proposals/_votes.html.erb

@@ -2,11 +2,13 @@
 
   <div class="progress small-12 round">
     <span class="meter" style="width: <%= progress_bar_percentage(proposal) %>%;"></span>
+    <span class="percentage">
+      <%= supports_percentage(proposal) %>&nbsp;/&nbsp;<%= t("proposals.proposal.total_percent") %>
+    </span>
   </div>
 
   <span class="total-supports">
     <%= t("proposals.proposal.supports", count: proposal.total_votes) %>&nbsp;
-      (<%= supports_percentage(proposal) %>)
     <span>
       <abbr title="<%= t("proposals.proposal.census_percent") %>">
         <%= t("proposals.proposal.supports_necessary") %>

app/views/proposals/show.html.erb

@@ -19,7 +19,6 @@
           </div>
         <% end %>
 
-
         <div class="proposal-info">
           <%= avatar_image(@proposal.author, seed: @proposal.author_id, size: 32, class: 'author-photo') %>
 
@@ -53,6 +52,7 @@
           <i class="icon-comments"></i>&nbsp;
           <%= link_to t("proposals.show.comments", count: @proposal.comments_count), "#comments" %>
           <span class="bullet">&nbsp;&bull;&nbsp;</span>
+          <%= link_to t("proposals.show.code") %>
           <%= @proposal.code %>
           <span class="bullet">&nbsp;&bull;&nbsp;</span>
           <span class="js-flag-actions">
@@ -60,16 +60,20 @@
           </span>
         </div>
 
-        <div><%= @proposal.summary %></div>
+        <blockquote><%= @proposal.summary %></blockquote>
 
         <%= safe_html_with_links @proposal.description %>
 
         <% if @proposal.external_url.present? %>
-          <div><%= text_with_links @proposal.external_url %></div>
+          <div class="document-link">
+            <%= text_with_links @proposal.external_url %>
+          </div>
         <% end %>
 
         <% if @proposal.video_url.present? %>
-          <div><%= text_with_links @proposal.video_url %></div>
+          <div class="video-link">
+            <%= text_with_links @proposal.video_url %>
+          </div>
         <% end %>
 
         <h4><%= @proposal.question %></h4>

config/locales/en.yml

@@ -171,6 +171,7 @@ en:
         other: "%{count} supports"
       supports_necessary: "53.726 necessary supports"
       census_percent: "2% of census"
+      total_percent: "100%"
       already_supported: "You already supported this proposal!"
     form:
       proposal_title: Proposal title
@@ -191,6 +192,7 @@ en:
     show:
       back_link: Back
       author_deleted: Deleted user
+      code: "Proposal code:"
       comments_title: Comments
       comments:
         zero: No comments

config/locales/es.yml

@@ -171,6 +171,7 @@ es:
         other: "%{count} apoyos"
       supports_necessary: "53.726 apoyos necesarios"
       census_percent: "2% del Censo"
+      total_percent: "100%"
       already_supported: "¡Ya has apoyado esta propuesta!"
     form:
       proposal_title: Título de la propuesta
@@ -191,6 +192,7 @@ es:
     show:
       back_link: Volver
       author_deleted: Usuario eliminado
+      code: "Código de la propuesta:"
       comments_title: Comentarios
       comments:
         zero: Sin comentarios