Layout: add option to hide comments/related vids by default but click to show using <details>

youtube/static/shared.css

@@ -102,6 +102,7 @@ body{
 
     main{
         flex-grow: 1;
+        padding-bottom: 20px;
     }
 
 

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{
+        .related-videos-outer{
-            margin-top: 10px;
             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-content{
-    .download-dropdown-label{
         background-color: #dadada;
-        border-style: outset;
+        padding: 10px;
-        border-width: 2px;
+        list-style: none;
-        font-weight: bold;
+        margin: 0px;
-        padding-bottom: 2px;
     }
-    .download-dropdown-label:hover{
+        li.download-format{
-        text-decoration: underline;
+            margin-bottom: 7px;
-    }
-        .download-dropdown-content{
-            background-color: #dadada;
-            padding: 10px;
-            list-style: none;
-            margin: 0px;
         }
-            li.download-format{
+            .format-attributes{
-                margin-bottom: 7px;
+                list-style: none;
+                padding: 0px;
+                margin: 0px;
+                display: flex;
+                flex-direction: row;
             }
-                .format-attributes{
+                .format-attributes li{
-                    list-style: none;
+                    white-space: nowrap;
-                    padding: 0px;
+                    max-height: 1.2em;
-                    margin: 0px;
+                }
-                    display: flex;
+                .format-ext{
-                    flex-direction: row;
+                    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">
+    {% if related_videos_mode != 0 %}
-        {% for info in related %}
+        <details class="related-videos-outer" {{'open' if related_videos_mode == 1 else ''}}>
-            {{ common_elements.item(info) }}
+            <summary>Related Videos</summary>
-        {% endfor %}
+            <nav class="related-videos-inner">
-    </nav>
+                {% for info in related %}
+                    {{ common_elements.item(info) }}
+                {% endfor %}
+            </nav>
+        </details>
+    {% endif %}
 
-    <section class="comments-area">
+    {% if comments_mode != 0 %}
-        {% if comments_info %}
+        <details class="comments-area-outer" {{'open' if comments_mode == 1 else ''}}>
-            {{ comments.video_comments(comments_info) }}
+            <summary>Comments</summary>
-        {% endif %}
+            <section class="comments-area-inner comments-area">
-    </section>
+                {% if comments_info %}
+                    {{ comments.video_comments(comments_info) }}
+                {% endif %}
+            </section>
+        </details>
+    {% endif %}
 {% endblock main %}

youtube/watch.py

@@ -217,6 +217,9 @@ def get_watch_page():
         comments_info           = comments_info,
 
         theater_mode            = settings.theater_mode,
+        related_videos_mode     = settings.related_videos_mode,
+        comments_mode           = settings.comments_mode,
+
         video_height            = video_height,
 
         title       = info['title'],