From 64434b02ca50c2a6324caa1355559bd881ba687e Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Sat, 6 Jul 2019 18:36:09 -0700
Subject: Convert channel page to flask framework

---
 youtube/templates/channel.html | 144 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 144 insertions(+)
 create mode 100644 youtube/templates/channel.html

(limited to 'youtube/templates/channel.html')

diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html
new file mode 100644
index 0000000..8a3f279
--- /dev/null
+++ b/youtube/templates/channel.html
@@ -0,0 +1,144 @@
+{% extends "base.html" %}
+{% block page_title %}{{ channel_name + ' - Channel' }}{% endblock %}
+{% import "common_elements.html" as common_elements %}
+{% block style %}
+    main{
+        display:grid;
+{% if current_tab == 'about' %}
+        grid-template-rows: 0fr 0fr 1fr;
+        grid-template-columns: 0fr 1fr;
+{% else %}
+        grid-template-rows: repeat(5, 0fr);
+        grid-template-columns: auto 1fr;
+{% endif %}
+    }
+        main .avatar{
+            grid-row:1;
+            grid-column:1;
+            height:200px;
+            width:200px;
+        }
+        main .title{
+            grid-row:1;
+            grid-column:2;                
+        }
+        main .channel-tabs{
+            grid-row:2;
+            grid-column: 1 / span 2;
+            
+            display:grid;
+            grid-auto-flow: column;
+            justify-content:start;
+            
+            background-color: #aaaaaa;
+            padding: 3px;
+        }
+        #links-metadata{
+            display: grid;
+            grid-auto-flow: column;
+            grid-column-gap: 10px;
+            grid-column: 1/span 2;
+            justify-content: start;
+            padding-top: 8px;
+            padding-bottom: 8px;
+            background-color: #bababa;
+            margin-bottom: 10px;
+        }
+            #number-of-results{
+                font-weight:bold;
+            }
+        .item-grid{
+            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;
+        }
+        .tab{
+            padding: 5px 75px;
+        }
+        main .channel-info{
+            grid-row: 3;
+            grid-column: 1 / span 3;
+        }
+        .description{
+            white-space: pre-wrap;
+            min-width: 0;
+        
+        }
+{% endblock style %}
+
+{% block main %}     
+    <img class="avatar" src="{{ avatar }}">
+    <h2 class="title">{{ channel_name }}</h2>
+    <nav class="channel-tabs">
+        {% for tab_name in ('Videos', 'Playlists', 'About') %}
+            {% if tab_name.lower() == current_tab %}
+                <a class="tab page-button">{{ tab_name }}</a>
+            {% else %}
+                <a class="tab page-button" href="{{ channel_url + '/' + tab_name.lower() }}">{{ tab_name }}</a>
+            {% endif %}
+        {% endfor %}
+
+        <form class="channel-search" action="{{ channel_url + '/search' }}">
+            <input type="search" name="query" class="search-box" value="{{ search_box_value }}">
+            <button type="submit" value="Search" class="search-button">Search</button>
+        </form>
+    </nav>
+    {% if current_tab == 'about' %}
+        <div class="channel-info">
+            <ul>
+                {% for stat in stats %}
+                    <li>{{ stat }}</li>
+                {% endfor %}
+            </ul>
+            <hr>
+            <h3>Description</h3>
+            <span class="description">{{ common_elements.text_runs(description) }}</span>
+            <hr>
+            <ul>
+                {% for text, url in links %}
+                    <li><a href="{{ url }}">{{ text }}</a></li>
+                {% endfor %}
+            </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>
+                {% else %}
+                    <a class="sort-button" href="{{ channel_url + '/' + current_tab + '?sort=' + sort_number }}">{{ 'Sort by ' + sort_name }}</a>
+                {% endif %}
+            {% endfor %}
+        </div>
+
+        {% if current_tab != 'about' %}
+            <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' %}
+                <nav class="page-button-row">
+                    {{ common_elements.page_buttons(number_of_pages, channel_url + '/' + current_tab, parameters_dictionary) }}
+                </nav>
+            {% endif %}
+        {% endif %}
+
+    {% endif %}
+{% endblock main %}
-- 
cgit v1.2.3


From 74cf3b2135661ae17b4e390c91182c673645cad7 Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Sun, 21 Jul 2019 22:50:57 -0700
Subject: Use variable to set title on base template instead of block

---
 youtube/templates/channel.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'youtube/templates/channel.html')

diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html
index 8a3f279..734769d 100644
--- a/youtube/templates/channel.html
+++ b/youtube/templates/channel.html
@@ -1,5 +1,5 @@
+{% set page_title = channel_name + ' - Channel' %}
 {% extends "base.html" %}
-{% block page_title %}{{ channel_name + ' - Channel' }}{% endblock %}
 {% import "common_elements.html" as common_elements %}
 {% block style %}
     main{
-- 
cgit v1.2.3


From dfbe29355ff4c2dd106efb5acb9240e5292b0f08 Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Mon, 22 Jul 2019 01:01:27 -0700
Subject: Channel: fix oversized thumbnails in firefox quantum

---
 youtube/templates/channel.html | 3 +++
 1 file changed, 3 insertions(+)

(limited to 'youtube/templates/channel.html')

diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html
index 734769d..ffcf793 100644
--- a/youtube/templates/channel.html
+++ b/youtube/templates/channel.html
@@ -70,6 +70,9 @@
             min-width: 0;
         
         }
+        .medium-item img{
+            max-width: 168px;
+        }
 {% endblock style %}
 
 {% block main %}     
-- 
cgit v1.2.3


From cb1c899a4570e8644dad572c7f00a3d96c844a2f Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Tue, 23 Jul 2019 22:55:15 -0700
Subject: channel: Add short description under channel name

---
 youtube/templates/channel.html | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'youtube/templates/channel.html')

diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html
index ffcf793..8293559 100644
--- a/youtube/templates/channel.html
+++ b/youtube/templates/channel.html
@@ -18,7 +18,7 @@
             height:200px;
             width:200px;
         }
-        main .title{
+        main .summary{
             grid-row:1;
             grid-column:2;                
         }
@@ -77,7 +77,10 @@
 
 {% block main %}     
     <img class="avatar" src="{{ avatar }}">
-    <h2 class="title">{{ channel_name }}</h2>
+    <div class="summary">
+        <h2 class="title">{{ channel_name }}</h2>
+        <p class="short-description">{{ short_description }}</p>
+    </div>
     <nav class="channel-tabs">
         {% for tab_name in ('Videos', 'Playlists', 'About') %}
             {% if tab_name.lower() == current_tab %}
-- 
cgit v1.2.3


From b56e65e0515cf5894640e186b4df01c051a85b17 Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Wed, 24 Jul 2019 00:26:20 -0700
Subject: channel.html: add some space to the left of the page

---
 youtube/templates/channel.html | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

(limited to 'youtube/templates/channel.html')

diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html
index 8293559..069e33b 100644
--- a/youtube/templates/channel.html
+++ b/youtube/templates/channel.html
@@ -20,7 +20,8 @@
         }
         main .summary{
             grid-row:1;
-            grid-column:2;                
+            grid-column:2;
+            margin-left: 5px;
         }
         main .channel-tabs{
             grid-row:2;
@@ -32,6 +33,7 @@
             
             background-color: #aaaaaa;
             padding: 3px;
+            padding-left: 6px;
         }
         #links-metadata{
             display: grid;
@@ -41,6 +43,7 @@
             justify-content: start;
             padding-top: 8px;
             padding-bottom: 8px;
+            padding-left: 6px;
             background-color: #bababa;
             margin-bottom: 10px;
         }
@@ -48,6 +51,7 @@
                 font-weight:bold;
             }
         .item-grid{
+            padding-left: 20px;
             grid-row:4;
             grid-column: 1 / span 2;
         }
@@ -61,14 +65,20 @@
         .tab{
             padding: 5px 75px;
         }
-        main .channel-info{
+        .channel-info{
             grid-row: 3;
             grid-column: 1 / span 3;
         }
-        .description{
+        .channel-info ul{
+            padding-left: 40px;
+        }
+        .channel-info h3{
+            margin-left: 40px;
+        }
+        .channel-info .description{
             white-space: pre-wrap;
             min-width: 0;
-        
+            margin-left: 40px;
         }
         .medium-item img{
             max-width: 168px;
@@ -104,7 +114,7 @@
             </ul>
             <hr>
             <h3>Description</h3>
-            <span class="description">{{ common_elements.text_runs(description) }}</span>
+            <div class="description">{{ common_elements.text_runs(description) }}</div>
             <hr>
             <ul>
                 {% for text, url in links %}
-- 
cgit v1.2.3