From 9be3e32741c343fb8c9cd7c7ddb8794363cbef30 Mon Sep 17 00:00:00 2001
From: jdlrobson <jdlrobson@gmail.com>
Date: Fri, 12 Oct 2018 08:15:12 -0700
Subject: [PATCH] Fix add-cover and manage-covers

Changes:
* Pages with id "form" no longer have a header in v2
or any banners
* No margin at the top of pages without a header
* Upgrade some $.ready calls to us the window.q
* Remove some jCarousel code which wasnt functioning before
the migration to v2 and continues not to function
* "three ways" => "two ways". presumably, we used to allow
selection of covers from a carousel, but it doesnt look like
that was working (at least for me locally) prior to making the
page v2
* Remove the float on the manage covers element - it was breaking
compatability with jquery ui. This forces it onto a new line.

Fixes: #1329
Fixes: #1199
---
 openlibrary/templates/covers/add.html    |  6 ++----
 openlibrary/templates/covers/manage.html |  6 +-----
 openlibrary/templates/lib/covers.html    | 12 ------------
 openlibrary/templates/site/body.html     | 16 ++++++++++------
 static/css/page-form.less                |  1 -
 static/css/v2.less                       |  7 ++++++-
 6 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/openlibrary/templates/covers/add.html b/openlibrary/templates/covers/add.html
index c230e7cab5b..cd0c7a90f3b 100644
--- a/openlibrary/templates/covers/add.html
+++ b/openlibrary/templates/covers/add.html
@@ -10,7 +10,7 @@
     $ intro = _("There are two ways to get a cover image on Open Library")
     $ action = doc.url('/add-cover')
 $elif doc.get_edition_covers:
-    $ intro = _("There are three ways to get a cover image on Open Library")
+    $ intro = _("There are two ways to get a cover image on Open Library")
     $ action = doc.url('/add-cover')
 $else:
     $ intro = _("There are two ways to get a cover image on Open Library")
@@ -26,9 +26,7 @@
 
 <script type="text/javascript">
 <!--
-\$().ready(carousels);
-\$().ready(function(){\$('#popcovers').jcarousel();});
-\$(function() {
+window.q.push(function(){
     parent.closeThrobber();
     \$("#form.addcover-form").submit(function(event) {
 
diff --git a/openlibrary/templates/covers/manage.html b/openlibrary/templates/covers/manage.html
index 95805f73663..7b2c314d293 100644
--- a/openlibrary/templates/covers/manage.html
+++ b/openlibrary/templates/covers/manage.html
@@ -4,7 +4,7 @@
 $putctx('robots', 'noindex,nofollow')
 
 <script type="text/javascript">
-\$(function() {
+window.q.push(function () {
     \$(".column").sortable({
         connectWith: '.trash'
     });
@@ -13,10 +13,6 @@
     });
     \$(".column").disableSelection();
     \$(".trash").disableSelection();
-});
-</script>
-<script type="text/javascript">
-\$().ready(function(){
     \$("#topNotice").hide();
 });
 </script>
diff --git a/openlibrary/templates/lib/covers.html b/openlibrary/templates/lib/covers.html
index a70ad3b3c41..c45384225a0 100644
--- a/openlibrary/templates/lib/covers.html
+++ b/openlibrary/templates/lib/covers.html
@@ -30,18 +30,6 @@
         updateBookAvailability('#coversCarousel li ');
     });
 }
-
-\$().ready(function() {
-    page.renderCovers = render_page;
-    page.displayCovers(0);
-});
-
-\$().ready(carousels);
-\$().ready(function() {
-    carouselSetup(loadCoverCarousels);
-    \$('.jcarousel-next').attr('title','View the next editions').append('<h4 class="shift"><a href="#" onclick="return false;">View the next editions</a></h4>');
-    \$('.jcarousel-prev').attr('title','View the previous editions').append('<h4 class="shift"><a href="#" onclick="return false;">View the previous editions</a></h4>');
-});
 //-->
 </script>
 
diff --git a/openlibrary/templates/site/body.html b/openlibrary/templates/site/body.html
index d15ffe95254..59f6182c306 100644
--- a/openlibrary/templates/site/body.html
+++ b/openlibrary/templates/site/body.html
@@ -3,7 +3,7 @@
 $ announcement = '<strong>New Feature:</strong> You can now embed Open Library books on your website! &nbsp; <a href="https://blog.openlibrary.org/2018/05/06/turn-your-website-into-a-library/" data-ol-link-track="AnnouncementsBar|BlogWidget" class="btn primary">Learn More</a>'
 
 $ bodyid = ctx.get('bodyid', 'user')
-
+$ show_banners = bodyid != 'form'
 $if 'v2' in page:
   <body id="$bodyid">
     <script>
@@ -11,12 +11,16 @@
         document.body.className += ' client-js';
     </script>
     <span id="top"></span>
-    $:render_template("site/alert")
-    $:render_template("lib/nav_head", None)
+    $# on form pages e.g. manage-covers, add-cover we do not display the header
+    $# this is consistent with version 1.
+    $if show_banners:
+      $:render_template("site/alert")
+      $:render_template("lib/nav_head", None)
     <div id="test-body-mobile">
-      <div class="page-banner page-banner-body">
-        $:announcement
-      </div>
+      $if show_banners:
+        <div class="page-banner page-banner-body">
+          $:announcement
+        </div>
       $:page
     </div>
 
diff --git a/static/css/page-form.less b/static/css/page-form.less
index b4356e98cfb..20ccc99d087 100644
--- a/static/css/page-form.less
+++ b/static/css/page-form.less
@@ -37,7 +37,6 @@ body#form {
   }
   .column {
     min-height: 90px;
-    float: left;
     margin: 10px;
     background-image: url(/images/back_sortable.png);
     background-repeat: no-repeat;
diff --git a/static/css/v2.less b/static/css/v2.less
index 82e56b2be35..a2ef136cacc 100644
--- a/static/css/v2.less
+++ b/static/css/v2.less
@@ -4,8 +4,13 @@
   max-width: 960px;
   width: 100%;
   margin: 0 auto;
-  margin-top: 20px;
   background-color: @white;
   border-radius: 5px;
   border: 1px solid @dark-beige;
 }
+// For pages without a header we don't want a margin.
+// This might be better placed in the header component in future
+// but is kept here for backwards compatibility with v1 pages
+header + #test-body-mobile {
+  margin-top: 20px;
+}