start working on responsive design

dauwhe · Dec 1, 2016 · 8994956 · 8994956
1 parent d398fe7
commit 8994956
Show file tree

Hide file tree

Showing 10 changed files with 103 additions and 71 deletions.
diff --git a/Orlando/images/orlando.jpg b/Orlando/images/orlando.jpg
diff --git a/Orlando/images/orlando.png b/Orlando/images/orlando.png
diff --git a/Orlando/manifest.json b/Orlando/manifest.json
@@ -2,11 +2,11 @@
   "name": "Orlando",
   "short_name": "Orlando",
   "icons": [{
-    "src": "apple-touch-icon.png",
-    "sizes": "64x64",
+    "src": "images/orlando.png",
+    "sizes": "144x144",
     "type": "image/png"
   }],
-  "start_url": "html/c001.html",
+  "start_url": "../main.html?manifest=Orlando/manifest.json",
   "display": "fullscreen",
 
   "@context": {

diff --git a/index.css b/index.css
@@ -59,3 +59,11 @@ section p {
 section p + section p {
   text-indent: 1.2em;
 }
+
+ul { list-style-type: none; }
+
+li img { vertical-align: middle; padding-right: 10px; }
+
+li { border-bottom: 6px solid #f8f8f8; background-color: white; }
+
+a { text-decoration: none; }
diff --git a/index.html b/index.html
@@ -15,56 +15,40 @@
 <h1>Acme Labs</h1>
 
 
-<table>
-
-<tr>
-<th></th>
-<th>Title</th>
-<th>Author</th>
-</tr>
-
-<tr>
-<td><img src="covers/moby-dick-book-cover.jpg" height="100" alt="Moby Dick Book Cover"/></td>
-
-<td><a href="main.html?manifest=MobyDick/manifest.json">Moby-Dick</a></td>
-<td>Herman Melville</td>
-</tr>
-
-<tr>
-<td><img src="covers/Bartleby.jpg" height="100" alt="Bartleby Book Cover"/></td>
-<td><a href="main.html?manifest=Bartleby/manifest.json">Bartleby, The Scrivener</a></td>
-<td>Herman Melville</td>
-</tr>
-
-<tr>
-<td><img src="covers/mott.jpg" height="100" alt="Lucretia Mott Book Cover"/></td>
-<td><a href="main.html?manifest=Mott/manifest.json">Discourse on Woman</a></td>
-<td>Lucretia Mott</td>
-</tr>
-
-<tr>
-<td><img src="covers/lighthouse.jpg" height="100" alt="To the Lighthouse Book Cover"/></td>
-<td><a href="main.html?manifest=Lighthouse/manifest.json">To the Lighthouse</a></td>
-<td>Virginia Woolf</td>
-</tr>
-
-<tr>
-<td><img src="covers/orlando.jpg" height="100" alt="Orlando Book Cover"/></td>
-<td><a href="main.html?manifest=Orlando/manifest.json">Orlando</a></td>
-<td>Virginia Woolf</td>
-</tr>
-
-<tr>
-<td><img src="covers/BiB.jpg" height="100" alt="Books in Browsers Image"/></td>
-<td><a href="main.html?manifest=BooksInBrowsers/manifest.json">A Bag Full of Stories</a></td>
-<td>Dave Cramer</td>
-</tr>
-
-<tr>
-<td><img src="covers/pageblanche.jpg" height="100" alt="Page Blanche Cover"/></td>
-<td><a href="main.html?manifest=page-blanche/manifest.json">La Page Blanche</a></td>
-<td>Boulet • Pénélope Bagieu</td>
-</tr>
+<ul>
+
+<li><a href="main.html?manifest=MobyDick/manifest.json"><img src="covers/moby-dick-book-cover.jpg" height="40" alt="Moby Dick Book Cover"/>Moby-Dick, Herman Melville</a></li>
+
+
+
+
+<li><a href="main.html?manifest=Bartleby/manifest.json">
+<img src="covers/Bartleby.jpg" height="40" alt="Bartleby Book Cover"/>Bartleby, The Scrivener Herman Melville
+</a></li>
+
+<li><a href="main.html?manifest=Mott/manifest.json"><img src="covers/mott.jpg" height="40" alt="Lucretia Mott Book Cover"/>Discourse on Woman, Lucretia Mott</a>
+</li>
+
+<li><a href="main.html?manifest=Lighthouse/manifest.json">
+<td><img src="covers/lighthouse.jpg" height="40" alt="To the Lighthouse Book Cover"/>To the Lighthouse, Virginia Woolf</a>
+</li>
+
+<li><a href="main.html?manifest=Orlando/manifest.json">
+<img src="covers/orlando.jpg" height="40" alt="Orlando Book Cover"/>
+Orlando, Virginia Woolf</td>
+</a>
+</li>
+
+<li>
+<a href="main.html?manifest=BooksInBrowsers/manifest.json">
+<img src="covers/BiB.jpg" height="40" alt="Books in Browsers Image"/>
+A Bag Full of Stories, Dave Cramer</a>
+</li>
+
+<li>
+<a href="main.html?manifest=page-blanche/manifest.json">
+<img src="covers/pageblanche.jpg" height="40" alt="Page Blanche Cover"/>La Page Blanche,Boulet • Pénélope Bagieu</a>
+</li>
 
 
 

diff --git a/kroner.js b/kroner.js
@@ -307,7 +307,7 @@ function epubPackage(request) {
 
       var today = new Date();      
             // make the package file
-            var opfFile = '<package xmlns="http://www.idpf.org/2007/opf" version="3.0" xml:lang="en" unique-identifier="pub-id"><metadata xmlns:dc="http://purl.org/dc/elements/1.1/"><dc:title>' + bookTitle + '</dc:title><dc:identifier id="pub-id">idtk</dc:identifier><dc:language>en-US</dc:language><meta property="dcterms:modified">' + today.toISOString() + '</meta></metadata><manifest>';
+            var opfFile = '<package xmlns="http://www.idpf.org/2007/opf" version="3.0" xml:lang="en" unique-identifier="pub-id">\n<metadata xmlns:dc="http://purl.org/dc/elements/1.1/">\n<dc:title>' + bookTitle + '</dc:title>\n<dc:identifier id="pub-id">idtk</dc:identifier>\n<dc:language>en-US</dc:language>\n<meta property="dcterms:modified">' + today.toISOString() + '</meta>\n</metadata>\n<manifest>\n';
 
              for (var i = 0; i < packageData.length; i++) { 
         opfFile += "<item href='" + packageData[i][0] + "' media-type='" + packageData[i][1] + "' id='" + packageData[i][3] + "'";
@@ -316,22 +316,22 @@ function epubPackage(request) {
         opfFile += " properties='" + packageData[i][4] + "'";
         };
 
-        opfFile += "/>"
+        opfFile += "/>\n"
         };
 
-opfFile += '</manifest>';
+opfFile += '</manifest>\n';
 
-                opfFile += "<spine>";
+                opfFile += "<spine>\n";
 
                  for (var i = 0; i < packageData.length; i++) { 
 
                   if (packageData[i][2] === 'spine') {
-        opfFile += "<itemref idref='" + packageData[i][3] + "'/>"
+        opfFile += "<itemref idref='" + packageData[i][3] + "'/>\n"
 
         }
         };
 
-        opfFile += "</spine></package>";
+        opfFile += "</spine>\n</package>";
         console.log(opfFile);
 
         zip.file('OPS/package.opf', opfFile)
@@ -359,9 +359,6 @@ opfFile += '</manifest>';
                 'Content-Disposition': `attachment; filename="${publicationName}.epub"`
               }
             });
-
-
-
           });
         })
   );

diff --git a/main.css b/main.css
@@ -43,11 +43,40 @@ body {
   display: none;
 }
 
-#pub {
-height: 75vh;
+
+  .iframe-container {
+width: 100%;
+height: 80vh;
+}
+
+
+ #pub {
 width: 600px;
+height: 100%;
+object-fit: cover;
+
+}
+
+
+
+
+@media screen and (max-device-width: 480px) {
+
+ .iframe-container {
+width: 100%;
+height: 80vh;
+}
+
+#pub {
+width: 100%;
+height: 100%;
+object-fit: cover;
 }
 
+}
+
+
+
 form {
   display: inline;
 }
diff --git a/main.html b/main.html
@@ -7,7 +7,6 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta http-equiv="Content-Language" content="en">
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-
   <link rel="stylesheet" href="main.css" />
 </head>
 <body>

diff --git a/main.js b/main.js
@@ -15,6 +15,14 @@ function getPathByName() {
     : null;
 }
 
+
+// will it help if there's a link to the manifest in the hosting page?
+var manifestLink = document.createElement('link');
+manifestLink.rel = 'manifest';
+manifestLink.href = getParameterByName('manifest');
+document.getElementsByTagName('head')[0].appendChild(manifestLink);
+
+
 var manifest = getParameterByName('manifest');
 var count = 0;
 var NightLink = document.getElementById('night');
@@ -50,9 +58,9 @@ var content = $.getJSON(manifest)
 
     }
 
-
+    // so we're trying to deal with fixed layout, by setting the iframe to a nice size
      $("#pub").load(function(){
-
+     
 var viewport = $("#pub").contents().find('meta[name=viewport]').attr("content");
 
 if ( viewport ) {
@@ -64,15 +72,21 @@ var width = viewport.match(reWidth, '$1')[1];
 
 var height = viewport.match(reHeight, '$1')[1];
 
-var iframeWidth = 600;
-var iframeHeight = 750;
 
-var horizonalScale = iframeWidth/width;
+var intFrameWidth = window.innerWidth;
+
+
+
+var horizonalScale = intFrameWidth/width;
+
+var actualWidth = width * horizonalScale;
+
+var actualHeight = height * horizonalScale;
 
 console.log(horizonalScale);
 
 
-iframe.setAttribute('style', 'transform: scale(' + horizonalScale + '); transform-origin: 50% 0; width: ' + width + 'px; height: ' + height + 'px;'  );
+iframe.setAttribute('style', 'transform: scale(' + horizonalScale + '); transform-origin: 0 0; width: ' + width + 'px; height: ' + height + 'px;'  );
 
 } else {}
 

diff --git a/page-blanche/manifest.json b/page-blanche/manifest.json
@@ -3,6 +3,7 @@
 "date": "2012-01-18",
 "publisher": "éditions Delcourt",
 "creator": "Boulet • Pénélope Bagieu",
+"start_url": "../main.html?manifest=page-blanche/manifest.json",
 
 "resources": [
 	  { "href": "images/cover.jpg", "properties": "cover-image", "type": "image/jpeg"},