aboutsummaryrefslogtreecommitdiffstats
path: root/youtube
diff options
context:
space:
mode:
Diffstat (limited to 'youtube')
-rw-r--r--youtube/templates/comments.html28
-rw-r--r--youtube/templates/watch.html417
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 %}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 03:38:41 +0000