From b1653f056143216ec0026c2f6efcc30df2e2a680 Mon Sep 17 00:00:00 2001
From: Frances Botsford <frances@edx.org>
Date: Thu, 11 Jul 2013 11:19:39 -0400
Subject: [PATCH] layout cleanup on LMS PDF Textbook viewer
---
common/static/css/pdfviewer.css | 3 ++-
lms/static/sass/course/_textbook.scss | 59 ++++++++++++++++++++++++++++++++++++++++++++++++++---------
lms/templates/static_pdfbook.html | 67 +++++++++++++++++++++++++++++++++++--------------------------------
3 files changed, 87 insertions(+), 42 deletions(-)
diff --git a/common/static/css/pdfviewer.css b/common/static/css/pdfviewer.css
index 656bc47..8b02532 100644
--- a/common/static/css/pdfviewer.css
+++ b/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,
diff --git a/lms/static/sass/course/_textbook.scss b/lms/static/sass/course/_textbook.scss
index bc9da1f..08f1a85 100644
--- a/lms/static/sass/course/_textbook.scss
+++ b/lms/static/sass/course/_textbook.scss
@@ -1,13 +1,46 @@
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;
+ float: right !important;
+ right: auto;
+
+ .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 {
}
}
}
+
+
+
diff --git a/lms/templates/static_pdfbook.html b/lms/templates/static_pdfbook.html
index 565a599..a8608b2 100644
--- a/lms/templates/static_pdfbook.html
+++ b/lms/templates/static_pdfbook.html
@@ -11,7 +11,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 +35,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 +91,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 -->
--
libgit2 0.26.0