mirror of
https://github.com/tubearchivist/tubearchivist-frontend.git
synced 2024-11-22 11:50:14 +00:00
grid and list view for home and channel id templates
This commit is contained in:
parent
7c34ceb9f8
commit
99781290db
@ -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">
|
||||
|
@ -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">
|
||||
|
@ -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"""
|
||||
|
@ -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%;
|
||||
}
|
||||
|
@ -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();
|
||||
|
Loading…
Reference in New Issue
Block a user