Convert watch page to flask framework

3 files changed, 501 insertions, 0 deletions

diff --git a/youtube/static/comments.css b/youtube/static/comments.css
new file mode 100644
index 0000000..4cec3e1
--- /dev/null
+++ b/youtube/static/comments.css
@@ -0,0 +1,129 @@
+.video-metadata{    
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto auto 1fr auto;
+}
+    .video-metadata > .video-metadata-thumbnail-box{
+        grid-row: 1 / span 3;
+    }
+    .video-metadata > .title{
+        word-wrap:break-word;
+        grid-row: 1;
+    }
+    .video-metadata > h2{
+        grid-row: 2;
+        font-size: 15px;
+    }
+    .video-metadata > span{
+        grid-row:3;
+    }
+    .video-metadata > hr{
+        grid-row: 4;
+        grid-column: 1 / span 2;
+        width: 100%;
+    }
+
+.comment-form{
+    display: grid;
+    align-content: start;
+    justify-items: start;
+    align-items: start;
+}
+    #comment-account-options{
+        display:grid;
+        grid-auto-flow: column;
+        grid-column-gap: 10px;
+        margin-top:10px;
+        margin-bottom:10px;
+    }
+        #comment-account-options a{
+            margin-left:10px;
+        }
+
+.comments-area{
+    display:grid;
+}
+    .comments-area textarea{
+        resize: vertical;
+        justify-self:stretch;
+    }
+    .post-comment-button{
+        margin-top:10px;
+        justify-self:end;
+    }
+    .comment-links{
+        display:grid;
+        grid-auto-flow: column;
+        grid-column-gap: 10px;
+        justify-content:start;
+    }
+
+.comments{
+    margin-top:10px;
+    grid-row-gap: 10px;
+    display: grid;
+    align-content:start;
+}
+
+.comment{
+    display:grid;
+    grid-template-columns: auto auto 100px 1fr;
+    grid-template-rows: 0fr 0fr 0fr 0fr;
+    background-color: #dadada;
+    justify-content: start;
+}
+
+.comment .author-avatar{
+    grid-column: 1;
+    grid-row: 1 / span 3;
+    align-self: start;
+    margin-right: 5px;
+    height:32px;
+    width:32px;
+}
+
+.comment address{
+    grid-column: 2;
+    grid-row: 1;
+    margin-right:15px;
+    white-space: nowrap;
+    overflow:hidden;
+}
+
+.comment .text{
+    grid-column: 2 / span 3;
+    grid-row: 2;
+    white-space: pre-wrap;
+    min-width: 0;
+    word-wrap: break-word;
+}
+
+.comment .permalink{
+    grid-column: 3;
+    grid-row: 1;
+    white-space: nowrap;
+    color: black;
+
+}
+
+
+.comment .likes{
+    grid-column:2;
+    grid-row:3;
+    font-weight:bold;
+    white-space: nowrap;
+}
+
+.comment .bottom-row{
+    grid-column:2 / span 3;
+    grid-row:4;
+    justify-self:start;
+    display: grid;
+    grid-auto-flow: column;
+    grid-column-gap: 10px;
+}
+
+.more-comments{
+    justify-self:center;
+    margin-top:10px;
+}
diff --git a/youtube/static/favicon.ico b/youtube/static/favicon.ico
new file mode 100644
index 0000000..9d6417c
--- /dev/null
+++ b/youtube/static/favicon.ico
diff --git a/youtube/static/shared.css b/youtube/static/shared.css
new file mode 100644
index 0000000..1b25d7f
--- /dev/null
+++ b/youtube/static/shared.css
@@ -0,0 +1,372 @@
+h1, h2, h3, h4, h5, h6, div, button{
+    margin:0;
+    padding:0;
+    
+}
+
+
+body{
+    margin:0;
+    padding: 0;
+    color:#222;
+    
+    
+    background-color:#cccccc;
+    
+    min-height:100vh;
+    
+    display:grid;
+    grid-template-rows: 50px 1fr;
+}
+
+    header{
+        background-color:#333333;
+
+        grid-row: 1;
+
+        display:grid;
+        grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr);
+    }
+
+    main{
+        grid-row: 2;
+    }
+
+address{
+    font-style:normal;
+}
+
+
+
+    #site-search{
+        grid-column: 2;
+        display: grid;
+        grid-template-columns: 1fr auto auto;
+
+    }
+
+        #site-search .search-box{
+            align-self:center;
+            height:25px;
+            border:0;
+            
+            grid-column: 1;
+        }
+        #site-search .search-button{
+            grid-column: 2;
+            align-self:center;
+            height:25px;
+
+            border-style:solid;
+            border-width:1px;
+        }
+        #site-search .dropdown{
+            margin-left:5px;
+            grid-column: 3;
+            align-self:center;
+            height:25px;
+        }
+            #site-search .dropdown button{
+                align-self:center;
+                height:25px;
+
+                border-style:solid;
+                border-width:1px;
+            }
+            #site-search .css-sucks{
+                width:0px;
+                height:0px;
+            }
+                #site-search .dropdown-content{
+                    grid-template-columns: auto auto;
+                    white-space: nowrap;
+                }
+                    #site-search .dropdown-content h3{
+                        grid-column:1 / span 2;
+                    }
+
+.dropdown{
+    z-index:1;
+}
+    .dropdown-content{
+        display:none;
+        background-color: #e9e9e9;
+    }
+    .dropdown:hover .dropdown-content{
+        /* For some reason, if this is just grid, it will insist on being 0px wide just like its 0px by 0px parent */
+        /* making it inline-grid happened to fix it */
+        display:inline-grid;
+    }
+
+
+
+#header-right{
+    grid-column:4;
+    
+    display:grid;
+    grid-template-columns:auto auto auto 1fr;
+    grid-template-rows: 1fr;
+    width: 540px;
+}
+    #playlist-edit{
+        display:contents;
+    }
+        #local-playlists{
+            grid-column: 1;
+            grid-row:1;
+            align-self: center;
+            margin-right:5px;
+            color: #ffffff;
+        }
+        #playlist-name-selection{
+            grid-column:2;
+            grid-row:1;
+            justify-self:start;
+            align-self: center;
+        }
+        #playlist-add-button{
+            grid-column:3;
+            grid-row:1;
+            align-self: center;
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+        #item-selection-reset{
+            grid-column:4;
+            grid-row:1;
+            align-self: center;
+            justify-self:start;
+            padding-left: 10px;
+            padding-right: 10px;
+        }
+
+
+
+.item-list{
+    display: grid;
+    grid-auto-rows: 138px;
+    grid-row-gap: 10px;
+    
+}
+    .item-list .video-thumbnail-box{
+        width:246px;
+    }
+    .item-list .playlist-thumbnail-box{
+        width:246px;
+    }
+
+
+.item-grid{
+    display:grid;
+    grid-template-columns: repeat(auto-fill, 400px);
+    grid-auto-rows: 94px;
+    grid-row-gap: 10px;
+}
+    .item-grid .video-thumbnail-box{
+        width:168px;
+    }
+    .item-grid .playlist-thumbnail-box{
+        width:168px;
+    }
+
+
+
+.medium-item-box{
+
+    display:grid;
+    grid-template-columns: 1fr 30px;
+}
+.medium-item{
+    background-color:#bcbcbc;
+    text-decoration:none;
+    font-size: 12px;
+    color: #767676;
+
+    display: grid;
+    align-content: start;
+    grid-template-columns: auto 1fr auto;
+    grid-template-rows: auto auto auto auto auto 1fr;
+}
+    .medium-item .title{
+        grid-column:2 / span 2;
+        grid-row:1;
+        justify-self:start;
+        min-width: 0;
+        max-height:3.6em;
+        overflow:hidden;
+
+        color: #333;
+        font-size: 16px;
+        font-weight: 500;
+        text-decoration:initial;
+    }
+    .medium-item address{
+        display:inline;
+    }
+    /*.medium-item .views{
+        grid-column: 3;
+        grid-row: 2;
+        justify-self:end;
+    }
+    .medium-item time{
+        grid-column: 2;
+        grid-row: 3;
+        justify-self:start;
+    }*/
+    .medium-item .stats{
+        grid-column: 2 / span 2;
+        grid-row: 2;
+        max-height:2.4em;
+        overflow:hidden;
+    }
+    
+    .medium-item .description{
+        grid-column: 2 / span 2;
+        grid-row: 4;
+    }
+    .medium-item .badges{
+        grid-column: 2 / span 2;
+        grid-row: 5;
+    }
+    /* thumbnail size */
+    .medium-item img{
+        /*height:138px;
+        width:246px;*/
+        height:100%;
+        justify-self:center;
+    }
+
+.small-item-box{
+    color: #767676;
+    font-size: 12px;
+
+    display:grid;
+    grid-template-columns: 1fr 30px;
+    grid-template-rows: 94px;
+}
+
+.small-item{
+    background-color:#bcbcbc;
+    align-content: start;
+    text-decoration:none;
+    
+    display: grid;
+    grid-template-columns: 168px 1fr;
+    grid-column-gap: 5px;
+    grid-template-rows: auto auto auto 1fr;
+}
+    .small-item .title{
+        grid-column:2;
+        grid-row:1;
+        margin:0;
+
+        color: #333;
+        font-size: 16px;
+        font-weight: 500;
+        text-decoration:initial;
+        min-width: 0;
+        justify-self:start;
+
+        overflow:hidden;
+        max-height: 3.3em;
+        line-height: 1.1em;
+    }
+    .small-item address{
+        grid-column: 2;
+        grid-row: 2;
+        justify-self: start;
+    }
+    
+    .small-item .views{
+        grid-column: 2;
+        grid-row: 3;
+        justify-self:start;
+    }
+    /* thumbnail size */
+    .small-item img{
+        /*height:94px;
+        width:168px;*/
+        height:100%;
+        justify-self:center;
+    }
+        
+.item-checkbox{
+    justify-self:start;
+    align-self:center;
+    height:30px;
+    width:30px;
+    
+    grid-column: 2;
+}
+
+/* ---Thumbnails for videos---- */
+.video-thumbnail-box{
+    max-height:100%;
+
+    grid-column:1;
+    grid-row:1 / span 6;
+    
+    display:grid;
+    grid-template-columns: 1fr 0fr;
+}
+    .video-thumbnail-img{
+        grid-column:1 / span 2;
+        grid-row:1;
+    }
+    .video-duration{
+        grid-column: 2;
+        grid-row: 1;
+        align-self: end;
+        opacity: .8;
+        color: #ffffff;
+        font-size: 12px;
+        background-color: #000000;
+    }
+
+/* ---Thumbnails for playlists---- */
+.playlist-thumbnail-box{
+    max-height:100%;
+
+    grid-column:1;
+    grid-row:1 / span 6;
+    
+    display:grid;
+    grid-template-columns: 3fr 2fr;
+}
+    .playlist-thumbnail-img{
+        grid-column:1 / span 2;
+        grid-row:1;
+    }
+    .playlist-thumbnail-info{
+        grid-column:2;
+        grid-row:1;
+        
+        display: grid;
+        align-items:center;
+        
+        text-align:center;
+        white-space: pre-line;
+        opacity: .8;
+        color: #cfcfcf;
+        background-color: #000000;
+    }
+
+.page-button-row{
+    justify-self:center;
+    display: grid;
+    grid-auto-columns: 40px;
+    grid-auto-flow: column; 
+    height: 40px;
+}
+    .page-button{
+        background-color: #e9e9e9;
+        border-style: outset;
+        border-width: 2px;
+        font-weight: bold;
+        text-align: center;
+    }
+.sort-button{
+    background-color: #d0d0d0;
+    padding: 2px;
+    justify-self: start;
+}