From 2ccf78544a71b495b9bbff8ba7d0887f807a615e Mon Sep 17 00:00:00 2001
From: Mike Gerwitz <mike.gerwitz@rtspecialty.com>
Date: Thu, 14 Dec 2017 11:24:43 -0500
Subject: [PATCH] summary: Angry fruit salad

This adds a great deal of colorful styling to make the Summary Page a bit
easier to understand at a glance.
---
 src/current/include/display.xsl    |  22 ++-
 src/current/include/entry-form.xsl |  10 +-
 src/current/summary.css            | 217 +++++++++++++++++++++--------
 src/current/summary.xsl            |  58 +++++---
 4 files changed, 221 insertions(+), 86 deletions(-)

diff --git a/src/current/include/display.xsl b/src/current/include/display.xsl
index b0fa8130..86f40981 100644
--- a/src/current/include/display.xsl
+++ b/src/current/include/display.xsl
@@ -46,7 +46,7 @@
 
 <xsl:template match="preproc:sym[ @type='rate' ]" mode="summary:desc" priority="5">
   <span class="letlist-{@name}">
-    <a href="#{@name}">
+    <a href="#{@name}" class="sym-ref sym-rate">
       <xsl:value-of select="@name" />
     </a>
     <xsl:text> scalar</xsl:text>
@@ -56,14 +56,14 @@
 
 <xsl:template match="preproc:sym[ @type='gen' ]" mode="summary:desc" priority="5">
   <span class="letlist-{@parent}">
-    <a href="#{@parent}">
+    <a href="#{@parent}" class="sym-ref sym-gen">
       <xsl:value-of select="@name" />
     </a>
     <xsl:text> generator; vector</xsl:text>
 
     <span class="param">
       <xsl:text> (</xsl:text>
-        <a href="#{@parent}">
+        <a href="#{@parent}" class="sym-ref sym-rate">
           <xsl:value-of select="@parent" />
         </a>
       <xsl:text>)</xsl:text>
@@ -125,7 +125,7 @@
     <!-- TODO: use generator in letlist-* -->
     <span class="param">
       <xsl:text> (</xsl:text>
-      <a href="#:class:{$class/@as}">
+      <a href="#:class:{$class/@as}" class="sym-ref sym-class">
         <xsl:value-of select="$class/@as" />
       </a>
       <xsl:text>)</xsl:text>
@@ -135,7 +135,9 @@
 
 
 <xsl:template match="preproc:sym[ @type='const' ]" mode="summary:desc" priority="5">
-  <xsl:value-of select="@name" />
+  <a href="#{@name}" class="sym-ref sym-const">
+    <xsl:value-of select="@name" />
+  </a>
 </xsl:template>
 
 
@@ -157,7 +159,7 @@
 
   <span class="param letlist-{$param/@name}">
     <xsl:text> (</xsl:text>
-    <a href="#{$param/@name}">
+    <a href="#{$param/@name}" class="sym-ref sym-param">
       <xsl:value-of select="$param/@name" />
     </a>
     <xsl:text>)</xsl:text>
@@ -165,6 +167,14 @@
 </xsl:template>
 
 
+<xsl:template match="preproc:sym[ @type='func' ]" mode="summary:desc" priority="5">
+  <a href="#{@name}" class="sym-ref sym-func">
+    <xsl:value-of select="@name" />
+  </a>
+  <xsl:text> function</xsl:text>
+</xsl:template>
+
+
 <xsl:template match="preproc:sym" mode="summary:desc" priority="1">
   <xsl:value-of select="@name" />
   <xsl:text> (!)</xsl:text>
diff --git a/src/current/include/entry-form.xsl b/src/current/include/entry-form.xsl
index 6c27e4d9..842ab6aa 100644
--- a/src/current/include/entry-form.xsl
+++ b/src/current/include/entry-form.xsl
@@ -2,7 +2,7 @@
 <!--
   Outputs HTML form that can be used to feed values to the rater for testing
 
-  Copyright (C) 2016 LoVullo Associates, Inc.
+  Copyright (C) 2016, 2017 LoVullo Associates, Inc.
 
     This file is part of TAME.
 
@@ -138,12 +138,14 @@
     select="$package/lv:param[ @name=$self/@name ]" />
 
   <dt id="param-{@name}">
-    <xsl:value-of select="@desc" />
+    <span class="param-desc">
+      <xsl:value-of select="@desc" />
+    </span>
 
     <span class="param-id">
       <xsl:text> </xsl:text>
-      <a href="#{@name}">
-        <xsl:sequence select="concat( '[', @name, ']' )" />
+      <a href="#{@name}" class="sym-ref sym-param">
+        <xsl:value-of select="@name" />
       </a>
     </span>
   </dt>
diff --git a/src/current/summary.css b/src/current/summary.css
index 1e87ee8b..71d2e0f4 100644
--- a/src/current/summary.css
+++ b/src/current/summary.css
@@ -27,7 +27,7 @@ body {
     position: fixed;
     overflow: scroll;
 
-    background-color: #ad7fa8;
+    background-color: #474c55;
     border-right: 1px solid black;
 
     top: 0px;
@@ -41,13 +41,23 @@ body {
 
     resize: horizontal;
     z-index: 10;
+
+    color: #dfdfe0;
+    line-height: 1.25em;
+}
+
+.menu a, .menu a:link, .menu a:active,
+.menu a:visited
+{
+    color:           #dfdfe0;
+    text-decoration: none;
 }
 
 .menu h1
 {
-    font-size: 1.4em;
+    font-size:     1.2em;
     margin-bottom: 0.15em;
-    border-bottom: 1px solid #75507b;
+    border-bottom: 1px solid #dfdfe0;
 }
 .menu h1:not(:first-child)
 {
@@ -56,7 +66,7 @@ body {
 
 .menu h2
 {
-    font-size: 1.2em;
+    font-size: 1.1em;
     margin-left: 0.5em;
     margin-bottom: 0.15em;
 }
@@ -68,7 +78,7 @@ body {
     list-style: none;
 }
 
-fieldset,
+body > fieldset,
 .container-param,
 .tcontent
 {
@@ -86,6 +96,33 @@ fieldset fieldset
     display: block;
 }
 
+fieldset > legend .entry-value
+{
+    font-size: 1em;
+}
+
+
+fieldset.param-set
+{
+    margin-top: 3ex;
+    border-top: 1px solid black;
+}
+
+fieldset.param-set > legend[data-pkg-name=""]
+{
+    display: none;
+}
+
+fieldset.param-set > legend
+{
+    padding: 0px;
+    margin:  0px 0px 1ex 0px;
+}
+
+fieldset.param-set > legend > a
+{
+    font-weight: bold;
+}
 
 #xml-raw:not(.show)
 {
@@ -99,10 +136,8 @@ table > caption
 
 dt
 {
-    font-size:   1.1em;
     font-weight: bold;
-
-    margin-top: 0.5em;
+    margin-top:  2ex;
 }
 
 dt.param.classifies {
@@ -306,13 +341,10 @@ body > fieldset > legend
 
 body > fieldset > legend > a.pkg
 {
-    float: right;
-    font-size: 0.5em;
+    float:       right;
+    font-size:   0.5em;
     line-height: 2.5em;
-
-    color: inherit;
-    border: none;
-    text-decoration: none;
+    padding:     0px 0.5em;
 }
 
 body > fieldset > legend + p.desc
@@ -321,12 +353,6 @@ body > fieldset > legend + p.desc
     font-size: 1.1em;
 }
 
-fieldset.rate > legend > a
-{
-    text-decoration: none;
-    border-bottom:   1px dotted black;
-}
-
 fieldset.rate .classes
 {
     display: inline-block;
@@ -475,10 +501,123 @@ form.entry-form dt
     clear: left;
 }
 
+form.entry-form fieldset
+{
+    /* desc is limited to 65ch */
+    max-width: 120ch;
+}
+
 form.entry-form dt > .param-id
 {
+    float: right;
+}
+
+.menu a.sym-ref:visited,
+.menu a.sym-ref:link,
+.menu a.sym-ref:active
+{
+    color: black;
+}
+
+.sym-ref,
+.entry-value,
+.entry-value-prior
+{
+    display: inline-block;
+
+    font-weight:     normal;
+    font-family:     monospace;
+    letter-spacing:  0em;
+    text-decoration: none;
+    white-space:     nowrap;
+    color:           black;
+
+    border:        1px solid;
+    border-radius: 0.25em;
+    padding:       0.15em;
+    margin:        0.15em;
+}
+.sym-ref.sym-large
+{
+    font-size: 1.1em;
+    padding:   0.5em;
+}
+
+.sym-pkg
+{
+    background-color: #d1c3e9;
+    border-color:     #673ab7;
+}
+.sym-rate,
+.sym-gen
+{
+    background-color: #ffe3ba;
+    border-color:     #ff9800;
+}
+.sym-func
+{
+    background-color: #ffdfd5;
+    border-color:     #ff5722;
+}
+.sym-const
+{
+    background-color: #ececec;
+    border-color:     #9E9E9E;
+}
+.sym-type
+{
+    background-color: #d4c8c4;
+    border-color:     #795548;
+}
+.sym-param
+{
+    background-color: #cfd8dc;
+    border-color:     #607D8B;
+}
+.sym-class,
+.sym-cgen
+{
+    background-color: #dfeecc;
+    border-color:     #4caf50;
+}
+.sym-tpl
+{
+    background-color: #fffcdb;
+    border-color:     #ffeb3b;
+}
+
+
+.entry-value,
+.entry-value-prior
+{
+    background-color: yellow;
+
+    margin-left: 2em;
+
+    font-weight: bold;
+    font-size:   1.1em;
+    color:       green;
+}
+.entry-value-prior
+{
+    background-color: purple;
+    border-color:     black;
+
     font-weight: normal;
-    font-family: monospace;
+    font-size:   0.9em;
+    color:       white;
+}
+body:not(.prior) .entry-value-prior
+{
+    display: none;
+}
+
+
+form.entry-form dt > .param-desc
+{
+    display:   inline-block;
+    clear:     left;
+    max-width: 65ch;
 }
 
 form.entry-form .matrix
@@ -657,32 +796,6 @@ form .final-comments #final-submit
 }
 
 
-
-.entry-value,
-.entry-value-prior
-{
-    background-color: yellow;
-
-    padding:     0.1em;
-    margin-left: 1em;
-
-    font-weight: bold;
-    color:       green;
-}
-.entry-value-prior
-{
-    background-color: purple;
-
-    font-weight: normal;
-    font-size:   0.9em;
-    color:       white;
-}
-body:not(.prior) .entry-value-prior
-{
-    display: none;
-}
-
-
 /** validation errors **/
 .validation-errors
 {
@@ -757,16 +870,6 @@ body:not(.prior) .entry-value-prior
     color:     gray;
 }
 
-.ultra-breakdown legend > .tplid
-{
-    font-family:      monospace;
-    background-color: lightgoldenrodyellow;
-    border:           1px solid palegoldenrod;
-    border-radius:    0.25em;
-    padding:          0.15em;
-    margin:           0.15em;
-}
-
 .ultra-breakdown fieldset
 {
     margin-top: 1em;
diff --git a/src/current/summary.xsl b/src/current/summary.xsl
index ee67ea1d..3631f01e 100644
--- a/src/current/summary.xsl
+++ b/src/current/summary.xsl
@@ -297,7 +297,7 @@
 
   <div class="menu" id="pkgmenu">
     <!-- build our own menu -->
-    <h1 id="pkg-{@name}">
+    <h1 id="pkg-{@name}" class="sym-ref sym-pkg">
       <xsl:value-of select="@name" />
     </h1>
 
@@ -340,7 +340,7 @@
         <xsl:variable name="pkg-name"
                       select="preproc:pkg-name( . )" />
 
-        <h1 id="pkg-{$pkg-name}">
+        <h1 id="pkg-{$pkg-name}" class="sym-ref sym-pkg">
           <xsl:value-of select="concat( '/', $pkg-name )" />
         </h1>
 
@@ -370,7 +370,7 @@
       <xsl:for-each select="$deps/*">
         <xsl:sort select="@name" data-type="text" />
         <li>
-          <a href="#{@name}">
+          <a href="#{@name}" class="sym-ref sym-{$type}">
             <xsl:choose>
               <xsl:when test="$after">
                 <xsl:value-of select="substring-after( @name, $after )" />
@@ -454,7 +454,9 @@
       <!-- first output any rate blocks are are ungrouped -->
       <xsl:for-each select="$src/lv:rate[ @yields=$rates/@name ]">
         <li>
-          <a href="#{@yields}"><xsl:value-of select="@yields" /></a>
+          <a href="#{@yields}" class="sym-ref sym-rate">
+            <xsl:value-of select="@yields" />
+          </a>
         </li>
       </xsl:for-each>
 
@@ -634,7 +636,7 @@
 <xsl:template name="pkg-out">
   <xsl:variable name="name" select="/lv:*/@name" />
 
-  <a class="pkg" href="#pkg-{$name}">
+  <a href="#pkg-{$name}" class="pkg sym-ref sym-pkg">
     <xsl:text>/</xsl:text>
     <xsl:value-of select="$name" />
   </a>
@@ -680,7 +682,13 @@
       <xsl:value-of select="@name" />
     </xsl:attribute>
 
-    <legend>
+    <xsl:variable name="type"
+                  select="if ( local-name() = 'item' ) then
+                              'const'
+                            else
+                              local-name()" />
+
+    <legend class="sym-{$type}">
       <xsl:variable name="sym"
                     select="/lv:*/preproc:symtable
                               /preproc:sym[ @name=$name ]" />
@@ -913,7 +921,7 @@
       <xsl:value-of select="@name" />
     </xsl:attribute>
 
-    <legend>
+    <legend class="sym-type">
       <xsl:value-of select="@desc" />
 
       <span class="name">
@@ -965,7 +973,7 @@
       <xsl:value-of select="@name" />
     </xsl:attribute>
 
-    <legend>
+    <legend class="sym-type">
       <xsl:value-of select="@desc" />
 
       <span class="name">
@@ -1015,7 +1023,7 @@
       <xsl:for-each select="lv:item">
         <tr>
           <td>
-            <a href="#{@name}">
+            <a href="#{@name}" class="sym-ref sym-const">
               <xsl:value-of select="@name" />
             </a>
           </td>
@@ -1073,11 +1081,13 @@
       <xsl:value-of select="@as" />
     </xsl:attribute>
 
-    <legend>
+    <legend class="sym-class">
       <xsl:value-of select="@desc" />
       <span class="name">
         <xsl:text> (</xsl:text>
+        <span>
           <xsl:value-of select="@as" />
+        </span>
         <xsl:text>)</xsl:text>
       </span>
 
@@ -1098,7 +1108,10 @@
         </xsl:attribute>
 
         <span class="calc-yields">Yields: </span>
-        <xsl:value-of select="@yields" />
+
+        <span class="sym-ref sym-cgen">
+          <xsl:value-of select="@yields" />
+        </span>
       </div>
     </xsl:if>
   </fieldset>
@@ -1184,7 +1197,7 @@
       <xsl:value-of select="@_id" />
     </xsl:attribute>
 
-    <a>
+    <a class="sym-ref sym-{$sym/@type}">
       <xsl:attribute name="href">
         <xsl:text>#</xsl:text>
         <xsl:choose>
@@ -1318,9 +1331,14 @@
   @return match HTML
 -->
 <xsl:template match="lv:match[@value]" mode="match-desc">
+  <xsl:variable name="value" select="@value" />
+
+  <xsl:variable name="sym"
+                select="/lv:*/preproc:symtable/preproc:sym[ @name=$value ]" />
+
   <xsl:text>= </xsl:text>
 
-  <a href="#{@value}">
+  <a href="#{@value}" class="sym-ref sym-{$sym/@type}">
     <xsl:value-of select="@value" />
   </a>
 </xsl:template>
@@ -1368,7 +1386,7 @@
       <xsl:value-of select="@name" />
     </xsl:attribute>
 
-    <legend>
+    <legend class="sym-func">
       <xsl:text>\(</xsl:text>
 
       <xsl:choose>
@@ -1461,7 +1479,7 @@
       <xsl:value-of select="@yields" />
     </xsl:attribute>
 
-    <legend>
+    <legend class="sym-rate">
       <xsl:variable name="tex" select="
           /lv:*/preproc:symtable/preproc:sym[ @name=$name ]/@tex
         " />
@@ -1474,8 +1492,9 @@
         <xsl:text>\) </xsl:text>
       </xsl:if>
 
+      <xsl:text> </xsl:text>
+
       <span class="yields">
-        <xsl:text> </xsl:text>
         <xsl:value-of select="@yields" />
       </span>
 
@@ -1536,7 +1555,7 @@
             " />
 
           <!-- output description -->
-          <a href="#{$csymid}">
+          <a href="#{$csymid}" class="sym-ref sym-class">
             <xsl:value-of select="
               $pkg/lv:*/lv:classify[ @as=$cname ]/@desc
             " />
@@ -1765,8 +1784,7 @@
             <xsl:text>, </xsl:text>
           </xsl:if>
 
-          <span class="tplid">
-            <xsl:text>@</xsl:text>
+          <span class="tplid sym-ref sym-tpl">
             <xsl:value-of select="@name" />
           </span>
         </xsl:for-each>
@@ -1915,7 +1933,9 @@
           <div class="desc">
             <xsl:value-of select="@desc" />
             <xsl:text> (</xsl:text>
+            <a href="#{@generates}" class="sym-ref sym-gen">
               <xsl:value-of select="@generates" />
+            </a>
             <xsl:text>)</xsl:text>
           </div>
         </div>