heckyel/yt-local
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Layout: simplify CSS layout on most pages

Browse Source
This commit is contained in:
James Taylor 2019-08-24 11:35:58 -07:00
parent d9517a3322
commit 400d17e613
8 changed files with 120 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
youtube/static/shared.css
View File

@ -267,7 +267,10 @@ body{
.page-button-row{ .page-button-row{
margin-top: 10px;
margin-bottom: 10px;
justify-self:center; justify-self:center;
justify-content: center;
display: grid; display: grid;
grid-auto-columns: 40px; grid-auto-columns: 40px;
grid-auto-flow: column; grid-auto-flow: column;

77
youtube/templates/comments_page.html
View File

@ -3,63 +3,46 @@
{% import "comments.html" as comments %} {% import "comments.html" as comments %}
{% block style %} {% block style %}
main{ .comments-area{
display:grid; margin: auto;
grid-template-columns: 3fr 2fr; 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 %} {% endblock style %}
{% block main %} {% block main %}
<div id="left"> <section class="comments-area">
<section class="comments-area"> {% if not comments_info['is_replies'] %}
{% if not comments_info['is_replies'] %} <section class="video-metadata">
<section class="video-metadata"> <a class="video-metadata-thumbnail-box" href="{{ comments_info['video_url'] }}" title="{{ comments_info['video_title'] }}">
<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">
<img class="video-metadata-thumbnail-img" src="{{ comments_info['video_thumbnail'] }}" height="180px" width="320px"> </a>
</a> <a class="title" href="{{ comments_info['video_url'] }}" title="{{ comments_info['video_title'] }}">{{ comments_info['video_title'] }}</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> <h2>Comments page {{ comments_info['page_number'] }}</h2>
<span>Sorted by {{ comments_info['sort_text'] }}</span> <span>Sorted by {{ comments_info['sort_text'] }}</span>
</section> </section>
{% endif %} {% endif %}
{{ comments.comment_posting_box(comment_posting_box_info) }} {{ comments.comment_posting_box(comment_posting_box_info) }}
{% if not comments_info['is_replies'] %} {% if not comments_info['is_replies'] %}
<div class="comment-links"> <div class="comment-links">
{% for link_text, link_url in comments_info['comment_links'] %} {% for link_text, link_url in comments_info['comment_links'] %}
<a class="sort-button" href="{{ link_url }}">{{ link_text }}</a> <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']) }}
{% endfor %} {% endfor %}
</div> </div>
{% if 'more_comments_url' is in comments_info %} {% endif %}
<a class="page-button more-comments" href="{{ comments_info['more_comments_url'] }}">More comments</a>
{% endif %} <div class="comments">
</section> {% for comment in comments_info['comments'] %}
</div> {{ 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 %} {% endblock main %}

8
youtube/templates/delete_comment.html
View File

@ -2,14 +2,10 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block style %} {% block style %}
main{
display: grid;
grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr);
align-content: start;
}
main > div, main > form{ main > div, main > form{
margin: auto;
margin-top:20px; margin-top:20px;
grid-column:2; width: 640px;
} }
{% endblock style %} {% endblock style %}

50
youtube/templates/local_playlist.html
View File

@ -2,59 +2,41 @@
{% extends "base.html" %} {% extends "base.html" %}
{% import "common_elements.html" as common_elements %} {% import "common_elements.html" as common_elements %}
{% block style %} {% block style %}
main{ main > *{
display:grid; width: 800px;
grid-template-columns: 3fr 1fr; margin: auto;
} }
.playlist-metadata{
display: flex;
#left{ flex-direction: row;
grid-column: 1; justify-content: space-between;
grid-row: 1;
display: grid;
grid-template-columns: 1fr 800px auto;
grid-template-rows: 0fr 1fr 0fr;
} }
.playlist-title{ .playlist-title{
grid-column:2;
} }
#playlist-remove-button{ #playlist-remove-button{
grid-column:3;
align-self: center; align-self: center;
white-space: nowrap; white-space: nowrap;
} }
#results{ #results{
grid-row: 2;
grid-column: 2 / span 2;
display: grid; display: grid;
grid-auto-rows: 0fr; grid-auto-rows: 0fr;
grid-row-gap: 10px; grid-row-gap: 10px;
}
.page-button-row{
grid-row: 3;
grid-column: 2;
justify-self: center;
} }
{% endblock style %} {% endblock style %}
{% block main %} {% block main %}
<div id="left"> <div class="playlist-metadata">
<h2 class="playlist-title">{{ playlist_name }}</h2> <h2 class="playlist-title">{{ playlist_name }}</h2>
<input type="hidden" name="playlist_page" value="{{ playlist_name }}" form="playlist-edit"> <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> <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>
<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 %} {% endblock main %}

13
youtube/templates/login.html
View File

@ -2,16 +2,12 @@
{% extends "base.html" %} {% extends "base.html" %}
{% block style %} {% block style %}
main{ main > * {
display: grid; width: 640px;
grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr); margin: auto;
align-content: start;
grid-row-gap: 40px;
} }
main form{ main form{
margin-top:20px; margin-top:20px;
grid-column:2;
display:grid; display:grid;
justify-items: start; justify-items: start;
align-content: start; align-content: start;
@ -26,10 +22,9 @@
margin-top:20px; margin-top:20px;
} }
#tor-note{ #tor-note{
grid-row:2;
grid-column:2;
background-color: #dddddd; background-color: #dddddd;
padding: 10px; padding: 10px;
margin-top: 40px;
} }
{% endblock style %} {% endblock style %}

125
youtube/templates/playlist.html
View File

@ -2,72 +2,45 @@
{% extends "base.html" %} {% extends "base.html" %}
{% import "common_elements.html" as common_elements %} {% import "common_elements.html" as common_elements %}
{% block style %} {% block style %}
main{ main > * {
width: 800px;
margin:auto;
}
.playlist-metadata{
display:grid; display:grid;
grid-template-columns: 3fr 1fr; grid-template-columns: 0fr 1fr;
} }
.playlist-thumbnail{
grid-row: 1 / span 5;
grid-column:1;
#left{ justify-self:start;
grid-column: 1; width:250px;
grid-row: 1; margin-right: 10px;
}
display: grid; .playlist-title{
grid-template-columns: 1fr 800px; grid-row: 1;
grid-template-rows: 0fr 1fr 0fr;
}
.playlist-metadata{
grid-column:2; grid-column:2;
grid-row:1;
display:grid;
grid-template-columns: 0fr 1fr;
} }
.playlist-thumbnail{ .playlist-author{
grid-row: 1 / span 5; grid-row:2;
grid-column:1; grid-column:2;
justify-self:start; }
width:250px; .playlist-stats{
margin-right: 10px; grid-row:3;
} grid-column:2;
.playlist-title{ }
grid-row: 1;
grid-column:2; .playlist-description{
} grid-row:4;
.playlist-author{ grid-column:2;
grid-row:2; min-width:0px;
grid-column:2; white-space: pre-line;
}
.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;
} }
#right{
grid-column: 2;
grid-row: 1;
}
#results{ #results{
grid-row: 2;
grid-column: 2;
margin-top:10px; margin-top:10px;
display: grid; display: grid;
grid-auto-rows: 0fr; grid-auto-rows: 0fr;
grid-row-gap: 10px; grid-row-gap: 10px;
@ -76,27 +49,25 @@
{% endblock style %} {% endblock style %}
{% block main %} {% block main %}
<div id="left"> <div class="playlist-metadata">
<div class="playlist-metadata"> <img class="playlist-thumbnail" src="{{ thumbnail }}">
<img class="playlist-thumbnail" src="{{ thumbnail }}"> <h2 class="playlist-title">{{ title }}</h2>
<h2 class="playlist-title">{{ title }}</h2> <a class="playlist-author" href="{{ author_url }}">{{ author }}</a>
<a class="playlist-author" href="{{ author_url }}">{{ author }}</a> <div class="playlist-stats">
<div class="playlist-stats"> <div>{{ views }}</div>
<div>{{ views }}</div> <div>{{ size }}</div>
<div>{{ size }}</div>
</div>
<div class="playlist-description">{{ common_elements.text_runs(description) }}</div>
</div> </div>
<div class="playlist-description">{{ common_elements.text_runs(description) }}</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> </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>
{% endblock main %} {% endblock main %}

23
youtube/templates/post_comment.html
View File

@ -3,27 +3,18 @@
{% import "comments.html" as comments %} {% import "comments.html" as comments %}
{% block style %} {% 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{ .comment-form{
grid-column:2; width: 640px;
margin: auto;
justify-content:start; justify-content:start;
} }
textarea{
width: 460px;
height: 85px;
}
{% endblock style %} {% endblock style %}
{% block main %} {% block main %}
<div class="left"> {{ comments.comment_posting_box(comment_posting_box_info) }}
{{ comments.comment_posting_box(comment_posting_box_info) }}
</div>
{% endblock %} {% endblock %}

32
youtube/templates/search.html
View File

@ -3,31 +3,19 @@
{% extends "base.html" %} {% extends "base.html" %}
{% import "common_elements.html" as common_elements %} {% import "common_elements.html" as common_elements %}
{% block style %} {% block style %}
main{ main > * {
display:grid; max-width: 800px;
grid-template-columns: minmax(0px, 1fr) 800px minmax(0px,2fr); margin: auto;
max-width:100vw; }
} #result-info{
}
#number-of-results{ #number-of-results{
font-weight:bold; font-weight:bold;
} }
#result-info{ .item-list{
grid-row: 1; padding-left: 10px;
grid-column:2; padding-right: 10px;
align-self:center; }
}
.page-button-row{
grid-column: 2;
justify-self: center;
}
.item-list{
grid-row: 2;
grid-column: 2;
}
.badge{ .badge{
background-color:#cccccc; background-color:#cccccc;
} }