#551 - Add manual image selection for movies

dashboard-ui/css/metadataeditor.css

@@ -26,8 +26,54 @@
     top: -2px;
 }
 
+.availableImagesList {
+    overflow-y: auto;
+    width: 300px;
+    height: 500px;
+    text-align: center;
+}
+
+.remoteImageContainer {
+    display: inline-block;
+    border: 1px solid #ccc;
+    margin: 5px;
+    vertical-align: top;
+}
+
+.remoteImageDetails {
+    background: #eee;
+    padding: 3px 5px;
+}
+
+.remoteImage {
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    background-size: contain;
+}
+
+.remotePosterImage {
+    width: 150px;
+    height: 225px;
+}
+
+.remoteBackdropImage {
+    width: 272px;
+    height: 153px;
+}
+
+@media all and (min-width: 500px) {
+
+    .availableImagesList {
+        width: 400px;
+    }
+}
+
 @media all and (min-width: 600px) {
 
+    .availableImagesList {
+        width: 500px;
+    }
+
     .editPageSidebar {
         position: fixed;
         top: 36px;
@@ -44,3 +90,110 @@
         width: 70%;
     }
 }
+
+
+@media all and (min-width: 700px) {
+
+    .availableImagesList {
+        width: 600px;
+    }
+}
+
+@media all and (min-width: 800px) {
+
+    .availableImagesList {
+        width: 700px;
+    }
+}
+
+@media all and (min-width: 900px) {
+
+    .availableImagesList {
+        width: 800px;
+    }
+}
+
+@media all and (min-width: 1000px) {
+
+    .availableImagesList {
+        width: 900px;
+    }
+}
+
+@media all and (min-width: 1100px) {
+
+    .availableImagesList {
+        width: 1000px;
+    }
+}
+
+@media all and (min-width: 1200px) {
+
+    .availableImagesList {
+        width: 1100px;
+    }
+}
+
+@media all and (min-width: 1300px) {
+
+    .availableImagesList {
+        width: 1200px;
+    }
+}
+
+@media all and (min-width: 1400px) {
+
+    .availableImagesList {
+        width: 1300px;
+    }
+}
+
+@media all and (min-width: 1500px) {
+
+    .availableImagesList {
+        width: 1400px;
+    }
+}
+
+@media all and (min-width: 1600px) {
+
+    .availableImagesList {
+        width: 1500px;
+    }
+}
+
+@media all and (min-width: 1700px) {
+
+    .availableImagesList {
+        width: 1600px;
+    }
+}
+
+@media all and (min-width: 1800px) {
+
+    .availableImagesList {
+        width: 1700px;
+    }
+}
+
+@media all and (min-width: 1900px) {
+
+    .availableImagesList {
+        width: 1800px;
+    }
+}
+
+@media all and (min-height: 800px) {
+
+    .availableImagesList {
+        height: 600px;
+    }
+}
+
+@media all and (min-height: 900px) {
+
+    .availableImagesList {
+        height: 700px;
+    }
+}
+