Convert channel page to flask framework

1 files changed, 144 insertions, 0 deletions

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 %}