Improve pdf, image rendering

Related T1900

swh/web/assets/src/bundles/browse/content.css

 /**
- * Copyright (C) 2018  The Software Heritage developers
+ * Copyright (C) 2018-2019  The Software Heritage developers
  * See the AUTHORS file at the top-level directory of this distribution
  * License: GNU Affero General Public License version 3, or any later version
  * See top-level LICENSE file for more information
@@ -16,3 +16,8 @@
     margin: 0;
     padding: 0;
 }
+
+.swh-content img,
+.swh-content svg {
+    max-width: 100%;
+}

swh/web/assets/src/bundles/webapp/pdf-rendering.js

@@ -15,7 +15,7 @@ export async function renderPdf(pdfUrl) {
   let pageNum = 1;
   let pageRendering = false;
   let pageNumPending = null;
-  let scale = 1.5;
+  let defaultScale = 1.5;
   let canvas = $('#pdf-canvas')[0];
   let ctx = canvas.getContext('2d');
 
@@ -24,6 +24,9 @@ export async function renderPdf(pdfUrl) {
     pageRendering = true;
     // Using promise to fetch the page
     pdfDoc.getPage(num).then(page => {
+      let divWidth = $('.swh-content').width();
+      let scale = Math.min(defaultScale, divWidth / page.getViewport(1).width);
+
       let viewport = page.getViewport(scale);
       canvas.width = viewport.width;
       canvas.height = viewport.height;
@@ -95,6 +98,11 @@ export async function renderPdf(pdfUrl) {
       // PDF loading error
       console.error(reason);
     });
+
+    // Render PDF on resize
+    $(window).on('resize', function() {
+      queueRenderPage(pageNum);
+    });
   });
 
 }

swh/web/assets/src/utils/showdown.css

@@ -23,3 +23,8 @@
 .swh-showdown table tr:nth-child(even) {
     background-color: #f2f2f2;
 }
+
+.swh-showdown img,
+.swh-showdown svg {
+    max-width: 100%;
+}

[Phabricator Migration user]

Some references in the commit message have been migrated:

• T1900 is now #1900 (closed)