From 81b935cadf4d6941b1614116d824f0662652d8bb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= <kasper@kasperrt.no>
Date: Wed, 24 Jan 2018 12:53:04 +0100
Subject: [PATCH] Enabled setting start and end for a song on mobile

---
 server/public/assets/css/style.css            | 42 ++++++++++++++++--
 server/public/assets/js/listeners.js          | 17 +++++++-
 .../public/partials/channel/header.handlebars | 40 +----------------
 .../public/partials/channel/search.handlebars | 43 +++++++++++++++++++
 4 files changed, 99 insertions(+), 43 deletions(-)
 create mode 100644 server/public/partials/channel/search.handlebars

diff --git a/server/public/assets/css/style.css b/server/public/assets/css/style.css
index 83a049c1..ae1ef290 100755
--- a/server/public/assets/css/style.css
+++ b/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;
-        pointer-events: none;
+        /*visibility: hidden;
+        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;
     }
diff --git a/server/public/assets/js/listeners.js b/server/public/assets/js/listeners.js
index 13328e05..5ea8b577 100755
--- a/server/public/assets/js/listeners.js
+++ b/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();
diff --git a/server/public/partials/channel/header.handlebars b/server/public/partials/channel/header.handlebars
index 61ca42ca..313b61be 100644
--- a/server/public/partials/channel/header.handlebars
+++ b/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">
-                    <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>
+                {{> channel/search}}
             </div>
         </nav>
     </div>
diff --git a/server/public/partials/channel/search.handlebars b/server/public/partials/channel/search.handlebars
new file mode 100644
index 00000000..0dc3f34e
--- /dev/null
+++ b/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>