redesign form page, pretty print captured structure

hellp · Aug 26, 2013 · 827c9d4 · 827c9d4
1 parent 6ee2deb
commit 827c9d4
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 10 deletions.
diff --git a/deformdemo/__init__.py b/deformdemo/__init__.py
@@ -6,6 +6,7 @@
 import inspect
 import sys
 import csv
+import pprint
 
 try:
     from StringIO import StringIO
@@ -43,6 +44,7 @@ def unicode(val, encoding='utf-8'):
 
 _ = TranslationStringFactory('deform')
 css = HtmlFormatter().get_style_defs('.highlight')
+formatter = HtmlFormatter(nowrap=True)
 
 def translator(term):
     return get_localizer(get_current_request()).translate(term)
@@ -98,10 +100,14 @@ def render_form(self, form, appstruct=colander.null, submitted='submit',
 
         reqts = form.get_widget_resources()
 
+        captured = highlight(pprint.pformat(captured, width=1),
+                             PythonLexer(),
+                             formatter)
+
         # values passed to template for rendering
         return {
             'form':html,
-            'captured':repr(captured),
+            'captured': captured,
             'code': code,
             'start':start,
             'end':end,
@@ -119,7 +125,6 @@ def get_code(self, level):
         code = ''.join(lines)
         if not PY3:
             code = unicode(code, 'utf-8')
-        formatter = HtmlFormatter()
         return highlight(code, PythonLexer(), formatter), start, end
 
     @view_config(name='thanks.html')

diff --git a/deformdemo/templates/form.pt b/deformdemo/templates/form.pt
@@ -1,13 +1,33 @@
 <div metal:use-macro="view.macros['master']">
   <div metal:fill-slot="main">
-    <h1>${title}</h1>
-    <div id="form" tal:content="structure form"/>
-    <h1>Captured</h1>
-    <div id="captured" tal:content="captured"/>
-    <h1>Code <a href="/allcode?start=${start}&amp;end=${end}#line-${start}"
-               ><small>(show in context)</small></a>
-    </h1>
-    <span tal:replace="structure code"/>
+    <div class="panel panel-primary">
+      <div class="panel-heading">
+        <h3 class="panel-title">Demo: ${title}</h3>
+      </div>
+      <div class="panel-body">
+        <div id="form" tal:content="structure form"/>
+      </div>
+    </div>
+
+    <div class="panel panel-info">
+      <div class="panel-heading">
+        <h3 class="panel-title">Captured submission</h3>
+      </div>
+      <div class="panel-body">
+        <pre style="border: none; background-color: #FFF" class="highlight" id="captured" tal:content="structure captured"/>
+      </div>
+    </div>
+
+    <div class="panel panel-default">
+      <div class="panel-heading">
+        <h3 class="panel-title">Code <a href="/allcode?start=${start}&amp;end=${end}#line-${start}"
+               ><small>(click to show in context)</small></a>
+        </h3>
+      </div>
+      <div class="panel-body highlight">
+        <pre style="border: none" tal:content="structure code"/>
+      </div>
+    </div>
   </div>
 </div>