Merge pull request #371 from edx/fix/frances/lms-pdfviewer-cleanup

Quick LMS pdfviewer  layout cleanup

common/static/css/pdfviewer.css

@@ -100,7 +100,7 @@ select {
 .toolbar {
 /*  position: absolute; */
   left: 0;
-  right: 0; 
+  right: 0;
   height: 32px;
   z-index: 9999;
   cursor: default;
@@ -185,6 +185,7 @@ select {
   margin: 0;
 }
 
+.splitToolbarButton > .toolbarButton, /*added */
 .splitToolbarButton:hover > .toolbarButton,
 .splitToolbarButton:focus > .toolbarButton,
 .splitToolbarButton.toggled > .toolbarButton,

lms/static/sass/course/_textbook.scss

 div.book-wrapper {
-  display: table;
-  table-layout:  fixed;
-  padding: 1em 8em;
+  max-width: 1150px;
+  margin: 0 auto;
+  width: 100%;
+  background-color: $white;
 
+  #toolbarViewer {
+    padding: 0 ($baseline/2);
+
+    #toolbarViewerLeft {
+      display: inline-block;
+    }
+
+    .outerCenter {
+      display: inline-block;
+      position: absolute;
+      right: ($baseline/2);
+
+      .innerCenter {
+        right: auto;
+      }
+
+      .dropdownToolbarButton {
+        margin: 3px 2px 4px 0;
+      }
+    }
+
+
+  }
 
   #open_close_accordion {
     display: none;
   }
 
+  .pdfbook-wrap {
+    display: table;
+    width: 100%;
+  }
+
+  .pdfbook-wrap-inner {
+    display: table-row;
+  }
+
   section.book-sidebar {
     @extend .sidebar;
     @extend .tran;
@@ -44,14 +77,17 @@ div.book-wrapper {
       li {
         background: none;
         border-bottom: 0;
-        padding-left: lh();
+        padding-left: ($baseline/2);
 
         a {
-          padding: 0;
           @include clearfix;
+          padding: 0;
+          color: $link-color;
+          cursor: pointer;
 
           &:hover {
             background-color: transparent;
+            color: $link-hover;
 
             .page-number {
               opacity: 1.0;
@@ -84,7 +120,7 @@ div.book-wrapper {
 
       > li {
         padding: 5px 6px;
-        margin: 0 16px 5px 25px;
+        margin: ($baseline/4) ($baseline/2);
       }
     }
   }
@@ -158,18 +194,20 @@ div.book-wrapper {
     }
 
     section.page {
-      border: 1px solid $border-color;
+      border-left: 1px solid $border-color;
       background-color: #fff;
       position: relative;
       text-align: center;
-      padding: lh();
-      margin-right:10%;
       border-radius: 0 3px 3px 0;
 
       img {
         max-width: 100%;
       }
 
+      #viewer {
+        padding: $baseline;
+      }
+
       div {
         text-align: left;
       	line-height: 1.6em;
@@ -214,3 +252,6 @@ div.book-wrapper {
     }
   }
 }
+
+
+

lms/templates/static_pdfbook.html

+<%! from django.utils.translation import ugettext as _ %>
 <%inherit file="main.html" />
 <%namespace name='static' file='static_content.html'/>
 <%block name="title">
@@ -11,7 +12,7 @@
 <%static:js group='courseware'/>
     <link rel="stylesheet" href="/static/css/pdfviewer.css"/>
     <script type="text/javascript" src="/static/js/vendor/pdfjs/pdf.js"></script>
-    <script type="text/javascript" src="/static/js/pdfviewer.js"></script> 
+    <script type="text/javascript" src="/static/js/pdfviewer.js"></script>
 </%block>
 
 <%block name="js_extra">
@@ -35,10 +36,10 @@
         %if page is not None:
             options.pageNum = ${page};
         %endif
-    
+
         $('#outerContainer').PDFViewer(options);
     });
-  </script>  
+  </script>
 </%block>
 
 <%include file="/courseware/course_navigation.html" args="active_page='pdftextbook/{0}'.format(book_index)" />
@@ -91,40 +92,43 @@
         </div>
 
         %if 'chapters' in textbook:
-	<section aria-label="Textbook Navigation" class="book-sidebar">
-	  <ul id="booknav" class="treeview-booknav">
-	      <%def name="print_entry(entry, index_value)">
-		  <li id="pdfchapter-${index_value}">
-		    <a class="chapter">
-		      ${entry.get('title')}
-		    </a>
-		  </li>
-	      </%def>
+  <div class="pdfbook-wrap">
+  <div class="pdfbook-wrap-inner">
+  	<section aria-label="Textbook Navigation" class="book-sidebar">
+  	  <ul id="booknav" class="treeview-booknav">
+  	      <%def name="print_entry(entry, index_value)">
+  		  <li id="pdfchapter-${index_value}">
+  		    <a class="chapter">
+  		      ${entry.get('title')}
+  		    </a>
+  		  </li>
+  	      </%def>
 
-	      % for (index, entry) in enumerate(textbook['chapters']):
-		${print_entry(entry, index+1)}
-	      % endfor
-	  </ul>
-	</section>
+  	      % for (index, entry) in enumerate(textbook['chapters']):
+  		${print_entry(entry, index+1)}
+  	      % endfor
+  	  </ul>
+  	</section>
         %endif
 
-        <section id="viewerContainer" class="book">
+   <section id="viewerContainer" class="book">
 	  <section class="page">
 	    <!-- use same page-turning as used in image-based textbooks -->
-            <nav>
-              <ul>
-                <li class="last">
-                  <a id="previous">Previous page</a>
-                </li>
-                <li class="next">
-                  <a id="next">Next page</a>
-                </li>
-              </ul>
-            </nav>
-            <div id="viewer" contextmenu="viewerContextMenu"></div>
-          </section>
-        </section>
-
+      <nav>
+        <ul>
+          <li class="last">
+            <a id="previous">${_("Previous page")}</a>
+          </li>
+          <li class="next">
+            <a id="next">${_("Next page")}</a>
+          </li>
+        </ul>
+      </nav>
+      <div id="viewer" contextmenu="viewerContextMenu"></div>
+    </section>
+  </section>
+  </div> <!-- pdfbook-wrap-inner -->
+  </div> <!-- pdfbook-wrap -->
       </div> <!-- mainContainer -->
 
     </div> <!-- outerContainer -->