design tweaks

fix to come platforms not showing consoles

lib/consoleicons.js

@@ -14,6 +14,8 @@ export default class ConsoleIcons {
         console = console.replace('Sony PlayStation', 'PlayStation')
         console = console.replace('Microsoft Xbox', 'Xbox')
         console = console.replace(/^Xbox$/, 'Xbox Classic')
+        console = console.replace(/^Nintendo Game Boy$/, 'Nintendo Game Boy/Color')
+        console = console.replace('Nintendo Game Boy Color', 'Nintendo Game Boy/Color')
         if(this.ifConsoleExists(console)){
             return `<img class='console' src='/proxy-image?url=${encodeURIComponent(this.getConsoleImage(console))}'>`
         }

views/pages/info.ejs

@@ -17,7 +17,7 @@
     <div class="col-12 col-lg-10 col-xl-8">
       <div class="col-12 text-center">
             <h2 class="text-white"><%= metadata.title %></h2>
-            <p class="text-secondary"><%= file.category %> <%- consoleIcons.createConsoleImage(file.category) %></p>
+            <p class="text-secondary text-platform"><%= file.category %> <%- consoleIcons.createConsoleImage(file.category) %></p>
           </div>
       <div class="row ml-1">
           <img class="coverart col-md d-block mx-auto" src="<%= coverUrl %>" href="<%= file.path %>">

views/public/css/info.css

@@ -12,12 +12,13 @@
   left: 0;
   width: 100%;
   height: 100%;
+  vertical-align: middle;
+  align-items: center;
 }
 .embed-responsive {
-  position: relative;
+  position: initial;
   overflow: hidden;
   width: 100%;
-  
 }
 .slideshow-container {
   position: relative;
@@ -45,9 +46,27 @@
   width: 240px;
 }
 
-.console {
-  height: 1.5rem;
+.carousel-inner {
+  height: 0;
+  padding-bottom: 60%;
 }
-.text-secondary{
-  font-size: 1.5rem;
+
+.carousel-item {
+  position: absolute !important; /* Bootstrap is insistent */
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+.carousel-item img {
+  height: 100%;
+  object-fit: contain; 
+}
+
+.console {
+  height: 1.6rem;
+}
+.text-platform{
+  font-size: 1.5rem!important;
 }