From 4abfc08e5282441bba4eee5ed0ba85cc0fe6f637 Mon Sep 17 00:00:00 2001
From: Splines <dominic-plein@gmx.de>
Date: Mon, 1 Jul 2024 16:48:24 +0200
Subject: [PATCH] Use buttons for media card actions

---
 app/assets/stylesheets/media.scss        | 20 +++++-
 app/views/media/medium/_buttons.html.erb | 91 ++++++++++--------------
 2 files changed, 54 insertions(+), 57 deletions(-)

diff --git a/app/assets/stylesheets/media.scss b/app/assets/stylesheets/media.scss
index df7c527df..106cadb0d 100644
--- a/app/assets/stylesheets/media.scss
+++ b/app/assets/stylesheets/media.scss
@@ -28,7 +28,7 @@
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
-  padding: 0.5rem 1.25rem;
+  padding: 0.5rem var(--bs-card-cap-padding-x);
 }
 
 .media-card-header {
@@ -51,7 +51,23 @@
 }
 
 .card-text-end {
-  padding: 0.5rem 1.25rem;
+  padding: 0.75rem var(--bs-card-cap-padding-x);
+}
+
+.media-download-buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 0.25rem;
+  justify-content: space-around;
+}
+
+.download-button {
+  padding: 0 0.5em;
+  font-size: 0.75em;
+  width: 3.8em;
+  height: 1.4em;
+  border: none;
 }
 
 .mampf-card {
diff --git a/app/views/media/medium/_buttons.html.erb b/app/views/media/medium/_buttons.html.erb
index 3beeef784..032acb55a 100644
--- a/app/views/media/medium/_buttons.html.erb
+++ b/app/views/media/medium/_buttons.html.erb
@@ -1,10 +1,9 @@
 <% if medium.video.present? %>
   <div class="m-1">
     <a href="<%= play_medium_path(medium) %>"
-       class="no-deco"
-       target="_blank">
-      <i class="bi bi-play-fill text-secondary fs-5"
-        title="<%= t('video.play') %>"></i>
+       class="btn btn-secondary" role="button"
+       target="_blank" title="<%= t('video.play') %>">
+      <i class="bi bi-play-fill fs-6"></i>
     </a>
   </div>
 <% end %>
@@ -12,10 +11,9 @@
 <% if medium.manuscript.present? %>
   <div class="m-1">
     <a href="<%= ref_link.blank? ? display_medium_path(medium) : ref_link %>"
-       class="no-deco"
-       target="_blank">
-      <i class="bi bi-file-earmark-text-fill text-secondary fs-5"
-        title="<%= t('manuscript.view') %>"></i>
+       class="btn btn-secondary" role="button"
+       target="_blank" title="<%= t('manuscript.view') %>">
+      <i class="bi bi-file-earmark-text-fill fs-6"></i>
     </a>
   </div>
 <% end %>
@@ -23,10 +21,9 @@
 <% if medium.geogebra.present? %>
   <div class="m-1">
     <a href="<%= geogebra_medium_path(medium) %>"
-       class="no-deco"
-       target="_blank">
-      <i class="bi bi-bullseye text-secondary fs-5"
-        title="<%= t('geogebra.view') %>"></i>
+       class="btn btn-secondary" role="button"
+       target="_blank" title="<%= t('geogebra.view') %>">
+      <i class="bi bi-bullseye fs-6"></i>
     </a>
   </div>
 <% end %>
@@ -34,10 +31,9 @@
 <% if medium.external_reference_link.present? %>
   <div class="m-1">
     <a href="<%= medium.external_reference_link %>"
-       class="no-deco"
-       target="_blank">
-      <i class="bi bi-link-45deg text-secondary fs-5"
-        title="<%= external_link_description_not_empty(medium) %>"></i>
+       class="btn btn-secondary" role="button"
+       target="_blank" title="<%= external_link_description_not_empty(medium) %>">
+      <i class="bi bi-link-45deg fs-6"></i>
     </a>
   </div>
 <% end %>
@@ -45,56 +41,41 @@
 <% if medium.sort == 'Quiz' && medium.quiz_graph %>
   <div class="m-1">
     <a href="<%= take_quiz_path(medium) %>"
-       class="no-deco"
-       target="_blank">
-      <i class="bi bi-joystick text-secondary fs-5"
-        title="<%= t('quiz.start') %>"></i>
+       class="btn btn-secondary" role="button"
+       target="_blank" title="<%= t('quiz.start') %>">
+      <i class="bi bi-joystick fs-6"></i>
     </a>
   </div>
 <% end %>
 
 <div class="m-1">
   <a href="<%= medium_path(medium) %>"
-     class="no-deco">
-    <i class="bi bi-info-circle-fill text-secondary fs-5"
-      title="<%= t('medium.details') %>"></i>
+     class="btn btn-secondary" role="button"
+     title="<%= t('medium.details') %>">
+    <i class="bi bi-info-circle-fill fs-6"></i>
   </a>
 </div>
 
-<% if medium.video.present? %>
-  <div class="download-button m-1 d-flex align-items-center">
+<div class="media-download-buttons">
+  <% if medium.video.present? %>
     <a href="<%= medium.video_download_url %>"
-       download="<%= video_download_file(medium) %>"
-       class="triggerDownload"
-       data-medium="<%= medium.id %>"
-       data-sort="video">
-      <span>
-        <span class="badge bg-secondary"
-              data-bs-toggle="tooltip"
-              data-placement="bottom"
-              title="<%= t('video.download') %>">
-          &darr;mp4
-        </span>
-      </span>
+      download="<%= video_download_file(medium) %>"
+      class="triggerDownload download-button btn btn-secondary" role="button"
+      data-medium="<%= medium.id %>"
+      data-sort="video"
+      title="<%= t('video.download') %>">
+      &darr;mp4
     </a>
-  </div>
-<% end %>
+  <% end %>
 
-<% if medium.manuscript.present? %>
-  <div class="download-button d-flex align-items-center">
+  <% if medium.manuscript.present? %>
     <a href="<%= medium.manuscript_download_url %>"
-       download="<%= manuscript_download_file(medium) %>"
-       class="triggerDownload"
-       data-medium="<%= medium.id %>"
-       data-sort="manuscript">
-      <span>
-        <span class="badge bg-secondary"
-              data-bs-toggle="tooltip"
-              data-placement="bottom"
-              title="<%= t('manuscript.download') %>">
-          &darr;pdf
-        </span>
-      </span>
+      download="<%= manuscript_download_file(medium) %>"
+      class="triggerDownload download-button btn btn-secondary" role="button"
+      data-medium="<%= medium.id %>"
+      data-sort="manuscript"
+      title="<%= t('manuscript.download') %>">
+      &darr;pdf
     </a>
-  </div>
-<% end %>
+  <% end %>
+</div>