Change general design theme
This commit is contained in:
Jesús
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user