Improve design of "Related Documents" section (#13705)

* Improve design of "Want to find out more?" section * Added metadata to directory * fix small CSS issues, fix typo * Update decidim-core/app/views/decidim/application/_collection.html.erb Co-authored-by: Alexandru Emil Lupu <contact@alecslupu.ro> * add translation key * Normalize locales * Fix stylelint * Run erblint * Update decidim-core/config/locales/en.yml --------- Co-authored-by: andra-panaite <andra.panaite@tremend.com> Co-authored-by: Alexandru Emil Lupu <contact@alecslupu.ro>
decidim · Dec 11, 2024 · 3dab13c · 3dab13c
1 parent 4b15845
commit 3dab13c
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 18 deletions.
diff --git a/decidim-core/app/packs/stylesheets/decidim/_participatory_spaces.scss b/decidim-core/app/packs/stylesheets/decidim/_participatory_spaces.scss
@@ -19,6 +19,52 @@
     > [id^="html-block"] {
       @apply w-full prose max-w-none [&+*]:border-t-0;
     }
+
+    .content-block {
+      @apply gap-0;
+
+      &__title {
+        @apply pb-8;
+      }
+
+      .documents {
+        &__container > div {
+          @apply border-b border-[#D3D5D9] border-t-0 pb-4 pt-6;
+        }
+
+        &__dropdown-container {
+          @apply border-b border-[#D3D5D9];
+        }
+
+        &__collection-trigger {
+          @apply bg-transparent max-w-full mt-0 pb-4 pt-6 px-0 rounded-none;
+
+          .documents-details {
+            @apply flex flex-col gap-2.5;
+
+            span {
+              @apply flex items-center text-lg leading-6 text-[var(--secondary)] font-semibold gap-1.5;
+            }
+          }
+        }
+
+        &__collection-content {
+          @apply w-auto ml-6 my-4 pl-4 lg:pl-8 border-l border-[#D3D5D9];
+
+          p {
+            @apply pt-4;
+          }
+
+          & > .documents__container {
+            @apply border-t-0 pt-0 mt-0;
+
+            & > :last-child {
+              @apply border-b-0;
+            }
+          }
+        }
+      }
+    }
   }
 
   &__content-block {

diff --git a/decidim-core/app/views/decidim/application/_collection.html.erb b/decidim-core/app/views/decidim/application/_collection.html.erb
@@ -1,25 +1,37 @@
 <% unless attachment_collection.unused? %>
-<button id="dropdown-documents-trigger-<%= attachment_collection.id %>" class="documents__collection-trigger" data-component="dropdown" data-target="dropdown-menu-documents-<%= attachment_collection.id %>" aria-expanded="false">
-  <span>
-    <span class="documents__collection-trigger__icon">
-      <%= icon "folder-line" %>
-      <%= icon "folder-open-line" %>
-    </span>
-    <%= decidim_escape_translated(attachment_collection.name) %>
-  </span>
-  <%= icon "arrow-down-s-fill" %>
-  <%= icon "arrow-up-s-fill" %>
-</button>
+<div class="documents__dropdown-container">
+  <button id="dropdown-documents-trigger-<%= attachment_collection.id %>" class="documents__collection-trigger" data-component="dropdown" data-target="dropdown-menu-documents-<%= attachment_collection.id %>" aria-expanded="false">
+   <div class="documents-details">
+      <span>
+        <span class="documents__collection-trigger__icon">
+          <%= icon "folder-line" %>
+          <%= icon "folder-open-line" %>
+        </span>
+        <%= decidim_escape_translated(attachment_collection.name) %>
+      </span>
 
-<div id="dropdown-menu-documents-<%= attachment_collection.id %>" class="documents__collection-content" aria-hidden="true">
-  <% if (description = attachment_collection.description).present? %>
-    <p><%= decidim_escape_translated(description) %></p>
-  <% end %>
+      <div class="card__list-metadata">
+        <div><%= icon "file-text-line" %><%= t("decidim.documents", count: documents.count) %></div>
+        <% sum = 0
+           documents.each { |document| sum += document.file_size.to_i } %>
+        <div><%= icon "scales-2-line" %><%= number_to_human_size(sum) %></div>
+      </div>
+    </div>
 
-  <div class="documents__container">
-    <% documents.each do |document| %>
-      <%= render partial: "decidim/application/document", formats: [:html], locals: { document: } %>
+    <%= icon "arrow-down-s-fill" %>
+    <%= icon "arrow-up-s-fill" %>
+  </button>
+
+  <div id="dropdown-menu-documents-<%= attachment_collection.id %>" class="documents__collection-content" aria-hidden="true">
+    <% if (description = attachment_collection.description).present? %>
+      <p><%= decidim_escape_translated(description) %></p>
     <% end %>
+
+    <div class="documents__container">
+      <% documents.each do |document| %>
+        <%= render partial: "decidim/application/document", formats: [:html], locals: { document: } %>
+      <% end %>
+    </div>
   </div>
 </div>
 <% end %>
diff --git a/decidim-core/config/locales/en.yml b/decidim-core/config/locales/en.yml
@@ -677,6 +677,9 @@ en:
           show_password: Show password
           shown_password: Your password is shown
         placeholder_email: hi@example.org
+    documents:
+      one: "%{count} document"
+      other: "%{count} documents"
     doorkeeper:
       authorizations:
         new: