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

2 files changed, 230 insertions, 215 deletions

diff --git a/youtube/templates/comments.html b/youtube/templates/comments.html
index 82276b8..20cde4e 100644
--- a/youtube/templates/comments.html
+++ b/youtube/templates/comments.html
@@ -29,21 +29,19 @@
 {% 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>
-            {% endfor %}
-        </div>
-        <div class="comments">
-            {% for comment in comments_info['comments'] %}
-                {{ render_comment(comment, comments_info['include_avatars']) }}
-            {% endfor %}
-        </div>
-        {% 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>
+    <div class="comment-links">
+        {% for link_text, link_url in comments_info['comment_links'] %}
+            <a class="sort-button" href="{{ link_url }}">{{ link_text }}</a>
+        {% endfor %}
+    </div>
+    <div class="comments">
+        {% for comment in comments_info['comments'] %}
+            {{ render_comment(comment, comments_info['include_avatars']) }}
+        {% endfor %}
+    </div>
+    {% if 'more_comments_url' is in comments_info %}
+        <a class="page-button more-comments" href="{{ comments_info['more_comments_url'] }}">More comments</a>
+    {% endif %}
 {% endmacro %}
 
 {% macro comment_posting_box(info) %}
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index c55e94c..4ddf115 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -3,96 +3,88 @@
 {% import "common_elements.html" as common_elements %}
 {% import "comments.html" as comments %}
 {% block style %}
-            main{
-                display:grid;
-                grid-template-columns: 1fr 640px 40px 500px 1fr;
-                background-color:#cccccc;
+    main{
+        display:grid;
+        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;
+
+        }
+        video{
+            height: 360px;
+            width: 640px;
+            grid-column: 2;
+        }
+        .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;
+        }
+            .video-info > .title{
+                grid-column: 1 / span 2;
+                min-width: 0;
             }
-
-            #left{
-                background-color:#bcbcbc;
+            .video-info > .is-unlisted{
+                background-color: #d0d0d0;
+                justify-self:start;
+                padding-left:2px;
+                padding-right:2px;
+            }
+            .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;
+            }
+            .video-info > .likes-dislikes{
+                grid-column: 2;
+                grid-row: 4;
+                justify-self:end;
+            }
+            .video-info > .download-dropdown{
+                grid-column:1;
+                grid-row: 5;
+            }
+            .video-info > .checkbox{
+                justify-self:end;
 
+                grid-row: 5;
+                grid-column: 2;
+            }
+            .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: 6;
+            }
+
+            .music-list{
+                grid-row:7;
+                grid-column: 1 / span 2;
+                background-color: #d0d0d0;
             }
-                .full-item{
-                    display: grid;
-                    grid-column: 2;
-                    grid-template-rows: 0fr 0fr 0fr 0fr 20px 0fr 0fr;
-                    grid-template-columns: 1fr 1fr;
-                    align-content: start;
-                    background-color:#bcbcbc;
-                }
-                    .full-item > video{
-                        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{
-                        background-color: #d0d0d0;
-                        justify-self:start;
-                        padding-left:2px;
-                        padding-right:2px;
-                    }
-                    .full-item > address{
-                        grid-column: 1;
-                        grid-row: 4;
-                        justify-self: start;
-                    }
-                    .full-item > .views{
-                        grid-column: 2;
-                        grid-row: 4;
-                        justify-self:end;
-                    }
-                    .full-item > time{
-                        grid-column: 1;
-                        grid-row: 5;
-                        justify-self:start;
-                    }
-                    .full-item > .likes-dislikes{
-                        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-column: 2;
-                    }
-                    .full-item > .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;
-                    }
-                    .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{
-                    background-color: #d0d0d0;
-                }
                 .music-list table,th,td{
                     border: 1px solid;
                 }
@@ -105,123 +97,148 @@
                     font-weight:bold;
                     margin-bottom:5px;
                 }
-
-                #related{
-                    grid-column: 4;
-                    display: grid;
-                    grid-auto-rows: 94px;
-                    grid-row-gap: 10px;
-                }
-
-            .download-dropdown{
-                z-index:1;
-                justify-self:start;
-                min-width:0px;
-                height:0px;
+        .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;
+        min-width:0px;
+        height:0px;
+    }
+
+        .download-dropdown-label{
+            background-color: #e9e9e9;
+            border-style: outset;
+            border-width: 2px;
+            font-weight: bold;
+        }
+
+        .download-dropdown-content{
+            display:none;
+            background-color: #e9e9e9;
+        }
+        .download-dropdown:hover .download-dropdown-content {
+            display: grid;
+            grid-auto-rows:30px;
+            padding-bottom: 50px;
+        }
+            .download-dropdown-content a{
+                white-space: nowrap;
+                display:grid;
+                grid-template-columns: 60px 90px auto;
+                max-height: 1.2em;
             }
-
-                .download-dropdown-label{
-                    background-color: #e9e9e9;
-                    border-style: outset;
-                    border-width: 2px;
-                    font-weight: bold;
-                }
-
-                .download-dropdown-content{
-                    display:none;
-                    background-color: #e9e9e9;
-                }
-                .download-dropdown:hover .download-dropdown-content {
-                    display: grid;
-                    grid-auto-rows:30px;
-                    padding-bottom: 50px;
-                }
-                    .download-dropdown-content a{
-                        white-space: nowrap;
-                        display:grid;
-                        grid-template-columns: 60px 90px auto;
-                        max-height: 1.2em;
-                    }
 {% endblock style %}
 
 {% block main %}
-                <div id="left">
-                </div>
-                <article class="full-item">
-
-                    <video width="640" height="360" controls autofocus>
-{% for video_source in video_sources %}
-                        <source src="{{ video_source['src'] }}" type="{{ video_source['type'] }}">
-{% endfor %}
-
-{% for source in subtitle_sources %}
-    {% if source['on'] %}
-                        <track label="{{ source['label'] }}" src="{{ source['url'] }}" kind="subtitles" srclang="{{ source['srclang'] }}" default>
-    {% else %}
-                        <track label="{{ source['label'] }}" src="{{ source['url'] }}" kind="subtitles" srclang="{{ source['srclang'] }}">
-    {% endif %}
-{% endfor %}
-
-                    </video>
-
-                    <h2 class="title">{{ title }}</h2>
-{% if unlisted %}
-                    <span class="is-unlisted">Unlisted</span>
-{% endif %}
-                    <address>Uploaded by <a href="{{ uploader_channel_url }}">{{ uploader }}</a></address>
-                    <span class="views">{{ views }} views</span>
-
-
-                    <time datetime="$upload_date">Published on {{ upload_date }}</time>
-                    <span class="likes-dislikes">{{ likes }} likes {{ dislikes }} dislikes</span>
-                    <div class="download-dropdown">
-                        <button class="download-dropdown-label">Download</button>
-                        <div class="download-dropdown-content">
-{% for format in download_formats %}
-                            <a href="{{ format['url'] }}">
-                                <span>{{ format['ext'] }}</span>
-                                <span>{{ format['resolution'] }}</span>
-                                <span>{{ format['note'] }}</span>
-                            </a>
-{% endfor %}
-                        </div>
-                    </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 %}
-                            <hr>
-                            <table>
-                                <caption>Music</caption>
-                                <tr>
-                                    {% for attribute in music_attributes %}
-                                        <th>{{ attribute }}</th>
-                                    {% endfor %}
-                                </tr>
-                                {% for track in music_list %}
-                                    <tr>
-                                        {% for attribute in music_attributes %}
-                                            <td>{{ track.get(attribute.lower(), '') }}</td>
-                                        {% endfor %}
-                                    </tr>
-                                {% endfor %}
-                            </table>
-                        {% endif %}
-                    </div>
-
-                {% if comments_info %}
-                    {{ comments.video_comments(comments_info) }}
-                {% endif %}
-                </article>
-
-
-
-
-                <nav id="related">
-                    {% for info in related %}
-                        {{ common_elements.item(info) }}
+    <div id="left">
+    </div>
+
+    <video controls autofocus>
+        {% for video_source in video_sources %}
+            <source src="{{ video_source['src'] }}" type="{{ video_source['type'] }}">
+        {% endfor %}
+
+        {% for source in subtitle_sources %}
+            {% if source['on'] %}
+                <track label="{{ source['label'] }}" src="{{ source['url'] }}" kind="subtitles" srclang="{{ source['srclang'] }}" default>
+            {% else %}
+                <track label="{{ source['label'] }}" src="{{ source['url'] }}" kind="subtitles" srclang="{{ source['srclang'] }}">
+            {% endif %}
+        {% endfor %}
+
+    </video>
+
+    <div class="video-info">
+        <h2 class="title">{{ title }}</h2>
+        {% if unlisted %}
+            <span class="is-unlisted">Unlisted</span>
+        {% endif %}
+        <address>Uploaded by <a href="{{ uploader_channel_url }}">{{ uploader }}</a></address>
+        <span class="views">{{ views }} views</span>
+
+
+        <time datetime="$upload_date">Published on {{ upload_date }}</time>
+        <span class="likes-dislikes">{{ likes }} likes {{ dislikes }} dislikes</span>
+        <div class="download-dropdown">
+            <button class="download-dropdown-label">Download</button>
+            <div class="download-dropdown-content">
+                {% for format in download_formats %}
+                    <a href="{{ format['url'] }}">
+                        <span>{{ format['ext'] }}</span>
+                        <span>{{ format['resolution'] }}</span>
+                        <span>{{ format['note'] }}</span>
+                    </a>
+                {% endfor %}
+            </div>
+        </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 %}
+                <hr>
+                <table>
+                    <caption>Music</caption>
+                    <tr>
+                        {% for attribute in music_attributes %}
+                            <th>{{ attribute }}</th>
+                        {% endfor %}
+                    </tr>
+                    {% for track in music_list %}
+                        <tr>
+                            {% for attribute in music_attributes %}
+                                <td>{{ track.get(attribute.lower(), '') }}</td>
+                            {% endfor %}
+                        </tr>
                     {% endfor %}
-                </nav>
-
+                </table>
+            {% endif %}
+        </div>
+    </div>
+
+    <nav id="related">
+        {% for info in related %}
+            {{ common_elements.item(info) }}
+        {% endfor %}
+    </nav>
+
+    <section class="comments-area">
+        {% if comments_info %}
+            {{ comments.video_comments(comments_info) }}
+        {% endif %}
+    </section>
 {% endblock main %}