Cleaning up video and series pages

vrobbler/templates/videos/series_detail.html

@@ -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>

vrobbler/templates/videos/video_detail.html

@@ -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>