Convert playlist page to flask framework

1 files changed, 106 insertions, 0 deletions

diff --git a/youtube/templates/playlist.html b/youtube/templates/playlist.html
new file mode 100644
index 0000000..09e382b
--- /dev/null
+++ b/youtube/templates/playlist.html
@@ -0,0 +1,106 @@
+{% extends "base.html" %}
+{% block page_title %}{{ title + ' - Page ' + parameters_dictionary.get('page', '1') }}{% endblock %}
+{% import "common_elements.html" as common_elements %}
+{% block style %}
+    main{
+        display:grid;
+        grid-template-columns: 3fr 1fr;
+    }
+
+
+        
+    #left{
+        grid-column: 1;
+        grid-row: 1;
+        
+        display: grid;
+        grid-template-columns: 1fr 800px;
+        grid-template-rows: 0fr 1fr 0fr;
+    }
+        .playlist-metadata{
+            grid-column:2;
+            grid-row:1;
+
+            display:grid;
+            grid-template-columns: 0fr 1fr;
+        }
+            .playlist-thumbnail{
+                grid-row: 1 / span 5;
+                grid-column:1;
+                justify-self:start;
+                width:250px;
+                margin-right: 10px;
+            }
+            .playlist-title{
+                grid-row: 1;
+                grid-column:2;
+            }
+            .playlist-author{
+                grid-row:2;
+                grid-column:2;
+            }
+            .playlist-stats{
+                grid-row:3;
+                grid-column:2;
+            }
+            
+            .playlist-description{
+                grid-row:4;
+                grid-column:2;
+                min-width:0px;
+                white-space: pre-line;
+            }
+        .page-button-row{
+            grid-row: 3;
+            grid-column: 2;
+            justify-self: center;
+        }
+    
+    
+    #right{
+        grid-column: 2;
+        grid-row: 1;
+
+    }
+    #results{
+        
+        grid-row: 2;
+        grid-column: 2;
+        margin-top:10px;
+        
+        display: grid;
+        grid-auto-rows: 0fr;
+        grid-row-gap: 10px;
+        
+    }
+{% endblock style %}
+
+{% block main %}
+    <div id="left">
+        <div class="playlist-metadata">
+            <img class="playlist-thumbnail" src="{{ thumbnail }}">
+            <h2 class="playlist-title">{{ title }}</h2>
+            <a class="playlist-author" href="{{ author_url }}">{{ author }}</a>
+            <div class="playlist-stats">
+                <div>{{ views }}</div>
+                <div>{{ size }}</div>
+            </div>
+            <div class="playlist-description">{{ description }}</div>
+        </div>
+
+        <div id="results">          
+            {% for info in video_list %}
+                {{ common_elements.item(info) }}
+            {% endfor %}
+        </div>
+        <nav class="page-button-row">
+            {{ common_elements.page_buttons(num_pages, '/https://www.youtube.com/playlist', parameters_dictionary) }}
+        </nav>
+    </div>
+{% endblock main %}
+
+
+
+
+
+