145 lines
4.7 KiB
HTML
145 lines
4.7 KiB
HTML
{% 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 %}
|