Refactor search page
This commit is contained in:
James Taylor
@@ -2,13 +2,14 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>{% block page_title %}{% endblock %}</title>
|
||||
<title>{% block page_title %}{{ title }}{% endblock %}</title>
|
||||
<link href="/youtube.com/static/shared.css" type="text/css" rel="stylesheet">
|
||||
<link href="/youtube.com/static/comments.css" type="text/css" rel="stylesheet">
|
||||
<link href="/youtube.com/static/favicon.ico" type="image/x-icon" rel="icon">
|
||||
<link title="Youtube local" href="/youtube.com/opensearch.xml" rel="search" type="application/opensearchdescription+xml">
|
||||
<style type="text/css">
|
||||
{% block style %}
|
||||
{{ style }}
|
||||
{% endblock %}
|
||||
</style>
|
||||
</head>
|
||||
@@ -105,6 +106,7 @@
|
||||
</header>
|
||||
<main>
|
||||
{% block main %}
|
||||
{{ main }}
|
||||
{% endblock %}
|
||||
</main>
|
||||
</body>
|
||||
|
||||
152
youtube/templates/common_elements.html
Normal file
152
youtube/templates/common_elements.html
Normal file
@@ -0,0 +1,152 @@
|
||||
{% macro text_runs(runs) %}
|
||||
{%- if runs[0] is mapping -%}
|
||||
{%- for text_run in runs -%}
|
||||
{%- if text_run.get("bold", false) -%}
|
||||
<b>{{ text_run["text"] }}</b>
|
||||
{%- elif text_run.get('italics', false) -%}
|
||||
<i>{{ text_run["text"] }}</i>
|
||||
{%- else -%}
|
||||
{{ text_run["text"] }}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- else -%}
|
||||
{{ runs }}
|
||||
{%- endif -%}
|
||||
{% endmacro %}
|
||||
|
||||
{% macro small_item(info) %}
|
||||
<div class="small-item-box">
|
||||
<div class="small-item">
|
||||
{% if info['type'] == 'video' %}
|
||||
<a class="video-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
|
||||
<img class="video-thumbnail-img" src="{{ info['thumbnail'] }}">
|
||||
<span class="video-duration">{{ info['duration'] }}</span>
|
||||
</a>
|
||||
<a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
|
||||
|
||||
<address>{{ info['author'] }}</address>
|
||||
<span class="views">{{ info['views'] }}</span>
|
||||
|
||||
{% elif info['type'] == 'playlist' %}
|
||||
<a class="playlist-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
|
||||
<img class="playlist-thumbnail-img" src="{{ info['thumbnail'] }}">
|
||||
<div class="playlist-thumbnail-info">
|
||||
<span>{{ info['size'] }}</span>
|
||||
</div>
|
||||
</a>
|
||||
<a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
|
||||
|
||||
<address>{{ info['author'] }}</address>
|
||||
{% else %}
|
||||
Error: unsupported item type
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if info['type'] == 'video' %}
|
||||
<input class="item-checkbox" type="checkbox" name="video_info_list" value="{{ info['video_info'] }}" form="playlist-edit">
|
||||
{% endif %}
|
||||
</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>
|
||||
{% endif %}
|
||||
{% if 'views' is in(info) %}
|
||||
<span class="views">{{ info['views'] }}</span>
|
||||
{% endif %}
|
||||
{% if 'published' is in(info) %}
|
||||
<time>{{ info['published'] }}</time>
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
|
||||
{% macro medium_item(info) %}
|
||||
<div class="medium-item-box">
|
||||
<div class="medium-item">
|
||||
{% if info['type'] == 'video' %}
|
||||
<a class="video-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
|
||||
<img class="video-thumbnail-img" src="{{ info['thumbnail'] }}">
|
||||
<span class="video-duration">{{ info['duration'] }}</span>
|
||||
</a>
|
||||
|
||||
<a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
|
||||
|
||||
<div class="stats">
|
||||
{{ get_stats(info) }}
|
||||
</div>
|
||||
|
||||
<span class="description">{{ text_runs(info['description']) }}</span>
|
||||
<span class="badges">{{ info['badges']|join(' | ') }}</span>
|
||||
{% elif info['type'] == 'playlist' %}
|
||||
<a class="playlist-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
|
||||
<img class="playlist-thumbnail-img" src="{{ info['thumbnail'] }}">
|
||||
<div class="playlist-thumbnail-info">
|
||||
<span>{{ info['size'] }}</span>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
|
||||
|
||||
<div class="stats">
|
||||
{{ get_stats(info) }}
|
||||
</div>
|
||||
{% elif info['type'] == 'channel' %}
|
||||
<a class="video-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
|
||||
<img class="video-thumbnail-img" src="{{ info['thumbnail'] }}">
|
||||
</a>
|
||||
|
||||
<a class="title" href="{{ info['url'] }}">{{ info['title'] }}</a>
|
||||
|
||||
<span>{{ info['subscriber_count'] }}</span>
|
||||
<span>{{ info['size'] }}</span>
|
||||
|
||||
<span class="description">{{ text_runs(info['description']) }}</span>
|
||||
{% else %}
|
||||
Error: unsupported item type
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if info['type'] == 'video' %}
|
||||
<input class="item-checkbox" type="checkbox" name="video_info_list" value="{{ info['video_info'] }}" form="playlist-edit">
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
{% macro item(info) %}
|
||||
{% if info['item_size'] == 'small' %}
|
||||
{{ small_item(info) }}
|
||||
{% elif info['item_size'] == 'medium' %}
|
||||
{{ medium_item(info) }}
|
||||
{% else %}
|
||||
Error: Unknown item size
|
||||
{% endif %}
|
||||
{% endmacro %}
|
||||
|
||||
|
||||
|
||||
{% macro page_buttons(estimated_pages, url, parameters_dictionary) %}
|
||||
{% set current_page = parameters_dictionary.get('page', 1)|int %}
|
||||
{% set parameters_dictionary = parameters_dictionary.to_dict() %}
|
||||
{% if current_page is le(5) %}
|
||||
{% set page_start = 1 %}
|
||||
{% set page_end = [9, estimated_pages]|min %}
|
||||
{% else %}
|
||||
{% set page_start = current_page - 4 %}
|
||||
{% set page_end = [current_page + 4, estimated_pages]|min %}
|
||||
{% endif %}
|
||||
|
||||
{% for page in range(page_start, page_end+1) %}
|
||||
{% if page == current_page %}
|
||||
<div class="page-button">{{ page }}</div>
|
||||
{% else %}
|
||||
{# IMPORTANT: Jinja SUCKS #}
|
||||
{# https://stackoverflow.com/questions/36886650/how-to-add-a-new-entry-into-a-dictionary-object-while-using-jinja2 #}
|
||||
{% set _ = parameters_dictionary.__setitem__('page', page) %}
|
||||
<a class="page-button" href="{{ url + '?' + parameters_dictionary|urlencode }}">{{ page }}</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% endmacro %}
|
||||
54
youtube/templates/search.html
Normal file
54
youtube/templates/search.html
Normal file
@@ -0,0 +1,54 @@
|
||||
{% set search_box_value = query %}
|
||||
{% extends "base.html" %}
|
||||
{% block page_title %}{{ query + ' - Search' }}{% endblock %}
|
||||
{% import "common_elements.html" as common_elements %}
|
||||
{% block style %}
|
||||
main{
|
||||
display:grid;
|
||||
grid-template-columns: minmax(0px, 1fr) 800px minmax(0px,2fr);
|
||||
max-width:100vw;
|
||||
}
|
||||
|
||||
|
||||
#number-of-results{
|
||||
font-weight:bold;
|
||||
}
|
||||
#result-info{
|
||||
grid-row: 1;
|
||||
grid-column:2;
|
||||
align-self:center;
|
||||
}
|
||||
.page-button-row{
|
||||
grid-column: 2;
|
||||
justify-self: center;
|
||||
}
|
||||
|
||||
|
||||
.item-list{
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
}
|
||||
.badge{
|
||||
background-color:#cccccc;
|
||||
}
|
||||
{% endblock style %}
|
||||
|
||||
{% block main %}
|
||||
<div id="result-info">
|
||||
<div id="number-of-results">Approximately {{ '{:,}'.format(estimated_results) }} results ({{ '{:,}'.format(estimated_pages) }} pages)</div>
|
||||
{% if corrections['type'] == 'showing_results_for' %}
|
||||
<div>Showing results for <a>{{ corrections['corrected_query']|safe }}</a></div>
|
||||
<div>Search instead for <a href="{{ corrections['original_query_url'] }}">{{ corrections['original_query'] }}</a></div>
|
||||
{% elif corrections['type'] == 'did_you_mean' %}
|
||||
<div>Did you mean <a href="{{ corrections['corrected_query_url'] }}">{{ corrections['corrected_query']|safe }}</a></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="item-list">
|
||||
{% for info in results %}
|
||||
{{ common_elements.item(info) }}
|
||||
{% endfor %}
|
||||
</div>
|
||||
<nav class="page-button-row">
|
||||
{{ common_elements.page_buttons(estimated_pages, '/https://www.youtube.com/search', parameters_dictionary) }}
|
||||
</nav>
|
||||
{% endblock main %}
|
||||
Reference in New Issue
Block a user