replay banner tweaks:

- two line display, include title (if available) or url in the banner - switch to dark theme consistent with query ui
webrecorder · Jan 9, 2018 · 36b9bdf · 36b9bdf
1 parent a65bfcf
commit 36b9bdf
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 11 deletions.
diff --git a/pywb/static/default_banner.css b/pywb/static/default_banner.css
@@ -6,14 +6,22 @@
     left: 0px !important;
     font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
     width: 100% !important;
-    font-size: 24px !important;
-    background-color: lightYellow !important;
-    color: black !important;
+    font-size: 18px !important;
+    background-color: #444 !important;
+    color: white !important;
     text-align: center !important;
     z-index: 2147483643 !important;
     line-height: normal !important;
 }
 
+#title_or_url {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding-right: 4px;
+  display: block;
+}
+
 #_wb_plain_banner
 {
     position: absolute !important;
@@ -25,15 +33,15 @@
 {
     position: absolute !important;
     border: 0px;
-    height: 40px !important;
+    height: 44px !important;
 }
 
 #wb_iframe_div
 {
     position: absolute;
     width: 100%;
     height: 100%;
-    padding: 40px 4px 4px 0px;
+    padding: 44px 4px 4px 0px;
     border: none;
     box-sizing: border-box;
     -moz-box-sizing: border-box;
@@ -45,7 +53,7 @@
 {
     width: 100%;
     height: 100%;
-    border: 2px solid tan;
+    border: 2px solid #545454;
     padding: 0px 0px 0px 0px;
     overflow: scroll;
 }
diff --git a/pywb/static/default_banner.js b/pywb/static/default_banner.js
@@ -52,23 +52,32 @@ This file is part of pywb, https://github.com/ikreymer/pywb
         banner.setAttribute("id", bid);
         banner.setAttribute("lang", "en");
 
-        var text = "<span id='_wb_capture_info'>Loading...</span>";
+        var text = "";
+        text += "<span id='_wb_capture_info'>Loading...</span>";
 
         banner.innerHTML = text;
         document.body.insertBefore(banner, document.body.firstChild);
     }
 
-    function set_banner(url, ts, is_live) {
+    function set_banner(url, ts, is_live, title) {
         var capture_str;
 
         if (!ts) {
             return;
         }
 
+        if (title) {
+            capture_str = '"' + title + '"';
+        }  else {
+            capture_str = url;
+        }
+
+        capture_str = "<b id='title_or_url'>" + capture_str + "</b>";
+
         if (is_live) {
-            capture_str = "This is a <b>live</b> page from ";
+            capture_str += "<i>Live on&nbsp;</i>";
         } else {
-            capture_str = "This is an <b>archived</b> page from ";
+            capture_str += "<i>Archived on&nbsp;</i>";
         }
 
         capture_str += ts_to_date(ts, true);
@@ -92,7 +101,7 @@ This file is part of pywb, https://github.com/ikreymer/pywb
             window.addEventListener("message", function(event) {
                 var state = event.data;
                 if (state.wb_type) {
-                    set_banner(state.url, state.ts, state.is_live);
+                    set_banner(state.url, state.ts, state.is_live, state.title);
                 }
             });
         }