From 96403246688cc76c04feea7503c9c5dfd6422462 Mon Sep 17 00:00:00 2001
From: Terry Geng <gengyanda@gmail.com>
Date: Sun, 19 Apr 2020 00:38:36 +0800
Subject: [PATCH] feat: increase opacity for the floating play button, and now
 it can be activated by hovering on the title.

---
 static/css/custom.css |  7 ++-----
 templates/index.html  | 12 +++++++++++-
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/static/css/custom.css b/static/css/custom.css
index 21e0d12..783c056 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -69,13 +69,10 @@
    margin-left: 15px;
    transition: left 300ms;
    border-radius: 5px;
-   opacity: 0.6;
+   opacity: 0.7;
    font-weight: 300;
 }
-.library-thumb-img:hover + .library-thumb-grp {
-   left: -15px;
-}
-.library-thumb-grp:hover {
+.library-thumb-grp-hover {
    left: -15px;
 }
 .library-thumb-btn-up {
diff --git a/templates/index.html b/templates/index.html
index 4925416..e0b54fb 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -236,7 +236,7 @@
                                         </div>
                                     </div>
                                 </div>
-                                <div class="library-info-col col-5" style="padding: 12px 0;">
+                                <div class="library-info-col library-info-title col-5" style="padding: 12px 0;">
                                     <div>
                                         <span class="library-item-type lead text-muted btn-space">[File]</span>
                                         <span class="library-item-title lead btn-space">This is my title</span>
@@ -836,6 +836,16 @@
         var item_template = $("#library-item");
 
         function bindLibraryResultEvent() {
+            $(".library-thumb-col").unbind().hover(
+                function (e) { $(e.currentTarget).find(".library-thumb-grp").addClass("library-thumb-grp-hover"); },
+                function (e) { $(e.currentTarget).find(".library-thumb-grp").removeClass("library-thumb-grp-hover"); }
+            );
+
+            $(".library-info-title").unbind().hover(
+                function (e) { $(e.currentTarget).parent().find(".library-thumb-grp").addClass("library-thumb-grp-hover"); },
+                function (e) { $(e.currentTarget).parent().find(".library-thumb-grp").removeClass("library-thumb-grp-hover"); }
+            );
+
             $(".library-item-play").unbind().click(
                 function (e) {
                     request('post', {