117 lines
3.6 KiB
HTML
117 lines
3.6 KiB
HTML
{% extends "base_list.html" %}
|
|
{% load static %}
|
|
|
|
{% block title %}{{object.name}}{% endblock %}
|
|
|
|
{% block head_extra %}
|
|
<style>
|
|
.cover {float:left; width:412px; margin-right:10px; padding-bottom:15px;}
|
|
.summary {float:left; width:600px; margin-left:10px;}
|
|
.header {padding-bottom:15px;}
|
|
.image-wrapper { contain: content; }
|
|
.caption {
|
|
position: fixed;
|
|
top: 15px;
|
|
left: 30px;
|
|
padding: 5px;
|
|
font-size: 110%;
|
|
font-weight: bold;
|
|
color:white;
|
|
background:rgba(0,0,0,0.4);
|
|
}
|
|
dl {
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
padding-right:20px;
|
|
border:none;
|
|
}
|
|
dt {
|
|
flex-basis: 20%;
|
|
padding: 5px;
|
|
background: #3cf;
|
|
text-align: right;
|
|
color: #fff;
|
|
}
|
|
dd {
|
|
flex-basis: 70%;
|
|
flex-grow: 1;
|
|
margin: 0;
|
|
padding: 5px;
|
|
border:none;
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block lists %}
|
|
|
|
<div class="row header">
|
|
<div class="cover image-wrapper">
|
|
<img src="{{ object.safe_cover_image_url }}" width="400px" />
|
|
</div>
|
|
<div class="summary">
|
|
{% if object.description %}<p><em>{{object.description}}</em></p>{% endif %}
|
|
{% if object.genre.all %}
|
|
<p>Genres: {% for tag in object.genre.all %}<span class="badge bg-secondary">{{tag.name}}</span> {% endfor %}</p>
|
|
{% endif %}
|
|
<hr />
|
|
{% if object.youtube_id %}
|
|
<p style="float:right;">
|
|
<a href="{{object.youtube_url}}" target="_blank"><img src="{% static "images/youtube_logo.png" %}" width=35></a>
|
|
</p>
|
|
{% endif %}
|
|
{% if object.twitch_id %}
|
|
<p style="float:right;">
|
|
<a href="{{object.twitch_url}}" target="_blank">View on Twitch</a>
|
|
</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% if charts %}
|
|
<div class="row">
|
|
<div class="col-md">
|
|
{% include "scrobbles/_chart_links.html" %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="row">
|
|
<div class="col-md">
|
|
<h3>Last scrobbles</h3>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-sm">
|
|
<thead>
|
|
<tr>
|
|
<th scope="col">Date</th>
|
|
<th scope="col">Title</th>
|
|
<th scope="col">With</th>
|
|
<th scope="col">Rated</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for scrobble in scrobbles %}
|
|
<tr>
|
|
<td><a href={{scrobble.get_absolute_url}}>{{scrobble.local_timestamp}}</a></td>
|
|
<td><a href="{{scrobble.media_obj.get_absolute_url}}">{{scrobble.media_obj.title}}</a></td>
|
|
<td>{% firstof scrobble.logdata.with_people|join:", " "Solo" %}</td>
|
|
<td>{% firstof scrobble.logdata.rating "Unrated" %}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
{% if is_paginated %}
|
|
<nav>
|
|
<ul class="pagination">
|
|
{% if page_obj.has_previous %}
|
|
<li class="page-item"><a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a></li>
|
|
{% endif %}
|
|
<li class="page-item disabled"><span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span></li>
|
|
{% if page_obj.has_next %}
|
|
<li class="page-item"><a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a></li>
|
|
{% endif %}
|
|
</ul>
|
|
</nav>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|