redesigns modal with white background, no graphic (#2200)

- removing iframe border in modal - stop rendering mobile test for iframes in forms - fixes modal inner iframe sizing (book covers) - consistent styling for colorbox and ui-tabs - fixes author cover variants of modal as well - removes X image, replaces with ×
internetarchive · Jun 23, 2019 · 261472d · 261472d
1 parent e10c3f4
commit 261472d
Show file tree

Hide file tree

Showing 18 changed files with 48 additions and 66 deletions.
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" href="javascript:;" onclick="\$.fn.colorbox.close();"><span class="shift">$_("Close")</span></a>
+                    <a class="floaterShut" href="javascript:;" onclick="\$.fn.colorbox.close();">&times;<span class="shift">$_("Close")</span></a>
                 </div>
                 <form method="post" action="" class="floatform">
                 <div class="formElement">

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" href="javascript:;" onclick="\$.fn.colorbox.close();"></a>
+            <a class="floaterShut" href="javascript:;" onclick="\$.fn.colorbox.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>

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="#"></a>
+            <a class="floaterShut close-popup" 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="">
@@ -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="#"></a>
+            <a class="floaterShut close-popup" 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>
@@ -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="#"></a>
+            <a class="floaterShut close-popup" 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>

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

diff --git a/openlibrary/templates/covers/book_cover.html b/openlibrary/templates/covers/book_cover.html
@@ -30,8 +30,8 @@
 <div class="hidden">
     <div class="coverFloat" id="seeImage">
         <div class="coverFloatHead">
-            $:macros.TruncateString(title, 70)
-            <a class="floaterShut" href="javascript:;" onclick="\$.fn.colorbox.close();"><span class="shift">$_("Close")</span></a>
+            <h2>$:macros.TruncateString(title, 70)</h2>
+            <a class="floaterShut" href="javascript:;" onclick="\$.fn.colorbox.close();">&times;<span class="shift">$_("Close")</span></a>
         </div>
         <a href="javascript:;" onclick="\$.fn.colorbox.close();"><img src="$cover_lg" class="cover" alt="$title $_('by') $author_names"/></a>
     </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" href="javascript:;" onclick="\$.fn.colorbox.close();"><span class="shift">$_("Close")</span></a>
+            <a class="floaterShut" href="javascript:;" onclick="\$.fn.colorbox.close();">&times;<span class="shift">$_("Close")</span></a>
         </div>
         <a href="javascript:;" onclick="\$.fn.colorbox.close();"><img src="$cover_lg" class="cover" alt="$title $_('by') $author_names"/></a>
     </div>
-</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" href="javascript:;" onclick="\$.fn.colorbox.close();"><span class="shift">$_("Close")</span></a>
+            <a class="floaterShut" href="javascript:;" onclick="\$.fn.colorbox.close();">&times;<span class="shift">$_("Close")</span></a>
         </div>
         <a href="javascript:;" onclick="\$.fn.colorbox.close();"><img src="$cover_lg" class="cover" alt="$title $_('by') $author_names"/></a>
     </div>
-</div>
+</div>
diff --git a/openlibrary/templates/covers/change.html b/openlibrary/templates/covers/change.html
@@ -68,7 +68,7 @@
 window.q.push(function(){
     function add_iframe(selector, src) {
         \$(selector)
-            .append('<iframe frameborder="0" height="530" width="580" marginheight="0" marginwidth="0" scrolling="auto"></iframe>')
+            .append('<iframe frameborder="0" height="450" width="580" marginheight="0" marginwidth="0" scrolling="auto"></iframe>')
             .find('iframe')
             .attr("src", src);
     }
@@ -111,7 +111,7 @@
     <div class="floater" id="addImage">
         <div class="floaterHead">
             <h2>$title</h2>
-            <a class="floaterShut" href="javascript:;" onclick="\$.fn.colorbox.close();"><span class="shift">$_("Close")</span></a>
+            <a class="floaterShut" href="javascript:;" onclick="\$.fn.colorbox.close();">&times;<span class="shift">$_("Close")</span></a>
         </div>
 
         <div id="tabsImages" class="tabs tabsPop">

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" href="javascript:;" onclick="\$.fn.colorbox.close();"></a>
+            <a class="floaterShut" href="javascript:;" onclick="\$.fn.colorbox.close();">&times;<span class="shift">$_("Close")</span></a>
         </div>
         <div class="floaterBody">
 

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" href="javascript:;" onclick="\$.fn.colorbox.close();"><span class="shift">$_("Close")</span></a>
+                <a class="floaterShut" href="javascript:;" onclick="\$.fn.colorbox.close();">&times;<span class="shift">$_("Close")</span></a>
             </div>
             <form method="post" class="floatform" name="new-list" id="new-list">
             <div class="formElement">

diff --git a/openlibrary/templates/site/body.html b/openlibrary/templates/site/body.html
@@ -14,7 +14,8 @@
   $if show_banners:
     $:render_template("site/alert")
     $:render_template("lib/nav_head", None)
-  <div id="test-body-mobile">
+  $# don't render test-body-mobile for iframes
+  <div $:('id="test-body-mobile"' if bodyid != 'form' else '')>
     $if show_banners:
       $#print errors (hidden by default as styles are loaded via JS)
       <div class="flash-messages" style="display: none;">

diff --git a/openlibrary/templates/type/edition/view.html b/openlibrary/templates/type/edition/view.html
@@ -371,8 +371,8 @@ <h3 class="list-header collapse">$_("ID Numbers")</h3>
     <div class="hidden">
         <div class="coverFloat" id="wikicode">
             <div class="coverFloatHead">
-                Wikipedia citation
-                <a class="floaterShut" href="javascript:;" onclick="\$.fn.colorbox.close();"><span class="shift">Close</span></a>
+              <h2>Wikipedia citation</h2>
+              <a class="floaterShut" href="javascript:;" onclick="\$.fn.colorbox.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
@@ -13,6 +13,7 @@
 }
 
 #colorbox {
+  outline: none;
   box-sizing: content-box;
   > * {
     box-sizing: content-box;
@@ -24,7 +25,6 @@
     position: fixed;
     width: 100%;
     height: 100%;
-    background: @brown-3a301e;
     opacity: .5;
     filter: alpha(opacity=50);
   }
@@ -53,11 +53,11 @@
     box-sizing: content-box;
     position: relative;
     background: @white;
-    padding: 0;
-    border: 10px solid @brown;
+    padding: 10px;
+    border: 1px solid @dark-beige;
     border-radius: 12px;
-    -webkit-box-shadow: 1px 3px 10px @black;
-    box-shadow: 1px 3px 10px @black;
+    -webkit-box-shadow: 1px 3px 5px @dark-beige;
+    box-shadow: 1px 3px 5px @dark-beige;
   }
   &LoadedContent {
     background: @white;
@@ -93,56 +93,38 @@ div.imageIntro{
 
 a.floater {
   &Shut {
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: block;
-    width: 32px;
-    height: 32px;
-    background-image: url(/images/icons/icon_close-pop.png);
-    background-position: 0 0;
-    background-repeat: no-repeat;
-    &:hover {
-      background-position: 0 -32px;
-    }
+    text-decoration: none;
+    color: @dark-grey;
+    font-size: 1.2em;
   }
   &Close {
     color: @red;
-    font-size: 1.0em;
+    font-size: 1.1em;
     padding-left: 20px;
   }
 }
 
 /* VIEW LARGER COVER POP-UP */
 div.coverFloat {
-  position: relative;
   font-family: @lucida_sans_serif-1;
   background: @white;
   text-align: left;
   a.floaterShut {
-    // hide label
-    text-indent: 999px;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    right: 0;
-    display: block;
-    width: 16px;
-    height: 16px;
-    background-image: url(/images/icons/icon_close-pop-sm.png);
-    background-position: 0 0;
-    background-repeat: no-repeat;
     &:hover {
       background-position: 0 -16px;
     }
   }
   &Head {
-    background-color: @brown;
-    height: 16px;
-    padding: 0 10px 10px 0;
+    display: flex;
     font-size: 1em;
-    font-weight: 700;
-    color: @white;
+    h2 {
+      font-weight: normal;
+      color: @dark-grey;
+      font-size: 1em;
+      margin: .2em 0;
+      padding: 0;
+      flex: 1;
+    }
   }
 }
 
@@ -151,17 +133,20 @@ div.floater {
   position: relative;
   font-family: @lucida_sans_serif-1;
   width: 640px;
-  min-height: 670px;
+  min-height: 550px;
   background: @white;
   text-align: left;
   &Head {
-    background-color: @brown;
-    padding: 0 10px 10px;
+    display: flex;
+    padding: 10px 5px;
     h2 {
-      color: @white;
-      font-size: 1.75em;
+      font-weight: normal;
+      text-align: center;
+      color: @dark-grey;
+      font-size: 1.25em;
       margin: 0;
       padding: 0;
+      flex: 1;
     }
   }
   &Body {

diff --git a/static/css/components/ui-tabs.less b/static/css/components/ui-tabs.less
@@ -57,7 +57,6 @@
           border: 1px solid @lightest-grey;
           border-bottom: 3px solid @lightest-grey;
           color: @teal;
-          text-transform: capitalize !important;
           cursor: default;
         }
       }
@@ -129,10 +128,7 @@
     }
     .ui-tabs-active {
       a {
-        margin: 0 3px !important;
-        padding: 4px 8px 3px;
-        margin: 8px 3px 0;
-        font-size: 1.125em !important;
+        padding: 2px 8px 3px;
       }
     }
   }

diff --git a/static/images/icons/icon_cancel.png b/static/images/icons/icon_cancel.png
diff --git a/static/images/icons/icon_close-pop-sm.png b/static/images/icons/icon_close-pop-sm.png
diff --git a/static/images/icons/icon_close-pop.png b/static/images/icons/icon_close-pop.png
diff --git a/static/images/icons/icon_close.png b/static/images/icons/icon_close.png