tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-11-22 20:00:15 +00:00
Code Issues Projects Releases Wiki Activity

grid and list view for home and channel id templates

Browse Source
This commit is contained in:
simon 2021-10-01 16:24:39 +07:00
parent 7c34ceb9f8
commit 99781290db
5 changed files with 54 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
tubearchivist/home/templates/home/channel_id.html
View File

@ -61,14 +61,18 @@
</div> </div>
</div> </div>
{% endif %} {% endif %}
<div class="view-icons">
<img src="{% static 'img/icon-gridview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="grid" alt="grid view">
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
</div>
<div id="player" class="video-player"></div> <div id="player" class="video-player"></div>
<h2>Videos</h2> <h2>Videos</h2>
<div class="video-list"> <div class="video-list {{ view_style }}">
{% if videos %} {% if videos %}
{% for video in videos %} {% for video in videos %}
<div class="video-item"> <div class="video-item {{ view_style }}">
<a href="#player" data-src="/media/{{ video.source.media_url }}" data-thumb="/cache/videos/{{ video.source.youtube_id }}.jpg" data-title="{{ video.source.title }}" data-channel="{{ video.source.channel.channel_name }}" data-id="{{ video.source.youtube_id }}" onclick="createPlayer(this)"> <a href="#player" data-src="/media/{{ video.source.media_url }}" data-thumb="/cache/videos/{{ video.source.youtube_id }}.jpg" data-title="{{ video.source.title }}" data-channel="{{ video.source.channel.channel_name }}" data-id="{{ video.source.youtube_id }}" onclick="createPlayer(this)">
<div class="video-thumb-wrap"> <div class="video-thumb-wrap {{ view_style }}">
<div class="video-thumb"> <div class="video-thumb">
<img src="/cache/videos/{{ video.source.youtube_id }}.jpg" alt="video-thumb"> <img src="/cache/videos/{{ video.source.youtube_id }}.jpg" alt="video-thumb">
</div> </div>
@ -77,7 +81,7 @@
</div> </div>
</div> </div>
</a> </a>
<div class="video-desc"> <div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}"> <div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
{% if video.source.player.watched %} {% if video.source.player.watched %}
<img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" class="seen-icon"> <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" class="seen-icon">

8
tubearchivist/home/templates/home/home.html
View File

@ -36,12 +36,12 @@
<img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view"> <img src="{% static 'img/icon-listview.svg' %}" onclick="changeView(this)" data-origin="home" data-value="list" alt="list view">
</div> </div>
<div id="player" class="video-player"></div> <div id="player" class="video-player"></div>
<div class="video-list"> <div class="video-list {{ view_style }}">
{% if videos %} {% if videos %}
{% for video in videos %} {% for video in videos %}
<div class="video-item"> <div class="video-item {{ view_style }}">
<a href="#player" data-src="/media/{{ video.source.media_url }}" data-thumb="/cache/videos/{{ video.source.youtube_id }}.jpg" data-title="{{ video.source.title }}" data-channel="{{ video.source.channel.channel_name }}" data-id="{{ video.source.youtube_id }}" onclick="createPlayer(this)"> <a href="#player" data-src="/media/{{ video.source.media_url }}" data-thumb="/cache/videos/{{ video.source.youtube_id }}.jpg" data-title="{{ video.source.title }}" data-channel="{{ video.source.channel.channel_name }}" data-id="{{ video.source.youtube_id }}" onclick="createPlayer(this)">
<div class="video-thumb-wrap"> <div class="video-thumb-wrap {{ view_style }}">
<div class="video-thumb"> <div class="video-thumb">
<img src="/cache/videos/{{ video.source.youtube_id }}.jpg" alt="video-thumb"> <img src="/cache/videos/{{ video.source.youtube_id }}.jpg" alt="video-thumb">
</div> </div>
@ -50,7 +50,7 @@
</div> </div>
</div> </div>
</a> </a>
<div class="video-desc"> <div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}"> <div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
{% if video.source.player.watched %} {% if video.source.player.watched %}
<img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" class="seen-icon"> <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" class="seen-icon">

7
tubearchivist/home/views.py
View File

@ -223,9 +223,9 @@ class ChannelIdView(View):
def get(self, request, channel_id_detail): def get(self, request, channel_id_detail):
"""get method""" """get method"""
es_url, colors = self.read_config() es_url, colors, view_style = self.read_config()
context = self.get_channel_videos(request, channel_id_detail, es_url) context = self.get_channel_videos(request, channel_id_detail, es_url)
context.update({"colors": colors}) context.update({"colors": colors, "view_style": view_style})
return render(request, "home/channel_id.html", context) return render(request, "home/channel_id.html", context)
@staticmethod @staticmethod
@ -234,7 +234,8 @@ class ChannelIdView(View):
config = AppConfig().config config = AppConfig().config
es_url = config["application"]["es_url"] es_url = config["application"]["es_url"]
colors = config["application"]["colors"] colors = config["application"]["colors"]
return es_url, colors view_style = config["default_view"]["home"]
return es_url, colors, view_style
def get_channel_videos(self, request, channel_id_detail, es_url): def get_channel_videos(self, request, channel_id_detail, es_url):
"""get channel from video index""" """get channel from video index"""

42
tubearchivist/static/css/style.css
View File

@ -274,16 +274,27 @@ button:hover {
/* video list */ /* video list */
.video-list { .video-list.grid {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem; grid-gap: 1rem;
} }
.video-list.list {
display: grid;
grid-template-columns: unset;
grid-gap: 1rem;
}
.video-item { .video-item {
overflow: hidden; overflow: hidden;
} }
.video-item.list {
display: grid;
grid-template-columns: 25% auto;
}
.video-thumb img { .video-thumb img {
width: 100%; width: 100%;
} }
@ -314,12 +325,25 @@ button:hover {
padding: 8px; padding: 8px;
} }
.video-desc { .video-desc.grid {
padding: 10px; padding: 10px;
height: 100%; height: 100%;
background-color: var(--highlight-bg); background-color: var(--highlight-bg);
} }
.video-desc.list {
padding: 10px;
height: unset;
background-color: var(--highlight-bg);
display: flex;
flex-wrap: wrap-reverse;
align-content: center;
}
.video-desc > div {
width: 100%;
}
.video-desc img { .video-desc img {
width: 20px; width: 20px;
margin-right: 10px; margin-right: 10px;
@ -599,9 +623,13 @@ button:hover {
.boxed-content { .boxed-content {
width: 90%; width: 90%;
} }
.video-list { .video-list.grid {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
} }
.video-item.list {
display: grid;
grid-template-columns: 35% auto;
}
.two-col { .two-col {
display: block; display: block;
} }
@ -615,9 +643,15 @@ button:hover {
* { * {
word-wrap: anywhere; word-wrap: anywhere;
} }
.video-list { .video-list.grid,
.video-item.list {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }
.video-desc.grid {
height: unset;
display: flex;
flex-wrap: wrap-reverse;
}
.boxed-content { .boxed-content {
width: 95%; width: 95%;
} }

1
tubearchivist/static/script.js
View File

@ -47,7 +47,6 @@ function changeView(image) {
var sourcePage = image.getAttribute("data-origin"); var sourcePage = image.getAttribute("data-origin");
var newView = image.getAttribute("data-value"); var newView = image.getAttribute("data-value");
var payload = JSON.stringify({'change_view': sourcePage + ":" + newView}); var payload = JSON.stringify({'change_view': sourcePage + ":" + newView});
console.log(payload);
sendPost(payload); sendPost(payload);
setTimeout(function(){ setTimeout(function(){
location.reload(); location.reload();