Peertube
/
SimpleerTube_peertube_minimalist_frontend
mirror of https://git.sr.ht/~metalune/simpleweb_peertube
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

16
templates/accounts/video_channels.html
View File

@ -8,21 +8,21 @@
<br> <br>
<br> <br>
<table>
<div id="wrap">
{% for channel in video_channels.data %} {% for channel in video_channels.data %}
<tr> <div class="result-wrapper">
<td>
<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 %}

15
templates/accounts/videos.html
View File

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

15
templates/instance/local.html
View File

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

15
templates/instance/most-liked.html
View File

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

16
templates/instance/recently-added.html
View File

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

15
templates/instance/trending.html
View File

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

16
templates/search_results.html
View File

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

33
templates/simpleer_search_results.html
View File

@ -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
templates/video_channels/base.html
View File

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

16
templates/video_channels/video_playlists.html
View File

@ -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 %}
</table> </div>
{% endblock %} {% endblock %}

18
templates/video_channels/videos.html
View File

@ -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 %}
</table> </div>
{% endblock %} {% endblock %}