pg.ddx.io pgsql-docs@postgresql.org mailing list archive
help / color / mirror / Atom feedResponsive images in pgweb docs
7+ messages / 2 participants
[nested] [flat]
* Responsive images in pgweb docs
@ 2019-03-31 14:23 Jonathan S. Katz <jkatz@postgresql.org>
0 siblings, 1 reply; 7+ messages in thread
From: Jonathan S. Katz @ 2019-03-31 14:23 UTC (permalink / raw)
To: Pg Docs <pgsql-docs@lists.postgresql.org>
Hi,
First, many thanks on all the hard work for getting images into the
documentation, this is certainly a great new feature for ours users.
When testing the rendering of the images on the pgweb docs, I discovered
that they are not responsive (see attached) and in its current state,
basically makes any page that loads an image significantly more
challenging to read on mobile.
I've devised a solution to the problem, which will take work both on the
pgweb front as well as the SVG image generation.
The pgweb side is relatively simple: wherever we see ".figure" we can
tack on ".col-xl-8.col-lg-10.col-md-12" (Bootstrap grid codes) which
provides some readable images.
However, that in itself will not make the images responsive. It appears
that the width/height are at present hardcoded onto the SVG, for example
in doc/src/sgml/images/gin.svg you find:
<svg width="836pt" height="432pt" viewBox="0.00 0.00 836.00 432.00" ...
In order to make the SVG responsive, we can change the top line to be:
<svg viewBox="0.00 0.00 836.00 432.00" preserveAspectRatio="xMinYMin
meet" ...
and this fixes it. If/when the change is accepted, I can push the change
to the pgweb code that allows for the responsiveness.
I can fairly easy come up with a patch to do this for the current SVGs
(attached). I tested against the PDF build and it looks fine.
Based on the earlier discussions, I'm wondering how we would want to
proceed for future images, as I know the goal is to limit the amount of
manual editing once an image is generated.
Thanks,
Jonathan
From b4f94ee3b62d4eeec45cfa4fbba5375810d8ae59 Mon Sep 17 00:00:00 2001
From: "Jonathan S. Katz" <jonathan.katz@excoventures.com>
Date: Sun, 31 Mar 2019 10:16:26 -0400
Subject: [PATCH] Modify SVGs to not have view boxes that can scale based on
viewing container.
This allows for responsive image viewing, particularly on the web.
---
doc/src/sgml/images/gin.svg | 3 +--
doc/src/sgml/images/pagelayout.svg | 8 ++++----
2 files changed, 5 insertions(+), 6 deletions(-)
diff --git a/doc/src/sgml/images/gin.svg b/doc/src/sgml/images/gin.svg
index eacb5c8c16..493f0ffa76 100644
--- a/doc/src/sgml/images/gin.svg
+++ b/doc/src/sgml/images/gin.svg
@@ -4,8 +4,7 @@
<!-- Generated by graphviz version 2.40.1 (20161225.0304)
-->
<!-- Title: gin Pages: 1 -->
-<svg width="836pt" height="432pt"
- viewBox="0.00 0.00 836.00 432.00" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";
+<svg viewBox="0.00 0.00 836.00 432.00" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 428)">
<title>gin</title>
<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-428 832,-428 832,4 -4,4"/>
diff --git a/doc/src/sgml/images/pagelayout.svg b/doc/src/sgml/images/pagelayout.svg
index 6b819a553e..95711c541f 100644
--- a/doc/src/sgml/images/pagelayout.svg
+++ b/doc/src/sgml/images/pagelayout.svg
@@ -1,8 +1,8 @@
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
-<svg
+<svg
xmlns='http://www.w3.org/2000/svg';
- width='610'
- height='210'
+ viewBox="0.00 0.00 610.00 210.00"
+ preserveAspectRatio="xMinYMin meet"
shape-rendering='geometricPrecision'
version='1.0'>
<defs>
@@ -37,4 +37,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)
Attachments:
[text/plain] 0001-Modify-SVGs-to-not-have-view-boxes-that-can-scale-ba.patch (2.1K, ../../6d2442d1-84a2-36ef-e014-b6d1ece8a139@postgresql.org/2-0001-Modify-SVGs-to-not-have-view-boxes-that-can-scale-ba.patch)
download | inline diff:
From b4f94ee3b62d4eeec45cfa4fbba5375810d8ae59 Mon Sep 17 00:00:00 2001
From: "Jonathan S. Katz" <jonathan.katz@excoventures.com>
Date: Sun, 31 Mar 2019 10:16:26 -0400
Subject: [PATCH] Modify SVGs to not have view boxes that can scale based on
viewing container.
This allows for responsive image viewing, particularly on the web.
---
doc/src/sgml/images/gin.svg | 3 +--
doc/src/sgml/images/pagelayout.svg | 8 ++++----
2 files changed, 5 insertions(+), 6 deletions(-)
diff --git a/doc/src/sgml/images/gin.svg b/doc/src/sgml/images/gin.svg
index eacb5c8c16..493f0ffa76 100644
--- a/doc/src/sgml/images/gin.svg
+++ b/doc/src/sgml/images/gin.svg
@@ -4,8 +4,7 @@
<!-- Generated by graphviz version 2.40.1 (20161225.0304)
-->
<!-- Title: gin Pages: 1 -->
-<svg width="836pt" height="432pt"
- viewBox="0.00 0.00 836.00 432.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+<svg viewBox="0.00 0.00 836.00 432.00" preserveAspectRatio="xMinYMin meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 428)">
<title>gin</title>
<polygon fill="#ffffff" stroke="transparent" points="-4,4 -4,-428 832,-428 832,4 -4,4"/>
diff --git a/doc/src/sgml/images/pagelayout.svg b/doc/src/sgml/images/pagelayout.svg
index 6b819a553e..95711c541f 100644
--- a/doc/src/sgml/images/pagelayout.svg
+++ b/doc/src/sgml/images/pagelayout.svg
@@ -1,8 +1,8 @@
<?xml version='1.0' encoding='UTF-8' standalone='no'?>
-<svg
+<svg
xmlns='http://www.w3.org/2000/svg'
- width='610'
- height='210'
+ viewBox="0.00 0.00 610.00 210.00"
+ preserveAspectRatio="xMinYMin meet"
shape-rendering='geometricPrecision'
version='1.0'>
<defs>
@@ -37,4 +37,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)
[image/jpeg] IMG_8936.jpg (68.9K, ../../6d2442d1-84a2-36ef-e014-b6d1ece8a139@postgresql.org/3-IMG_8936.jpg)
download | view image
[application/pgp-signature] signature.asc (832B, ../../6d2442d1-84a2-36ef-e014-b6d1ece8a139@postgresql.org/4-signature.asc)
download
^ permalink raw reply [nested|flat] 7+ messages in thread
* Re: Responsive images in pgweb docs
@ 2019-04-01 09:57 Peter Eisentraut <peter.eisentraut@2ndquadrant.com>
parent: Jonathan S. Katz <jkatz@postgresql.org>
0 siblings, 1 reply; 7+ messages in thread
From: Peter Eisentraut @ 2019-04-01 09:57 UTC (permalink / raw)
To: Jonathan S. Katz <jkatz@postgresql.org>; Pg Docs <pgsql-docs@lists.postgresql.org>
On 2019-03-31 16:23, Jonathan S. Katz wrote:
> When testing the rendering of the images on the pgweb docs, I discovered
> that they are not responsive (see attached) and in its current state,
> basically makes any page that loads an image significantly more
> challenging to read on mobile.
Image scaling is currently intentionally disabled for the HTML output
(see ignore.image.scaling in stylesheet-html-common.xsl). But if we
turn it on, then the images will automatically be huge if you have large
screen. Is that better?
--
Peter Eisentraut http://www.2ndQuadrant.com/
PostgreSQL Development, 24x7 Support, Remote DBA, Training & Services
^ permalink raw reply [nested|flat] 7+ messages in thread
* Re: Responsive images in pgweb docs
@ 2019-04-01 11:23 Jonathan S. Katz <jkatz@postgresql.org>
parent: Peter Eisentraut <peter.eisentraut@2ndquadrant.com>
0 siblings, 1 reply; 7+ messages in thread
From: Jonathan S. Katz @ 2019-04-01 11:23 UTC (permalink / raw)
To: Peter Eisentraut <peter.eisentraut@2ndquadrant.com>; Pg Docs <pgsql-docs@lists.postgresql.org>
On 4/1/19 5:57 AM, Peter Eisentraut wrote:
> On 2019-03-31 16:23, Jonathan S. Katz wrote:
>> When testing the rendering of the images on the pgweb docs, I discovered
>> that they are not responsive (see attached) and in its current state,
>> basically makes any page that loads an image significantly more
>> challenging to read on mobile.
>
> Image scaling is currently intentionally disabled for the HTML output
> (see ignore.image.scaling in stylesheet-html-common.xsl). But if we
> turn it on, then the images will automatically be huge if you have large
> screen. Is that better?
Yes - we can control how much of the screen the image will take up with
the Bootstrap grid CSS classes, which is what the patch on the pgweb
side does.
Thanks,
Jonathan
Attachments:
[application/pgp-signature] signature.asc (832B, ../../3a0d7bbd-c854-3fba-4079-acee9ff9c12a@postgresql.org/2-signature.asc)
download
^ permalink raw reply [nested|flat] 7+ messages in thread
* Re: Responsive images in pgweb docs
@ 2019-04-01 12:22 Peter Eisentraut <peter.eisentraut@2ndquadrant.com>
parent: Jonathan S. Katz <jkatz@postgresql.org>
0 siblings, 1 reply; 7+ messages in thread
From: Peter Eisentraut @ 2019-04-01 12:22 UTC (permalink / raw)
To: Jonathan S. Katz <jkatz@postgresql.org>; Pg Docs <pgsql-docs@lists.postgresql.org>
On 2019-04-01 13:23, Jonathan S. Katz wrote:
>> Image scaling is currently intentionally disabled for the HTML output
>> (see ignore.image.scaling in stylesheet-html-common.xsl). But if we
>> turn it on, then the images will automatically be huge if you have large
>> screen. Is that better?
>
> Yes - we can control how much of the screen the image will take up with
> the Bootstrap grid CSS classes, which is what the patch on the pgweb
> side does.
How do you do it outside of Bootstrap?
--
Peter Eisentraut http://www.2ndQuadrant.com/
PostgreSQL Development, 24x7 Support, Remote DBA, Training & Services
^ permalink raw reply [nested|flat] 7+ messages in thread
* Re: Responsive images in pgweb docs
@ 2019-04-01 14:35 Jonathan S. Katz <jkatz@postgresql.org>
parent: Peter Eisentraut <peter.eisentraut@2ndquadrant.com>
0 siblings, 1 reply; 7+ messages in thread
From: Jonathan S. Katz @ 2019-04-01 14:35 UTC (permalink / raw)
To: Peter Eisentraut <peter.eisentraut@2ndquadrant.com>; Pg Docs <pgsql-docs@lists.postgresql.org>
On 4/1/19 8:22 AM, Peter Eisentraut wrote:
> On 2019-04-01 13:23, Jonathan S. Katz wrote:
>>> Image scaling is currently intentionally disabled for the HTML output
>>> (see ignore.image.scaling in stylesheet-html-common.xsl). But if we
>>> turn it on, then the images will automatically be huge if you have large
>>> screen. Is that better?
>>
>> Yes - we can control how much of the screen the image will take up with
>> the Bootstrap grid CSS classes, which is what the patch on the pgweb
>> side does.
>
> How do you do it outside of Bootstrap?
Effectively you're adjusting the width of the container, in this case,
as a percentage.
So borrowing from upthread, Bootstrap divides your viewport into 12
columns. In the "large screen" format, I specified for the image to load
within 8 of those columns (col-xl-8) which is equiv to a width of 75% of
the viewport.
Jonathan
Attachments:
[application/pgp-signature] signature.asc (832B, ../../8b7a73f8-920f-49bf-42f6-4761cddb4107@postgresql.org/2-signature.asc)
download
^ permalink raw reply [nested|flat] 7+ messages in thread
* Re: Responsive images in pgweb docs
@ 2019-04-04 11:17 Peter Eisentraut <peter.eisentraut@2ndquadrant.com>
parent: Jonathan S. Katz <jkatz@postgresql.org>
0 siblings, 1 reply; 7+ messages in thread
From: Peter Eisentraut @ 2019-04-04 11:17 UTC (permalink / raw)
To: Jonathan S. Katz <jkatz@postgresql.org>; Pg Docs <pgsql-docs@lists.postgresql.org>
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.
--
Peter Eisentraut http://www.2ndQuadrant.com/
PostgreSQL Development, 24x7 Support, Remote DBA, Training & Services
From e2647f228f7cb4b553e858b61a0e86f7740b627e Mon Sep 17 00:00:00 2001
From: Peter Eisentraut <peter@eisentraut.org>
Date: Thu, 4 Apr 2019 13:13:30 +0200
Subject: [PATCH] Better scaling of images in HTML output
---
doc/src/sgml/stylesheet-html-common.xsl | 3 ++-
doc/src/sgml/stylesheet.css | 6 ++++++
2 files changed, 8 insertions(+), 1 deletion(-)
diff --git a/doc/src/sgml/stylesheet-html-common.xsl b/doc/src/sgml/stylesheet-html-common.xsl
index b105005235..f89f399129 100644
--- a/doc/src/sgml/stylesheet-html-common.xsl
+++ b/doc/src/sgml/stylesheet-html-common.xsl
@@ -13,8 +13,9 @@
<!-- Parameters -->
<xsl:param name="make.valid.html" select="1"></xsl:param>
+<xsl:param name="formal.object.break.after">0</xsl:param>
<xsl:param name="generate.id.attributes" select="1"></xsl:param>
-<xsl:param name="ignore.image.scaling" select="1"/>
+<xsl:param name="make.graphic.viewport" select="0"/>
<xsl:param name="link.mailto.url">pgsql-docs@lists.postgresql.org</xsl:param>
<xsl:param name="toc.max.depth">2</xsl:param>
diff --git a/doc/src/sgml/stylesheet.css b/doc/src/sgml/stylesheet.css
index c355fbecac..8518839bac 100644
--- a/doc/src/sgml/stylesheet.css
+++ b/doc/src/sgml/stylesheet.css
@@ -102,3 +102,9 @@ var { font-family: monospace; font-style: italic; }
acronym { font-style: inherit; }
.option { white-space: nowrap; }
+
+@media (min-width: 800px) {
+ .mediaobject {
+ width: 75%;
+ }
+}
--
2.21.0
Attachments:
[text/plain] 0001-Better-scaling-of-images-in-HTML-output.patch (1.4K, ../../3aef325c-db3e-f11e-2eb2-154e19d5b667@2ndquadrant.com/2-0001-Better-scaling-of-images-in-HTML-output.patch)
download | inline diff:
From e2647f228f7cb4b553e858b61a0e86f7740b627e Mon Sep 17 00:00:00 2001
From: Peter Eisentraut <peter@eisentraut.org>
Date: Thu, 4 Apr 2019 13:13:30 +0200
Subject: [PATCH] Better scaling of images in HTML output
---
doc/src/sgml/stylesheet-html-common.xsl | 3 ++-
doc/src/sgml/stylesheet.css | 6 ++++++
2 files changed, 8 insertions(+), 1 deletion(-)
diff --git a/doc/src/sgml/stylesheet-html-common.xsl b/doc/src/sgml/stylesheet-html-common.xsl
index b105005235..f89f399129 100644
--- a/doc/src/sgml/stylesheet-html-common.xsl
+++ b/doc/src/sgml/stylesheet-html-common.xsl
@@ -13,8 +13,9 @@
<!-- Parameters -->
<xsl:param name="make.valid.html" select="1"></xsl:param>
+<xsl:param name="formal.object.break.after">0</xsl:param>
<xsl:param name="generate.id.attributes" select="1"></xsl:param>
-<xsl:param name="ignore.image.scaling" select="1"/>
+<xsl:param name="make.graphic.viewport" select="0"/>
<xsl:param name="link.mailto.url">pgsql-docs@lists.postgresql.org</xsl:param>
<xsl:param name="toc.max.depth">2</xsl:param>
diff --git a/doc/src/sgml/stylesheet.css b/doc/src/sgml/stylesheet.css
index c355fbecac..8518839bac 100644
--- a/doc/src/sgml/stylesheet.css
+++ b/doc/src/sgml/stylesheet.css
@@ -102,3 +102,9 @@ var { font-family: monospace; font-style: italic; }
acronym { font-style: inherit; }
.option { white-space: nowrap; }
+
+@media (min-width: 800px) {
+ .mediaobject {
+ width: 75%;
+ }
+}
--
2.21.0
^ permalink raw reply [nested|flat] 7+ messages in thread
* Re: Responsive images in pgweb docs
@ 2019-04-04 16:23 Jonathan S. Katz <jkatz@postgresql.org>
parent: Peter Eisentraut <peter.eisentraut@2ndquadrant.com>
0 siblings, 0 replies; 7+ messages in thread
From: Jonathan S. Katz @ 2019-04-04 16:23 UTC (permalink / raw)
To: Peter Eisentraut <peter.eisentraut@2ndquadrant.com>; Pg Docs <pgsql-docs@lists.postgresql.org>
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
From cc29aa43269ba7beb11a61aa93096698540af179 Mon Sep 17 00:00:00 2001
From: "Jonathan S. Katz" <jonathan.katz@excoventures.com>
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)
Attachments:
[text/plain] 0001-Make-pagelayout.svg-scalable-based-viewport.patch (1.0K, ../../ba31e0e1-4c9b-b309-70e8-8e7ac14fc87e@postgresql.org/2-0001-Make-pagelayout.svg-scalable-based-viewport.patch)
download | inline diff:
From cc29aa43269ba7beb11a61aa93096698540af179 Mon Sep 17 00:00:00 2001
From: "Jonathan S. Katz" <jonathan.katz@excoventures.com>
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)
[application/pgp-signature] signature.asc (832B, ../../ba31e0e1-4c9b-b309-70e8-8e7ac14fc87e@postgresql.org/3-signature.asc)
download
^ permalink raw reply [nested|flat] 7+ messages in thread
end of thread, other threads:[~2019-04-04 16:23 UTC | newest]
Thread overview: 7+ messages (download: mbox mbox.gz follow: Atom feed)
-- links below jump to the message on this page --
2019-03-31 14:23 Responsive images in pgweb docs Jonathan S. Katz <jkatz@postgresql.org>
2019-04-01 09:57 ` Peter Eisentraut <peter.eisentraut@2ndquadrant.com>
2019-04-01 11:23 ` Jonathan S. Katz <jkatz@postgresql.org>
2019-04-01 12:22 ` Peter Eisentraut <peter.eisentraut@2ndquadrant.com>
2019-04-01 14:35 ` Jonathan S. Katz <jkatz@postgresql.org>
2019-04-04 11:17 ` Peter Eisentraut <peter.eisentraut@2ndquadrant.com>
2019-04-04 16:23 ` Jonathan S. Katz <jkatz@postgresql.org>
This inbox is served by DDX for PostgreSQL; see mirroring instructions
for how to clone and mirror all data and code used for this inbox