# HG changeset patch
# User casties
# Date 1343330576 -7200
# Node ID abd36d4d97b8e49dc18773095b609205cd3b512f
# Parent  510bae2b593b173619e8320ba4cc84dea0998787
new version of index page. improvements for digilib page and thumbnail overview.

diff -r 510bae2b593b -r abd36d4d97b8 css/docuviewer.css
--- a/css/docuviewer.css	Thu Jul 26 19:32:31 2012 +0200
+++ b/css/docuviewer.css	Thu Jul 26 21:22:56 2012 +0200
@@ -57,6 +57,9 @@
     background-color: white;
 }
 
+/*
+ * body
+ */
 div.page-body {
     display: table-row;
 }
@@ -168,6 +171,9 @@
     border-radius: 5px 5px 0 0;
     padding: 4px;    
 }
+div.col.main div.ruler.down span.ruler-main {
+	border-radius: 0 0 5px 5px;
+}
 
 div.col.main div.content {
 	min-width: 30em;
@@ -219,11 +225,47 @@
  * index page
  */
 div.index-image {
-	float: left;
 	padding-left: 1em;
 	padding-right: 1em;
 	padding-bottom: 1em;
+	padding-top: 1em;
+}
+div.index-info {
+	padding-top: 1em;	
 }
 div.index-info td.type {
 	font-weight: bold;
 }
+div.index-info td.content {
+	max-width: 30em;
+}
+div.index-actions {
+	float: left;
+	border: 1px solid silver;
+    padding: 1em;
+	margin-top: 2em;
+}
+div.index-actions div.action {
+	margin-bottom: 1em;
+}
+
+/*
+ * image page
+ */
+div.col.main div.content-images {
+	border: 1px solid silver;
+}
+div.col.main div.content-images table {
+	border-collapse:collapse; /* for tight digilib */
+}
+
+/*
+ * thumbnail overview
+ */
+div.col.main div.content-thumbs {
+	border: 1px solid silver;
+    padding: 1em;
+}
+div.col.main table.thumbs td {
+	text-align: center;
+}
diff -r 510bae2b593b -r abd36d4d97b8 documentViewer.py
--- a/documentViewer.py	Thu Jul 26 19:32:31 2012 +0200
+++ b/documentViewer.py	Thu Jul 26 21:22:56 2012 +0200
@@ -685,9 +685,9 @@
         docinfo['bibType'] = bibtype
         # also store DC metadata for convenience
         dc = self.metadataService.getDCMappedData(bib)
-        docinfo['creator'] = dc.get('creator',None)
-        docinfo['title'] = dc.get('title',None)
-        docinfo['date'] = dc.get('date',None)
+        docinfo['creator'] = dc.get('creator','')
+        docinfo['title'] = dc.get('title','')
+        docinfo['date'] = dc.get('date','')
         return docinfo
             
     def getDocinfoFromAccess(self, docinfo, acc):
diff -r 510bae2b593b -r abd36d4d97b8 zpt/common_template.zpt
--- a/zpt/common_template.zpt	Thu Jul 26 19:32:31 2012 +0200
+++ b/zpt/common_template.zpt	Thu Jul 26 21:22:56 2012 +0200
@@ -12,30 +12,31 @@
                 bib docinfo/bib | nothing; bibType docinfo/bibType | nothing;
                 formattedLabel python:here.metadataService.getBibFormattedLabel(bibdata=bib);">
     <div class="logo" tal:condition="exists:here/template/logo.png">
-      <img tal:attributes="src here/template/logo.png/absolute_url"/>
+      <img tal:attributes="src here/template/logo.png/absolute_url" />
     </div>
     <div class="title-block">
-    <div class="title" tal:condition="not:formattedLabel">
-      <tal:block tal:condition="python:docinfo['creator'] or docinfo['title']">
-        <i tal:content="docinfo/creator" />,
+      <div class="title" tal:condition="not:formattedLabel">
+        <tal:block tal:condition="python:docinfo['creator'] or docinfo['title']">
+          <i tal:content="docinfo/creator" />,
         <span tal:content="docinfo/title" />, <span tal:content="docinfo/date" />
-      </tal:block>
-      <span tal:condition="not:python:docinfo['creator'] or docinfo['title']"
-        tal:content="string:[no bibliographical information for this document (type ${bibType})]" />
-    </div>
-    <div class="title" tal:condition="formattedLabel" tal:content="structure formattedLabel" />
-    <ul class="view-switcher">
-      <li tal:attributes="class python:here.getStyle(viewMode, 'text')"><a tal:omit-tag="python:viewMode=='text'"
-        tal:attributes="href python:here.getLink('viewMode','text')">Text</a></li>
-      <li tal:attributes="class python:here.getStyle(viewMode, 'images')"><a tal:omit-tag="python:viewMode=='images'"
-        tal:attributes="href python:here.getLink('viewMode','images')">Image</a></li>
-      <li tal:attributes="class python:here.getStyle(viewMode, 'xml')"><a tal:omit-tag="python:viewMode=='xml'"
-        tal:attributes="href python:here.getLink('viewMode','xml')">XML</a></li>
-      <li tal:attributes="class python:here.getStyle(viewMode, 'thumbs')"><a tal:omit-tag="python:viewMode=='thumbs'"
-        tal:attributes="href python:here.getLink('viewMode','thumbs')">Thumbnail overview</a></li>
-      <li tal:attributes="class python:here.getStyle(viewMode, 'index')"><a tal:omit-tag="python:viewMode=='index'"
-        tal:attributes="href python:here.getLink('viewMode','index')">Document information</a></li>
-    </ul>
+        </tal:block>
+        <span tal:condition="not:python:docinfo['creator'] or docinfo['title']"
+          tal:content="string:[no bibliographical information for this document (type ${bibType})]" />
+      </div>
+      <div class="title" tal:condition="formattedLabel" tal:content="structure formattedLabel" />
+      <ul class="view-switcher">
+        <li tal:condition="docpath" tal:attributes="class python:here.getStyle(viewMode, 'text')"><a
+          tal:omit-tag="python:viewMode=='text'" tal:attributes="href python:here.getLink('viewMode','text')">Text</a></li>
+        <li tal:condition="python:docinfo.get('imagePath',None)" tal:attributes="class python:here.getStyle(viewMode, 'images')"><a
+          tal:omit-tag="python:viewMode=='images'" tal:attributes="href python:here.getLink('viewMode','images')">Image</a></li>
+        <li tal:condition="docpath" tal:attributes="class python:here.getStyle(viewMode, 'xml')"><a
+          tal:omit-tag="python:viewMode=='xml'" tal:attributes="href python:here.getLink('viewMode','xml')">XML</a></li>
+        <li tal:condition="python:docinfo.get('imagePath',None)" tal:attributes="class python:here.getStyle(viewMode, 'thumbs')"><a
+          tal:omit-tag="python:viewMode=='thumbs'" tal:attributes="href python:here.getLink('viewMode','thumbs')">Thumbnail
+            overview</a></li>
+        <li tal:attributes="class python:here.getStyle(viewMode, 'index')"><a tal:omit-tag="python:viewMode=='index'"
+          tal:attributes="href python:here.getLink('viewMode','index')">Document information</a></li>
+      </ul>
     </div>
   </metal:block>
   <!-- /head -->
@@ -50,20 +51,21 @@
               leftest python:test(flowLtr,first,last); rightest python:test(flowLtr,last,first);">
     <form class="autosubmit" tal:attributes="action viewerUrl">
       <input type="hidden" tal:define="params python:here.getParams('pn', None)" tal:repeat="param params"
-        tal:attributes="name param; value python:params[param]" />
-        <span class="ruler-main">page <a tal:condition="leftest"
+        tal:attributes="name param; value python:params[param]" /> <span class="ruler-main">page <a tal:condition="leftest"
         tal:attributes="href python:here.getLink('pn',leftest)">|&lt;</a> <span tal:condition="not:leftest">|&lt;</span> <a
         tal:condition="left" tal:attributes="href python:here.getLink('pn',left)">&lt;</a> <span tal:condition="not:left">&lt;</span>
         <input class="autosubmit" size="3" type="text" name="pn" tal:attributes="value pn" /> <span class="originalPage"
         title="Original page number" tal:define="originalPage pageinfo/pageNumberOrig | nothing"
         tal:condition="python:originalPage!=None"> (<span tal:replace="originalPage" /><span
           tal:define="originalPageNorm pageinfo/pageNumberOrigNorm | nothing" tal:condition="python:originalPageNorm!=None">
-            [<span tal:replace="originalPageNorm" />]</span>)
-        </span> <input type="submit" value="Go" /> of <span tal:replace="numPages" /> <a tal:condition="right"
+            [<span tal:replace="originalPageNorm" />]
+        </span>)
+      </span> <input type="submit" value="Go" /> of <span tal:replace="numPages" /> <a tal:condition="right"
         tal:attributes="href python:here.getLink('pn',right)">&gt;</a> <span tal:condition="not:right">&gt;</span> <a
         tal:condition="rightest" tal:attributes="href python:here.getLink('pn',rightest)">&gt;|</a> <span
         tal:condition="not:rightest">&gt;|</span>
-      </span> <!-- ruler-main -->
+      </span>
+      <!-- ruler-main -->
     </form>
   </metal:block>
   <!-- /ruler -->
@@ -86,38 +88,38 @@
   <metal:block metal:define-macro="toc_ruler_thumbs">
     <form class="autosubmit" tal:attributes="action viewerUrl">
       <input type="hidden" tal:define="params python:here.getParams('start',None)" tal:repeat="param params"
-        tal:attributes="name param; value python:params[param]" /> <a tal:condition="left"
+        tal:attributes="name param; value python:params[param]" /><span class="ruler-main"><a tal:condition="left"
         tal:attributes="href python:here.getLink('start',left)">&lt;</a> <span tal:condition="not:left">&lt;</span> <select
         class="autosubmit" name="start" tal:define="ofs python:test(pageinfo['pageZero'],0,1)">
-        <tal:block>
-          <option tal:repeat="grp pageBatch/batches" tal:attributes="selected python:start==grp['start']; value grp/start;"
-            tal:content="string:${grp/start} - ${grp/end}" />
-        </tal:block>
+          <tal:block>
+            <option tal:repeat="grp pageBatch/batches" tal:attributes="selected python:start==grp['start']; value grp/start;"
+              tal:content="string:${grp/start} - ${grp/end}" />
+          </tal:block>
       </select> <input type="submit" value="Go" /> <a tal:condition="right" tal:attributes="href python:here.getLink('start',right)">&gt;</a>
-      <span tal:condition="not:right">&gt;</span>
+        <span tal:condition="not:right">&gt;</span></span>
     </form>
   </metal:block>
 
   <!-- toc type switcher -->
   <metal:block metal:define-macro="toc_switcher">
-  <div class="toc-switcher-col">
-    <div class="toc-switcher">
-      <ul>
-        <li tal:attributes="class python:here.getStyle(tocMode, 'none')"><span><a tal:omit-tag="python:tocMode=='none'"
-            tal:attributes="href python:here.getLink('tocMode','none')">None</a></span></li>
-        <li tal:attributes="class python:here.getStyle(tocMode, 'concordance')"
-          tal:condition="python:docpath and docinfo.get('pageNumbers', None)"><span><a
-            tal:omit-tag="python:tocMode=='concordance'" tal:attributes="href python:here.getLink('tocMode','concordance')">Concordance</a></span></li>
-        <li tal:attributes="class python:here.getStyle(tocMode, 'figures')"
-          tal:condition="python:docpath and docinfo.get('numFigureEntries', None)"><span><a
-            tal:omit-tag="python:tocMode=='figures'" tal:attributes="href python:here.getLink('tocMode','figures')">Figures</a></span></li>
-        <li tal:attributes="class python:here.getStyle(tocMode, 'text')"
-          tal:condition="python:docpath and docinfo.get('numTocEntries', None)"><span><a
-            tal:omit-tag="python:tocMode=='text'" tal:attributes="href python:here.getLink('tocMode','text')">Content</a></span></li>
-        <li tal:attributes="class python:here.getStyle(tocMode, 'thumbs')"><span><a
-            tal:omit-tag="python:tocMode=='thumbs'" tal:attributes="href python:here.getLink('tocMode','thumbs')">Thumbnails</a></span></li>
-      </ul>
-    </div>
+    <div class="toc-switcher-col">
+      <div class="toc-switcher">
+        <ul>
+          <li tal:attributes="class python:here.getStyle(tocMode, 'none')"><span><a
+              tal:omit-tag="python:tocMode=='none'" tal:attributes="href python:here.getLink('tocMode','none')">None</a></span></li>
+          <li tal:attributes="class python:here.getStyle(tocMode, 'concordance')"
+            tal:condition="python:docpath and docinfo.get('pageNumbers', None)"><span><a
+              tal:omit-tag="python:tocMode=='concordance'" tal:attributes="href python:here.getLink('tocMode','concordance')">Concordance</a></span></li>
+          <li tal:attributes="class python:here.getStyle(tocMode, 'figures')"
+            tal:condition="python:docpath and docinfo.get('numFigureEntries', None)"><span><a
+              tal:omit-tag="python:tocMode=='figures'" tal:attributes="href python:here.getLink('tocMode','figures')">Figures</a></span></li>
+          <li tal:attributes="class python:here.getStyle(tocMode, 'text')"
+            tal:condition="python:docpath and docinfo.get('numTocEntries', None)"><span><a
+              tal:omit-tag="python:tocMode=='text'" tal:attributes="href python:here.getLink('tocMode','text')">Content</a></span></li>
+          <li tal:attributes="class python:here.getStyle(tocMode, 'thumbs')"><span><a
+              tal:omit-tag="python:tocMode=='thumbs'" tal:attributes="href python:here.getLink('tocMode','thumbs')">Thumbnails</a></span></li>
+        </ul>
+      </div>
     </div>
   </metal:block>
 
diff -r 510bae2b593b -r abd36d4d97b8 zpt/viewer_images.zpt
--- a/zpt/viewer_images.zpt	Thu Jul 26 19:32:31 2012 +0200
+++ b/zpt/viewer_images.zpt	Thu Jul 26 21:22:56 2012 +0200
@@ -5,50 +5,43 @@
               tocMode pageinfo/tocMode; viewerUrl docinfo/viewerUrl;
               numPages docinfo/numPages | nothing; dlBaseUrl docinfo/digilibBaseUrl | nothing;">
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
-  <title
-    tal:content="python:docinfo.get('creator',' ') + ' - ' + docinfo.get('title',' ')" />
-  <link rel="stylesheet" href="template/docuviewer_css" type="text/css" />
-  <script type="text/javascript" tal:attributes="src string:$dlBaseUrl/jquery/jquery.js"></script>
-  <script type="text/javascript"
-    tal:attributes="src string:$dlBaseUrl/jquery/jquery.cookie.js"></script>
-  <script type="text/javascript"
-    tal:attributes="src string:$dlBaseUrl/jquery/jquery.digilib.js"></script>
-  <script type="text/javascript"
-    tal:attributes="src string:$dlBaseUrl/jquery/jquery.digilib.geometry.js"></script>
-  <script type="text/javascript"
-    tal:attributes="src string:$dlBaseUrl/jquery/jquery.digilib.arrows.js"></script>
-  <script type="text/javascript"
-    tal:attributes="src string:$dlBaseUrl/jquery/jquery.digilib.marks.js"></script>
-  <link rel="stylesheet" type="text/css"
-    tal:attributes="href string:$dlBaseUrl/jquery/jquery.digilib.css" />
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title tal:content="python:docinfo.get('creator',' ') + ' - ' + docinfo.get('title',' ')" />
+<link rel="stylesheet" href="template/docuviewer_css" type="text/css" />
+<script type="text/javascript" tal:attributes="src string:$dlBaseUrl/jquery/jquery.js"></script>
+<script type="text/javascript" tal:attributes="src string:$dlBaseUrl/jquery/jquery.cookie.js"></script>
+<script type="text/javascript" tal:attributes="src string:$dlBaseUrl/jquery/jquery.digilib.js"></script>
+<script type="text/javascript" tal:attributes="src string:$dlBaseUrl/jquery/jquery.digilib.geometry.js"></script>
+<script type="text/javascript" tal:attributes="src string:$dlBaseUrl/jquery/jquery.digilib.arrows.js"></script>
+<script type="text/javascript" tal:attributes="src string:$dlBaseUrl/jquery/jquery.digilib.marks.js"></script>
+<link rel="stylesheet" type="text/css" tal:attributes="href string:$dlBaseUrl/jquery/jquery.digilib.css" />
 
-  <script type="text/javascript"
-    tal:content="python:'''
-       var dlOpts = {
-            'interactionMode' : 'fullscreen',
-            'digilibBaseUrl' : '%s',
-            'fn' : '%s',
-            'pn' : '%s',
-            'suppressParamNames' : ['fn'],
-            'scalerInsets' : {'x' : 140, 'y' : 100}
-        };'''%(dlBaseUrl,docinfo.get('imagePath',''),pageinfo.get('pn','1'))"></script>
+<script type="text/javascript"
+  tal:content="python:'''\n
+       var dlOpts = {\n
+            'interactionMode' : 'fullscreen',\n
+            'digilibBaseUrl' : '%s',\n
+            'fn' : '%s',\n
+            'pn' : '%s',\n
+            'suppressParamNames' : ['fn'],\n
+            'scalerInsets' : {'x':300, 'y':100}\n
+        };\n'''%(dlBaseUrl,docinfo.get('imagePath',''),pageinfo.get('pn','1'))"></script>
 
-  <script type="text/javascript">
-            // <!--
-            $(document).ready(function() {
-                // autosubmit forms
-                $('form.autosubmit').find('.autosubmit').change(function() {
-                    this.form.submit();
-                });
-                $('form.autosubmit input[type="submit"]').hide();
-                // get digilib div
-                $digilib = $('div#scaler');
-                // configure digilib
-                $digilib.digilib(dlOpts);
-            });
-        // -->
-        </script>
+<script type="text/javascript">
+	// <!--
+	$(document).ready(function() {
+		// autosubmit forms
+		$('form.autosubmit').find('.autosubmit').change(function() {
+			this.form.submit();
+		});
+		$('form.autosubmit input[type="submit"]').hide();
+		// get digilib div
+		$digilib = $('div#scaler');
+		// configure digilib
+		$digilib.digilib(dlOpts);
+	});
+// -->
+</script>
 </head>
 <body tal:condition="numPages">
   <tal:block
@@ -61,18 +54,16 @@
     <div class="page-body" tal:condition="python:here.isAccessible(docinfo)">
       <!-- table of contents -->
       <div class="col toc">
-        <metal:block
-          metal:use-macro="python:path('here/template/toc_%s/macros/main'%tocMode)" />
+        <metal:block metal:use-macro="python:path('here/template/toc_%s/macros/main'%tocMode)" />
       </div>
       <!-- col-main: text page -->
       <div class="col main">
         <div class="ruler">
           <metal:block metal:use-macro="here/template/common_template/macros/page_ruler" />
         </div>
-        <div class="content">
+        <div class="content-images">
           <div id="scaler">
-            <img
-              tal:attributes="src string:${docinfo/imageURL}&pn=${pageinfo/pn}&dw=500&dh=500" />
+            <img tal:attributes="src string:${docinfo/imageURL}&pn=${pageinfo/pn}&dw=500&dh=500" />
           </div>
         </div>
         <!-- /content -->
diff -r 510bae2b593b -r abd36d4d97b8 zpt/viewer_index.zpt
--- a/zpt/viewer_index.zpt	Thu Jul 26 19:32:31 2012 +0200
+++ b/zpt/viewer_index.zpt	Thu Jul 26 21:22:56 2012 +0200
@@ -12,17 +12,22 @@
 <link rel="stylesheet" href="template/docuviewer_css" type="text/css" />
 </head>
 <body tal:condition="numPages">
-  <h1>Document information</h1>
+  <!-- header -->
+  <div class="page-head">
+    <metal:block metal:use-macro="here/template/common_template/macros/head" />
+  </div>
+  
+  <!-- main -->
+  <div class="page-body">
 
-  <div class="index-image">
+  <div class="col index-image">
     <!-- image -->
-    <a tal:define="tp docinfo/titlePage | nothing"
-      tal:attributes="href python:context.getLink(params={'viewMode':'auto','pn':tp})"><img
-      tal:condition="tp" border="0"
-      tal:attributes="src string:${docinfo/imageURL}&pn=$tp&dw=300&dh=500" /><img
+    <a tal:define="tp docinfo/titlePage | nothing" tal:attributes="href python:context.getLink(params={'viewMode':'auto','pn':tp})"><img
+      tal:condition="tp" border="0" tal:attributes="src string:${docinfo/imageURL}&pn=$tp&dw=300&dh=500" /><img
       tal:condition="python:not tp and exists('here/template/book.png')" border="0" src="template/book.png" /></a>
   </div>
 
+  <div class="col">
   <div class="index-info">
     <table border="0"
       tal:define="formattedData python:here.metadata.getBibFormattedMetaDataExtended(bibdata=docinfo.get('bib', None))">
@@ -69,33 +74,28 @@
     </table>
   </div>
 
-  <div>
-    <div>
-      <a class="openbutton"
-        tal:attributes="href python:context.getLink('viewMode','auto')">Access Book</a>
+  <div class="index-actions">
+    <div class="action">
+      <a class="openbutton" tal:attributes="href python:context.getLink('viewMode','auto')">&#8594;Access Book</a>
     </div>
-    <div tal:condition="docpath">
+    <div class="action" tal:condition="docpath">
       Download as <a
         tal:attributes="href python:'http://mpdl-system.mpiwg-berlin.mpg.de/mpdl/getDoc?doc=%s'%(docpath.replace('.xml','.html'))"
-        target="_blank">html</a> / <a
-        tal:attributes="href python:'http://mpdl-system.mpiwg-berlin.mpg.de/mpdl/getDoc?doc=%s'%(docpath)"
-        target="_blank">xml</a>
+        target="_blank">&#8594;HTML</a> or <a
+        tal:attributes="href python:'http://mpdl-system.mpiwg-berlin.mpg.de/mpdl/getDoc?doc=%s'%(docpath)" target="_blank">&#8594;XML</a>
     </div>
-    <div>
+    <div class="action">
       <!--BEGIN search -->
       <form tal:condition="docpath" tal:attributes="action python:here.getLink()">
-        <input type="hidden" tal:define="params python:here.getParams('viewMode', None)"
-          tal:repeat="param params"
-          tal:attributes="name param; value python:params[param]" /> <input
-          class="textMain" name="query" onfocus="this.select();" type="text"
-          tal:attributes="value query" /> <input type="submit" class="buttonMain"
-          value="Search in Book" />
+        <input type="hidden" tal:define="params python:here.getParams('viewMode', None)" tal:repeat="param params"
+          tal:attributes="name param; value python:params[param]" /> <input class="textMain" name="query" onfocus="this.select();"
+          type="text" tal:attributes="value query" /> <input type="submit" class="buttonMain" value="Search in Book" />
       </form>
       <!-- END search-->
     </div>
   </div>
-  <!-- DEBUG -->
-  <!-- <p tal:content="python:repr(docinfo)" /> -->
+  </div>
+  </div>
 </body>
 <body tal:condition="not:numPages">
   <div class="errortext">Sorry, document doesn't exist.</div>
diff -r 510bae2b593b -r abd36d4d97b8 zpt/viewer_text.zpt
--- a/zpt/viewer_text.zpt	Thu Jul 26 19:32:31 2012 +0200
+++ b/zpt/viewer_text.zpt	Thu Jul 26 21:22:56 2012 +0200
@@ -31,6 +31,7 @@
   </tal:block>
 </tal:block>
 </head>
+<!-- body -->
 <body tal:condition="numPages">
   <tal:block
     tal:define="docpath docinfo/textURLPath | nothing;
diff -r 510bae2b593b -r abd36d4d97b8 zpt/viewer_thumbs.zpt
--- a/zpt/viewer_thumbs.zpt	Thu Jul 26 19:32:31 2012 +0200
+++ b/zpt/viewer_thumbs.zpt	Thu Jul 26 21:22:56 2012 +0200
@@ -11,14 +11,14 @@
 <link rel="stylesheet" href="template/docuviewer_css" type="text/css" />
 <script type="text/javascript" tal:attributes="src string:$rootUrl/template/jquery_js"></script>
 <script type="text/javascript">
-    // <!--
-    $(document).ready(function() {
-        // autosubmit forms
-        $('form.autosubmit').find('.autosubmit').change(function() {
-            this.form.submit();
-        });
-        $('form.autosubmit input[type="submit"]').hide();
-    });
+	// <!--
+	$(document).ready(function() {
+		// autosubmit forms
+		$('form.autosubmit').find('.autosubmit').change(function() {
+			this.form.submit();
+		});
+		$('form.autosubmit input[type="submit"]').hide();
+	});
 // -->
 </script>
 </head>
@@ -41,30 +41,25 @@
       <!-- col-main: text page -->
       <div class="col main">
         <div class="ruler">
-          <metal:block
-            metal:use-macro="here/template/common_template/macros/toc_ruler_thumbs" />
+          <metal:block metal:use-macro="here/template/common_template/macros/toc_ruler_thumbs" />
         </div>
-
-        <table class="thumbs">
-          <tr tal:repeat="row pageBatch/pages">
-            <td tal:repeat="thumb row"
-              tal:attributes="class python:here.getStyle(thumb['idx'],pn,'thumb')">
-              <a tal:define="idx thumb/idx" tal:condition="idx"
+        <div class="content-thumbs">
+          <table class="thumbs">
+            <tr tal:repeat="row pageBatch/pages">
+              <td tal:repeat="thumb row" tal:attributes="class python:here.getStyle(thumb['idx'],pn,'thumb')"><a
+                tal:define="idx thumb/idx" tal:condition="idx"
                 tal:attributes="href python:here.getLink(params={'pn':idx, 'viewMode':'images'})"> <img
-                tal:attributes="src python:test(docinfo['imageURL'],here.getScalerUrl(pn=idx,dw=thumbSize,dh=thumbSize,docinfo=docinfo),'images/pic');
+                  tal:attributes="src python:test(docinfo['imageURL'],here.getScalerUrl(pn=idx,dw=thumbSize,dh=thumbSize,docinfo=docinfo),'images/pic');
                                 alt idx" /><br />
-                <span title="Scan number" tal:content="idx" /> <span
-                tal:condition="python:pageNumbers and pageNumbers.get(idx, False) and pageNumbers[idx]['no']"
-                title="Original page number"
-                tal:content="python:' (%s)'%(pageNumbers[idx]['no'])" />
-              </a>
-            </td>
-          </tr>
-        </table>
-
-        <div class="ruler">
-          <metal:block
-            metal:use-macro="here/template/common_template/macros/toc_ruler_thumbs" />
+                  <span title="Scan number" tal:content="idx" /> <span
+                  tal:condition="python:pageNumbers and pageNumbers.get(idx, False) and pageNumbers[idx]['no']"
+                  title="Original page number" tal:content="python:' (%s)'%(pageNumbers[idx]['no'])" />
+              </a></td>
+            </tr>
+          </table>
+        </div>
+        <div class="ruler down">
+          <metal:block metal:use-macro="here/template/common_template/macros/toc_ruler_thumbs" />
         </div>
 
       </div>
@@ -78,26 +73,19 @@
           <form tal:attributes="action viewerUrl" class="autosubmit">
             <input type="hidden"
               tal:define="params python:here.getParams(params={'thumbRows':None,'thumbCols':None,'thumbSize':None})"
-              tal:repeat="param params"
-              tal:attributes="name param; value python:params[param]" />
+              tal:repeat="param params" tal:attributes="name param; value python:params[param]" />
             <ul>
-              <li>
-                Rows 
-                <select class="autosubmit" name="thumbRows" tal:define="rows python:[2,3,5,10,12,15,20,50,100]">
-                  <option tal:repeat="row rows" tal:attributes="selected python:thumbRows==row; value row" tal:content="row"/>
-                </select>
+              <li>Rows <select class="autosubmit" name="thumbRows" tal:define="rows python:[2,3,5,10,12,15,20,50,100]">
+                  <option tal:repeat="row rows" tal:attributes="selected python:thumbRows==row; value row" tal:content="row" />
+              </select>
               </li>
-              <li>
-                Columns 
-                <select class="autosubmit" name="thumbCols" tal:define="cols python:[2,3,5,10,12,15,20,50,100]">
-                  <option tal:repeat="col cols" tal:attributes="selected python:thumbCols==col; value col" tal:content="col"/>
-                </select>
+              <li>Columns <select class="autosubmit" name="thumbCols" tal:define="cols python:[2,3,5,10,12,15,20,50,100]">
+                  <option tal:repeat="col cols" tal:attributes="selected python:thumbCols==col; value col" tal:content="col" />
+              </select>
               </li>
-              <li>
-                Thumbnail size 
-                <select class="autosubmit" name="thumbSize" tal:define="sizes python:[100,150,200,300,500]">
-                  <option tal:repeat="size sizes" tal:attributes="selected python:thumbSize==size; value size" tal:content="size"/>
-                </select>
+              <li>Thumbnail size <select class="autosubmit" name="thumbSize" tal:define="sizes python:[100,150,200,300,500]">
+                  <option tal:repeat="size sizes" tal:attributes="selected python:thumbSize==size; value size" tal:content="size" />
+              </select>
               </li>
             </ul>
           </form>