Updated with book info pop-up code and images

diff --git a/BookReader/BookReader.css b/BookReader/BookReader.css
index f21a950..56a6d5f 100644 (file)
--- a/BookReader/BookReader.css
+++ b/BookReader/BookReader.css
@@ -381,6 +381,20 @@ a.BRgrey:visited   { color: #666; }
     font-family: "Lucida Grande", "Verdana", "Arial", sans-serif;
     color: #000;
 }
+.BRfloat a {
+    color: #036daa;
+}
+.BRfloat a:hover {
+    color: #35672e;
+}
+.BRfloat a.title {
+    color: #000;
+    text-decoration: none;
+}
+.BRfloat a.title:hover {
+    color: #036daa;
+    text-decoration: underline;
+}
 .BRfloatHead {
     background-color: #615132;
     height: 32px;
@@ -453,6 +467,71 @@ a.BRgrey:visited   { color: #666; }
     position:absolute!important;
     left:-10000px!important;
 }
+.BRfloatBody {
+    float: left;
+    width: 570px;
+    padding: 30px;
+    color: #333;
+}
+.BRfloatCover {
+    float: left;
+    padding: 0 20px 80px 0;
+}
+.BRfloatTitle {
+    font-size: 1.2em;
+}
+.BRfloatTitle h2 {
+    display: inline;
+    font-size: 1.3em;
+}
+.BRfloatMeta p {
+    margin: 0;
+    padding: 0;
+    font-size: 1.1em;
+    line-height: 1.5em;
+}
+.BRfloatMeta p.moreInfo {
+    line-height: 15px;
+    margin-top: 30px;
+}
+.BRfloatMeta p.moreInfo span {
+    background: url("images/icon_OL-logo-xs.png") no-repeat;
+    display: block;
+    float: left;
+    width: 26px;
+    height: 15px;
+}
+.BRfloatMeta h3 {
+    font-size: 1.1em;
+    font-weight: 700;
+    line-height: 1.5em;
+    margin-top: 30px;
+    color: #333;
+}
+.BRfloatMeta ul.links {
+    float: left;
+    clear: right;
+}
+.BRfloatMeta ul.links li {
+    list-style-type: none;
+    display: block;
+    float: left;
+    font-size: 1.1em;
+    line-height: 1.5em;
+}
+.BRfloatMeta ul.links li span {
+    padding: 0 10px;
+}
+.BRfloatFoot a, .BRfloatFoot span {
+    display: block;
+    float: left;
+    line-height: 16px;
+    margin: 0 0 10px 10px;
+}
+.BRfloatFoot a.problem {
+    background: url("images/icon_alert-xs.png") no-repeat;
+    padding-left: 20px;
+}
 div#BRpage {
     float: right;
     width: 320px;

diff --git a/BookReader/images/icon_OL-logo-xs.png b/BookReader/images/icon_OL-logo-xs.png
new file mode 100644 (file)
index 0000000..8dd773c
Binary files /dev/null and b/BookReader/images/icon_OL-logo-xs.png differ

diff --git a/BookReader/images/icon_alert-xs.png b/BookReader/images/icon_alert-xs.png
new file mode 100644 (file)
index 0000000..f77189d
Binary files /dev/null and b/BookReader/images/icon_alert-xs.png differ

diff --git a/BookReader/newbook.html b/BookReader/newbook.html
index 7ca854e..167f81d 100644 (file)
--- a/BookReader/newbook.html
+++ b/BookReader/newbook.html
@@ -45,8 +45,7 @@ $().ready(function(){
     $("#infoBtn").colorbox({inline: true, opacity: "0.5", href: "#aboutThis"});
 });
 </script>
-<style type="text/css">
-</style>
+
 <div class="hidden">
     <div class="BRfloat" id="shareThis"> 
         <div class="BRfloatHead"> 
@@ -92,15 +91,37 @@ $().ready(function(){
             <a class="floatShut" href="javascript:;" onclick="$.fn.colorbox.close();"><span class="shift">Close</span></a> 
         </div>
         <div class="BRfloatBody">
-            <div class="BRfloatCover"></div>
+            <div class="BRfloatCover">
+                <a href="Open Library Book Page"><img src="Open Library Book Cover" alt="Book Title" height="140"/></a>
+            </div>
             <div class="BRfloatMeta">
-                <h2><a href="Open Library Book Page">Book Title</a></h2>
-                by
-                <a href="Open Library Author Page">Book Author</a>
+                <div class="BRfloatTitle">
+                    <h2><a href="Open Library Book Page" class="title">Book Title</a></h2>
+                    by
+                    <a href="Open Library Author Page">Book Author</a>
+                </div>
+                <p>Published MONTH YEAR by <a href="Open Library Publisher Page">Publisher name</a></p>
+                <p>Written in <a href="Open Library Language page">Language</a></p>
+                <h3>Other Formats</h3>
+                <ul class="links">
+                    <li><a href="PDF Link">PDF</a><span>|</span></li>
+                    <li><a href="Text Link">Plain Text</a><span>|</span></li>
+                    <li><a href="DAISY Link">DAISY</a><span>|</span></li>
+                    <li><a href="PDF Link">ePub</a><span>|</span></li>
+                    <li><a href="Kindle Link">Send to Kindle</a><span>|</span></li>
+                    <li><a href="archive.org Page for Book">More...</a></li>
+                </ul>
+                <p class="moreInfo"><span></span>More information on <a href="Open Libarary Book Page">openlibrary.org</a>.</p>
             </div>
         </div>
+        <div class="BRfloatFoot">
+            <a href="http://openlibrary.org/contact" class="problem">Report a problem</a>
+            <span>|</span>
+            <a href="http://openlibrary.org/dev/docs/bookreader">About the Bookreader</a>
+        </div>
     </div>
 </div>
+
  
 <script type="text/javascript"> 
   // Set some config variables -- $$$ NB: Config object format has not been finalized