1
0
mirror of https://github.com/webrecorder/pywb.git synced 2025-03-24 06:59:52 +01:00

replay banner tweaks:

- two line display, include title (if available) or url in the banner
- switch to dark theme consistent with query ui
This commit is contained in:
Ilya Kreymer 2018-01-09 13:11:44 -08:00
parent a65bfcf567
commit 36b9bdfa2c
2 changed files with 28 additions and 11 deletions

View File

@ -6,14 +6,22 @@
left: 0px !important; left: 0px !important;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
width: 100% !important; width: 100% !important;
font-size: 24px !important; font-size: 18px !important;
background-color: lightYellow !important; background-color: #444 !important;
color: black !important; color: white !important;
text-align: center !important; text-align: center !important;
z-index: 2147483643 !important; z-index: 2147483643 !important;
line-height: normal !important; line-height: normal !important;
} }
#title_or_url {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 4px;
display: block;
}
#_wb_plain_banner #_wb_plain_banner
{ {
position: absolute !important; position: absolute !important;
@ -25,7 +33,7 @@
{ {
position: absolute !important; position: absolute !important;
border: 0px; border: 0px;
height: 40px !important; height: 44px !important;
} }
#wb_iframe_div #wb_iframe_div
@ -33,7 +41,7 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
padding: 40px 4px 4px 0px; padding: 44px 4px 4px 0px;
border: none; border: none;
box-sizing: border-box; box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
@ -45,7 +53,7 @@
{ {
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 2px solid tan; border: 2px solid #545454;
padding: 0px 0px 0px 0px; padding: 0px 0px 0px 0px;
overflow: scroll; overflow: scroll;
} }

View File

@ -52,23 +52,32 @@ This file is part of pywb, https://github.com/ikreymer/pywb
banner.setAttribute("id", bid); banner.setAttribute("id", bid);
banner.setAttribute("lang", "en"); 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; banner.innerHTML = text;
document.body.insertBefore(banner, document.body.firstChild); 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; var capture_str;
if (!ts) { if (!ts) {
return; return;
} }
if (title) {
capture_str = '"' + title + '"';
} else {
capture_str = url;
}
capture_str = "<b id='title_or_url'>" + capture_str + "</b>";
if (is_live) { if (is_live) {
capture_str = "This is a <b>live</b> page from "; capture_str += "<i>Live on&nbsp;</i>";
} else { } 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); 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) { window.addEventListener("message", function(event) {
var state = event.data; var state = event.data;
if (state.wb_type) { if (state.wb_type) {
set_banner(state.url, state.ts, state.is_live); set_banner(state.url, state.ts, state.is_live, state.title);
} }
}); });
} }