Restyle pdf headline cards

5 files changed, 34 insertions, 23 deletions

diff --git a/app/helpers/content_helper.rb b/app/helpers/content_helper.rb
index 7a52d9cd..6bb9c4e0 100644
--- a/app/helpers/content_helper.rb
+++ b/app/helpers/content_helper.rb
@@ -75,6 +75,10 @@ module ContentHelper
     end
   end
 
+  def humanized_asset_name asset
+    asset.name.to_s.tr("_", " ")
+  end
+
   # This method is an output filter for templates. It accepts any kind of text
   # and checks for an [aggregate short code within it. If such a code is found,
   # its # attributes are parsed and converted into parameters for the
diff --git a/app/models/concerns/file_attachment.rb b/app/models/concerns/file_attachment.rb
index 62213123..e577c7fa 100644
--- a/app/models/concerns/file_attachment.rb
+++ b/app/models/concerns/file_attachment.rb
@@ -98,11 +98,11 @@ module FileAttachment
     generate_all_variants(original_path)
   end
 
-  def generate_variants(original_path)
+  def generate_variants(original_path, extra_args = [])
     STYLES.each do |style, options|
       dest_path = file_path(style)
       FileUtils.mkdir_p(File.dirname(dest_path))
-      system("magick", original_path, *options[:args], dest_path)
+      system("magick", original_path, *extra_args, *options[:args], dest_path)
     end
   end
 
@@ -120,7 +120,8 @@ module FileAttachment
     elsif VECTOR_CONTENT_TYPES.include?(upload_content_type)
       generate_svg_variants(original_path)
     elsif RASTERIZED_CONTENT_TYPES.include?(upload_content_type)
-      generate_variants("#{original_path}[0]")
+     generate_variants("#{original_path}[0]",
+                        ["-background", "white", "-alpha", "remove", "-alpha", "off"])
     end
   end
 
diff --git a/app/views/content/_headline_image.html.erb b/app/views/content/_headline_image.html.erb
index 4a3dfdc0..c05b17ef 100644
--- a/app/views/content/_headline_image.html.erb
+++ b/app/views/content/_headline_image.html.erb
@@ -6,8 +6,11 @@
   <%= link_to @headline_asset.upload.url, :class => "headline_document_card", :target => "_blank", :rel => "noopener" do %>
     <%= image_tag @headline_asset.upload.url(:medium), :alt => "", :class => "headline_document_card_thumb" %>
     <div class="headline_document_card_info">
-      <%= icon("file-text", library: "tabler", "aria-hidden": true) %>
-      <span class="headline_document_card_title"><%= @headline_asset.name %></span>
+      <div class="headline_document_card_titlerow">
+        <%= icon("file-text", library: "tabler", "aria-hidden": true) %>
+        <span class="headline_document_card_title"><%= humanized_asset_name(@headline_asset) %></span>
+      </div>
+      <span class="headline_document_card_meta">PDF · <%= number_to_human_size(@headline_asset.upload.size) %></span>
     </div>
   <% end %>
 <% end %>
@@ -50,7 +53,7 @@
         <li>
           <%= link_to pdf.upload.url, :class => "related_document_link", :target => "_blank", :rel => "noopener" do %>
             <%= icon("file-text", library: "tabler", "aria-hidden": true) %>
-            <span><%= pdf.name %></span>
+            <span><%= humanized_asset_name(pdf) %></span>
           <% end %>
         </li>
       <% end %>
diff --git a/public/javascripts/admin_interface.js b/public/javascripts/admin_interface.js
index 284d2b72..7ff10ade 100644
--- a/public/javascripts/admin_interface.js
+++ b/public/javascripts/admin_interface.js
@@ -117,7 +117,7 @@ $(document).ready(function () {
     input.addEventListener('change', function() {
       var name_field = document.getElementById('asset_name');
       if (input.files.length && name_field && name_field.value === '') {
-        name_field.value = input.files[0].name.replace(/\.[^.]+$/, '');
+        name_field.value = input.files[0].name.replace(/\.[^.]+$/, '').replace(/[_-]+/g, ' ');
       }
     });
   }
diff --git a/public/stylesheets/ccc.css b/public/stylesheets/ccc.css
index 91f7a06a..5046baac 100644
--- a/public/stylesheets/ccc.css
+++ b/public/stylesheets/ccc.css
@@ -778,36 +778,39 @@ div.teaser_ruler {
 
 .headline_document_card {
   display: flex;
-  gap: 1rem;
   align-items: flex-start;
-  border: 1px solid color-mix(in srgb, CanvasText, #808080 25%);
-  border-radius: 6px;
-  padding: 1rem;
+  gap: 1.5em;
+  margin: 1.5em 0;
   text-decoration: none;
-  color: inherit;
-}
-
-.headline_document_card:hover {
-  border-color: CanvasText;
 }
 
 .headline_document_card_thumb {
-  max-width: 120px;
-  max-height: 160px;
-  border: 1px solid color-mix(in srgb, CanvasText, #808080 25%);
-  flex-shrink: 0;
+  border: 1px solid rgba(128, 128, 128, 0.4);
+  box-shadow: 2px 3px 8px rgba(0, 0, 0, 0.25);
+  max-width: 180px;
+  height: auto;
 }
 
 .headline_document_card_info {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
+  flex-direction: column;
+  gap: 0.3em;
+  padding-top: 0.5em;
 }
 
-.headline_document_card_title {
+.headline_document_card_titlerow {
+  display: flex;
+  align-items: center;
+  gap: 0.4em;
   font-weight: bold;
 }
 
+.headline_document_card_meta {
+  font-size: 0.85em;
+  font-weight: normal;
+  color: rgba(128, 128, 128, 0.95);
+}
+
 .related_documents {
   margin-top: 1rem;
 }