Add interactive hover to other sections as well

Also added a default empty screenshot
MaMpf-HD · Jul 1, 2024 · 94f93cf · 94f93cf
1 parent 4abfc08
commit 94f93cf
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 20 deletions.
diff --git a/app/assets/stylesheets/media.scss b/app/assets/stylesheets/media.scss
@@ -107,7 +107,7 @@
   justify-content: center;
   position: relative;
 
-  &:hover .interactive-play-hover {
+  &:hover .interactive-hover {
     visibility: visible;
     opacity: 1;
   }
@@ -118,7 +118,7 @@
   width: 100%;
 }
 
-.interactive-play-hover {
+.interactive-hover {
   width: 100%;
   height: 100%;
   position: absolute;
@@ -131,11 +131,17 @@
   transition: visibility 150ms ease-in-out, opacity 150ms ease-in-out;
 }
 
-.interactive-play-hover-icon {
+.interactive-hover-icon {
   font-size: 2.3em;
   color: white;
 }
 
+.empty-default-screenshot {
+  width: 100%;
+  height: 8em;
+  background: linear-gradient(135deg, #223e6255 25%, transparent 25%) -10px 0/ 20px 20px, linear-gradient(225deg, #223e62 25%, transparent 25%) -10px 0/ 20px 20px, linear-gradient(315deg, #223e6255 25%, transparent 25%) 0px 0/ 20px 20px, linear-gradient(45deg, #223e62 25%, #ffffff 25%) 0px 0/ 20px 20px;
+}
+
 #media-card-subheader {
   display: flex;
   justify-content: space-between;

diff --git a/app/views/media/_medium.html.erb b/app/views/media/_medium.html.erb
@@ -96,23 +96,42 @@
     <% cache [medium, from == 'tag', ref_link] do %>
       <% unless from == 'tag' %>
         <div class="mampf-card-image-wrapper">
-        <% if medium.screenshot.present? %>
-          <a href="<%= play_medium_path(medium) %>"
-            class="interactive-play-hover" target="_blank">
-            <i class="interactive-play-hover-icon bi bi-play-fill"></i>
-          </a>
-          <%= image_tag(medium.screenshot_url_with_host,
-                        alt: "Card image cap",
-                        class: "mampf-card-image") %>
-        <% elsif medium.manuscript.present? %>
-          <%= image_tag(medium.manuscript_screenshot_url || '',
-                        alt: "Card image cap",
-                        class: "mampf-card-image manuscript-thumbnail") %>
-        <% elsif medium.geogebra_screenshot_url.present? %>
-          <%= image_tag(medium.geogebra_screenshot_url,
-                        alt: 'Card image cap',
-                        class: 'mampf-card-image') %>
-        <% end %>
+          <!-- Interactive hover -->
+          <% if medium.video.present? %>
+            <a href="<%= play_medium_path(medium) %>"
+              class="interactive-hover" target="_blank"
+              title="<%= t('video.play') %>">
+              <i class="interactive-hover-icon bi bi-play-fill"></i>
+            </a>
+          <% elsif medium.manuscript.present? %>
+            <a href="<%= ref_link.blank? ? display_medium_path(medium) : ref_link %>"   
+              class="interactive-hover" target="_blank"
+              title="<%= t('manuscript.view') %>">
+              <i class="interactive-hover-icon bi bi-file-earmark-text-fill"></i>
+            </a>
+          <% elsif medium.sort == 'Quiz' && medium.quiz_graph %>
+            <a href="<%= take_quiz_path(medium) %>"
+              class="interactive-hover" target="_blank" title="<%= t('quiz.start') %>">
+              <i class="interactive-hover-icon bi bi-joystick"></i>
+            </a>
+          <% end %>
+
+          <!-- Screenshots -->
+          <% if medium.screenshot.present? %>
+            <%= image_tag(medium.screenshot_url_with_host,
+                          alt: "Card image cap",
+                          class: "mampf-card-image") %>
+          <% elsif medium.manuscript.present? %>
+            <%= image_tag(medium.manuscript_screenshot_url || '',
+                          alt: "Card image cap",
+                          class: "mampf-card-image manuscript-thumbnail") %>
+          <% elsif medium.geogebra_screenshot_url.present? %>
+            <%= image_tag(medium.geogebra_screenshot_url,
+                          alt: 'Card image cap',
+                          class: 'mampf-card-image') %>
+          <% else %>
+            <div class="empty-default-screenshot"></div>
+          <% end %>
         </div>
       <% end %>
       <div class="card-body">