Layout: Put related videos below video when page is too small

youtube/templates/comments.html

@@ -29,7 +29,6 @@
 {% endmacro %}
 
 {% macro video_comments(comments_info) %}
-    <section class="comments-area">
     <div class="comment-links">
         {% for link_text, link_url in comments_info['comment_links'] %}
             <a class="sort-button" href="{{ link_url }}">{{ link_text }}</a>
@@ -43,7 +42,6 @@
     {% if 'more_comments_url' is in comments_info %}
         <a class="page-button more-comments" href="{{ comments_info['more_comments_url'] }}">More comments</a>
     {% endif %}
-    </section>
 {% endmacro %}
 
 {% macro comment_posting_box(info) %}

youtube/templates/watch.html

@@ -5,92 +5,84 @@
 {% block style %}
     main{
         display:grid;
-                grid-template-columns: 1fr 640px 40px 500px 1fr;
+        grid-template-columns: 1fr 640px 40px 400px 1fr;
+        grid-template-rows: auto auto auto auto;
+        align-content: start;
         background-color:#cccccc;
     }
-
         #left{
             background-color:#bcbcbc;
             grid-column: 1;
+            grid-row: 1 / span 3;
 
         }
-                .full-item{
+        video{
-                    display: grid;
+            height: 360px;
+            width: 640px;
             grid-column: 2;
-                    grid-template-rows: 0fr 0fr 0fr 0fr 20px 0fr 0fr;
+        }
+        .video-info{
+            grid-column: 2;
+            grid-row: 2;
+            display: grid;
+            grid-template-rows: 0fr 0fr 0fr 20px 0fr 0fr;
             grid-template-columns: 1fr 1fr;
             align-content: start;
             background-color:#bcbcbc;
         }
-                    .full-item > video{
+            .video-info > .title{
                 grid-column: 1 / span 2;
-                        grid-row: 1;
-                    }
-                    .full-item > .title{
-                        grid-column: 1 / span 2;
-                        grid-row:2;
                 min-width: 0;
             }
-                    .full-item > .is-unlisted{
+            .video-info > .is-unlisted{
                 background-color: #d0d0d0;
                 justify-self:start;
                 padding-left:2px;
                 padding-right:2px;
             }
-                    .full-item > address{
+            .video-info > address{
+                grid-column: 1;
+                grid-row: 3;
+                justify-self: start;
+            }
+            .video-info > .views{
+                grid-column: 2;
+                grid-row: 3;
+                justify-self:end;
+            }
+            .video-info > time{
                 grid-column: 1;
                 grid-row: 4;
                 justify-self:start;
             }
-                    .full-item > .views{
+            .video-info > .likes-dislikes{
                 grid-column: 2;
                 grid-row: 4;
                 justify-self:end;
             }
-                    .full-item > time{
+            .video-info > .download-dropdown{
                 grid-column:1;
                 grid-row: 5;
-                        justify-self:start;
             }
-                    .full-item > .likes-dislikes{
+            .video-info > .checkbox{
-                        grid-column: 2;
-                        grid-row: 5;
-                        justify-self:end;
-                    }
-                    .full-item > .download-dropdown{
-                        grid-column:1;
-                        grid-row: 6;
-                    }
-                    .full-item > .checkbox{
                 justify-self:end;
 
-                        grid-row: 6;
+                grid-row: 5;
                 grid-column: 2;
             }
-                    .full-item > .description{
+            .video-info > .description{
                 background-color:#d0d0d0;
                 margin-top:8px;
                 white-space: pre-wrap;
                 min-width: 0;
                 word-wrap: break-word;
                 grid-column: 1 / span 2;
-                        grid-row: 7;
+                grid-row: 6;
-                    }
-                    .full-item .music-list{
-                        grid-row:8;
-                        grid-column: 1 / span 2;
-                    }
-
-                    .full-item .comments-area{
-                        grid-column: 1 / span 2;
-                        grid-row: 9;
-                        margin-top:10px;
-                    }
-                        .comment{
-                            width:640px;
             }
 
             .music-list{
+                grid-row:7;
+                grid-column: 1 / span 2;
                 background-color: #d0d0d0;
             }
                 .music-list table,th,td{
@@ -105,14 +97,40 @@
                     font-weight:bold;
                     margin-bottom:5px;
                 }
-
+        .comments-area{
+            grid-column: 2;
+            grid-row: 3;
+            padding-top:10px;
+            background-color:#bcbcbc;
+        }
+            .comment{
+                width:640px;
+            }
         #related{
             grid-column: 4;
+            grid-row: 1 /span 4;
             display: grid;
             grid-auto-rows: 94px;
             grid-row-gap: 10px;
+            max-width: 640px;
         }
 
+    /* Put related vids below videos when window is too small */
+    /* 1100px instead of 1080 because W3C is full of idiots who include scrollbar width */
+    @media (max-width:1100px){
+        main{
+            grid-template-columns: 1fr 640px 40px 1fr;
+        }
+        #related{
+            grid-column: 2;
+            grid-row: 3;
+        }
+        .comments-area{
+            grid-row: 4;
+        }
+    }
+
+
     .download-dropdown{
         z-index:1;
         justify-self:start;
@@ -147,9 +165,8 @@
 {% block main %}
     <div id="left">
     </div>
-                <article class="full-item">
 
-                    <video width="640" height="360" controls autofocus>
+    <video controls autofocus>
         {% for video_source in video_sources %}
             <source src="{{ video_source['src'] }}" type="{{ video_source['type'] }}">
         {% endfor %}
@@ -164,6 +181,7 @@
 
     </video>
 
+    <div class="video-info">
         <h2 class="title">{{ title }}</h2>
         {% if unlisted %}
             <span class="is-unlisted">Unlisted</span>
@@ -188,6 +206,7 @@
         </div>
         <input class="checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox">
 
+
         <span class="description">{{ description }}</span>
         <div class="music-list">
             {% if music_list.__len__() != 0 %}
@@ -209,14 +228,7 @@
                 </table>
             {% endif %}
         </div>
-
+    </div>
-                {% if comments_info %}
-                    {{ comments.video_comments(comments_info) }}
-                {% endif %}
-                </article>
-
-
-
 
     <nav id="related">
         {% for info in related %}
@@ -224,4 +236,9 @@
         {% endfor %}
     </nav>
 
+    <section class="comments-area">
+        {% if comments_info %}
+            {{ comments.video_comments(comments_info) }}
+        {% endif %}
+    </section>
 {% endblock main %}