diff options
Diffstat (limited to 'youtube/templates/channel.html')
| -rw-r--r-- | youtube/templates/channel.html | 143 |
1 files changed, 32 insertions, 111 deletions
diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html index dddbff1..25b0971 100644 --- a/youtube/templates/channel.html +++ b/youtube/templates/channel.html @@ -7,114 +7,30 @@ {% extends "base.html" %} {% import "common_elements.html" as common_elements %} {% block style %} - main{ - display:grid; -{% if current_tab == 'about' %} - grid-template-rows: 0fr 0fr 1fr; - grid-template-columns: 0fr 1fr; -{% else %} - grid-template-rows: repeat(5, 0fr); - grid-template-columns: auto 1fr; -{% endif %} - } - main .avatar{ - grid-row:1; - grid-column:1; - height:200px; - width:200px; - } - main .summary{ - grid-row:1; - grid-column:2; - margin-left: 5px; - } - .summary subscribe-unsubscribe, .summary short-description{ - margin-top: 10px; - } - main .channel-tabs{ - grid-row:2; - grid-column: 1 / span 2; - - display:grid; - grid-auto-flow: column; - justify-content:start; - - background-color: var(--interface-color); - padding: 3px; - padding-left: 6px; - } - #links-metadata{ - display: grid; - grid-auto-flow: column; - grid-column-gap: 10px; - grid-column: 1/span 2; - justify-content: start; - padding-top: 8px; - padding-bottom: 8px; - padding-left: 6px; - margin-bottom: 10px; - } - #number-of-results{ - font-weight:bold; - } - .content{ - grid-row: 4; - grid-column: 1 / span 2; - } - .search-content{ - width: 800px; - margin-left: 10px; - } - .item-grid{ - padding-left: 20px; - } - .item-list{ - width:800px; - margin: auto; - } - .page-button-row{ - margin-left: auto; - margin-right: auto; - } - .next-previous-button-row{ - margin-left: auto; - margin-right: auto; - } - .tab{ - padding: 5px 75px; - } - .channel-info{ - grid-row: 3; - grid-column: 1 / span 3; - } - .channel-info ul{ - padding-left: 40px; - } - .channel-info h3{ - margin-left: 40px; - } - .channel-info .description{ - white-space: pre-wrap; - min-width: 0; - margin-left: 40px; - } - .medium-item img{ - max-width: 168px; - } + <link href="/youtube.com/static/channel.css" rel="stylesheet"> {% endblock style %} {% block main %} - <img class="avatar" src="{{ avatar }}"> - <div class="summary"> - <h2 class="title">{{ channel_name }}</h2> - <p class="short-description">{{ short_description }}</p> - <form method="POST" action="/youtube.com/subscriptions" class="subscribe-unsubscribe"> - <input type="submit" value="{{ 'Unsubscribe' if subscribed else 'Subscribe' }}"> - <input type="hidden" name="channel_id" value="{{ channel_id }}"> - <input type="hidden" name="channel_name" value="{{ channel_name }}"> - <input type="hidden" name="action" value="{{ 'unsubscribe' if subscribed else 'subscribe' }}"> - </form> + + <div class="author-container"> + <div class="author"> + <img alt="{{ channel_name }}" src="{{ avatar }}"/> + <h2>{{ channel_name }}</h2> + </div> + <div class="summary"> + <p>{{ short_description }}</p> + </div> + <div class="subscribe"> + <form method="POST" action="/youtube.com/subscriptions" class="subscribe-unsubscribe"> + <input class="btn-subscribe" type="submit" value="{{ 'Unsubscribe' if subscribed else 'Subscribe' }}"> + <input type="hidden" name="channel_id" value="{{ channel_id }}"> + <input type="hidden" name="channel_name" value="{{ channel_name }}"> + <input type="hidden" name="action" value="{{ 'unsubscribe' if subscribed else 'subscribe' }}"> + </form> + </div> </div> + <hr/> + <nav class="channel-tabs"> {% for tab_name in ('Videos', 'Playlists', 'About') %} {% if tab_name.lower() == current_tab %} @@ -153,8 +69,9 @@ </ul> </div> {% else %} - <div class="content {{ current_tab + '-content'}}"> - <div id="links-metadata"> + + <!-- new--> + <div id="links-metadata"> {% if current_tab == 'videos' %} {% set sorts = [('1', 'views'), ('2', 'oldest'), ('3', 'newest')] %} <div id="number-of-results">{{ number_of_videos }} videos</div> @@ -177,16 +94,18 @@ <a class="sort-button" href="{{ channel_url + '/' + current_tab + '?sort=' + sort_number }}">{{ 'Sort by ' + sort_name }}</a> {% endif %} {% endfor %} - </div> + </div> - <nav class="{{ 'item-list' if current_tab == 'search' else 'item-grid' }}"> + <div class="video-container {{ current_tab + '-content'}}"> {% for item_info in items %} {{ common_elements.item(item_info, include_author=false) }} {% endfor %} - </nav> + </div> + <hr/> + <footer class="pagination-container"> {% if current_tab == 'videos' %} - <nav class="page-button-row"> + <nav class="pagination-list"> {{ common_elements.page_buttons(number_of_pages, channel_url + '/' + current_tab, parameters_dictionary) }} </nav> {% elif current_tab == 'search' %} @@ -194,6 +113,8 @@ {{ common_elements.next_previous_buttons(is_last_page, channel_url + '/' + current_tab, parameters_dictionary) }} </nav> {% endif %} - </div> + </footer> + <!-- /new--> {% endif %} + {% endblock main %} |