Refactors documents partials and reorganices css

app/assets/stylesheets/layout.scss

@@ -89,6 +89,10 @@ a {
   &.warning:hover {
     color: #000;
   }
+
+  &.medium {
+    font-size: $small-font-size;
+  }
 }
 
 .button.hollow {
@@ -2310,61 +2314,48 @@ table {
 // 20. Documents
 // -------------
 
-.documents-list {
+.documents {
 
-  table {
-    border: 0;
+  h2 {
+    font-size: rem-calc(24);
+
+    span {
+      color: #4f4f4f;
+      font-weight: normal;
+    }
   }
 
-  td {
+  ul li {
+    padding-top: $line-height / 2;
+
+    &:not(:first-child) {
+      border-top: 1px solid $highlight;
+    }
+  }
+
+  .document-link {
+    background: $highlight-soft;
+    border: 2px solid $highlight;
+    border-radius: rem-calc(5);
+    display: block;
+    margin: $line-height / 2 0;
+    padding: 0 $line-height / 2;
     position: relative;
 
-    @include breakpoint(small) {
-      float: left;
-      width: 100%;
-    }
-
-    @include breakpoint(medium) {
-      float: none;
-    }
-
     a {
-      width: 100%;
+      word-wrap: break-word;
     }
 
-    &:first-child {
-      padding-left: $line-height * 1.5;
-
-      @include breakpoint(small) {
-        width: 100%;
-      }
-
-      @include breakpoint(medium) {
-        width: 70%;
-      }
-
-      @include breakpoint(large) {
-        width: 80%;
-      }
-    }
-
-    &:first-child::before {
+    .icon-document {
       color: #007bb7;
-      content: 'G';
-      font-family: "icons" !important;
+      display: inline-block;
       font-size: rem-calc(24);
-      left: rem-calc(6);
-      position: absolute;
-      top: 0;
-
-      @include breakpoint(small) {
-        padding-top: rem-calc(12);
-      }
-
-      @include breakpoint(medium) {
-        padding-top: rem-calc(22);
+      line-height: $line-height;
+      vertical-align: middle;
     }
 
+    p {
+      margin-bottom: 0;
     }
   }
 }

app/assets/stylesheets/participation.scss

@@ -457,7 +457,6 @@
     line-height: rem-calc(30);
   }
 
-  .document-link,
   .video-link {
     background: $highlight-soft;
     border: 1px solid $highlight;
@@ -470,21 +469,14 @@
       word-wrap: break-word;
     }
 
-    [class^="icon-"] {
+    .icon-video {
+      color: #cc181e;
       display: inline-block;
       font-size: rem-calc(24);
       line-height: $line-height;
       vertical-align: middle;
     }
 
-    .icon-document {
-      color: #007bb7;
-    }
-
-    .icon-video {
-      color: #cc181e;
-    }
-
     p {
       margin-bottom: 0;
     }

app/views/documents/_document.html.erb

@@ -1,24 +1,20 @@
-<table>
-  <tbody>
-    <tr id="<%= dom_id(document)%>">
-      <td class="document-link">
-        <%= document.title %>
-      </td>
-      <td class="text-center">
-        <%= link_to t('documents.buttons.download_document'),
-                    document.attachment.url,
-                    target: "_blank",
-                    rel: "nofollow",
-                    class: 'button hollow' %>
-      </td>
-      <td class="text-center">
+<li id="<%= dom_id(document)%>">
+  <%= link_to t("documents.buttons.download_document"),
+              document.attachment.url, target: "_blank",
+              rel: "nofollow", class: "button hollow medium float-right" %>
+
+  <strong><%= document.title %></strong>
+  <br>
+  <small>
+    <%= document.humanized_content_type %>&nbsp;|&nbsp;
+    <%= number_to_human_size(document.attachment_file_size, precision: 2) %>
+  </small>
+
   <% if can?(:destroy, document) %>
-          <%= link_to t('documents.buttons.destroy_document'),
+    <br>
+    <%= link_to t("documents.buttons.destroy_document"),
                   document_path(document, from: request.url), method: :delete,
-                        data: { confirm: t('documents.actions.destroy.confirm') },
-                        class: 'button hollow alert' %>
+                  data: { confirm: t("documents.actions.destroy.confirm") },
+                  class: "delete" %>
   <% end %>
-      </td>
-    </tr>
-  </tbody>
-</table>
+</li>

app/views/documents/_documents.html.erb

@@ -1,11 +1,9 @@
-<div class="row <% 'documents-list' if documents.any? %>">
-  <div class="small-12 column">
+<div class="documents">
+  <h2><%= t("documents.title") %>&nbsp;<span>(<%= documents.count %>)</span></h2>
+
   <% if documents.any? %>
+    <ul class="no-bullet document-link">
       <%= render partial: "documents/document", collection: documents %>
-    <% else %>
-      <div class="callout primary text-center">
-        <%= t('documents.no_documents') %>
-      </div>
+    </ul>
   <% end %>
-  </div>
 </div>

config/locales/en/documents.yml

@@ -1,7 +1,6 @@
 en:
   documents:
-    tab: Documents
-    no_documents: Don't have uploaded documents
+    title: Documents
     max_documents_allowed_reached_html: You have reached the maximum number of documents allowed! <strong>You have to delete one before you can upload another.</strong>
     form:
       title: Documents
@@ -17,7 +16,7 @@ en:
         confirm: Are you sure you want to delete the document? This action cannot be undone!
     buttons:
       download_document: Download file
-      destroy_document: Destroy
+      destroy_document: Destroy document
     errors:
       messages:
         in_between: must be in between %{min} and %{max}

config/locales/es/documents.yml

@@ -1,7 +1,6 @@
 es:
   documents:
-    tab: Documentos
-    no_documents: No hay documentos subidos
+    title: Documentos
     max_documents_allowed_reached_html: '¡Has alcanzado el número máximo de documentos permitidos! <strong>Tienes que eliminar uno antes de poder subir otro.</strong>'
     form:
       title: Documentos
@@ -17,7 +16,7 @@ es:
         confirm: '¿Está seguro de que desea eliminar el documento? Esta acción no se puede deshacer!'
     buttons:
       download_document: Descargar archivo
-      destroy_document: Eliminar
+      destroy_document: Eliminar documento
     errors:
       messages:
         in_between: debe estar entre %{min} y %{max}