Tweak diagram layout

Author: Rand McKinney

_includes/horiz-line.html

@@ -1,2 +1,4 @@
-<polyline points="{{include.x-start}},{{include.y}} {{include.x-finish}},{{include.y}}" 
+{% assign x-finish = include.x | plus: include.length %}
+<!-- xfinish  = {{x-finish}} -->
+<polyline points="{{include.x}},{{include.y}} {{x-finish}},{{include.y}}" 
 style="fill:none;stroke:black;stroke-width:2" />

_includes/property.html

@@ -10,14 +10,14 @@
 
 {% elsif include.type=="scalar" %}
   {%- if include.desc -%}
-    <span style="font-family: 'Courier New', Courier, monospace; font-weight: bold;">{{include.name}}</span>{% unless include.desc=="NA" %}: {{include.desc}}{%endunless%} 
+    <span style="font-family: 'Courier New', Courier, monospace; font-weight: bold;">{{include.name}}</span>{% unless include.desc=="NA" %}: <span style="font-size:80%;">{{include.desc}}</span>{%endunless%} 
   {%- else -%}
     {%- for term in site.data.ManifestStore_schema_edited.definitions -%}
       {%- if term.first=="Manifest" -%} <!-- {% comment %} Only for Manifest object currently, could be generalized {% endcomment %} -->
         {%- for property in term.last.properties -%}
           {% if property.first==include.name %}
             <div style="display: table-cell; font-family: 'Courier New', Courier, monospace; font-weight: bold;">{{property.first}}</div>
-            <div style="display: table-cell; line-height: 100%; padding-top: 0;">{%- if property.last.description -%} {{property.last.description | prepend: ": " | markdownify | remove: "<p>" | remove: "</p>" }} {%- else -%}: <i>Description TBD</i>. {%- endif -%}</div>
+            <div style="display: table-cell; line-height: 100%; padding-top: 0;">: <span style="font-size:80%;">{%- if property.last.description -%} {{property.last.description | markdownify | remove: "<p>" | remove: "</p>" }} {%- else -%}: <i>Description TBD</i>. {%- endif -%}</span></div>
           {% endif %}
         {% endfor %}
       {%- endif -%}

pages/manifest-diagram.md

@@ -1,8 +1,8 @@
 <div class="manifest-object" style="margin-bottom: 0; font-size: 110%;"><a href="#manifeststore">ManifestStore</a></div>
 
 <div style="position: relative;" markdown="1" >
-{% include property.html type="scalar" name="active_manifest" desc="<i>UUID</i>" x="65" y="25" %}
-{% include property.html type="scalar" name="manifests" desc="NA" x="65" y="65" %}
+{% include property.html type="scalar" name="active_manifest" desc="<i>UUID</i>" x="65" y="30" %}
+{% include property.html type="scalar" name="manifests" desc="NA" x="65" y="70" %}
 
 {% include property.html type="object" name="<i>UUID</i>:" obj="Manifest" x="145" y="125" %}
 {% include property.html type="object" name="<i>UUID</i>:" obj="Manifest" x="145" y="165" %}
@@ -11,18 +11,18 @@
 
 <svg height="300" width="300" style="margin-top: 0;">
   {% include vert-line.html x="20" y-start="0" y-finish="260" %} 
-  {% include horiz-line.html y="40" x-start="20" x-finish="60" %} 
-  {% include horiz-line.html y="80" x-start="20" x-finish="60" %} 
-  {% include horiz-line.html y="260" x-start="20" x-finish="60" %} 
+  {% include horiz-line.html y="40" x="20" length="40" %} 
+  {% include horiz-line.html y="80" x="20" length="40" %} 
+  {% include horiz-line.html y="260" x="20" length="40" %} 
 
-  {% include horiz-line.html y="40" x-start="20" x-finish="60" %} 
-  {% include horiz-line.html y="40" x-start="20" x-finish="60" %} 
+  {% include horiz-line.html y="40" x="20" length="40" %} 
+  {% include horiz-line.html y="40" x="20" length="40" %} 
 
   {% include vert-line.html x="100" y-start="100" y-finish="220" %} <!-- small vertical -->
 
-  {% include horiz-line.html y="140" x-start="100" x-finish="140" %} 
-  {% include horiz-line.html y="180" x-start="100" x-finish="140" %} 
-  {% include horiz-line.html y="220" x-start="100" x-finish="140" %} 
+  {% include horiz-line.html y="140" x="100" length="40" %} 
+  {% include horiz-line.html y="180" x="100" length="40" %} 
+  {% include horiz-line.html y="220" x="100" length="40" %} 
 </svg>
 </div>
 
@@ -39,27 +39,27 @@
 
 {% include property.html type="object" name="claim_generator_info" obj="ClaimGeneratorInfo" x="65" y="310" %}
 
-{% include property.html type="object" name="thumbnail" obj="ResourceRef" x="65" y="350" %}
+{% include property.html type="object" name="thumbnail" obj="ResourceRef" x="65" y="355" %}
 {% include property.html type="object_array" name="ingredients" obj="Ingredient" x="65" y="390" %}
 {% include property.html type="object_array" name="assertions" obj="ManifestAssertion" x="65" y="430" %}
 {% include property.html type="object" name="signature_info" obj="SignatureInfo" x="65" y="470" %}
 
 <svg height="500" width="300" style="margin-top: 0;">
   {% include vert-line.html x="20" y-start="0" y-finish="485" %}
 
-  {% include horiz-line.html y="35" x-start="20" x-finish="60" %}
-  {% include horiz-line.html y="75" x-start="20" x-finish="60" %}
-  {% include horiz-line.html y="115" x-start="20" x-finish="60" %}
-  {% include horiz-line.html y="155" x-start="20" x-finish="60" %}
-  {% include horiz-line.html y="195" x-start="20" x-finish="60" %}
-  {% include horiz-line.html y="235" x-start="20" x-finish="60" %}
-  {% include horiz-line.html y="275" x-start="20" x-finish="60" %}
-  {% include horiz-line.html y="325" x-start="20" x-finish="60" %}
-  {% include horiz-line.html y="370" x-start="20" x-finish="60" %}
-  {% include horiz-line.html y="405" x-start="20" x-finish="60" %}
-  {% include horiz-line.html y="405" x-start="20" x-finish="60" %}
-  {% include horiz-line.html y="445" x-start="20" x-finish="60" %}
-  {% include horiz-line.html y="485" x-start="20" x-finish="60" %}
+  {% include horiz-line.html y="30" x="20" length="40" %}
+  {% include horiz-line.html y="70" x="20" length="40" %}
+  {% include horiz-line.html y="110" x="20" length="40" %}
+  {% include horiz-line.html y="150" x="20" length="40" %}
+  {% include horiz-line.html y="190" x="20" length="40" %}
+  {% include horiz-line.html y="230" x="20" length="40" %}
+  {% include horiz-line.html y="270" x="20" length="40" %}
+  {% include horiz-line.html y="325" x="20" length="40" %}
+  {% include horiz-line.html y="370" x="20" length="40" %}
+  {% include horiz-line.html y="405" x="20" length="40" %}
+  {% include horiz-line.html y="405" x="20" length="40" %}
+  {% include horiz-line.html y="445" x="20" length="40" %}
+  {% include horiz-line.html y="485" x="20" length="40" %}
 </svg>
 </div>