From 777ed756dcfd01845451937fb38559ee57ec44e9 Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Mon, 23 Dec 2019 14:39:59 -0800
Subject: Channel: Change search results to use next and previous page buttons
 Because youtube doesn't give the number of search results, so previous
 behavior would give an error if a page number out of range was selected.

---
 youtube/templates/channel.html         | 81 +++++++++++++++++++++-------------
 youtube/templates/common_elements.html | 15 +++++++
 2 files changed, 66 insertions(+), 30 deletions(-)

(limited to 'youtube/templates')

diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html
index d99af9e..5b64737 100644
--- a/youtube/templates/channel.html
+++ b/youtube/templates/channel.html
@@ -1,4 +1,9 @@
-{% set page_title = channel_name + ' - Channel' %}
+{% if current_tab == 'search' %}
+    {% set page_title = search_box_value + ' - Page ' + page_number|string %}
+{% else %}
+    {% set page_title = channel_name + ' - Channel' %}
+{% endif %}
+
 {% extends "base.html" %}
 {% import "common_elements.html" as common_elements %}
 {% block style %}
@@ -52,18 +57,29 @@
             #number-of-results{
                 font-weight:bold;
             }
-        .item-grid{
-            padding-left: 20px;
-            grid-row:4;
+        .content{
+            grid-row: 4;
             grid-column: 1 / span 2;
         }
-        .item-list{
-            width:1000px;
-            grid-column: 1 / span 2;
-        }
-        .page-button-row{
-            grid-column: 1 / span 2;
+        .search-content{
+            width: 800px;
+            margin-left: 10px;
         }
+            .item-grid{
+                padding-left: 20px;
+            }
+            .item-list{
+                width:800px;
+                margin: auto;
+            }
+            .page-button-row{
+                margin-left: auto;
+                margin-right: auto;
+            }
+            .next-previous-button-row{
+                margin-left: auto;
+                margin-right: auto;
+            }
         .tab{
             padding: 5px 75px;
         }
@@ -137,38 +153,43 @@
             </ul>
         </div>
     {% else %}
-        <div id="links-metadata">
-            {% if current_tab == 'videos' %}
-                {% set sorts = [('1', 'views'), ('2', 'oldest'), ('3', 'newest')] %}
-                <div id="number-of-results">{{ number_of_videos }} videos</div>
-            {% elif current_tab == 'playlists' %}
-                {% set sorts = [('2', 'oldest'), ('3', 'newest'), ('4', 'last video added')] %}
-            {% else %}
-                {% set sorts = [] %}
-            {% endif %}
-
-            {% for sort_number, sort_name in sorts %}
-                {% if sort_number == current_sort.__str__() %}
-                    <a class="sort-button">{{ 'Sorted by ' + sort_name }}</a>
+        <div class="content {{ current_tab + '-content'}}">
+            <div id="links-metadata">
+                {% if current_tab == 'videos' %}
+                    {% set sorts = [('1', 'views'), ('2', 'oldest'), ('3', 'newest')] %}
+                    <div id="number-of-results">{{ number_of_videos }} videos</div>
+                {% elif current_tab == 'playlists' %}
+                    {% set sorts = [('2', 'oldest'), ('3', 'newest'), ('4', 'last video added')] %}
+                {% elif current_tab == 'search' %}
+                    <h2 class="page-number">Page {{ page_number }}</h2>
                 {% else %}
-                    <a class="sort-button" href="{{ channel_url + '/' + current_tab + '?sort=' + sort_number }}">{{ 'Sort by ' + sort_name }}</a>
+                    {% set sorts = [] %}
                 {% endif %}
-            {% endfor %}
-        </div>
 
-        {% if current_tab != 'about' %}
+                {% for sort_number, sort_name in sorts %}
+                    {% if sort_number == current_sort.__str__() %}
+                        <a class="sort-button">{{ 'Sorted by ' + sort_name }}</a>
+                    {% else %}
+                        <a class="sort-button" href="{{ channel_url + '/' + current_tab + '?sort=' + sort_number }}">{{ 'Sort by ' + sort_name }}</a>
+                    {% endif %}
+                {% endfor %}
+            </div>
+
             <nav class="{{ 'item-list' if current_tab == 'search' else 'item-grid' }}">
                 {% for item_info in items %}
                     {{ common_elements.item(item_info, include_author=false) }}
                 {% endfor %}
             </nav>
 
-            {% if current_tab != 'playlists' %}
+            {% if current_tab == 'videos' %}
                 <nav class="page-button-row">
                     {{ common_elements.page_buttons(number_of_pages, channel_url + '/' + current_tab, parameters_dictionary) }}
                 </nav>
+            {% elif current_tab == 'search' %}
+                <nav class="next-previous-button-row">
+                    {{ common_elements.next_previous_buttons(is_last_page, channel_url + '/' + current_tab, parameters_dictionary) }}
+                </nav>
             {% endif %}
-        {% endif %}
-
+        </div>
     {% endif %}
 {% endblock main %}
diff --git a/youtube/templates/common_elements.html b/youtube/templates/common_elements.html
index 7914c08..8ee0a3c 100644
--- a/youtube/templates/common_elements.html
+++ b/youtube/templates/common_elements.html
@@ -90,3 +90,18 @@
     {% endfor %}
 
 {% endmacro %}
+
+{% macro next_previous_buttons(is_last_page, url, parameters_dictionary) %}
+    {% set current_page = parameters_dictionary.get('page', 1)|int %}
+    {% set parameters_dictionary = parameters_dictionary.to_dict() %}
+
+    {% if current_page != 1 %}
+            {% set _ = parameters_dictionary.__setitem__('page', current_page - 1) %}
+            <a class="page-button previous-page" href="{{ url + '?' + parameters_dictionary|urlencode }}">Previous page</a>
+    {% endif %}
+
+    {% if not is_last_page %}
+            {% set _ = parameters_dictionary.__setitem__('page', current_page + 1) %}
+            <a class="page-button next-page" href="{{ url + '?' + parameters_dictionary|urlencode }}">Next page</a>
+    {% endif %}
+{% endmacro %}
-- 
cgit v1.2.3