aboutsummaryrefslogtreecommitdiffstats
path: root/youtube
diff options
context:
space:
mode:
Diffstat (limited to 'youtube')
-rw-r--r--youtube/static/shared.css3
-rw-r--r--youtube/templates/comments_page.html83
-rw-r--r--youtube/templates/delete_comment.html8
-rw-r--r--youtube/templates/local_playlist.html50
-rw-r--r--youtube/templates/login.html13
-rw-r--r--youtube/templates/playlist.html121
-rw-r--r--youtube/templates/post_comment.html23
-rw-r--r--youtube/templates/search.html32
8 files changed, 121 insertions, 212 deletions
diff --git a/youtube/static/shared.css b/youtube/static/shared.css
index 382f86c..611cdb7 100644
--- a/youtube/static/shared.css
+++ b/youtube/static/shared.css
@@ -267,7 +267,10 @@ body{
.page-button-row{
+ margin-top: 10px;
+ margin-bottom: 10px;
justify-self:center;
+ justify-content: center;
display: grid;
grid-auto-columns: 40px;
grid-auto-flow: column;
diff --git a/youtube/templates/comments_page.html b/youtube/templates/comments_page.html
index 68c8537..047404a 100644
--- a/youtube/templates/comments_page.html
+++ b/youtube/templates/comments_page.html
@@ -3,63 +3,46 @@
{% import "comments.html" as comments %}
{% block style %}
- main{
- display:grid;
- grid-template-columns: 3fr 2fr;
+ .comments-area{
+ margin: auto;
+ width:640px;
}
- #left{
- background-color:#bcbcbc;
-
- display: grid;
- grid-column: 1;
- grid-row: 1;
- grid-template-columns: 1fr 640px;
- grid-template-rows: 0fr 0fr 0fr;
- }
- .comments-area{
- grid-column:2;
- }
- .comment{
- width:640px;
- }
{% endblock style %}
{% block main %}
- <div id="left">
- <section class="comments-area">
- {% if not comments_info['is_replies'] %}
- <section class="video-metadata">
- <a class="video-metadata-thumbnail-box" href="{{ comments_info['video_url'] }}" title="{{ comments_info['video_title'] }}">
- <img class="video-metadata-thumbnail-img" src="{{ comments_info['video_thumbnail'] }}" height="180px" width="320px">
- </a>
- <a class="title" href="{{ comments_info['video_url'] }}" title="{{ comments_info['video_title'] }}">{{ comments_info['video_title'] }}</a>
-
- <h2>Comments page {{ comments_info['page_number'] }}</h2>
- <span>Sorted by {{ comments_info['sort_text'] }}</span>
- </section>
- {% endif %}
-
- {{ comments.comment_posting_box(comment_posting_box_info) }}
-
- {% if not comments_info['is_replies'] %}
- <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>
- {% endif %}
-
- <div class="comments">
- {% for comment in comments_info['comments'] %}
- {{ comments.render_comment(comment, comments_info['include_avatars']) }}
+ <section class="comments-area">
+ {% if not comments_info['is_replies'] %}
+ <section class="video-metadata">
+ <a class="video-metadata-thumbnail-box" href="{{ comments_info['video_url'] }}" title="{{ comments_info['video_title'] }}">
+ <img class="video-metadata-thumbnail-img" src="{{ comments_info['video_thumbnail'] }}" height="180px" width="320px">
+ </a>
+ <a class="title" href="{{ comments_info['video_url'] }}" title="{{ comments_info['video_title'] }}">{{ comments_info['video_title'] }}</a>
+
+ <h2>Comments page {{ comments_info['page_number'] }}</h2>
+ <span>Sorted by {{ comments_info['sort_text'] }}</span>
+ </section>
+ {% endif %}
+
+ {{ comments.comment_posting_box(comment_posting_box_info) }}
+
+ {% if not comments_info['is_replies'] %}
+ <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>
- {% 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>
+ {% endif %}
+
+ <div class="comments">
+ {% for comment in comments_info['comments'] %}
+ {{ 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>
{% endblock main %}
diff --git a/youtube/templates/delete_comment.html b/youtube/templates/delete_comment.html
index 71555ee..28c8f2a 100644
--- a/youtube/templates/delete_comment.html
+++ b/youtube/templates/delete_comment.html
@@ -2,14 +2,10 @@
{% extends "base.html" %}
{% block style %}
- main{
- display: grid;
- grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr);
- align-content: start;
- }
main > div, main > form{
+ margin: auto;
margin-top:20px;
- grid-column:2;
+ width: 640px;
}
{% endblock style %}
diff --git a/youtube/templates/local_playlist.html b/youtube/templates/local_playlist.html
index f8e6f01..7ba0642 100644
--- a/youtube/templates/local_playlist.html
+++ b/youtube/templates/local_playlist.html
@@ -2,59 +2,41 @@
{% extends "base.html" %}
{% import "common_elements.html" as common_elements %}
{% block style %}
- main{
- display:grid;
- grid-template-columns: 3fr 1fr;
+ main > *{
+ width: 800px;
+ margin: auto;
}
-
-
- #left{
- grid-column: 1;
- grid-row: 1;
-
- display: grid;
- grid-template-columns: 1fr 800px auto;
- grid-template-rows: 0fr 1fr 0fr;
+ .playlist-metadata{
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
}
.playlist-title{
- grid-column:2;
}
#playlist-remove-button{
- grid-column:3;
align-self: center;
white-space: nowrap;
}
#results{
-
- grid-row: 2;
- grid-column: 2 / span 2;
-
-
display: grid;
grid-auto-rows: 0fr;
grid-row-gap: 10px;
-
- }
- .page-button-row{
- grid-row: 3;
- grid-column: 2;
- justify-self: center;
}
{% endblock style %}
{% block main %}
- <div id="left">
+ <div class="playlist-metadata">
<h2 class="playlist-title">{{ playlist_name }}</h2>
<input type="hidden" name="playlist_page" value="{{ playlist_name }}" form="playlist-edit">
<button type="submit" id="playlist-remove-button" name="action" value="remove" form="playlist-edit" formaction="">Remove from playlist</button>
- <div id="results">
- {% for video_info in videos %}
- {{ common_elements.item(video_info) }}
- {% endfor %}
- </div>
- <nav class="page-button-row">
- {{ common_elements.page_buttons(num_pages, '/https://www.youtube.com/playlists/' + playlist_name, parameters_dictionary) }}
- </nav>
</div>
+ <div id="results">
+ {% for video_info in videos %}
+ {{ common_elements.item(video_info) }}
+ {% endfor %}
+ </div>
+ <nav class="page-button-row">
+ {{ common_elements.page_buttons(num_pages, '/https://www.youtube.com/playlists/' + playlist_name, parameters_dictionary) }}
+ </nav>
{% endblock main %}
diff --git a/youtube/templates/login.html b/youtube/templates/login.html
index 0f09a62..156bc01 100644
--- a/youtube/templates/login.html
+++ b/youtube/templates/login.html
@@ -2,16 +2,12 @@
{% extends "base.html" %}
{% block style %}
- main{
- display: grid;
- grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr);
- align-content: start;
- grid-row-gap: 40px;
+ main > * {
+ width: 640px;
+ margin: auto;
}
-
main form{
margin-top:20px;
- grid-column:2;
display:grid;
justify-items: start;
align-content: start;
@@ -26,10 +22,9 @@
margin-top:20px;
}
#tor-note{
- grid-row:2;
- grid-column:2;
background-color: #dddddd;
padding: 10px;
+ margin-top: 40px;
}
{% endblock style %}
diff --git a/youtube/templates/playlist.html b/youtube/templates/playlist.html
index 371b51b..ab2640f 100644
--- a/youtube/templates/playlist.html
+++ b/youtube/templates/playlist.html
@@ -2,72 +2,45 @@
{% extends "base.html" %}
{% import "common_elements.html" as common_elements %}
{% block style %}
- main{
- display:grid;
- grid-template-columns: 3fr 1fr;
+ main > * {
+ width: 800px;
+ margin:auto;
}
-
-
- #left{
- grid-column: 1;
- grid-row: 1;
-
- display: grid;
- grid-template-columns: 1fr 800px;
- grid-template-rows: 0fr 1fr 0fr;
+ .playlist-metadata{
+ display:grid;
+ grid-template-columns: 0fr 1fr;
}
- .playlist-metadata{
+ .playlist-thumbnail{
+ grid-row: 1 / span 5;
+ grid-column:1;
+ justify-self:start;
+ width:250px;
+ margin-right: 10px;
+ }
+ .playlist-title{
+ grid-row: 1;
+ grid-column:2;
+ }
+ .playlist-author{
+ grid-row:2;
grid-column:2;
- grid-row:1;
-
- display:grid;
- grid-template-columns: 0fr 1fr;
}
- .playlist-thumbnail{
- grid-row: 1 / span 5;
- grid-column:1;
- justify-self:start;
- width:250px;
- margin-right: 10px;
- }
- .playlist-title{
- grid-row: 1;
- grid-column:2;
- }
- .playlist-author{
- grid-row:2;
- grid-column:2;
- }
- .playlist-stats{
- grid-row:3;
- grid-column:2;
- }
-
- .playlist-description{
- grid-row:4;
- grid-column:2;
- min-width:0px;
- white-space: pre-line;
- }
- .page-button-row{
- grid-row: 3;
- grid-column: 2;
- justify-self: center;
+ .playlist-stats{
+ grid-row:3;
+ grid-column:2;
+ }
+
+ .playlist-description{
+ grid-row:4;
+ grid-column:2;
+ min-width:0px;
+ white-space: pre-line;
}
-
-
- #right{
- grid-column: 2;
- grid-row: 1;
- }
#results{
-
- grid-row: 2;
- grid-column: 2;
margin-top:10px;
-
+
display: grid;
grid-auto-rows: 0fr;
grid-row-gap: 10px;
@@ -76,27 +49,25 @@
{% endblock style %}
{% block main %}
- <div id="left">
- <div class="playlist-metadata">
- <img class="playlist-thumbnail" src="{{ thumbnail }}">
- <h2 class="playlist-title">{{ title }}</h2>
- <a class="playlist-author" href="{{ author_url }}">{{ author }}</a>
- <div class="playlist-stats">
- <div>{{ views }}</div>
- <div>{{ size }}</div>
- </div>
- <div class="playlist-description">{{ common_elements.text_runs(description) }}</div>
+ <div class="playlist-metadata">
+ <img class="playlist-thumbnail" src="{{ thumbnail }}">
+ <h2 class="playlist-title">{{ title }}</h2>
+ <a class="playlist-author" href="{{ author_url }}">{{ author }}</a>
+ <div class="playlist-stats">
+ <div>{{ views }}</div>
+ <div>{{ size }}</div>
</div>
+ <div class="playlist-description">{{ common_elements.text_runs(description) }}</div>
+ </div>
- <div id="results">
- {% for info in video_list %}
- {{ common_elements.item(info) }}
- {% endfor %}
- </div>
- <nav class="page-button-row">
- {{ common_elements.page_buttons(num_pages, '/https://www.youtube.com/playlist', parameters_dictionary) }}
- </nav>
+ <div id="results">
+ {% for info in video_list %}
+ {{ common_elements.item(info) }}
+ {% endfor %}
</div>
+ <nav class="page-button-row">
+ {{ common_elements.page_buttons(num_pages, '/https://www.youtube.com/playlist', parameters_dictionary) }}
+ </nav>
{% endblock main %}
diff --git a/youtube/templates/post_comment.html b/youtube/templates/post_comment.html
index 67c54f1..ba6a22c 100644
--- a/youtube/templates/post_comment.html
+++ b/youtube/templates/post_comment.html
@@ -3,27 +3,18 @@
{% import "comments.html" as comments %}
{% block style %}
- main{
- display: grid;
- grid-template-columns: 3fr 2fr;
- }
- .left{
- display:grid;
- grid-template-columns: 1fr 640px;
- }
- textarea{
- width: 460px;
- height: 85px;
- }
.comment-form{
- grid-column:2;
+ width: 640px;
+ margin: auto;
justify-content:start;
}
+ textarea{
+ width: 460px;
+ height: 85px;
+ }
{% endblock style %}
{% block main %}
- <div class="left">
- {{ comments.comment_posting_box(comment_posting_box_info) }}
- </div>
+ {{ comments.comment_posting_box(comment_posting_box_info) }}
{% endblock %}
diff --git a/youtube/templates/search.html b/youtube/templates/search.html
index f429da0..63f930e 100644
--- a/youtube/templates/search.html
+++ b/youtube/templates/search.html
@@ -3,31 +3,19 @@
{% extends "base.html" %}
{% import "common_elements.html" as common_elements %}
{% block style %}
- main{
- display:grid;
- grid-template-columns: minmax(0px, 1fr) 800px minmax(0px,2fr);
- max-width:100vw;
- }
-
-
+ main > * {
+ max-width: 800px;
+ margin: auto;
+ }
+ #result-info{
+ }
#number-of-results{
font-weight:bold;
}
- #result-info{
- grid-row: 1;
- grid-column:2;
- align-self:center;
- }
- .page-button-row{
- grid-column: 2;
- justify-self: center;
- }
-
-
- .item-list{
- grid-row: 2;
- grid-column: 2;
- }
+ .item-list{
+ padding-left: 10px;
+ padding-right: 10px;
+ }
.badge{
background-color:#cccccc;
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 03:47:42 +0000