Enabled setting start and end for a song on mobile

server/public/assets/css/style.css

@@ -1827,6 +1827,7 @@ nav ul li:hover, nav ul li.active {
 
 .search-title{
     height: 40px;
+    width: 70vw;
     /*padding-top: 33px;
     margin-bottom: -16px;
     line-height: initial;*/
@@ -2337,6 +2338,10 @@ nav ul li:hover, nav ul li.active {
     color: lightgrey !important;
 }
 
+.result-get-more-info {
+    display: none;
+}
+
 .hamburger-sidenav {
     width: 24px;
     height: 24px;
@@ -2972,18 +2977,49 @@ nav ul li:hover, nav ul li.active {
         width: 99%;
     }
 
+    .result-get-more-info {
+        position: absolute;
+        right: 0px;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 45px;
+    }
+
+    .result-info-no-buttons {
+        width: calc(100% - 200px);
+    }
+
+    .result-object {
+        -webkit-transform: translateX(0%);
+        transform: translateX(0%);
+        -webkit-transition: transform .5s;
+        -moz-transition: transform .5s;
+        transition: transform .5s;
+    }
+
+    .result-object-slid {
+        -webkit-transform: translateX(calc(-100% + 45px)) !important;
+        transform: translateX(calc(-100% + 45px)) !important;
+    }
+
     .result-start-end-container {
-        visibility: hidden;
+        /*visibility: hidden;
-        pointer-events: none;
+        pointer-events: none;*/
+        margin-left: 120%;
+        position: relative;
+        top: -10px;
     }
 
     .result-info-buttons {
         margin-top: 20px;
+        width: 200px;
     }
 
     .result .search-title{
         white-space: nowrap;
-        width: calc(100vw - 123px);
+        width: calc(100vw - 165px);
         margin-top: -5px;
         z-index: 9999;
     }

server/public/assets/js/listeners.js

@@ -1785,7 +1785,7 @@ $(document).on( "click", ".result-object", function(e){
     var $html  = $(e.target);
 
     var substr = $html.prop('outerHTML').substring(0,4);
-    if(substr != "<i c" && $html.prop('class').indexOf("waves-effect") == -1 && $html.attr("class") != "result-start" && $html.attr("class") != "result-end"){
+    if(substr != "<i c" && $html.prop('class').indexOf("waves-effect") == -1 && $html.attr("class") != "result-start" && $html.attr("class") != "result-end" && $html.attr("class") != "result-get-more-info"){
         var id 		= $(this).attr("data-video-id");
         var title 	= $(this).attr("data-video-title");
         var original_length 	= $(this).attr("data-video-length");
@@ -1809,6 +1809,21 @@ $(document).on( "click", ".result-object", function(e){
     }
 });
 
+$(document).on("click", ".result-get-more-info", function(e) {
+    e.preventDefault();
+    var that = $(this);
+    var parent = that.parent().parent().parent().parent();
+
+    var to_toggle = $("#inner-results").find("[data-video-id='" + parent.attr("data-video-id") + "']")[0];
+
+    $(to_toggle).toggleClass("result-object-slid");
+    if($(that.children()[0]).text() == "keyboard_arrow_right") {
+        $(that.children()[0]).text("keyboard_arrow_left")
+    } else {
+        $(that.children()[0]).text("keyboard_arrow_right")
+    }
+})
+
 $(document).on('click', '#submit-contact-form', function(e) {
     e.preventDefault();
     $("#contact-form").submit();

server/public/partials/channel/header.handlebars

@@ -53,45 +53,7 @@
                 <ul class="side-nav" id="settings-bar">
                     {{> channel/panel}}
                 </ul>
-                <div id="results" class="search_results hide">
+                {{> channel/search}}
-                    <div id="temp-results-container">
-                        <div id="temp-results" class="result-object">
-                            <div id="result" class="result">
-                                <div class="result-info-no-buttons">
-                                    <div class="thumb-and-info">
-                                        <img class="thumb" src="/assets/images/loading.png" alt="Thumb"/>
-                                        <span class="result_info"></span>
-                                    </div>
-                                    <div class="result-info-title-length">
-                                        <div class="search-title truncate"></div>
-                                        <div class="result-start-end-container">
-                                            <input type="number" min="0" class="result-start" value="0">
-                                            /
-                                            <input type="number" min="0" class="result-end" value="0">
-                                        </div>
-                                    </div>
-                                </div>
-                                <div class="result-info-buttons">
-                                    <a href="#" target="_blank" class="waves-effect waves-orange btn-flat open-externally" title="Open on YouTube">
-                                        <i class="material-icons">open_in_new</i>
-                                    </a>
-                                    <div class="waves-effect waves-orange btn-flat" id="add-many" title="Add several videos">
-                                        <i class="material-icons">playlist_add</i>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="empty-results-container">
-                        <div id="empty-results" class="valign-wrapper">
-                            <span class="valign">No results found..</span>
-                        </div>
-                    </div>
-                    <div class="pagination-results">
-                        <a href="#" class="btn waves-effect waves-light prev-results-button orange">Prev</a>
-                        <a href="#" class="btn waves-effect waves-light next-results-button orange">Next</a>
-                    </div>
-                </div>
             </div>
         </nav>
     </div>

server/public/partials/channel/search.handlebars

@@ -0,0 +1,43 @@
+<div id="results" class="search_results hide">
+    <div id="temp-results-container">
+        <div id="temp-results" class="result-object">
+            <div id="result" class="result">
+                <div class="result-info-no-buttons">
+                    <div class="thumb-and-info">
+                        <img class="thumb" src="/assets/images/loading.png" alt="Thumb"/>
+                        <span class="result_info"></span>
+                    </div>
+                    <div class="result-info-title-length">
+                        <div class="search-title truncate"></div>
+                        <div class="result-start-end-container">
+                            <span class="start-end-info show-only-mobile">Start/End</span>
+                            <input type="number" min="0" class="result-start" value="0">
+                            /
+                            <input type="number" min="0" class="result-end" value="0">
+                        </div>
+                        <div class="result-get-more-info waves-effect waves-light">
+                            <i class="material-icons">keyboard_arrow_left</i>
+                        </div>
+                    </div>
+                </div>
+                <div class="result-info-buttons">
+                    <a href="#" target="_blank" class="waves-effect waves-orange btn-flat open-externally" title="Open on YouTube">
+                        <i class="material-icons">open_in_new</i>
+                    </a>
+                    <div class="waves-effect waves-orange btn-flat" id="add-many" title="Add several videos">
+                        <i class="material-icons">playlist_add</i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="empty-results-container">
+        <div id="empty-results" class="valign-wrapper">
+            <span class="valign">No results found..</span>
+        </div>
+    </div>
+    <div class="pagination-results">
+        <a href="#" class="btn waves-effect waves-light prev-results-button orange">Prev</a>
+        <a href="#" class="btn waves-effect waves-light next-results-button orange">Next</a>
+    </div>
+</div>