From 0f302b4f6f7f9e9762a191f154e2aa8c75d99a6e Mon Sep 17 00:00:00 2001
From: metys <metys@9a5d940c-df78-4338-8860-37cbe7942ffe>
Date: Tue, 15 Mar 2011 05:48:41 +0000
Subject: [PATCH] + explain form hidden by default + "required" markers removed
 from explainj form

---
 public/css/style.css               |  14 +++-
 public/js/explain.js               |  10 +++
 templates/controller/index.html.ep |   4 +-
 templates/controller/show.html.ep  | 102 +++++++++++++++--------------
 templates/layouts/default.html.ep  |   2 +-
 5 files changed, 76 insertions(+), 56 deletions(-)

diff --git a/public/css/style.css b/public/css/style.css
index 9cf950d..c05aeac 100755
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -125,7 +125,7 @@ nav span                                {margin-left:1px;margin-right:1px;backgr
 
 section {
          margin-bottom:20px;
-               padding:20px;
+               padding:20px 20px 35px 20px;
             background:#fff;
     -moz-border-radius:8px/8px;
          border-radius:8px/8px;
@@ -134,7 +134,10 @@ section {
             box-shadow:0px 8px 10px #16212c;
 }
 
-section h1          {padding-bottom:0.2em;margin-bottom:1.2em;color:#aaa;font-size:1.6em;border-bottom:1px solid #ccc}
+section h1              {padding-bottom:0.2em;margin-bottom:1.2em;color:#aaa;font-size:1.6em;border-bottom:1px solid #ccc}
+
+body.show section h1    {margin-bottom:0}
+
 section h2,
 section h3          {color:#234}
 section p a,
@@ -176,7 +179,12 @@ form p.nfo-required {font-size:0.8em;color:#888}
 
 form sup.fe-required {font-size:1.2em;color:#800}
 
-#explain-form               {margin:0 0 25px 0;padding:10px;background:#e5ecf9;border:1px solid #ccc}
+div.explain-form            {margin-bottom:5px;text-align:center}
+div.explain-form a          {padding:0 1em 0.5em 1em;border:1px solid #ccc;background:#f8f8f8;color:#666;text-decoration:none;-moz-border-radius:0 0 4px 4px;border-radius:0 0 4px 4px}
+div.explain-form a span     {font-size:0.9em;position:relative;top:0.2em}
+div.explain-form a:hover    {background:#e5ecf9}
+
+#explain-form               {margin:0;padding:10px;background:#e5ecf9;border:1px solid #ccc;border-top:0;text-align:left}
 #explain-form h3            {font-size:1em;margin-bottom:0.35em;color:#234}
 #explain-form ul            {list-style:none;margin:0 0 15px 10px}
 #explain-form li,
diff --git a/public/js/explain.js b/public/js/explain.js
index dcae7f4..a0513ec 100644
--- a/public/js/explain.js
+++ b/public/js/explain.js
@@ -166,6 +166,16 @@
             result.find( 'div.result-text' ).hide( );
         },
 
+        toggleCfgForm : function( link ) {
+
+            link = $( link );
+
+            link.parent( ).find( 'form' ).slideToggle( );
+
+            link.toggleClass( 'collapsed' );
+
+        },
+
         _formSubmit : function( ) {
 
             var cfg = [];
diff --git a/templates/controller/index.html.ep b/templates/controller/index.html.ep
index 63ae372..1c37075 100755
--- a/templates/controller/index.html.ep
+++ b/templates/controller/index.html.ep
@@ -8,7 +8,7 @@
 <form id="new-explain" method="post" action="<%= url_for 'current' %>">
 
     <div class="fe fe-first fe_plan">
-        <label for="plan">Paste your explain/explain analyze here: <sup class="fe-required">*</sup></label>
+        <label for="plan">Paste your explain/explain analyze here:</label>
         <textarea id="plan" name="plan"></textarea>
     </div>
 
@@ -21,6 +21,4 @@
         <button type="submit" name="submit_plan" id="submit_plan"><span>Submit</span></button>
     </div>
 
-    <p class="nfo-required">All fields marked by <sup class="fe-required">*</sup> are required.</p>
-
 </form>
diff --git a/templates/controller/show.html.ep b/templates/controller/show.html.ep
index a48f0fc..c529c7b 100755
--- a/templates/controller/show.html.ep
+++ b/templates/controller/show.html.ep
@@ -215,57 +215,63 @@
 
 <h1>Result: <%= $title %></h1>
 
-<form id="explain-form" method="get" action="<%= url_for 'current' %>" autocomplete="off">
+<div class="explain-form">
 
-    <h3>Colorize:</h3>
-    <ul>
-        <li>
-            <input type="radio" name="c" id="ce" value="e"<%= $cfg->{ c } eq 'e' ? ' checked="checked"' : '' %> />
-            <label for="ce">exclusive</label>
-        </li>
-        <li>
-            <input type="radio" name="c" id="ci" value="i"<%= $cfg->{ c } eq 'i' ? ' checked="checked"' : '' %> />
-            <label for="ci">inclusive</label>
-        </li>
-        <li>
-            <input type="radio" name="c" id="cx" value="x"<%= $cfg->{ c } eq 'x' ? ' checked="checked"' : '' %> />
-            <label for="cx">rows x</label>
-        </li>
-        <li>
-            <input type="radio" name="c" id="cm" value="m"<%= $cfg->{ c } eq 'm' ? ' checked="checked"' : '' %> />
-            <label for="cm">mixed</label>
-        </li>
-    </ul>
+    <form id="explain-form" class="hidden" method="get" action="<%= url_for 'current' %>" autocomplete="off">
 
-    <h3>Columns visibility:</h3>
-    <ul>
-        <li>
-            <input type="checkbox" name="ve" id="ve" value="1"<%= $cfg->{ ve } ? ' checked="checked"' : '' %> />
-            <label for="ve">exclusive</label>
-        </li>
-        <li>
-            <input type="checkbox" name="vi" id="vi" value="1"<%= $cfg->{ vi } ? ' checked="checked"' : '' %> />
-            <label for="vi">inclusive</label>
-        </li>
-        <li>
-            <input type="checkbox" name="vx" id="vx" value="1"<%= $cfg->{ vx } ? ' checked="checked"' : '' %> />
-            <label for="vx">rows x</label>
-        </li>
-        <li>
-            <input type="checkbox" name="vr" id="vr" value="1"<%= $cfg->{ vr } ? ' checked="checked"' : '' %> />
-            <label for="vr">rows</label>
-        </li>
-        <li>
-            <input type="checkbox" name="vl" id="vl" value="1"<%= $cfg->{ vl } ? ' checked="checked"' : '' %> />
-            <label for="vl">loops</label>
-        </li>
-    </ul>
+        <h3>Colorize:</h3>
+        <ul>
+            <li>
+                <input type="radio" name="c" id="ce" value="e"<%= $cfg->{ c } eq 'e' ? ' checked="checked"' : '' %> />
+                <label for="ce">exclusive</label>
+            </li>
+            <li>
+                <input type="radio" name="c" id="ci" value="i"<%= $cfg->{ c } eq 'i' ? ' checked="checked"' : '' %> />
+                <label for="ci">inclusive</label>
+            </li>
+            <li>
+                <input type="radio" name="c" id="cx" value="x"<%= $cfg->{ c } eq 'x' ? ' checked="checked"' : '' %> />
+                <label for="cx">rows x</label>
+            </li>
+            <li>
+                <input type="radio" name="c" id="cm" value="m"<%= $cfg->{ c } eq 'm' ? ' checked="checked"' : '' %> />
+                <label for="cm">mixed</label>
+            </li>
+        </ul>
 
-    <div class="fe fe-buttons">
-        <button type="submit" name="save-settings" id="save-settings"><span>Save settings</span></button>
-    </div>
+        <h3>Columns visibility:</h3>
+        <ul>
+            <li>
+                <input type="checkbox" name="ve" id="ve" value="1"<%= $cfg->{ ve } ? ' checked="checked"' : '' %> />
+                <label for="ve">exclusive</label>
+            </li>
+            <li>
+                <input type="checkbox" name="vi" id="vi" value="1"<%= $cfg->{ vi } ? ' checked="checked"' : '' %> />
+                <label for="vi">inclusive</label>
+            </li>
+            <li>
+                <input type="checkbox" name="vx" id="vx" value="1"<%= $cfg->{ vx } ? ' checked="checked"' : '' %> />
+                <label for="vx">rows x</label>
+            </li>
+            <li>
+                <input type="checkbox" name="vr" id="vr" value="1"<%= $cfg->{ vr } ? ' checked="checked"' : '' %> />
+                <label for="vr">rows</label>
+            </li>
+            <li>
+                <input type="checkbox" name="vl" id="vl" value="1"<%= $cfg->{ vl } ? ' checked="checked"' : '' %> />
+                <label for="vl">loops</label>
+            </li>
+        </ul>
 
-</form>
+        <div class="fe fe-buttons">
+            <button type="submit" name="save-settings" id="save-settings"><span>Save settings</span></button>
+        </div>
+
+    </form>
+
+    <a href="#" onclick="$.fn.explain( 'toggleCfgForm', this ); return false;" onkeypress="return this.onclick( );"><span>options</span></a>
+
+</div>
 
 <div class="result">
 
@@ -339,8 +345,6 @@
             /* startup */
             $.fn.explain( 'init', $( '#explain-form' ), $( '#explain' ) );
 
-            window.scrollTo( 0, $( '#explain' ).offset( ).top );
-
         } );
     </script>
 <% end %>
diff --git a/templates/layouts/default.html.ep b/templates/layouts/default.html.ep
index 6694e45..0d9a681 100755
--- a/templates/layouts/default.html.ep
+++ b/templates/layouts/default.html.ep
@@ -31,7 +31,7 @@
 
         <%= content_for 'head' %>
     </head>
-    <body>
+    <body class="<%= $self->match->endpoint->name %>">
 
         <!-- wrapper -->
         <div id="wrapper">