Merge pull request #1167 from jdlrobson/unblockHomeRender

Unblock home render
internetarchive · Sep 25, 2018 · b1223d9 · b1223d9
2 parents 0bcb6dd + 18d3922
commit b1223d9
Show file tree

Hide file tree

Showing 14 changed files with 96 additions and 42 deletions.
diff --git a/openlibrary/templates/books/custom_carousel.html b/openlibrary/templates/books/custom_carousel.html
@@ -22,7 +22,7 @@ <h2 class="home-h2"><a href="$url">$title</a></h2>
             </div>
         </div>
         <script type="text/javascript">
-              \$().ready(function() {
+              window.q.push(function() {
                 Carousel.add('.carousel-$key', 6, 5, 4, 3, 2, 1);
               });
         </script>

diff --git a/openlibrary/templates/home/categories.html b/openlibrary/templates/home/categories.html
@@ -28,7 +28,7 @@ <h2 class="home-h2"><a href="/subjects">Browse by Subject</a></h2>
     </div>
   </div>
   <script type="text/javascript">
-  \$().ready(function() {
+  window.q.push(function() {
     Carousel.add('#categories_carousel', 6, 5, 4, 3, 2);
   });
   </script>
diff --git a/openlibrary/templates/home/stats.html b/openlibrary/templates/home/stats.html
@@ -45,7 +45,7 @@ <h2 class="inline">Around the Library</h2>
 
     <script type="text/javascript">
 
-    \$(function () {
+    window.q.push(function () {
          plot_data("#visitors", $:json_encode(stats["visitors"].get_counts(28, True)), "#e44028", "unique visitors on");
          plot_data("#members", $:json_encode(stats["members"].get_counts(28, True)), "#748d36", "new members on");
          plot_data("#edits", $:json_encode(stats["human_edits"].get_counts(28, True)), "#00636a","catalog edits on");

diff --git a/openlibrary/templates/lib/nav_head.html b/openlibrary/templates/lib/nav_head.html
@@ -22,7 +22,9 @@
   <div class="logo-component">
     <a href="/" title="The Internet Archive's Open Library: One page for every book">
       <div class="logo-txt">
-        <img class="logo-icon" src="/static/images/openlibrary-logo-tighter.svg" alt="Open Library logo"/>
+        <img class="logo-icon" src="/static/images/openlibrary-logo-tighter.svg"
+          width="194" height="47"
+          alt="Open Library logo"/>
       </div>
     </a>
   </div>
@@ -59,7 +61,8 @@
 
   <ul class="navigation-component">
     <li class="browse-menu">
-      <a>$_('Browse') <img class="down-arrow" aria-hidden="true" alt="$_('Browse')" role="presentation" src="/static/images/down-arrow.png"/></a>
+      <a>$_('Browse') <img class="down-arrow"
+        width="7" height="4" aria-hidden="true" alt="$_('Browse')" role="presentation" src="/static/images/down-arrow.png"/></a>
       <div class="navigation-dropdown-component">
         <ul class="dropdown-menu browse-menu-options">
           <li><a href="/subjects/science">$_("Science")</a></li>
@@ -74,7 +77,8 @@
       </div>
     </li>
     <li class="my-books-menu">
-      <a>$_('My Books') <img class="down-arrow" aria-hidden="true" alt="$_('My Books')" role="presentation" src="/static/images/down-arrow.png"/></a>
+      <a>$_('My Books') <img class="down-arrow"
+        width="7" height="4" aria-hidden="true" alt="$_('My Books')" role="presentation" src="/static/images/down-arrow.png"/></a>
       <div class="navigation-dropdown-component">
         <ul class="dropdown-menu my-books-menu-options">
           <li><a href="/account/loans">$_("My Loans")</a></li>
@@ -84,7 +88,8 @@
       </div>
     </li>
     <li class="more-menu">
-      <a>$_('More') <img class="down-arrow" aria-hidden="true" alt="$_('More')" role="presentation" src="/static/images/down-arrow.png"/></a>
+      <a>$_('More') <img class="down-arrow"
+        width="7" height="4" aria-hidden="true" alt="$_('More')" role="presentation" src="/static/images/down-arrow.png"/></a>
       <div class="navigation-dropdown-component">
         <ul class="dropdown-menu more-menu-options">
           <li><a href="/books/add">$_("Add a Book")</a></li>
@@ -101,9 +106,9 @@
   $if not ctx.user:
     <ul class="auth-component">
       <li class="hide-me">
-        <a class="generic-button generic-button-secondary white"
+        <a class="btn"
            href="/account/login">$_("Log In")</a></li>
-      <li><a class="generic-button generic-button-primary" href="/account/create">$_("Sign Up")</a></li>
+      <li><a class="btn primary" href="/account/create">$_("Sign Up")</a></li>
     </ul>
 
   $if ctx.user:
@@ -112,7 +117,7 @@
         <button class="avatar" id="userToggle" aria-label="My account" style="background-image: url('https://archive.org/services/img/$(get_internet_archive_id(ctx.user.key))');"></button>
         <img class="down-arrow" aria-hidden="true" alt="$_('My Account')" role="presentation" src="/static/images/down-arrow.png"/>
       </div>
-      <div class="account-dropdown hidden" id="main-account-dropdown">
+      <div class="account-dropdown navigation-dropdown-component" id="main-account-dropdown">
         <ul class="dropdown-menu">
           <li><a href="$homepath()/account/loans">$_("My Loans")</a></li>
           <li><a href="$ctx.user.key/lists">$_("My Lists")</a></li>

diff --git a/openlibrary/templates/site.html b/openlibrary/templates/site.html
@@ -8,4 +8,4 @@
 
 $:render_template("site/body", page)
 
-$:render_template("site/footer")
+$:render_template("site/footer", page)
diff --git a/openlibrary/templates/site/footer.html b/openlibrary/templates/site/footer.html
@@ -12,4 +12,38 @@
 $if bodyid == 'user' or 'admin':
     $:render_template('lib/analytics', page)
 </body>
+    $if 'v2' in page:
+        <script type="text/javascript" src="/static/js/jquery-1.11.0.min.js"></script>
+        <script type="text/javascript" src="/static/js/jquery-migrate-1.2.1.min.js"></script>
+        <script type="text/javascript" src="/static/js/slick-1.6.0.min.js"></script>
+        <!-- Must be loaded after jquery -->
+        <script src="//archive.org/includes/analytics.js?v=0c15bbe" type="text/javascript"></script>
+        <script>
+        <!-- anonymized analytics -->
+        window.addEventListener('DOMContentLoaded', function send_analytics_pageview() {
+            archive_analytics.send_pageview({});
+        });
+        </script>
+
+        <script src="$static_url('build/vendor.js')" type="text/javascript"></script>
+        <script src="$static_url('build/all.js')" type="text/javascript"></script>
+
+        $if query_param("_firebug") == "true":
+            <script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
+
+        $if any([path in request.canonical_url for path in ['/account/create', '/books/add', '/edit', '/books']]):
+            <!-- Must be loaded in Sign Up and Add new Books page -->
+            <!-- Must be loaded for all edit pages having link /books/*/*/edit -->
+            <script src="https://www.google.com/recaptcha/api.js" async defer></script>
+
+    <!-- clear the window.q and setup the jQuery plugins -->
+    <script>
+    \$( function () {
+        var i;
+        for ( i = 0; i < window.q.length; i++ ) {
+            \$( window.q[i] );
+        }
+        window.q = [];
+    } );
+    </script>
 </html>
diff --git a/openlibrary/templates/site/head.html b/openlibrary/templates/site/head.html
@@ -24,7 +24,18 @@
     <link href="/static/images/openlibrary-128x128.png" rel="icon" sizes="128x128" />
     $ style = 'build/page-%s.css'%ctx.get('bodyid', 'user')
     <link href="$static_url(style)" rel="stylesheet" type="text/css" />
-    <link href="$static_url('build/js-all.css')" rel="stylesheet" type="text/css"/>
+    <!-- Both v2 and v1 pages have a JavaScript execution queue that will
+    be emptied at the bottom of the page -->
+    <script type="text/javascript">window.q = [];</script>
+    $ styleJS = static_url('build/js-all.css');
+    $if 'v2' not in page:
+        $# Load CSS via render blocking style tag
+        <link href="$styleJS" rel="stylesheet" type="text/css"/>
+    $else:
+        $# Load CSS via JavaScript later to speed up first paint
+        <script>window.q.push(function () {
+            loadStyle("$styleJS");
+        });</script>
     $if "dev" in ctx.features:
         <link href="$static_url('build/page-dev.css')" rel="stylesheet" type="text/css"/>
 
@@ -33,24 +44,18 @@
     <meta http-equiv="X-UA-Compatible" content="chrome=1" /> <!-- Enable Chrome Frame for IE -->
     <meta name="alexaVerifyID" content="wJKlTRj1Z1OI4G-J0w9R-cWhJjw" /> <!-- Necessary for Alexa -->
 
-    $if 'v2' in page:
-        <script type="text/javascript" src="/static/js/jquery-1.11.0.min.js"></script>
-        <script type="text/javascript" src="/static/js/jquery-migrate-1.2.1.min.js"></script>
-        <script type="text/javascript" src="/static/js/slick-1.6.0.min.js"></script>
-    $else:
+    $if 'v2' not in page:
         <script src="/static/js/jquery-1.3.2.min.js" type="text/javascript"></script>
         <script src="/static/js/jquery-ui-1.7.2.min.js" type="text/javascript"></script>
-
-    <!-- Must be loaded after jquery -->
-    <script src="//archive.org/includes/analytics.js?v=0c15bbe" type="text/javascript"></script>
-    <script> <!-- anonymized analytics -->
-      window.addEventListener('DOMContentLoaded', function send_analytics_pageview() {
-        archive_analytics.send_pageview({});
-      });
-    </script>
-
-    <script src="$static_url('build/vendor.js')" type="text/javascript"></script>
-    <script src="$static_url('build/all.js')" type="text/javascript"></script>
+        <!-- Must be loaded after jquery -->
+        <script src="//archive.org/includes/analytics.js?v=0c15bbe" type="text/javascript"></script>
+        <script> <!-- anonymized analytics -->
+        window.addEventListener('DOMContentLoaded', function send_analytics_pageview() {
+            archive_analytics.send_pageview({});
+        });
+        </script>
+        <script src="$static_url('build/vendor.js')" type="text/javascript"></script>
+        <script src="$static_url('build/all.js')" type="text/javascript"></script>
 
     $if query_param("_firebug") == "true":
         <script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>

diff --git a/openlibrary/templates/site/stats.html b/openlibrary/templates/site/stats.html
@@ -16,7 +16,7 @@ <h3>Details</h3>
         $s.data
 </pre>
 <script type="text/javascript">
-    \$(document).ready(function() {
+    window.q.push(function() {
         \$(document).keypress(function(e) {
             // Toggle debug stats on Ctrl+Alt+.
             if (e.altKey && e.ctrlKey && e.which == 46) {

diff --git a/static/css/components/buttonBtn.less b/static/css/components/buttonBtn.less
@@ -7,6 +7,8 @@
   padding: 5px 10px;
   &.primary {
     background-color: @primary-blue;
+    // Important is necessary to override default link color
+    color: @white !important;
     border-radius: 3px;
   }
 }

diff --git a/static/css/components/buttonGhost.less b/static/css/components/buttonGhost.less
@@ -5,5 +5,7 @@ a {
     border: 1px solid @mid-grey;
     font-weight: 500;
     text-decoration: none;
+    // Important is necessary to override default link color
+    color: @white !important;
   }
 }
diff --git a/static/css/components/header-bar.less b/static/css/components/header-bar.less
@@ -159,6 +159,7 @@ header#header-bar {
       position: relative;
       top: -1px;
       height: 30px;
+      width: auto;
       margin-right: 5px;
       padding-right: 5px;
       -ms-flex-item-align: center;
@@ -196,12 +197,6 @@ header#header-bar {
         }
       }
 
-      .browse-menu-options,
-      .my-books-menu-options,
-      .more-menu-options {
-        display: none;
-      }
-
       .dropdown-menu {
         position: absolute;
         z-index: 999;
@@ -495,6 +490,16 @@ header#header-bar {
   }
 }
 
+.navigation-component li,
+.account-component {
+  .navigation-dropdown-component {
+    display: none;
+  }
+  &:hover .navigation-dropdown-component {
+    display: block;
+  }
+}
+
 .logo-component {
   margin: 0 0 5px 0;
   a {
@@ -514,6 +519,9 @@ header#header-bar {
 }
 
 .search-component {
+  .search-facet {
+    min-width: 25px;
+  }
   .search-bar-advanced-btn {
     margin: 10px;
     border: 0 none;

diff --git a/static/css/components/page-banner.less b/static/css/components/page-banner.less
@@ -7,9 +7,6 @@
   border-top-left-radius: 3px;
   border-bottom: 1px solid @beige;
 
-  a {
-    color: @white;
-  }
   &-black {
     background-color: @dark-grey;
     padding: 5px;

diff --git a/static/css/js-all.less b/static/css/js-all.less
@@ -1,7 +1,9 @@
 /**
  * Styles here will load for all users, but only if JavaScript is enabled.
- * At time of writing, this stylesheet is render blocking.
- * However, the long term plan for this stylesheet is not to be render blocking.
+ * At time of writing, this stylesheet is render blocking unless a page that
+ * is passed through the template engine enables 'v2' via `page.v2 = True`
+ * The long term plan for this stylesheet is not to be render blocking
+ * on all pages.
  */
 @import (less) "less/colors.less";
 

diff --git a/static/css/page-home.less b/static/css/page-home.less
@@ -21,8 +21,7 @@ p {
 
 // Import components this page uses
 @import (less) "components/book.less";
-// One button should be enough, but for now we need 3.
-@import "components/buttonGeneric.less";
+// One button should be enough, but for now we need 2.
 @import "components/buttonGhost.less";
 @import "components/buttonBtn.less";
 // End buttons