Banner fix (#531)

* banner: fix banner display for non-framed and proxy mode replay, ensure new 'View All Captures' ancillary section is also shown

* bump version to 2.4.0rc4

pywb/static/default_banner.css

@@ -11,19 +11,7 @@
     color: white !important;
     z-index: 2147483643 !important;
     line-height: normal !important;
-}
 
-#title_or_url
-{
-    display: block !important;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
-}
-
-#_wb_frame_top_banner
-{
     position: absolute !important;
     border: 0px;
     height: 44px !important;
@@ -44,6 +32,17 @@
     -ms-flex-align: center;
 }
 
+#title_or_url
+{
+    display: block !important;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+}
+
+
+
 #_wb_frame_top_banner ._wb_linked_logo
 {
     display: block;
@@ -110,11 +109,14 @@
 {
     font-size: 12px;
     color: #FFF;
-    margin-right: 15px;
     text-align: right;
-    flex-shrink: 1 0;
+    margin: 0px 15px 0px 0px;
-    -webkit-flex-shrink: 1 0;
+    padding: inherit;
-    -moz-flex-shrink: 1 0;
+    background-color: inherit;
+    width: initial;
+    flex-shrink: 1;
+    -webkit-flex-shrink: 1;
+    -moz-flex-shrink: 1;
     -ms-flex: 0 0 115px;
 }
 #_wb_frame_top_banner #_wb_ancillary_links a:link,

pywb/static/default_banner.js

@@ -45,16 +45,15 @@ This file is part of pywb, https://github.com/webrecorder/pywb
    * @desc Initialize (display) the banner
    */
   DefaultBanner.prototype.init = function() {
+    this.createBanner('_wb_frame_top_banner');
+
     if (window.wbinfo) {
-      this.createBanner('_wb_plain_banner');
       this.set_banner(
         window.wbinfo.url,
         window.wbinfo.timestamp,
         window.wbinfo.is_live,
         window.wbinfo.is_framed ? '' : document.title
       );
-    } else {
-      this.createBanner('_wb_frame_top_banner');
     }
   };
 
@@ -306,4 +305,16 @@ This file is part of pywb, https://github.com/webrecorder/pywb
 
   // all banners will expose themselves by adding themselves as WBBanner on window
   window.WBBanner = new DefaultBanner();
+
+  // if in replay frame, init immediately
+  if (window.wbinfo) {
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", function() {
+        window.WBBanner.init();
+      });
+    } else {
+      window.WBBanner.init();
+    }
+  }
+
 })();

pywb/templates/banner.html

@@ -1,8 +1,4 @@
 {% if not env.pywb_proxy_magic or config.proxy.enable_banner | default(true) %}
-<!-- default banner, create through js -->
-<script src='{{ static_prefix }}/default_banner.js'> </script>
-<link rel='stylesheet' href='{{ static_prefix }}/default_banner.css'/>
-
 <script>
 window.banner_info = {
     is_gmt: true,
@@ -24,4 +20,9 @@ window.banner_info = {
 };
 </script>
 
+<!-- default banner, create through js -->
+<script src='{{ static_prefix }}/default_banner.js'> </script>
+<link rel='stylesheet' href='{{ static_prefix }}/default_banner.css'/>
+
+
 {% endif %}

pywb/version.py

@@ -1,4 +1,4 @@
-__version__ = '2.4.0rc3'
+__version__ = '2.4.0rc4'
 
 if __name__ == '__main__':
     print(__version__)