diff options
Diffstat (limited to 'youtube/templates')
| -rw-r--r-- | youtube/templates/channel.html | 144 | ||||
| -rw-r--r-- | youtube/templates/common_elements.html | 26 |
2 files changed, 158 insertions, 12 deletions
diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html new file mode 100644 index 0000000..8a3f279 --- /dev/null +++ b/youtube/templates/channel.html @@ -0,0 +1,144 @@ +{% extends "base.html" %} +{% block page_title %}{{ channel_name + ' - Channel' }}{% endblock %} +{% 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 .title{ + grid-row:1; + grid-column:2; + } + main .channel-tabs{ + grid-row:2; + grid-column: 1 / span 2; + + display:grid; + grid-auto-flow: column; + justify-content:start; + + background-color: #aaaaaa; + padding: 3px; + } + #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; + background-color: #bababa; + margin-bottom: 10px; + } + #number-of-results{ + font-weight:bold; + } + .item-grid{ + grid-row:4; + grid-column: 1 / span 2; + } + .item-list{ + width:1000px; + grid-column: 1 / span 2; + } + .page-button-row{ + grid-column: 1 / span 2; + } + .tab{ + padding: 5px 75px; + } + main .channel-info{ + grid-row: 3; + grid-column: 1 / span 3; + } + .description{ + white-space: pre-wrap; + min-width: 0; + + } +{% endblock style %} + +{% block main %} + <img class="avatar" src="{{ avatar }}"> + <h2 class="title">{{ channel_name }}</h2> + <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 stat in stats %} + <li>{{ stat }}</li> + {% endfor %} + </ul> + <hr> + <h3>Description</h3> + <span class="description">{{ common_elements.text_runs(description) }}</span> + <hr> + <ul> + {% for text, url in links %} + <li><a href="{{ url }}">{{ text }}</a></li> + {% endfor %} + </ul> + </div> + {% else %} + <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')] %} + {% 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> + + {% if current_tab != 'about' %} + <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 != 'playlists' %} + <nav class="page-button-row"> + {{ common_elements.page_buttons(number_of_pages, channel_url + '/' + current_tab, parameters_dictionary) }} + </nav> + {% endif %} + {% endif %} + + {% endif %} +{% endblock main %} diff --git a/youtube/templates/common_elements.html b/youtube/templates/common_elements.html index b140332..0843c4b 100644 --- a/youtube/templates/common_elements.html +++ b/youtube/templates/common_elements.html @@ -14,7 +14,7 @@ {%- endif -%} {% endmacro %} -{% macro small_item(info) %} +{% macro small_item(info, include_author=true) %} <div class="small-item-box"> <div class="small-item"> {% if info['type'] == 'video' %} @@ -47,11 +47,13 @@ </div> {% endmacro %} -{% macro get_stats(info) %} - {% if 'author_url' is in(info) %} - <address>By <a href="{{ info['author_url'] }}">{{ info['author'] }}</a></address> - {% else %} - <address><b>{{ info['author'] }}</b></address> +{% macro get_stats(info, include_author=true) %} + {% if include_author %} + {% if 'author_url' is in(info) %} + <address>By <a href="{{ info['author_url'] }}">{{ info['author'] }}</a></address> + {% else %} + <address><b>{{ info['author'] }}</b></address> + {% endif %} {% endif %} {% if 'views' is in(info) %} <span class="views">{{ info['views'] }}</span> @@ -63,7 +65,7 @@ -{% macro medium_item(info) %} +{% macro medium_item(info, include_author=true) %} <div class="medium-item-box"> <div class="medium-item"> {% if info['type'] == 'video' %} @@ -75,7 +77,7 @@ <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a> <div class="stats"> - {{ get_stats(info) }} + {{ get_stats(info, include_author) }} </div> <span class="description">{{ text_runs(info.get('description', '')) }}</span> @@ -91,7 +93,7 @@ <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a> <div class="stats"> - {{ get_stats(info) }} + {{ get_stats(info, include_author) }} </div> {% elif info['type'] == 'channel' %} <a class="video-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}"> @@ -115,11 +117,11 @@ {% endmacro %} -{% macro item(info) %} +{% macro item(info, include_author=true) %} {% if info['item_size'] == 'small' %} - {{ small_item(info) }} + {{ small_item(info, include_author) }} {% elif info['item_size'] == 'medium' %} - {{ medium_item(info) }} + {{ medium_item(info, include_author) }} {% else %} Error: Unknown item size {% endif %} |