Cleaning up video and series pages

This commit is contained in:
2023-03-14 18:19:14 -04:00
parent fbe35a02a1
commit f9420c7a41
2 changed files with 78 additions and 34 deletions

View File

@ -1,26 +1,37 @@
{% extends "base_list.html" %}
{% load static %}
{% block title %}{{object.title}}{% if object.tv_series %} - {{object.tv_series}}{% endif %}{% endblock %}
{% block title %}{{object.name}}{% if object.tv_series %} - {{object.tv_series}}{% endif %}{% endblock %}
{% block head_extra %}
<style>
.cover {float:left; width:150px; margin-right:10px;}
.summary {float:left; width:600px; margin-left:10px;}
.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);
}
</style>
{% endblock %}
{% block lists %}
<div class="row">
{% if object.cover_image %}
<div class="cover"><img class="cover" src="{{object.cover_image.url}}" /></div>
{% endif %}
<div class="row header">
<div class="cover image-wrapper">
{% if object.imdb_rating %}<div class="caption">{{object.imdb_rating}}</div>{% endif %}
<img src="{% if object.cover_image %}{{object.cover_image.url}}{% else %}{% static 'images/no-video-cover.jpg' %}{% endif %}" width="400px" />
</div>
<div class="summary">
{% if object.plot%}
<p>{{object.plot|safe|linebreaks|truncatewords:160}}</p>
{% if object.plot%}<p>{{object.plot|safe|linebreaks|truncatewords:160}}</p>{% endif %}
<hr />
{% endif %}
<p style="float:right;">
<a href="{{object.imdb_link}}"><img src="{% static " images/imdb-logo.png" %}" width=35></a>
</p>

View File

@ -1,33 +1,76 @@
{% extends "base_list.html" %}
{% load static %}
{% block title %}{{object.title}}{% if object.tv_series %} - {{object.tv_series}}{% endif %}{% endblock %}
{% block title %}{{object.title}}{% endblock %}
{% block head_extra %}
<style>
.cover {float:left; width:150px; margin-right:10px;}
.summary{float:left; width:600px; margin-left:10px;}
.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);
}
.caption-footer {
position: fixed;
bottom: 30px;
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">
{% if object.cover_image %}
<div class="cover"><img src="{{object.cover_image.url}}" /></div>
{% endif %}
<div class="row header">
<div class="cover image-wrapper">
{% if object.imdb_rating %}<div class="caption">{{object.imdb_rating}}</div>{% endif %}
<img src="{% if object.cover_image %}{{object.cover_image.url}}{% else %}{% static 'images/no-video-cover.jpg' %}{% endif %}" width="400px" />
<div class="caption-footer">{{object.year}}{% if object.tv_series %} | <b>S</b>{{object.season_number}} <b>E</b>{{object.episode_number}}{% endif %}</div>
</div>
<div class="summary">
{% if object.overview %}
<p><em>{{object.overview}}</em></p>
{% endif %}
{% if object.plot%}
<p>{{object.plot|safe|linebreaks|truncatewords:160}}</p>
{% if object.tv_series %}<h4><a href="{{object.tv_series.get_absolute_url}}">{{object.tv_series}}</a> - S{{object.season_number}}E{{object.episode_number}}</h4>{% endif %}
{% if object.overview %}<p><em>{{object.overview}}</em></p>{% endif %}
{% if object.plot%}<p>{{object.plot|safe|linebreaks|truncatewords:160}}</p>{% endif %}
<hr />
{% endif %}
<p style="float:right;">
<a href="{{object.imdb_link}}"><img src="{% static " images/imdb-logo.png" %}" width=35></a>
<a href="{{object.tmdb_link}}"><img style="background: black;" src="{% static " images/tmdb-logo.png" %}" width=35></a>
</p>
</div>
<div class="deets">
</div>
</div>
<div class="row">
@ -38,22 +81,12 @@
<thead>
<tr>
<th scope="col">Date</th>
{% if object.tv_series %}
<th scope="col">Series</th>
<th scope="col">Season</th>
<th scope="col">Episode</th>
{% endif %}
</tr>
</thead>
<tbody>
{% for scrobble in object.scrobble_set.all %}
<tr>
<td>{{scrobble.timestamp}}</td>
{% if object.tv_series %}
<td><a href="{{scrobble.video.tv_series.get_absolute_url}}">{{scrobble.video.tv_series}}</a></td>
<td>{{scrobble.video.season_number}}</td>
<td>{{scrobble.video.episode_number}}</td>
{% endif %}
</tr>
{% endfor %}
</tbody>