tubearchivist/tubearchivist-frontend
1
0
Fork 0
mirror of https://github.com/tubearchivist/tubearchivist-frontend.git synced 2024-11-22 11:50:14 +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>
{% 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>
<h2>Videos</h2>
<div class="video-list">
<div class="video-list {{ view_style }}">
{% if 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)">
<div class="video-thumb-wrap">
<div class="video-thumb-wrap {{ view_style }}">
<div class="video-thumb">
<img src="/cache/videos/{{ video.source.youtube_id }}.jpg" alt="video-thumb">
</div>
@ -77,7 +81,7 @@
</div>
</div>
</a>
<div class="video-desc">
<div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
{% if video.source.player.watched %}
<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">
</div>
<div id="player" class="video-player"></div>
<div class="video-list">
<div class="video-list {{ view_style }}">
{% if 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)">
<div class="video-thumb-wrap">
<div class="video-thumb-wrap {{ view_style }}">
<div class="video-thumb">
<img src="/cache/videos/{{ video.source.youtube_id }}.jpg" alt="video-thumb">
</div>
@ -50,7 +50,7 @@
</div>
</div>
</a>
<div class="video-desc">
<div class="video-desc {{ view_style }}">
<div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
{% if video.source.player.watched %}
<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):
"""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.update({"colors": colors})
context.update({"colors": colors, "view_style": view_style})
return render(request, "home/channel_id.html", context)
@staticmethod
@ -234,7 +234,8 @@ class ChannelIdView(View):
config = AppConfig().config
es_url = config["application"]["es_url"]
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):
"""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.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-gap: 1rem;
}
.video-list.list {
display: grid;
grid-template-columns: unset;
grid-gap: 1rem;
}
.video-item {
overflow: hidden;
}
.video-item.list {
display: grid;
grid-template-columns: 25% auto;
}
.video-thumb img {
width: 100%;
}
@ -314,12 +325,25 @@ button:hover {
padding: 8px;
}
.video-desc {
.video-desc.grid {
padding: 10px;
height: 100%;
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 {
width: 20px;
margin-right: 10px;
@ -599,9 +623,13 @@ button:hover {
.boxed-content {
width: 90%;
}
.video-list {
.video-list.grid {
grid-template-columns: 1fr 1fr;
}
.video-item.list {
display: grid;
grid-template-columns: 35% auto;
}
.two-col {
display: block;
}
@ -615,9 +643,15 @@ button:hover {
* {
word-wrap: anywhere;
}
.video-list {
.video-list.grid,
.video-item.list {
grid-template-columns: 1fr;
}
.video-desc.grid {
height: unset;
display: flex;
flex-wrap: wrap-reverse;
}
.boxed-content {
width: 95%;
}

1
tubearchivist/static/script.js
View File

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