{% if current_tab == 'search' %} {% set page_title = search_box_value + ' - Page ' + page_number|string %} {% else %} {% set page_title = channel_name + ' - Channel' %} {% endif %} {% 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; } {% 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> <nav class="channel-tabs"> {% for tab_name in ('Videos', 'Playlists', 'About') %} {% if tab_name.lower() == current_tab %} <a class="tab page-button">{{ tab_name }}</a> {% else %} <a class="tab page-button" href="{{ channel_url + '/' + tab_name.lower() }}">{{ tab_name }}</a> {% endif %} {% endfor %} <form class="channel-search" action="{{ channel_url + '/search' }}"> <input type="search" name="query" class="search-box" value="{{ search_box_value }}"> <button type="submit" value="Search" class="search-button">Search</button> </form> </nav> {% if current_tab == 'about' %} <div class="channel-info"> <ul> {% for (before_text, stat, after_text) in [ ('Joined ', date_joined, ''), ('', view_count|commatize, ' views'), ('', approx_subscriber_count, ' subscribers'), ] %} {% if stat %} <li>{{ before_text + stat|string + after_text }}</li> {% endif %} {% endfor %} </ul> <hr> <h3>Description</h3> <div class="description">{{ common_elements.text_runs(description) }}</div> <hr> <ul> {% for text, url in links %} <li><a href="{{ url }}">{{ text }}</a></li> {% endfor %} </ul> </div> {% else %} <div class="content {{ current_tab + '-content'}}"> <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> {% elif current_tab == 'playlists' %} {% set sorts = [('2', 'oldest'), ('3', 'newest'), ('4', 'last video added')] %} {% elif current_tab == 'search' %} {% if items %} <h2 class="page-number">Page {{ page_number }}</h2> {% else %} <h2 class="page-number">No results</h2> {% endif %} {% else %} {% set sorts = [] %} {% endif %} {% for sort_number, sort_name in sorts %} {% if sort_number == current_sort.__str__() %} <a class="sort-button">{{ 'Sorted by ' + sort_name }}</a> {% else %} <a class="sort-button" href="{{ channel_url + '/' + current_tab + '?sort=' + sort_number }}">{{ 'Sort by ' + sort_name }}</a> {% endif %} {% endfor %} </div> <nav class="{{ 'item-list' if current_tab == 'search' else 'item-grid' }}"> {% for item_info in items %} {{ common_elements.item(item_info, include_author=false) }} {% endfor %} </nav> {% if current_tab == 'videos' %} <nav class="page-button-row"> {{ common_elements.page_buttons(number_of_pages, channel_url + '/' + current_tab, parameters_dictionary) }} </nav> {% elif current_tab == 'search' %} <nav class="next-previous-button-row"> {{ common_elements.next_previous_buttons(is_last_page, channel_url + '/' + current_tab, parameters_dictionary) }} </nav> {% endif %} </div> {% endif %} {% endblock main %}