Use Grid for displaying results

This commit is contained in:
metalune 2021-07-18 00:10:24 +02:00
parent f5a5ac3f2b
commit 4e6dd1df7a
12 changed files with 188 additions and 180 deletions

20
static/style.css Executable file → Normal file
View 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;

View File

@ -8,21 +8,21 @@
<br>
<br>
<table>
{% for channel in video_channels.data %}
<tr>
<td>
<div id="wrap">
{% for channel in video_channels.data %}
<div class="result-wrapper">
<img src="https://{{ domain }}{{ channel.avatar.path }}" height="75"/>
</td>
<td>
<a href="/{{ domain }}/video-channels/{{ channel.name }}@{{ channel.host }}">
<b>{{ channel.displayName }}</b>
</a>
<br>
{{ channel.followersCount }} Followers
</td>
</tr>
{% endfor %}
</table>
<div class="result-info">
<a href="/{{ domain }}/video-channels/{{ channel.name }}@{{ channel.host }}">
<b>{{ channel.displayName }}</b>
</a>
<br>
{{ channel.followersCount }} Followers
</div>
</div>
{% endfor %}
</div>
{% endblock %}

View File

@ -8,24 +8,23 @@
<br>
<br>
<table>
{% for video in videos.data %}
<tr>
<td>
<div id="wrap">
{% for video in videos.data %}
<div class="result-wrapper">
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
</a>
</td>
<td>
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
<br>
{{ video.views }} Views
<br>
<b>{{ video.channel.displayName }}</b>
</a>
</td>
</tr>
{% endfor %}
</table>
<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>
</div>
</div>
{% endfor %}
</div>
{% endblock %}

View File

@ -4,27 +4,26 @@
{% 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>
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
<br>
{{ video.views }} Views
<br>
<a href="/{{ domain }}/accounts/{{ video.channel.name }}@{{ video.channel.host }}">
<b>{{ video.channel.displayName }}</b>
</a>
<br>
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
{{ video.account.name }}@{{ video.account.host }}
</a>
</td>
</tr>
<div class="result-info">
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
<br>
{{ video.views }} Views
<br>
<a href="/{{ domain }}/accounts/{{ video.channel.name }}@{{ video.channel.host }}">
<b>{{ video.channel.displayName }}</b>
</a>
<br>
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
{{ video.account.name }}@{{ video.account.host }}
</a>
</div>
</div>
{% endfor %}
</table>
</div>
{% endblock %}

View File

@ -4,27 +4,26 @@
{% 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>
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
<br>
{{ video.views }} Views
<br>
<a href="/{{ domain }}/accounts/{{ video.channel.name }}@{{ video.channel.host }}">
<b>{{ video.channel.displayName }}</b>
</a>
<br>
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
{{ video.account.name }}@{{ video.account.host }}
</a>
</td>
</tr>
<div class="result-info">
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
<br>
{{ video.views }} Views
<br>
<a href="/{{ domain }}/accounts/{{ video.channel.name }}@{{ video.channel.host }}">
<b>{{ video.channel.displayName }}</b>
</a>
<br>
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
{{ video.account.name }}@{{ video.account.host }}
</a>
</div>
</div>
{% endfor %}
</table>
</div>
{% endblock %}

View File

@ -4,27 +4,27 @@
{% 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>
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
<br>
{{ video.views }} Views
<br>
<a href="/{{ domain }}/accounts/{{ video.channel.name }}@{{ video.channel.host }}">
<b>{{ video.channel.displayName }}</b>
</a>
<br>
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
{{ video.account.name }}@{{ video.account.host }}
</a>
</td>
</tr>
<div class="result-info">
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
<br>
{{ video.views }} Views
<br>
<a href="/{{ domain }}/accounts/{{ video.channel.name }}@{{ video.channel.host }}">
<b>{{ video.channel.displayName }}</b>
</a>
<br>
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
{{ video.account.name }}@{{ video.account.host }}
</a>
</div>
</div>
{% endfor %}
</table>
</div>
{% endblock %}

View File

@ -4,27 +4,26 @@
{% 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>
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
<br>
{{ video.views }} Views
<br>
<a href="/{{ domain }}/accounts/{{ video.channel.name }}@{{ video.channel.host }}">
<b>{{ video.channel.displayName }}</b>
</a>
<br>
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
{{ video.account.name }}@{{ video.account.host }}
</a>
</td>
</tr>
<div class="result-info">
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
<br>
{{ video.views }} Views
<br>
<a href="/{{ domain }}/accounts/{{ video.channel.name }}@{{ video.channel.host }}">
<b>{{ video.channel.displayName }}</b>
</a>
<br>
<a href="/{{ domain }}/accounts/{{ video.account.name }}@{{ video.account.host }}">
{{ video.account.name }}@{{ video.account.host }}
</a>
</div>
</div>
{% endfor %}
</table>
</div>
{% endblock %}

View File

@ -5,28 +5,28 @@
{% block content %}
<p>{{ results.total }} results</p>
<table>
{% for result in results.data %}
<tr>
<td>
<a href="/{{ domain }}/videos/watch/{{ result.uuid }}">
<img src="https://{{ domain }}{{ result.thumbnailPath }}" height="150"/>
</a>
</td>
<td>
<a href="/{{ domain }}/videos/watch/{{ result.uuid }}">{{ result.name }}</a>
<br>
{{ result.views }} Views
<br>
<a href="/{{ domain }}/accounts/{{ result.channel.name }}@{{ result.channel.host }}">
<b>{{ result.channel.displayName }}</b>
</a>
<br>
<a href="/{{ domain }}/accounts/{{ result.account.name }}@{{ result.account.host }}">
{{ result.account.name }}@{{ result.account.host }}
</a>
</td>
</tr>
{% endfor %}
</table>
<div id="wrap">
{% for result in results.data %}
<div class="result-wrapper">
<a href="/{{ domain }}/videos/watch/{{ result.uuid }}">
<img src="https://{{ domain }}{{ result.thumbnailPath }}" height="150"/>
</a>
<div class="result-info">
<a href="/{{ domain }}/videos/watch/{{ result.uuid }}">{{ result.name }}</a>
<br>
{{ result.views }} Views
<br>
<a href="/{{ domain }}/accounts/{{ result.channel.name }}@{{ result.channel.host }}">
<b>{{ result.channel.displayName }}</b>
</a>
<br>
<a href="/{{ domain }}/accounts/{{ result.account.name }}@{{ result.account.host }}">
{{ result.account.name }}@{{ result.account.host }}
</a>
</div>
</div>
{% endfor %}
</div>
{% endblock %}

View File

@ -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 %}

View File

@ -1,6 +1,7 @@
{% extends "base.html" %}
{% block head_content %}
<table>
<tr>
<td>

View File

@ -8,20 +8,18 @@
<br>
<br>
<table>
{% for playlist in video_playlists.data %}
<tr>
<td>
<div id="wrap">
{% for playlist in video_playlists.data %}
<div class="result-wrapper">
<img src="https://{{ domain }}{{ playlist.thumbnailPath }}" height="150"/>
</td>
<td>
<b>{{ playlist.displayName }}</b>
<br>
{{ playlist.videosLength }} Videos
</td>
</tr>
{% endfor %}
</table>
<div class="result-info">
<b>{{ playlist.displayName }}</b>
<br>
{{ playlist.videosLength }} Videos
</div>
</div>
{% endfor %}
</div>
{% endblock %}

View File

@ -8,25 +8,21 @@
<br>
<br>
<table>
{% for video in videos.data %}
<tr>
<td>
<div id="wrap">
{% for video in videos.data %}
<div class="result-wrapper">
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
<img src="https://{{ domain }}{{ video.thumbnailPath }}" height="150"/>
</a>
</td>
<td>
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
<br>
{{ video.views }} Views
<br>
<b>{{ video.channel.displayName }}</b>
</a>
</td>
</tr>
{% endfor %}
</table>
<div class="result-info">
<a href="/{{ domain }}/videos/watch/{{ video.uuid }}">{{ video.name }}</a>
<br>
{{ video.views }} Views
</a>
</div>
</div>
{% endfor %}
</div>
{% endblock %}