From b1ce972c8d2a64524f2b55da9db3d5ad663a90f5 Mon Sep 17 00:00:00 2001 From: Mark Hansen <markhansen@google.com> Date: Tue, 2 Mar 2021 21:09:20 +1100 Subject: [PATCH] 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. --- doc/infosrc/mkshhtml.py | 15 +-------- doc/infosrc/templates/shapes.html.j2 | 46 +++++++++++++++++++--------- 2 files changed, 33 insertions(+), 28 deletions(-) diff --git a/doc/infosrc/mkshhtml.py b/doc/infosrc/mkshhtml.py index ac7b022ee..8021ea5ee 100755 --- 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 664fdd84f..7e29774b4 100644 --- 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. -- 2.40.0