From 85572c94de77f4a51d5b64e44c6b50cbe200c946 Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Fri, 23 Aug 2019 14:48:00 -0700
Subject: Layout: refactor item system to be more maintainable, add vertical
 item type

---
 youtube/templates/watch.html | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

(limited to 'youtube/templates/watch.html')

diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 82c1a97..27f9e96 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -109,12 +109,9 @@
                 #related{
                     grid-column: 4;
                     display: grid;
-                    grid-auto-rows: 90px;
+                    grid-auto-rows: 94px;
                     grid-row-gap: 10px;
                 }
-                    #related .medium-item{
-                        grid-template-columns: 160px 1fr 0fr;
-                    }
 
             .download-dropdown{
                 z-index:1;
-- 
cgit v1.2.3


From 102c21132a4ecb29641c70fb2d46aff19638e9da Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Fri, 23 Aug 2019 15:37:40 -0700
Subject: Layout: simplify watch page space distribution on edges

---
 youtube/templates/watch.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'youtube/templates/watch.html')

diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 27f9e96..c55e94c 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -5,7 +5,7 @@
 {% block style %}
             main{
                 display:grid;
-                grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr);
+                grid-template-columns: 1fr 640px 40px 500px 1fr;
                 background-color:#cccccc;
             }
 
-- 
cgit v1.2.3


From d9517a33223d44f2c52f03a48cf79822ecd433a4 Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Fri, 23 Aug 2019 19:24:42 -0700
Subject: Layout: Put related videos below video when page is too small

---
 youtube/templates/watch.html | 417 ++++++++++++++++++++++---------------------
 1 file changed, 217 insertions(+), 200 deletions(-)

(limited to 'youtube/templates/watch.html')

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 %}
-- 
cgit v1.2.3


From f2eb35419769629bfc8c4d7a7f545b8cb5c37c3f Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Sat, 24 Aug 2019 11:51:41 -0700
Subject: Layout: Simplify color scheme

---
 youtube/templates/watch.html | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

(limited to 'youtube/templates/watch.html')

diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 4ddf115..ccb03e3 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -8,14 +8,7 @@
         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;
@@ -28,14 +21,13 @@
             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;
             }
             .video-info > .is-unlisted{
-                background-color: #d0d0d0;
+                background-color: #dadada;
                 justify-self:start;
                 padding-left:2px;
                 padding-right:2px;
@@ -71,7 +63,7 @@
                 grid-column: 2;
             }
             .video-info > .description{
-                background-color:#d0d0d0;
+                background-color:#dadada;
                 margin-top:8px;
                 white-space: pre-wrap;
                 min-width: 0;
@@ -83,7 +75,7 @@
             .music-list{
                 grid-row:7;
                 grid-column: 1 / span 2;
-                background-color: #d0d0d0;
+                background-color: #dadada;
             }
                 .music-list table,th,td{
                     border: 1px solid;
@@ -101,7 +93,6 @@
             grid-column: 2;
             grid-row: 3;
             padding-top:10px;
-            background-color:#bcbcbc;
         }
             .comment{
                 width:640px;
@@ -122,6 +113,7 @@
             grid-template-columns: 1fr 640px 40px 1fr;
         }
         #related{
+            margin-top: 10px;
             grid-column: 2;
             grid-row: 3;
         }
@@ -163,9 +155,6 @@
 {% endblock style %}
 
 {% block main %}
-    <div id="left">
-    </div>
-
     <video controls autofocus>
         {% for video_source in video_sources %}
             <source src="{{ video_source['src'] }}" type="{{ video_source['type'] }}">
-- 
cgit v1.2.3


From fa2fa7fe16eabd0f62b6fe5bd3953b60715bbabb Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Sat, 24 Aug 2019 12:43:58 -0700
Subject: Layout: Add theater mode

---
 youtube/templates/watch.html | 34 ++++++++++++++++++++++++++++------
 1 file changed, 28 insertions(+), 6 deletions(-)

(limited to 'youtube/templates/watch.html')

diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index ccb03e3..3421059 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -3,17 +3,39 @@
 {% import "common_elements.html" as common_elements %}
 {% import "comments.html" as comments %}
 {% block style %}
+    {% if theater_mode %}
+        video{
+            grid-column: 1 / span 5;
+            width: 100%;
+            max-height: 360px;
+        }
+        #related{
+            margin-top: 10px;
+            grid-row: 2 /span 3;
+            width: 400px;
+        }
+        .video-info{
+            margin-top: 10px;
+            width: 640px;
+        }
+    {% else %}
+        video{
+            height: 360px;
+            width: 640px;
+            grid-column: 2;
+        }
+        #related{
+            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;
     }
-        video{
-            height: 360px;
-            width: 640px;
-            grid-column: 2;
-        }
+
         .video-info{
             grid-column: 2;
             grid-row: 2;
@@ -99,7 +121,6 @@
             }
         #related{
             grid-column: 4;
-            grid-row: 1 /span 4;
             display: grid;
             grid-auto-rows: 94px;
             grid-row-gap: 10px;
@@ -116,6 +137,7 @@
             margin-top: 10px;
             grid-column: 2;
             grid-row: 3;
+            width: initial;
         }
         .comments-area{
             grid-row: 4;
-- 
cgit v1.2.3


From d9fbf82bb23b848726eace7354444f16e17a36f8 Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Sat, 24 Aug 2019 13:35:11 -0700
Subject: Layout: Add option to use 720p resolution

---
 youtube/templates/watch.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'youtube/templates/watch.html')

diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 3421059..a555882 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -7,7 +7,7 @@
         video{
             grid-column: 1 / span 5;
             width: 100%;
-            max-height: 360px;
+            max-height: {{ video_height }}px;
         }
         #related{
             margin-top: 10px;
-- 
cgit v1.2.3


From 943e1cd7512799c217451b33118b72b66b95b1be Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Sat, 24 Aug 2019 14:25:11 -0700
Subject: Layout: Make downloads click-to-show instead of hover-to-show using
 <details> element

---
 youtube/templates/watch.html | 90 +++++++++++++++++++++++++-------------------
 1 file changed, 51 insertions(+), 39 deletions(-)

(limited to 'youtube/templates/watch.html')

diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index a555882..3716d6f 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -75,11 +75,12 @@
                 justify-self:end;
             }
             .video-info > .download-dropdown{
-                grid-column:1;
-                grid-row: 5;
+                grid-column:1 / span 2;
+                grid-row: 6;
             }
             .video-info > .checkbox{
                 justify-self:end;
+                align-self: start;
 
                 grid-row: 5;
                 grid-column: 2;
@@ -91,11 +92,11 @@
                 min-width: 0;
                 word-wrap: break-word;
                 grid-column: 1 / span 2;
-                grid-row: 6;
+                grid-row: 7;
             }
 
             .music-list{
-                grid-row:7;
+                grid-row:8;
                 grid-column: 1 / span 2;
                 background-color: #dadada;
             }
@@ -145,35 +146,42 @@
     }
 
 
-    .download-dropdown{
-        z-index:1;
-        justify-self:start;
-        min-width:0px;
-        height:0px;
+    .download-dropdown-label{
+        background-color: #dadada;
+        border-style: outset;
+        border-width: 2px;
+        font-weight: bold;
+        padding-bottom: 2px;
+    }
+    .download-dropdown-label:hover{
+        text-decoration: underline;
     }
-
-        .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;
+            background-color: #dadada;
+            padding: 10px;
+            list-style: none;
+            margin: 0px;
         }
-            .download-dropdown-content a{
-                white-space: nowrap;
-                display:grid;
-                grid-template-columns: 60px 90px auto;
-                max-height: 1.2em;
+            li.download-format{
+                margin-bottom: 7px;
             }
+                .format-attributes{
+                    list-style: none;
+                    padding: 0px;
+                    margin: 0px;
+                    display: flex;
+                    flex-direction: row;
+                }
+                    .format-attributes li{
+                        white-space: nowrap;
+                        max-height: 1.2em;
+                    }
+                    .format-ext{
+                        width: 60px;
+                    }
+                    .format-res{
+                        width:90px;
+                    }
 {% endblock style %}
 
 {% block main %}
@@ -203,18 +211,22 @@
 
         <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">
+        <details class="download-dropdown">
+            <summary class="download-dropdown-label">Download</summary>
+            <ul 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>
+                    <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 %}
-            </div>
-        </div>
+            </ul>
+        </details>
         <input class="checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox">
 
 
-- 
cgit v1.2.3


From cb5f36581d74c22b6a0705dedf6acf40b6e052db Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Sat, 24 Aug 2019 16:45:01 -0700
Subject: Layout: add option to hide comments/related vids by default but click
 to show using <details>

---
 youtube/templates/watch.html | 119 ++++++++++++++++++++++++-------------------
 1 file changed, 67 insertions(+), 52 deletions(-)

(limited to 'youtube/templates/watch.html')

diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 3716d6f..0b33dd7 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -3,19 +3,29 @@
 {% import "common_elements.html" as common_elements %}
 {% import "comments.html" as comments %}
 {% block style %}
+    details > summary{
+        background-color: #dadada;
+        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;
             width: 100%;
             max-height: {{ video_height }}px;
+            margin-bottom: 10px;
         }
-        #related{
-            margin-top: 10px;
+        .related-videos-outer{
             grid-row: 2 /span 3;
             width: 400px;
         }
         .video-info{
-            margin-top: 10px;
             width: 640px;
         }
     {% else %}
@@ -24,7 +34,7 @@
             width: 640px;
             grid-column: 2;
         }
-        #related{
+        .related-videos-outer{
             grid-row: 1 /span 4;
         }
     {% endif %}
@@ -112,20 +122,26 @@
                     font-weight:bold;
                     margin-bottom:5px;
                 }
-        .comments-area{
+        .comments-area-outer{
             grid-column: 2;
             grid-row: 3;
-            padding-top:10px;
+            margin-top:10px;
+        }
+        .comments-area-inner{
+            padding-top: 10px;
         }
             .comment{
                 width:640px;
             }
-        #related{
+        .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;
-            max-width: 640px;
         }
 
     /* Put related vids below videos when window is too small */
@@ -134,54 +150,43 @@
         main{
             grid-template-columns: 1fr 640px 40px 1fr;
         }
-        #related{
+        .related-videos-outer{
             margin-top: 10px;
             grid-column: 2;
             grid-row: 3;
             width: initial;
         }
-        .comments-area{
+        .comments-area-outer{
             grid-row: 4;
         }
     }
 
-
-    .download-dropdown-label{
+    .download-dropdown-content{
         background-color: #dadada;
-        border-style: outset;
-        border-width: 2px;
-        font-weight: bold;
-        padding-bottom: 2px;
+        padding: 10px;
+        list-style: none;
+        margin: 0px;
     }
-    .download-dropdown-label:hover{
-        text-decoration: underline;
-    }
-        .download-dropdown-content{
-            background-color: #dadada;
-            padding: 10px;
-            list-style: none;
-            margin: 0px;
+        li.download-format{
+            margin-bottom: 7px;
         }
-            li.download-format{
-                margin-bottom: 7px;
+            .format-attributes{
+                list-style: none;
+                padding: 0px;
+                margin: 0px;
+                display: flex;
+                flex-direction: row;
             }
-                .format-attributes{
-                    list-style: none;
-                    padding: 0px;
-                    margin: 0px;
-                    display: flex;
-                    flex-direction: row;
+                .format-attributes li{
+                    white-space: nowrap;
+                    max-height: 1.2em;
+                }
+                .format-ext{
+                    width: 60px;
+                }
+                .format-res{
+                    width:90px;
                 }
-                    .format-attributes li{
-                        white-space: nowrap;
-                        max-height: 1.2em;
-                    }
-                    .format-ext{
-                        width: 60px;
-                    }
-                    .format-res{
-                        width:90px;
-                    }
 {% endblock style %}
 
 {% block main %}
@@ -253,15 +258,25 @@
         </div>
     </div>
 
-    <nav id="related">
-        {% for info in related %}
-            {{ common_elements.item(info) }}
-        {% endfor %}
-    </nav>
+    {% 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 %}
 
-    <section class="comments-area">
-        {% if comments_info %}
-            {{ comments.video_comments(comments_info) }}
-        {% endif %}
-    </section>
+    {% 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 %}
-- 
cgit v1.2.3


From 3d911e4987ef9768702729e60d51cb872700a716 Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Sat, 24 Aug 2019 17:55:14 -0700
Subject: Layout: Theater layout: Expand video width across page only as
 necessary based on length of video

---
 youtube/templates/watch.html | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'youtube/templates/watch.html')

diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 0b33dd7..745acdb 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -17,9 +17,12 @@
     {% if theater_mode %}
         video{
             grid-column: 1 / span 5;
-            width: 100%;
+            justify-self: center;
+            max-width: 100%;
+            width: {{ theater_video_target_width }}px;
             max-height: {{ video_height }}px;
             margin-bottom: 10px;
+            background-color: #bcbcbc;
         }
         .related-videos-outer{
             grid-row: 2 /span 3;
-- 
cgit v1.2.3


From e9b16ef71fc25f12e26da79392fa91ae30aabe5d Mon Sep 17 00:00:00 2001
From: James Taylor <user234683@users.noreply.github.com>
Date: Sun, 25 Aug 2019 15:25:24 -0700
Subject: Layout: Add themes

---
 youtube/templates/watch.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

(limited to 'youtube/templates/watch.html')

diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
index 745acdb..14e953b 100644
--- a/youtube/templates/watch.html
+++ b/youtube/templates/watch.html
@@ -4,7 +4,7 @@
 {% import "comments.html" as comments %}
 {% block style %}
     details > summary{
-        background-color: #dadada;
+        background-color: var(--interface-color);
         border-style: outset;
         border-width: 2px;
         font-weight: bold;
@@ -22,7 +22,7 @@
             width: {{ theater_video_target_width }}px;
             max-height: {{ video_height }}px;
             margin-bottom: 10px;
-            background-color: #bcbcbc;
+            background-color: var(--background-color);
         }
         .related-videos-outer{
             grid-row: 2 /span 3;
@@ -62,7 +62,7 @@
                 min-width: 0;
             }
             .video-info > .is-unlisted{
-                background-color: #dadada;
+                background-color: var(--interface-color);
                 justify-self:start;
                 padding-left:2px;
                 padding-right:2px;
@@ -99,7 +99,7 @@
                 grid-column: 2;
             }
             .video-info > .description{
-                background-color:#dadada;
+                background-color:var(--interface-color);
                 margin-top:8px;
                 white-space: pre-wrap;
                 min-width: 0;
@@ -111,7 +111,7 @@
             .music-list{
                 grid-row:8;
                 grid-column: 1 / span 2;
-                background-color: #dadada;
+                background-color: var(--interface-color);
             }
                 .music-list table,th,td{
                     border: 1px solid;
@@ -165,7 +165,7 @@
     }
 
     .download-dropdown-content{
-        background-color: #dadada;
+        background-color: var(--interface-color);
         padding: 10px;
         list-style: none;
         margin: 0px;
-- 
cgit v1.2.3