Skip to content
Permalink
Browse files

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 ×
  • Loading branch information...
mekarpeles committed Jun 23, 2019
1 parent e10c3f4 commit 261472dfa024d7a5a7c7ea3a5bc83bc3b4c80698
@@ -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">
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -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">
@@ -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">

@@ -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">
@@ -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;">
@@ -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">
@@ -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 {
@@ -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;
}
}
}
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

0 comments on commit 261472d

Please sign in to comment.
You can’t perform that action at this time.