Generate shapes responsively: reflow small screens

Don't use a fixed table of width 4, reflow to the available space.

This was a bit of a pain to get the CSS right. This stackoverflow answer
was very helpful: https://stackoverflow.com/a/14155983/171898

This is towards moving shapes.html into graphviz.gitlab.io repo. Simpler
for loops that jekyll can handle.

diff --git a/doc/infosrc/mkshhtml.py b/doc/infosrc/mkshhtml.py
index ac7b022ee43ac33fca1e2a2aee36ca8331099a53..8021ea5ee91921fce109d3cbfd03b757718f1258 100755 (executable)
--- a/doc/infosrc/mkshhtml.py
+++ b/doc/infosrc/mkshhtml.py
@@ -7,22 +7,9 @@ import markupsafe
 import sys
 import templates
 
-N_PER_ROW = 4
-
-shapes = [line.strip() for line in sys.stdin]
-
-# From https://stackoverflow.com/a/312464/171898
-def chunks(lst, n):
-    """Yield successive n-sized chunks from lst."""
-    for i in range(0, len(lst), n):
-        yield lst[i:i + n]
-
-# Use the shapes name in shape list to create the
-# contents of an HTML array.
-
 template = templates.env().get_template('shapes.html.j2')
 print(template.render(
     html_grammar=markupsafe.Markup(open(sys.argv[1]).read()),
     html1_dot=markupsafe.Markup(open(sys.argv[2]).read()),
-    rows=chunks(shapes, N_PER_ROW),
+    shapes=[line.strip() for line in sys.stdin],
 ))

diff --git a/doc/infosrc/templates/shapes.html.j2 b/doc/infosrc/templates/shapes.html.j2
index 664fdd84fd3fd2e4204b77248ad4cb3846f286a1..7e29774b45dbdb744a3f8c05e93afc39b6be25de 100644 (file)
--- a/doc/infosrc/templates/shapes.html.j2
+++ b/doc/infosrc/templates/shapes.html.j2
@@ -31,21 +31,39 @@ the node attributes
 
 <H2><A NAME=polygon>Polygon-based Nodes</A></H2>
 The possible polygon-based shapes are displayed below.
-<TABLE ALIGN=CENTER>
-{% for row in rows %}
-  <TR ALIGN=CENTER>
-  {% for shape in row %}
-    <TD><IMG SRC={{shape}}.gif>
-  {% endfor %}
-  </TR>
-  <TR ALIGN=CENTER>
-  {% for shape in row %}
-    <TD><A NAME=d:{{shape}}>{{shape}}</A>
-  {% endfor %}
-  </TR>
+<P>
+<style>
+.gv-shape {
+  display: inline-block;
+  margin: 0; /* override default figure rendering */
+}
+/* Jump through some hoops to align images and text */
+.gv-shape-img-container {
+  height: 90px;
+  width: 150px;
+  position: relative; /* for vertical-bottom horizontal-center aligning image */
+}
+.gv-shape-img {
+  margin: auto;
+  position: absolute; /* use parent as reference frame */
+  bottom: 0; /* move to bottom */
+  left: 0; /* horizontal-center */
+  right: 0; /* horizontal-center */
+  margin: 0 auto;
+}
+.gv-shape-caption {
+  text-align: center;
+}
+</style>
+{% for shape in shapes %}
+<figure class="gv-shape">
+  <div class="gv-shape-img-container">
+    <img src="{{shape}}.gif" class="gv-shape-img">
+  </div>
+  <figcaption class="gv-shape-caption"><code id="d:{{shape}}">{{shape}}</code></figcaption>
+</figure>
 {% endfor %}
-
-</TABLE>
+<P>
 As the figures suggest, the shapes <TT>rect</TT> and <TT>rectangle</TT> are synonyms for <TT>box</TT>, and <TT>none</TT> is a synonym for <TT>plaintext</TT>.
 The shape <TT>plain</TT> is similar to these two, except that it also enforces 
 <TT>width=0 height=0 margin=0</TT>, which guarantees that the actual size of the node is entirely determined by the label.