From e517327ce351c6dc9a9fc05c955a443faa2c8bab Mon Sep 17 00:00:00 2001
From: Colin Powell <colin@unbl.ink>
Date: Thu, 15 Jun 2023 17:20:03 -0400
Subject: [PATCH] Clean up video detail pages

---
 .../videogames/videogame_detail.html          | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/vrobbler/templates/videogames/videogame_detail.html b/vrobbler/templates/videogames/videogame_detail.html
index 39de16b..1b27e66 100644
--- a/vrobbler/templates/videogames/videogame_detail.html
+++ b/vrobbler/templates/videogames/videogame_detail.html
@@ -7,17 +7,28 @@
 
 {% block head_extra %}
 <style>
-    .cover img {
-        width: 250px;
+    .cover   {float:left; width:412px; margin-right:10px; 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);
     }
-
-    .cover {
-        float: left;
-        width: 252px;
-        padding: 0;
-        border: 1px solid #ccc;
+    .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);
     }
-
     .summary {
         float: left;
         width: 600px;
@@ -29,8 +40,12 @@
 {% block lists %}
 
 <div class="row">
-    {% if object.hltb_cover%}
-    <div class="cover"><img src="{{object.hltb_cover.url}}" /></div>
+    {% if object.primary_image_url %}
+    <div class="cover image-wrapper">
+        {% if object.rating %}<div class="caption">{{object.rating}}</div>{% endif %}
+        <img src="{{object.primary_image_url}}" />
+        <div class="caption-footer">{{object.release_year}}</div>
+    </div>
     {% endif %}
     <div class="summary">
         {% if object.summary %}