Redesign media cards (#656)

* Make lecture cards more reactive * Fix card header border radius & use blue border color * Add "hover to play" feature * Use bootstrap icons for buttons * Explicitly set footer background color * Clean up card footer * Use buttons for media card actions * Add interactive hover to other sections as well Also added a default empty screenshot * Improve media grid breakpoints * Add another horizontal line above card body * Import necessary bootstrap files in `media.scss` * Outline the buttons instead of filling them * Use auto phrasing for card word break * Let only lecture tags change color on hover * Improve styling of header end icons * Fix download button alignment * Revert locale logic change * Make default screenshot more subdued * Reflect media card changes for watchlist cards * Reuse medium card for watchlists * Adjust card header talk people icon * Wait for turbolinks:load (shining pointer)
MaMpf-HD · Aug 2, 2024 · 742ee15 · 742ee15
1 parent f5522ee
commit 742ee15
Show file tree

Hide file tree

Showing 10 changed files with 314 additions and 298 deletions.
diff --git a/app/assets/javascripts/cards.js b/app/assets/javascripts/cards.js
@@ -0,0 +1,7 @@
+$(document).on("turbolinks:load", function () {
+  $(".mampf-card").on("mousemove", function (event) {
+    const { x, y } = this.getBoundingClientRect();
+    this.style.setProperty("--x", event.clientX - x);
+    this.style.setProperty("--y", event.clientY - y);
+  });
+});
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -64,8 +64,6 @@ $container-max-widths: (
 @import "vertices";
 @import "trix";
 
-$badge-color: #545b62;
-
 trix-toolbar .trix-button-row {
   flex-wrap: wrap;
 }
@@ -267,15 +265,8 @@ a {
   }
 }
 
-.badge {
-  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-
-  &:hover,
-  &:focus {
-    text-decoration: none;
-    background-color: $badge-color !important;
-    color: white;
-  }
+.badge:hover {
+  cursor: default;
 }
 
 .btn {

diff --git a/app/assets/stylesheets/lectures.scss b/app/assets/stylesheets/lectures.scss
@@ -69,9 +69,14 @@
 
 .lecture-tag {
   background-color: #dae0e5;
+  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 
-  &:hover {
+  &:hover,
+  &:focus {
+    text-decoration: none;
+    background-color: #545b62 !important;
     color: white !important;
+    cursor: pointer !important;
   }
 }
 

diff --git a/app/assets/stylesheets/media.scss b/app/assets/stylesheets/media.scss
@@ -1,6 +1,30 @@
-// Place all the styles related to the media controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
+@import "bootstrap/functions";
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+.media-grid {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(12);
+  }
+
+  @include media-breakpoint-up(md) {
+    @include make-col(6);
+  }
+
+  @media (min-width: 1100px) {
+    @include make-col(4);
+  }
+
+  @media (min-width: 1300px) {
+    @include make-col(3);
+  }
+
+  @media (min-width: 1700px) {
+    @include make-col(2.4); // 5 columns
+  }
+}
 
 .hidden {
   display: none;
@@ -28,25 +52,141 @@
   display: flex;
   justify-content: flex-start;
   flex-wrap: wrap;
+  padding: 0.5rem var(--bs-card-cap-padding-x);
 }
 
 .media-card-header {
   display: flex;
   justify-content: flex-end;
 }
 
-.card-header {
+.mampf-card-header {
   padding: 0.75rem 1.25rem;
+  background-color: #223e62;
+}
+
+.mampf-header-end {
+  color: $gray-300;
+
+  & a {
+    color: $gray-300;
+  }
 }
 
 .card-footer {
-  padding: 0.75rem 1.25rem;
+  padding: 0;
+  background-color: #21252908;
+}
+
+.media-hr {
+  margin: 0;
+}
+
+.card-text-end {
+  padding: 0.75rem var(--bs-card-cap-padding-x);
+}
+
+.media-download-buttons {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-around;
+  margin: 0.25rem;
+}
+
+.download-button {
+  padding: 0 0.5em;
+  font-size: 0.8em;
+  height: 1.4em;
+  border: none;
+  text-align: left;
+  line-height: normal;
+}
+
+.mampf-card {
+  border: 2px solid #223e62;
+  position: relative;
+  overflow: hidden;
+  background: linear-gradient(0deg, #ecf1f8 0%, #fcfdfd 60%);
+  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px;
+  transition: box-shadow 120ms ease-in-out;
+
+  &:hover {
+    box-shadow: rgba(50, 50, 93, 0.02) 0px 50px 50px -20px,
+      rgba(0, 0, 0, 0.15) 0px 25px 50px -25px;
+  }
+}
+
+.mampf-card:hover::after {
+  opacity: 0.12;
+}
+
+.mampf-card::after {
+  content: '';
+  position: absolute;
+  width: 160px;
+  height: 160px;
+  top: calc(var(--y, 0) * 1px - 80px);
+  left: calc(var(--x, 0) * 1px - 80px);
+  opacity: 0;
+  background: radial-gradient(white, #00000000 80%);
+  transition: opacity 200ms;
+  pointer-events: none;
+}
+
+.mampf-card-image-wrapper {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  position: relative;
+
+  &:hover .interactive-hover {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.mampf-card-image {
+  margin: -5px; // crop image to not display scroll bars present in some images
+  width: 100%;
+}
+
+.interactive-hover {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.75);
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 150ms ease-in-out, opacity 150ms ease-in-out;
+}
+
+.interactive-hover-icon {
+  font-size: 2.3em;
+  color: white;
+}
+
+.empty-default-screenshot {
+  width: 100%;
+  height: 8em;
+  background-color: #ffffff;
+  background-image: linear-gradient(#BCC5CF 2px, transparent 2px), linear-gradient(90deg, #BCC5CF 2px, transparent 2px), linear-gradient(#BCC5CF 1px, transparent 1px), linear-gradient(90deg, #BCC5CF 1px, #ffffff 1px);
+  background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
+  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
+}
+
+.card-body {
+  // same as card-footer border
+  border-top: var(--bs-card-border-width) solid var(--bs-card-border-color);
 }
 
 #media-card-subheader {
   display: flex;
   justify-content: space-between;
-  word-break: break-all;
+  word-break: auto-phrase;
 }
 
 #video-wait {

diff --git a/app/helpers/talks_helper.rb b/app/helpers/talks_helper.rb
@@ -18,9 +18,9 @@ def speaker_list(talk)
   end
 
   def speaker_icon_class(talk)
-    return "fas fa-user" unless talk.speakers.count > 1
+    return "bi bi-person-fill" unless talk.speakers.count > 1
 
-    "fas fa-users"
+    "bi bi-people-fill"
   end
 
   def speaker_icon(talk)

diff --git a/app/views/media/_media.html.erb b/app/views/media/_media.html.erb
@@ -1,7 +1,7 @@
 <% if media.present? %>
   <div class="row">
     <% media.each do |medium| %>
-      <div class="col-12 col-md-6 col-lg-4 col-xl-3 pb-2">
+      <div class="media-grid pb-2">
         <%= render partial: 'media/medium',
                    locals: { medium: medium,
                              tags: tags,