Use Grid for displaying results
This commit is contained in:
metalune
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 {
|
||||
max-width: 800px;
|
||||
max-width: 1200px;
|
||||
margin: 10px auto;
|
||||
padding-left: 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 {
|
||||
background-color: lightgray;
|
||||
padding: 3px 7px;
|
||||
|
|
|
|||
|
|
@ -8,21 +8,21 @@
|
|||
<br>
|
||||
<br>
|
||||
|
||||
<table>
|
||||
|
||||
<div id="wrap">
|
||||
{% for channel in video_channels.data %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="result-wrapper">
|
||||
<img src="https://{{ domain }}{{ channel.avatar.path }}" height="75"/>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div class="result-info">
|
||||
<a href="/{{ domain }}/video-channels/{{ channel.name }}@{{ channel.host }}">
|
||||
<b>{{ channel.displayName }}</b>
|
||||
</a>
|
||||
<br>
|
||||
{{ channel.followersCount }} Followers
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -8,24 +8,23 @@
|
|||
<br>
|
||||
<br>
|
||||
|
||||
<table>
|
||||
<div id="wrap">
|
||||
{% for video in videos.data %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="result-wrapper">
|
||||
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">
|
||||
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div class="result-info">
|
||||
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
||||
<br>
|
||||
{{ video.views }} Views
|
||||
<br>
|
||||
<b>{{ video.channel.displayName }}</b>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -4,13 +4,12 @@
|
|||
|
||||
{% block content %}
|
||||
|
||||
<table>
|
||||
<div id="wrap">
|
||||
{% for video in videos.data %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="result-wrapper">
|
||||
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div class="result-info">
|
||||
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
||||
<br>
|
||||
{{ video.views }} Views
|
||||
|
|
@ -22,9 +21,9 @@
|
|||
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
|
||||
{{ video.account.name }}@{{ video.account.host }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -4,13 +4,12 @@
|
|||
|
||||
{% block content %}
|
||||
|
||||
<table>
|
||||
<div id="wrap">
|
||||
{% for video in videos.data %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="result-wrapper">
|
||||
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div class="result-info">
|
||||
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
||||
<br>
|
||||
{{ video.views }} Views
|
||||
|
|
@ -22,9 +21,9 @@
|
|||
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
|
||||
{{ video.account.name }}@{{ video.account.host }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -4,13 +4,12 @@
|
|||
|
||||
{% block content %}
|
||||
|
||||
<table>
|
||||
<div id="wrap">
|
||||
{% for video in videos.data %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="result-wrapper">
|
||||
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div class="result-info">
|
||||
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
||||
<br>
|
||||
{{ video.views }} Views
|
||||
|
|
@ -22,9 +21,10 @@
|
|||
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
|
||||
{{ video.account.name }}@{{ video.account.host }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -4,13 +4,12 @@
|
|||
|
||||
{% block content %}
|
||||
|
||||
<table>
|
||||
<div id="wrap">
|
||||
{% for video in videos.data %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="result-wrapper">
|
||||
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div class="result-info">
|
||||
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
||||
<br>
|
||||
{{ video.views }} Views
|
||||
|
|
@ -22,9 +21,9 @@
|
|||
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
|
||||
{{ video.account.name }}@{{ video.account.host }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -5,15 +5,14 @@
|
|||
{% block content %}
|
||||
<p>{{ results.total }} results</p>
|
||||
|
||||
<table>
|
||||
<div id="wrap">
|
||||
{% for result in results.data %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="result-wrapper">
|
||||
<a href="/{{ domain }}/videos/watch/{{ result.uuid }}">
|
||||
<img src="https://{{ domain }}{{ result.thumbnailPath }}" height="150"/>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div class="result-info">
|
||||
<a href="/{{ domain }}/videos/watch/{{ result.uuid }}">{{ result.name }}</a>
|
||||
<br>
|
||||
{{ result.views }} Views
|
||||
|
|
@ -25,8 +24,9 @@
|
|||
<a href="/{{ domain }}/accounts/{{ result.account.name }}@{{ result.account.host }}">
|
||||
{{ result.account.name }}@{{ result.account.host }}
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -30,24 +30,23 @@
|
|||
<br>
|
||||
|
||||
{{ 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 page > 1 %}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block head_content %}
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
|
|
|
|||
|
|
@ -8,20 +8,18 @@
|
|||
<br>
|
||||
<br>
|
||||
|
||||
<table>
|
||||
<div id="wrap">
|
||||
{% for playlist in video_playlists.data %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="result-wrapper">
|
||||
<img src="https://{{ domain }}{{ playlist.thumbnailPath }}" height="150"/>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div class="result-info">
|
||||
<b>{{ playlist.displayName }}</b>
|
||||
<br>
|
||||
{{ playlist.videosLength }} Videos
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -8,25 +8,21 @@
|
|||
<br>
|
||||
<br>
|
||||
|
||||
<table>
|
||||
<div id="wrap">
|
||||
{% for video in videos.data %}
|
||||
<tr>
|
||||
<td>
|
||||
<div class="result-wrapper">
|
||||
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">
|
||||
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
<div class="result-info">
|
||||
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
|
||||
<br>
|
||||
{{ video.views }} Views
|
||||
<br>
|
||||
<b>{{ video.channel.displayName }}</b>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
|||
Loading…
Reference in a new issue