feat: increase opacity for the floating play button, and now it can b…

…e activated by hovering on the title.
azlux · Apr 18, 2020 · 9640324 · 9640324
1 parent 81bfe92
commit 9640324
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git 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
@@ -236,7 +236,7 @@ <h4 class="alert-heading">Filters</h4>
                                         </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 @@ <h5 class="modal-title" id="addTagModalTitle">Edit tags for ?</h5>
         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', {