File meta display

static/public/css/style.css

@@ -128,6 +128,11 @@
     margin: 0;
 }
 
+#pch-fullPageDetail > ul .metaKey {
+    text-decoration: underline;
+    margin-right: .4em;
+}
+
 .login-wrapper {
     position: fixed;
     top: 0;

static/public/js/uiMedia.js

@@ -160,14 +160,22 @@ $(() => {
             val += ' px';
         if (["fileSize"].indexOf(key) >= 0)
             val = serializeFileSize(val);
+        if (key == 'fNumber')
+            val = `f/ ${val}`;
         let keyTranslate = {
             fileSize: "File Size",
             photochamberImport: "Photochamber Imported",
             lensModel: "Lens Model",
             exposureTimeStr: "Exposure Time"
         };
-        let keyStr = keyTranslate[key] || (key[0].toUpperCase()+key.substr(1));
-        li.innerText = `${keyStr}: ${val}`;
+        let keySpan = document.createElement('span');
+        let valSpan = document.createElement('span');
+        keySpan.classList.add("metaKey");
+        valSpan.classList.add("metaVal");
+        keySpan.innerText = (keyTranslate[key] || (key[0].toUpperCase()+key.substr(1))) + ':';
+        valSpan.innerText = val;
+        li.appendChild(keySpan);
+        li.appendChild(valSpan);
         return li;
     }
 
@@ -230,6 +238,12 @@ $(() => {
             window.displayMediaFullPage(media);
     }
 
+    function CloseFullpageMedia() {
+        document.getElementById("pch-fullPageMedia").classList.add("hidden");
+        fullPageMediaDisplayed = false;
+        history.pushState({}, '', '#');
+    }
+
     window.displayMediaFullPage = function(mediaItem) {
         document.getElementById("pch-fullPageMedia").classList.remove("hidden");
         fullPageMediaDisplayed = mediaItem;
@@ -250,11 +264,7 @@ $(() => {
     }
 
     document.getElementById("pch-fullPageMedia-closeBt")
-        .addEventListener("click", () => {
-            document.getElementById("pch-fullPageMedia").classList.add("hidden");
-            fullPageMediaDisplayed = false;
-            history.pushState({}, '', '#');
-        });
+        .addEventListener("click", () => CloseFullpageMedia());
     document.getElementById("pch-fullPagePreview").addEventListener("load", () => {
         document.getElementById("pch-fullPagePreviewContainer").classList.remove("loading");
         let domItem = document.getElementById("pch-fullPagePreview");
@@ -281,6 +291,8 @@ $(() => {
             LoadPreviousMedia();
         else if (evt.keyCode === 39 || evt.keyCode === 40)
             LoadNextMedia();
+        else if (evt.keyCode === 27)
+            CloseFullpageMedia();
         else {
             console.log("Unregistered key event", evt.key, evt.keyCode);
             return;