removing iframe border in modal

- not rendering mobile test for iframes in forms - fixes modal inner iframe sizing (book covers) - consistent styling for colorbox and ui-tabs
internetarchive · Jun 22, 2019 · 6ddb946 · 6ddb946
1 parent ed73a4a
commit 6ddb946
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 15 deletions.
diff --git a/openlibrary/templates/covers/author_photo.html b/openlibrary/templates/covers/author_photo.html
@@ -13,7 +13,7 @@
         <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>
+                <a class="floaterShut" href="javascript:;" onclick="\$.fn.colorbox.close();"><span class="shift">&times;$_("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
@@ -31,7 +31,7 @@
     <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>
+            <a class="floaterShut" href="javascript:;" onclick="\$.fn.colorbox.close();"><span class="shift">&times;$_("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/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="330" width="580" marginheight="0" marginwidth="0" scrolling="auto"></iframe>')
+            .append('<iframe frameborder="0" height="350" width="580" marginheight="0" marginwidth="0" scrolling="auto"></iframe>')
             .find('iframe')
             .attr("src", src);
     }

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
@@ -372,7 +372,7 @@ <h3 class="list-header collapse">$_("ID Numbers")</h3>
         <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>
+                <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;
@@ -52,11 +53,11 @@
     box-sizing: content-box;
     position: relative;
     background: @white;
-    padding: 0;
-    border: 10px solid @white;
+    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;
@@ -147,9 +148,9 @@ div.floater {
     display: flex;
     padding: 10px 5px;
     h2 {
+      font-weight: normal;
       text-align: center;
       color: @dark-grey;
-      font-weight: bold;
       font-size: 1.25em;
       margin: 0;
       padding: 0;

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;
       }
     }
   }