Merge branch 'layout'

1 files changed, 247 insertions, 192 deletions

diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 82c1a97..14e953b 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -3,96 +3,116 @@
 {% import "common_elements.html" as common_elements %}
 {% import "comments.html" as comments %}
 {% block style %}
-            main{
-                display:grid;
-                grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr);
-                background-color:#cccccc;
-            }
+    details > summary{
+        background-color: var(--interface-color);
+        border-style: outset;
+        border-width: 2px;
+        font-weight: bold;
+        padding-bottom: 2px;
+    }
+    details > summary:hover{
+        text-decoration: underline;
+    }
+
+    {% if theater_mode %}
+        video{
+            grid-column: 1 / span 5;
+            justify-self: center;
+            max-width: 100%;
+            width: {{ theater_video_target_width }}px;
+            max-height: {{ video_height }}px;
+            margin-bottom: 10px;
+            background-color: var(--background-color);
+        }
+        .related-videos-outer{
+            grid-row: 2 /span 3;
+            width: 400px;
+        }
+        .video-info{
+            width: 640px;
+        }
+    {% else %}
+        video{
+            height: 360px;
+            width: 640px;
+            grid-column: 2;
+        }
+        .related-videos-outer{
+            grid-row: 1 /span 4;
+        }
+    {% endif %}
+
+    main{
+        display:grid;
+        grid-template-columns: 1fr 640px 40px 400px 1fr;
+        grid-template-rows: auto auto auto auto;
+        align-content: start;
+    }
 
-            #left{
-                background-color:#bcbcbc;
+        .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;
+        }
+            .video-info > .title{
+                grid-column: 1 / span 2;
+                min-width: 0;
+            }
+            .video-info > .is-unlisted{
+                background-color: var(--interface-color);
+                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 / span 2;
+                grid-row: 6;
+            }
+            .video-info > .checkbox{
+                justify-self:end;
+                align-self: start;
 
+                grid-row: 5;
+                grid-column: 2;
+            }
+            .video-info > .description{
+                background-color:var(--interface-color);
+                margin-top:8px;
+                white-space: pre-wrap;
+                min-width: 0;
+                word-wrap: break-word;
+                grid-column: 1 / span 2;
+                grid-row: 7;
+            }
+
+            .music-list{
+                grid-row:8;
+                grid-column: 1 / span 2;
+                background-color: var(--interface-color);
             }
-                .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,126 +125,161 @@
                     font-weight:bold;
                     margin-bottom:5px;
                 }
+        .comments-area-outer{
+            grid-column: 2;
+            grid-row: 3;
+            margin-top:10px;
+        }
+        .comments-area-inner{
+            padding-top: 10px;
+        }
+            .comment{
+                width:640px;
+            }
+        .related-videos-outer{
+            grid-column: 4;
+            max-width: 640px;
+        }
+        .related-videos-inner{
+            padding-top: 10px;
+            display: grid;
+            grid-auto-rows: 94px;
+            grid-row-gap: 10px;
+        }
 
-                #related{
-                    grid-column: 4;
-                    display: grid;
-                    grid-auto-rows: 90px;
-                    grid-row-gap: 10px;
-                }
-                    #related .medium-item{
-                        grid-template-columns: 160px 1fr 0fr;
-                    }
+    /* 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-videos-outer{
+            margin-top: 10px;
+            grid-column: 2;
+            grid-row: 3;
+            width: initial;
+        }
+        .comments-area-outer{
+            grid-row: 4;
+        }
+    }
 
-            .download-dropdown{
-                z-index:1;
-                justify-self:start;
-                min-width:0px;
-                height:0px;
+    .download-dropdown-content{
+        background-color: var(--interface-color);
+        padding: 10px;
+        list-style: none;
+        margin: 0px;
+    }
+        li.download-format{
+            margin-bottom: 7px;
+        }
+            .format-attributes{
+                list-style: none;
+                padding: 0px;
+                margin: 0px;
+                display: flex;
+                flex-direction: row;
             }
-
-                .download-dropdown-label{
-                    background-color: #e9e9e9;
-                    border-style: outset;
-                    border-width: 2px;
-                    font-weight: bold;
+                .format-attributes li{
+                    white-space: nowrap;
+                    max-height: 1.2em;
                 }
-
-                .download-dropdown-content{
-                    display:none;
-                    background-color: #e9e9e9;
+                .format-ext{
+                    width: 60px;
                 }
-                .download-dropdown:hover .download-dropdown-content {
-                    display: grid;
-                    grid-auto-rows:30px;
-                    padding-bottom: 50px;
+                .format-res{
+                    width:90px;
                 }
-                    .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>
+    <video controls autofocus>
+        {% for video_source in video_sources %}
+            <source src="{{ video_source['src'] }}" type="{{ video_source['type'] }}">
+        {% endfor %}
 
-                {% if comments_info %}
-                    {{ comments.video_comments(comments_info) }}
-                {% endif %}
-                </article>
+        {% 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>
+        <details class="download-dropdown">
+            <summary class="download-dropdown-label">Download</summary>
+            <ul class="download-dropdown-content">
+                {% for format in download_formats %}
+                    <li class="download-format">
+                        <a class="download-link" href="{{ format['url'] }}">
+                            <ol class="format-attributes">
+                                <li class="format-ext">{{ format['ext'] }}</li>
+                                <li class="format-res">{{ format['resolution'] }}</li>
+                                <li class="format-note">{{ format['note'] }}</li>
+                            </ol>
+                        </a>
+                    </li>
+                {% endfor %}
+            </ul>
+        </details>
+        <input class="checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox">
 
 
-                <nav id="related">
-                    {% for info in related %}
-                        {{ common_elements.item(info) }}
+        <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>
+
+    {% if related_videos_mode != 0 %}
+        <details class="related-videos-outer" {{'open' if related_videos_mode == 1 else ''}}>
+            <summary>Related Videos</summary>
+            <nav class="related-videos-inner">
+                {% for info in related %}
+                    {{ common_elements.item(info) }}
+                {% endfor %}
+            </nav>
+        </details>
+    {% endif %}
 
+    {% if comments_mode != 0 %}
+        <details class="comments-area-outer" {{'open' if comments_mode == 1 else ''}}>
+            <summary>Comments</summary>
+            <section class="comments-area-inner comments-area">
+                {% if comments_info %}
+                    {{ comments.video_comments(comments_info) }}
+                {% endif %}
+            </section>
+        </details>
+    {% endif %}
 {% endblock main %}