Standardise dialog close wire ups

* Remove floaterClose class and associated styling - the two cancel buttons inside the change cover dialog are now consistent with the other buttons that close dialogs. Given the floaterClose buttons used to be red, a red class is added (for now) to keep that the same. * floaterShut is renamed dialog--close * close-popup becomes dialog--close * .floaterShut--parent becomes dialog--close-parent
internetarchive · Oct 28, 2019 · 310e4d5 · 310e4d5
1 parent a45807e
commit 310e4d5
Show file tree

Hide file tree

Showing 17 changed files with 34 additions and 45 deletions.
diff --git a/openlibrary/macros/BookPreview.html b/openlibrary/macros/BookPreview.html
@@ -7,7 +7,7 @@
     <div class="book-preview">
       <div class="floaterHead">
         <h2>$_('Preview Book')</h2>
-        <a class="floaterShut" data-key="book_preview" data-ol-link-track="book_preview"
+        <a class="dialog--close" data-key="book_preview" data-ol-link-track="book_preview"
            title="$_('Close')">&times;<span class="shift">$_("Close")</span></a>
       </div>
       <div id="bookPreviewIframe" class="lazyIframe">

diff --git a/openlibrary/macros/databarAuthor.html b/openlibrary/macros/databarAuthor.html
@@ -27,7 +27,7 @@ <h3>Add to list</h3>
             <div class="floaterAdd" id="addList">
                 <div class="floaterHead">
                     <h2>Create a new list</h2>
-                    <a class="floaterShut">&times;<span class="shift">$_("×")</span></a>
+                    <a class="dialog--close">&times;<span class="shift">$_("×")</span></a>
                 </div>
                 <form method="post" action="" class="floatform">
                 <div class="formElement">
@@ -58,7 +58,7 @@ <h2>Create a new list</h2>
                     <div class="input">
                         <button type="button" class="larger">Add new list</button>
                         &nbsp; &nbsp;
-                        <a class="small plain red floaterShut">Cancel</a>
+                        <a class="small plain red dialog--close">Cancel</a>
                     </div>
                     <div class="label"></div>
                 </div>

diff --git a/openlibrary/plugins/openlibrary/js/automatic.js b/openlibrary/plugins/openlibrary/js/automatic.js
@@ -5,10 +5,6 @@ export default function($) {
     var options;
     // Flash messages are hidden by default so that CSS is not on the critical path.
     $('.flash-messages').show();
-    // close-popup
-    $('a.close-popup').click(function() {
-        $.fn.colorbox.close();
-    });
 
     // tabs
     options = {};

diff --git a/openlibrary/plugins/openlibrary/js/dialog.js b/openlibrary/plugins/openlibrary/js/dialog.js
@@ -3,7 +3,7 @@
  */
 export default function initDialogs() {
     // This will close the dialog in the current page.
-    $('.floaterShut').attr('href', 'javascript:;').on('click', () => $.fn.colorbox.close());
+    $('.dialog--close').attr('href', 'javascript:;').on('click', () => $.fn.colorbox.close());
     // This will close the colorbox from the parent.
-    $('.floaterShut--parent').on('click', () => parent.$.fn.colorbox.close());
+    $('.dialog--close-parent').on('click', () => parent.$.fn.colorbox.close());
 }
diff --git a/openlibrary/templates/books/edit/addcover.html b/openlibrary/templates/books/edit/addcover.html
@@ -4,7 +4,7 @@
     <div class="floater" id="addCover">
         <div class="floaterHead">
             <h2>Book Covers</h2>
-            <a class="floaterShut">&times;<span class="shift">$_("Close")</span></a>
+            <a class="dialog--close">&times;<span class="shift">$_("Close")</span></a>
         </div>
         <form class="floatform" id="addcover-form" name="bookcover" method="POST" enctype="multipart/form-data" action="/uploadcover">
             <div id="popThisUp2" class="floaterAlert hidden"><strong>Ahem.</strong> You appear not to have specified an image. Please choose one?</div>
@@ -29,7 +29,7 @@ <h2>Book Covers</h2>
 
             <div class="formButtons">
                 <button type="submit" name="coverUpload" id="coverUpload" value="Upload" style="width:auto!important;">$_("Upload")</button>
-                <a id="coverClose" class="floaterShut">$_("Cancel")</a>
+                <a id="coverClose" class="dialog--close">$_("Cancel")</a>
             </div>
         </form>
     </div>

diff --git a/openlibrary/templates/books/edit/addfield.html b/openlibrary/templates/books/edit/addfield.html
@@ -64,7 +64,7 @@
     <div class="floaterAdd" id="select-role-popup">
         <div class="floaterHead">
             <h2>$_("Add a New Contributor Role")</h2>
-            <a class="floaterShut close-popup" href="#">&times;</a>
+            <a class="dialog--close" href="#">&times;</a>
         </div>
         <div id="select-role-popup-errors" class="popAlert addfield hidden"></div>
         <form class="floatform" id="addrole-form" name="newrole" method="post" enctype="multipart/form-data" action="">
@@ -80,7 +80,7 @@ <h2>$_("Add a New Contributor Role")</h2>
             <div class="formElement">
                 <button type="submit" name="" class="larger">$_("Add")</button>
                 &nbsp;
-                <a class="red plain close-popup" href="#">$_("Cancel")</a>
+                <a class="red plain dialog--close" href="#">$_("Cancel")</a>
             </div>
         </form>
     </div>
@@ -90,7 +90,7 @@ <h2>$_("Add a New Contributor Role")</h2>
     <div class="floaterAdd" id="select-id-popup">
         <div class="floaterHead">
             <h2>$_("Add a New Type of Identifier")</h2>
-            <a class="floaterShut close-popup" href="#">&times;</a>
+            <a class="dialog--close" href="#">&times;</a>
         </div>
         <div class="popAlert addfield hidden" id="select-id-popup-errors"></div>
         <div class="popNotify"><span class="red">*</span><span class="tip">$_("Required field")</span></div>
@@ -126,7 +126,7 @@ <h2>$_("Add a New Type of Identifier")</h2>
                 <div class="label"></div>
                 <button type="submit" name="" class="larger">$_("Add")</button>
                 &nbsp;
-                <a class="red plain close-popup" href="#">$_("Cancel")</a>
+                <a class="red plain dialog--close" href="#">$_("Cancel")</a>
             </div>
         </form>
     </div>
@@ -135,7 +135,7 @@ <h2>$_("Add a New Type of Identifier")</h2>
     <div class="floaterAdd" id="select-classification-popup">
         <div class="floaterHead">
             <h2>$_("Add a New Classification System")</h2>
-            <a class="floaterShut close-popup" href="#">&times;</a>
+            <a class="dialog--close" href="#">&times;</a>
         </div>
         <div class="popAlert addfield hidden" id="select-classification-popup-errors"></div>
         <div class="popNotify"><span class="red">*</span><span class="tip">$_("Required field")</span></div>
@@ -170,7 +170,7 @@ <h2>$_("Add a New Classification System")</h2>
             <div class="formElement" style="margin-bottom:15px;">
                 <button type="submit" name="" class="larger">$_("Add")</button>
                 &nbsp;
-                <a class="red plain close-popup" href="#">$_("Cancel")</a>
+                <a class="red plain dialog--close" href="#">$_("Cancel")</a>
             </div>
         </form>
     </div>

diff --git a/openlibrary/templates/covers/add.html b/openlibrary/templates/covers/add.html
@@ -126,7 +126,7 @@
 
             <div class="formElement" style="margin: $('15px 0px 0px 15px;' if doc.type.key == "/type/work" else '50px 0px 0px 30px;')">
                 <button type="submit" name="upload" id="imageUpload" value="$_('Submit')" class="largest">$_("Submit")</button>
-                <a class="close-popup floaterClose floaterShut--parent" href="javascript:;">$_("Cancel")</a>
+                <a class="dialog--close-parent red" href="javascript:;">$_("Cancel")</a>
             </div>
 
         </div>

diff --git a/openlibrary/templates/covers/author_photo.html b/openlibrary/templates/covers/author_photo.html
@@ -13,9 +13,9 @@
         <div class="coverFloat" id="seeImage">
             <div class="coverFloatHead">
                 <h2>$truncate(author.name or "", 60)</h2>
-                <a class="floaterShut">&times;<span class="shift">$_("Close")</span></a>
+                <a class="dialog--close">&times;<span class="shift">$_("Close")</span></a>
             </div>
-            <a class="floaterShut" title="Click to close"><img src="$author_photo_url" class="cover" alt="Photo of $author.name"/></a>
+            <a class="dialog--close" title="Click to close"><img src="$author_photo_url" class="cover" alt="Photo of $author.name"/></a>
         </div>
     </div>
 $else:

diff --git a/openlibrary/templates/covers/book_cover.html b/openlibrary/templates/covers/book_cover.html
@@ -31,8 +31,8 @@
     <div class="coverFloat" id="seeImage">
         <div class="coverFloatHead">
             <h2>$:macros.TruncateString(title, 70)</h2>
-            <a class="floaterShut">&times;<span class="shift">$_("Close")</span></a>
+            <a class="dialog--close">&times;<span class="shift">$_("Close")</span></a>
         </div>
-        <a class="floaterShut"><img src="$cover_lg" class="cover" alt="$title $_('by') $author_names"/></a>
+        <a class="dialog--close"><img src="$cover_lg" class="cover" alt="$title $_('by') $author_names"/></a>
     </div>
 </div>
diff --git a/openlibrary/templates/covers/book_cover_single_edition.html b/openlibrary/templates/covers/book_cover_single_edition.html
@@ -26,8 +26,8 @@
 <div class="hidden">
     <div class="coverFloat" id="seeImage">
         <div class="coverFloatHead">
-            <a class="floaterShut">&times;<span class="shift">$_("Close")</span></a>
+            <a class="dialog--close">&times;<span class="shift">$_("Close")</span></a>
         </div>
-        <a class="floaterShut"><img src="$cover_lg" class="cover" alt="$title $_('by') $author_names"/></a>
+        <a class="dialog--close"><img src="$cover_lg" class="cover" alt="$title $_('by') $author_names"/></a>
     </div>
 </div>
diff --git a/openlibrary/templates/covers/book_cover_work.html b/openlibrary/templates/covers/book_cover_work.html
@@ -22,8 +22,8 @@
 <div class="hidden">
     <div class="coverFloat" id="seeImage">
         <div class="coverFloatHead">
-            <a class="floaterShut">&times;<span class="shift">$_("Close")</span></a>
+            <a class="dialog--close">&times;<span class="shift">$_("Close")</span></a>
         </div>
-        <a class="floaterShut"><img src="$cover_lg" class="cover" alt="$title $_('by') $author_names"/></a>
+        <a class="dialog--close"><img src="$cover_lg" class="cover" alt="$title $_('by') $author_names"/></a>
     </div>
 </div>
diff --git a/openlibrary/templates/covers/change.html b/openlibrary/templates/covers/change.html
@@ -121,7 +121,7 @@
     <div class="floater" id="addImage">
         <div class="floaterHead">
             <h2>$title</h2>
-            <a class="floaterShut">&times;<span class="shift">$_("Close")</span></a>
+            <a class="dialog--close">&times;<span class="shift">$_("Close")</span></a>
         </div>
 
         <div id="tabsImages" class="tabs tabsPop">

diff --git a/openlibrary/templates/covers/manage.html b/openlibrary/templates/covers/manage.html
@@ -58,7 +58,7 @@
 
     <div class="formElement" style="margin:40px 0 0 30px;">
         <button type="submit" value="Save" class="largest">$_("Save")</button>
-        <a class="floaterClose floaterShut--parent close-popup">$_("Cancel")</a>
+        <a class="dialog--close-parent red">$_("Cancel")</a>
     </div>
 
 </form>
diff --git a/openlibrary/templates/lib/markdown.html b/openlibrary/templates/lib/markdown.html
@@ -10,7 +10,7 @@
     <div class="floater" id="markdown">
         <div class="floaterHead">
             <h2>Formatting Help</h2>
-            <a class="floaterShut">&times;<span class="shift">$_("Close")</span></a>
+            <a class="dialog--close">&times;<span class="shift">$_("Close")</span></a>
         </div>
         <div class="floaterBody">
 
@@ -75,7 +75,7 @@ <h2>Formatting Help</h2>
         </table>
 
         <p>$_('To "escape" any Markdown tags (i.e. use an asterisk as an asterisk rather than emphasizing text) place a backslash \ prior to the character.')</p>
-        <div class="small"><a class="red floaterShut">Close</a></div>
+        <div class="small"><a class="red dialog--close">Close</a></div>
 
         </div>
     </div>

diff --git a/openlibrary/templates/lists/widget.html b/openlibrary/templates/lists/widget.html
@@ -274,7 +274,7 @@ <h3 class="header">
         <div class="floaterAdd" id="addList">
             <div class="floaterHead">
                 <h2>Create a new list</h2>
-                <a class="floaterShut">&times;<span class="shift">$_("Close")</span></a>
+                <a class="dialog--close">&times;<span class="shift">$_("Close")</span></a>
             </div>
             <form method="post" class="floatform" name="new-list" id="new-list">
             <div class="formElement">
@@ -297,7 +297,7 @@ <h2>Create a new list</h2>
                 <div class="input">
                     <button type="submit" class="larger">Create new list</button>
                     &nbsp; &nbsp;
-                    <a class="small floaterShut plain red">Cancel</a>
+                    <a class="small dialog--close plain red">Cancel</a>
                 </div>
                 <div class="label"></div>
             </div>

diff --git a/openlibrary/templates/type/edition/view.html b/openlibrary/templates/type/edition/view.html
@@ -372,7 +372,7 @@ <h3 class="list-header collapse">$_("ID Numbers")</h3>
         <div class="coverFloat" id="wikicode">
             <div class="coverFloatHead">
               <h2>Wikipedia citation</h2>
-              <a class="floaterShut">&times;<span class="shift">Close</span></a>
+              <a class="dialog--close">&times;<span class="shift">Close</span></a>
             </div>
             <p>Copy and paste this code into your Wikipedia page. <a href="http://en.wikipedia.org/wiki/Template:Cite#Citing_books" target="_blank" title="Get instructions at Wikipedia in a new window">Need help</a>?</p>
             <form method="get">

diff --git a/static/css/components/cbox.less b/static/css/components/cbox.less
@@ -92,25 +92,18 @@ div.imageIntro{
   margin: 10px;
 }
 
-a.floater {
-  &Shut {
-    text-decoration: none;
-    color: @dark-grey;
-    font-size: 1.2em;
-  }
-  &Close {
-    color: @red;
-    font-size: 1.1em;
-    padding-left: 20px;
-  }
+.dialog--close {
+  text-decoration: none;
+  color: @dark-grey;
+  font-size: 1.2em;
 }
 
 /* VIEW LARGER COVER POP-UP */
 div.coverFloat {
   font-family: @lucida_sans_serif-1;
   background: @white;
   text-align: left;
-  a.floaterShut {
+  a.dialog--close {
     &:hover {
       background-position: 0 -16px;
     }