Adds styles for proposal percentage and attached

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);
-      margin-bottom: rem-calc(12);
+      font-size: rem-calc(15);
+      margin-bottom: rem-calc(15);
     }
   }
 

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);
-      margin-bottom: rem-calc(12);
+      font-size: rem-calc(15);
+      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/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