Merge pull request #344 from killerbytes/343-search-result-list

Show search result as list

templates/search.html

@@ -33,6 +33,40 @@
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
+  ul.search_result_items{
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  ul.search_result_items li{
+    text-align: center;
+    margin-bottom: 1rem;
+  }
+  ul.search_result_items li:nth-child(odd){
+    background-color: rgb(50, 55, 55);
+  }
+  .search_result_items_meta{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    text-align: left;
+  }
+  .search_result_items_download{
+    margin-left: 1rem;
+  }
+  @media screen and (min-width: 768px) {
+    ul.search_result_items img{
+      width: 30%;
+    }
+    ul.search_result_items li{
+      display: flex;
+    }
+    .search_result_items_meta{
+      align-items: start;
+      flex: 1;
+    }
+}
 </style>
 <script>
   $(function () {
@@ -266,6 +300,12 @@
     setUserCookie(true);
 
     $(".song-added-by").val(getUserCookie());
+    const items = document.querySelectorAll('.search_result_items li')   
+    items.forEach(item=> item.querySelector('button').addEventListener('click', ()=>{
+      const index = item.getAttribute('data-index')
+      document.querySelector('#search_result_selector').selectedIndex = index
+      document.querySelector('#download-button').click()
+    }))
   });
 
   function isYoutubeURL(s) {
@@ -447,26 +487,28 @@ <h1>
         <small><i>'{{search_string}}'</i></small>
         {%- endtrans %}
       </label>
-      <div class="field select">
-        <select id="search_result_selector" name="song-url">
-          > {% for title,url,id in search_results %}
-          <option data-ytID="{{id}}" value="{{url}}">{{title}}</option>
-          {% endfor %}
-        </select>
+      <div class="is-hidden">
+        <div class="field select">
+          <select id="search_result_selector" name="song-url">
+            > {% for title,url,id in search_results %}
+            <option data-ytID="{{id}}" value="{{url}}">{{title}}</option>
+            {% endfor %}
+          </select>
+        </div>
+        <input class="song-added-by" type="hidden" name="song-added-by" />
+        <p class="help">
+          {# MSG: Help text which explains that the select box above can be
+          operated to select different search results. #} {% trans %}Click
+          dropdown to show more results{% endtrans %}
+        </p>
+        <p>
+          {# MSG: Label displayed before the YouTube url for the chosen search
+          result. #} {% trans %}Link:{% endtrans %}
+          <a target="_blank" id="youtube-link" href=""></a>
+        </p>
+        <p class="has-text-centered-mobile"><img id="youtube-thumb" /></p>
       </div>
-      <input class="song-added-by" type="hidden" name="song-added-by" />
-      <p class="help">
-        {# MSG: Help text which explains that the select box above can be
-        operated to select different search results. #} {% trans %}Click
-        dropdown to show more results{% endtrans %}
-      </p>
-
-      <p>
-        {# MSG: Label displayed before the YouTube url for the chosen search
-        result. #} {% trans %}Link:{% endtrans %}
-        <a target="_blank" id="youtube-link" href=""></a>
-      </p>
-      <p class="has-text-centered-mobile"><img id="youtube-thumb" /></p>
+
       <div class="field">
         <label class="checkbox">
           <input type="checkbox" checked name="queue" />
@@ -475,7 +517,7 @@ <h1>
           downloaded{% endtrans %}
         </label>
       </div>
-      <div class="field">
+      <div class="field is-hidden">
         <button
           class="button is-success is-rounded"
           id="download-button"
@@ -486,6 +528,17 @@ <h1>
         </button>
       </div>
     </form>
+    <ul class="search_result_items">
+      {% for title,url,id in search_results %}
+      <li data-ytID="{{id}}" value="{{url}}" data-index="{{loop.index0}}" >
+        <img src="https://img.youtube.com/vi/{{id}}/0.jpg"/> 
+        <div class="search_result_items_meta">
+          {{title}}
+          <button class="button search_result_items_download">Download</button>
+        </div>
+      </li>
+      {% endfor %}
+    </ul>
   </div>
 </div>
 {% else %} {% endif %} {% endblock %}