Re: Responsive images in pgweb docs

"Jonathan S. Katz" <[email protected]> Thu, 4 Apr 2019 12:23:56 -0400

Newsgroups	gmane.comp.db.postgresql.devel.documentation
Message-ID	<[email protected]>

On 4/4/19 7:17 AM, Peter Eisentraut wrote:
> Here is a patch to improve this a bit.  It turns back on making the SVG
> images in the HTML output scale with the page size.  I also added some
> CSS stuff to make the width 75% on large screens for a more pleasing look.
> 
> This fixes it for the gin image.  The pagelayout image still doesn't
> scale, presumably for the reasons you identified inside the SVG code.

Tested against the local patch I have for pgweb for importing the docs
with appropriate classes. The GIN SVG does indeed scale properly, thanks!

As you mention, pagelayout still does not properly scale as it needs the
fix to scale.

Given you kept the gin.svg as is and that has some of the widths on it,
I'd propose we just add the viewbox on pagelayout.svg, i.e.

	viewBox="0.00 0.00 610.00 210.00"

Fix attached. I tested this in both the HTML build and with the import
into pgweb with new patch, and it scaled correctly.

Thanks,

Jonathan

0001-Make-pagelayout.svg-scalable-based-viewport.patch (text/plain, 1 KB)

From cc29aa43269ba7beb11a61aa93096698540af179 Mon Sep 17 00:00:00 2001
From: "Jonathan S. Katz" <[email protected]>
Date: Thu, 4 Apr 2019 12:21:38 -0400
Subject: [PATCH 2/2] Make pagelayout.svg scalable based viewport.

---
 doc/src/sgml/images/pagelayout.svg | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/doc/src/sgml/images/pagelayout.svg b/doc/src/sgml/images/pagelayout.svg
index 6b819a553e..3cf89f0a14 100644
--- a/doc/src/sgml/images/pagelayout.svg
+++ b/doc/src/sgml/images/pagelayout.svg
@@ -3,6 +3,7 @@
     xmlns='http://www.w3.org/2000/svg'
     width='610'
     height='210'
+    viewBox='0.00 0.00 610.00 210.00'
     shape-rendering='geometricPrecision'
     version='1.0'>
   <defs>
@@ -37,4 +38,4 @@
     <text x='324' y='166' font-family='Courier' font-size='15' stroke='none' fill='#000000' ><![CDATA[Item]]></text>
     <text x='509' y='166' font-family='Courier' font-size='15' stroke='none' fill='#000000' ><![CDATA[Special]]></text>
   </g>
-</svg>
\ No newline at end of file
+</svg>
-- 
2.14.3 (Apple Git-98)

signature.asc (application/pgp-signature, 833 B)