Use Grid for displaying results
This commit is contained in:
parent
f5a5ac3f2b
commit
4e6dd1df7a
12 changed files with 188 additions and 180 deletions
20
static/style.css
Executable file → Normal file
20
static/style.css
Executable file → Normal file
|
@ -1,10 +1,28 @@
|
||||||
body {
|
body {
|
||||||
max-width: 800px;
|
max-width: 1200px;
|
||||||
margin: 10px auto;
|
margin: 10px auto;
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
padding-right: 5px;
|
padding-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* search results related */
|
||||||
|
|
||||||
|
#wrap {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-wrapper {
|
||||||
|
width: 300px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result-info {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* end of search results related */
|
||||||
|
|
||||||
.tag {
|
.tag {
|
||||||
background-color: lightgray;
|
background-color: lightgray;
|
||||||
padding: 3px 7px;
|
padding: 3px 7px;
|
||||||
|
|
|
@ -8,21 +8,21 @@
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<table>
|
|
||||||
{% for channel in video_channels.data %}
|
<div id="wrap">
|
||||||
<tr>
|
{% for channel in video_channels.data %}
|
||||||
<td>
|
<div class="result-wrapper">
|
||||||
<img src="https://{{ domain }}{{ channel.avatar.path }}" height="75"/>
|
<img src="https://{{ domain }}{{ channel.avatar.path }}" height="75"/>
|
||||||
</td>
|
|
||||||
<td>
|
<div class="result-info">
|
||||||
<a href="/{{ domain }}/video-channels/{{ channel.name }}@{{ channel.host }}">
|
<a href="/{{ domain }}/video-channels/{{ channel.name }}@{{ channel.host }}">
|
||||||
<b>{{ channel.displayName }}</b>
|
<b>{{ channel.displayName }}</b>
|
||||||
</a>
|
</a>
|
||||||
<br>
|
<br>
|
||||||
{{ channel.followersCount }} Followers
|
{{ channel.followersCount }} Followers
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</table>
|
</div>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -8,24 +8,23 @@
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<table>
|
<div id="wrap">
|
||||||
{% for video in videos.data %}
|
{% for video in videos.data %}
|
||||||
<tr>
|
<div class="result-wrapper">
|
||||||
<td>
|
|
||||||
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">
|
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">
|
||||||
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
||||||
</a>
|
</a>
|
||||||
</td>
|
|
||||||
<td>
|
<div class="result-info">
|
||||||
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
||||||
<br>
|
<br>
|
||||||
{{ video.views }} Views
|
{{ video.views }} Views
|
||||||
<br>
|
<br>
|
||||||
<b>{{ video.channel.displayName }}</b>
|
<b>{{ video.channel.displayName }}</b>
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</table>
|
</div>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -4,13 +4,12 @@
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
<table>
|
<div id="wrap">
|
||||||
{% for video in videos.data %}
|
{% for video in videos.data %}
|
||||||
<tr>
|
<div class="result-wrapper">
|
||||||
<td>
|
|
||||||
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
||||||
</td>
|
|
||||||
<td>
|
<div class="result-info">
|
||||||
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
||||||
<br>
|
<br>
|
||||||
{{ video.views }} Views
|
{{ video.views }} Views
|
||||||
|
@ -22,9 +21,9 @@
|
||||||
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
|
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
|
||||||
{{ video.account.name }}@{{ video.account.host }}
|
{{ video.account.name }}@{{ video.account.host }}
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</table>
|
</div>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -4,13 +4,12 @@
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
<table>
|
<div id="wrap">
|
||||||
{% for video in videos.data %}
|
{% for video in videos.data %}
|
||||||
<tr>
|
<div class="result-wrapper">
|
||||||
<td>
|
|
||||||
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
||||||
</td>
|
|
||||||
<td>
|
<div class="result-info">
|
||||||
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
||||||
<br>
|
<br>
|
||||||
{{ video.views }} Views
|
{{ video.views }} Views
|
||||||
|
@ -22,9 +21,9 @@
|
||||||
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
|
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
|
||||||
{{ video.account.name }}@{{ video.account.host }}
|
{{ video.account.name }}@{{ video.account.host }}
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</table>
|
</div>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -4,13 +4,12 @@
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
<table>
|
<div id="wrap">
|
||||||
{% for video in videos.data %}
|
{% for video in videos.data %}
|
||||||
<tr>
|
<div class="result-wrapper">
|
||||||
<td>
|
|
||||||
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
||||||
</td>
|
|
||||||
<td>
|
<div class="result-info">
|
||||||
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
||||||
<br>
|
<br>
|
||||||
{{ video.views }} Views
|
{{ video.views }} Views
|
||||||
|
@ -22,9 +21,10 @@
|
||||||
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
|
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
|
||||||
{{ video.account.name }}@{{ video.account.host }}
|
{{ video.account.name }}@{{ video.account.host }}
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</table>
|
</div>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -4,13 +4,12 @@
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
|
|
||||||
<table>
|
<div id="wrap">
|
||||||
{% for video in videos.data %}
|
{% for video in videos.data %}
|
||||||
<tr>
|
<div class="result-wrapper">
|
||||||
<td>
|
|
||||||
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
||||||
</td>
|
|
||||||
<td>
|
<div class="result-info">
|
||||||
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
||||||
<br>
|
<br>
|
||||||
{{ video.views }} Views
|
{{ video.views }} Views
|
||||||
|
@ -22,9 +21,9 @@
|
||||||
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
|
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
|
||||||
{{ video.account.name }}@{{ video.account.host }}
|
{{ video.account.name }}@{{ video.account.host }}
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</table>
|
</div>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -5,15 +5,14 @@
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<p>{{ results.total }} results</p>
|
<p>{{ results.total }} results</p>
|
||||||
|
|
||||||
<table>
|
<div id="wrap">
|
||||||
{% for result in results.data %}
|
{% for result in results.data %}
|
||||||
<tr>
|
<div class="result-wrapper">
|
||||||
<td>
|
|
||||||
<a href="/{{ domain }}/videos/watch/{{ result.uuid }}">
|
<a href="/{{ domain }}/videos/watch/{{ result.uuid }}">
|
||||||
<img src="https://{{ domain }}{{ result.thumbnailPath }}" height="150"/>
|
<img src="https://{{ domain }}{{ result.thumbnailPath }}" height="150"/>
|
||||||
</a>
|
</a>
|
||||||
</td>
|
|
||||||
<td>
|
<div class="result-info">
|
||||||
<a href="/{{ domain }}/videos/watch/{{ result.uuid }}">{{ result.name }}</a>
|
<a href="/{{ domain }}/videos/watch/{{ result.uuid }}">{{ result.name }}</a>
|
||||||
<br>
|
<br>
|
||||||
{{ result.views }} Views
|
{{ result.views }} Views
|
||||||
|
@ -25,8 +24,9 @@
|
||||||
<a href="/{{ domain }}/accounts/{{ result.account.name }}@{{ result.account.host }}">
|
<a href="/{{ domain }}/accounts/{{ result.account.name }}@{{ result.account.host }}">
|
||||||
{{ result.account.name }}@{{ result.account.host }}
|
{{ result.account.name }}@{{ result.account.host }}
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</table>
|
</div>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -30,24 +30,23 @@
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
{{ results.total }} Results
|
{{ results.total }} Results
|
||||||
<table>
|
|
||||||
{% for result in results.data %}
|
|
||||||
<tr>
|
|
||||||
<td>
|
|
||||||
<img src="{{ result.thumbnailUrl }}" height="150"/>
|
|
||||||
</td>
|
|
||||||
<td>
|
|
||||||
<a href="/{{ result.channel.host }}/videos/watch/{{ result.uuid }}">
|
|
||||||
{{ result.name }}
|
|
||||||
</a>
|
|
||||||
<br>
|
|
||||||
{{ result.views }} Views
|
|
||||||
<br>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
</table>
|
|
||||||
|
|
||||||
|
<div id="wrap">
|
||||||
|
{% for result in results.data %}
|
||||||
|
<div class="result-wrapper">
|
||||||
|
<img src="{{ result.thumbnailUrl }}" height="150">
|
||||||
|
<div class="result-info">
|
||||||
|
<a href="/{{ result.channel.host }}/videos/watch/{{ result.uuid }}">{{ result.name }}</a>
|
||||||
|
<br>
|
||||||
|
{% if result.views == 1%}
|
||||||
|
1 View
|
||||||
|
{% else %}
|
||||||
|
{{ result.views }} Views
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
{% if pages_total > 1 %}
|
{% if pages_total > 1 %}
|
||||||
{% if page > 1 %}
|
{% if page > 1 %}
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
{% extends "base.html" %}
|
{% extends "base.html" %}
|
||||||
|
|
||||||
{% block head_content %}
|
{% block head_content %}
|
||||||
|
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td>
|
<td>
|
||||||
|
|
|
@ -8,20 +8,18 @@
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<table>
|
<div id="wrap">
|
||||||
{% for playlist in video_playlists.data %}
|
{% for playlist in video_playlists.data %}
|
||||||
<tr>
|
<div class="result-wrapper">
|
||||||
<td>
|
|
||||||
<img src="https://{{ domain }}{{ playlist.thumbnailPath }}" height="150"/>
|
<img src="https://{{ domain }}{{ playlist.thumbnailPath }}" height="150"/>
|
||||||
</td>
|
|
||||||
<td>
|
<div class="result-info">
|
||||||
<b>{{ playlist.displayName }}</b>
|
<b>{{ playlist.displayName }}</b>
|
||||||
<br>
|
<br>
|
||||||
{{ playlist.videosLength }} Videos
|
{{ playlist.videosLength }} Videos
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
{% endfor %}
|
||||||
{% endfor %}
|
</div>
|
||||||
</table>
|
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
@ -8,25 +8,21 @@
|
||||||
<br>
|
<br>
|
||||||
<br>
|
<br>
|
||||||
|
|
||||||
<table>
|
<div id="wrap">
|
||||||
{% for video in videos.data %}
|
{% for video in videos.data %}
|
||||||
<tr>
|
<div class="result-wrapper">
|
||||||
<td>
|
|
||||||
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">
|
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">
|
||||||
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
||||||
</a>
|
</a>
|
||||||
</td>
|
|
||||||
<td>
|
<div class="result-info">
|
||||||
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
||||||
<br>
|
<br>
|
||||||
{{ video.views }} Views
|
{{ video.views }} Views
|
||||||
<br>
|
|
||||||
<b>{{ video.channel.displayName }}</b>
|
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</div>
|
||||||
</tr>
|
</div>
|
||||||
|
{% endfor %}
|
||||||
{% endfor %}
|
</div>
|
||||||
</table>
|
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in a new issue