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:
parent
a65bfcf567
commit
36b9bdfa2c
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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 </i>";
|
||||||
} else {
|
} else {
|
||||||
capture_str = "This is an <b>archived</b> page from ";
|
capture_str += "<i>Archived on </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);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user