From 08b95f6aa1fd82842287d099e8c19c911d657584 Mon Sep 17 00:00:00 2001
From: Aldo Cortesi <aldo@nullcube.com>
Date: Sun, 29 Jul 2012 16:33:45 +1200
Subject: Refactor preview display pages.

---
 libpathod/static/pathod.css                   |  7 ++++
 libpathod/templates/request_preview.html      | 58 +++++++++++++++++++--------
 libpathod/templates/request_previewform.html  |  4 +-
 libpathod/templates/response_preview.html     | 58 +++++++++++++++++++--------
 libpathod/templates/response_previewform.html |  4 +-
 5 files changed, 94 insertions(+), 37 deletions(-)

(limited to 'libpathod')

diff --git a/libpathod/static/pathod.css b/libpathod/static/pathod.css
index 7ac8bc81..a37311b6 100644
--- a/libpathod/static/pathod.css
+++ b/libpathod/static/pathod.css
@@ -1,4 +1,5 @@
 
+
 .fronttable {
 }
 
@@ -31,3 +32,9 @@ section {
     background: #000;
     color: #fff;
 }
+
+.innerlink {
+    text-decoration: none;
+    border-bottom:1px dotted;
+    margin-bottom: 15px;
+}
diff --git a/libpathod/templates/request_preview.html b/libpathod/templates/request_preview.html
index 40f7771e..e4efd9d0 100644
--- a/libpathod/templates/request_preview.html
+++ b/libpathod/templates/request_preview.html
@@ -1,26 +1,52 @@
 {% extends "frame.html" %}
 {% block body %}  
 
-<h1>Preview</h1>
+<div class="page-header">
+    <h1>pathoc preview</h1>
+</div>
+
+<div style="margin-bottom: 20px" class="row">
+    <div class="span2">
+        <h3>Specification:</h3>
+    </div>
+    <div class="span10">
+        {% include "request_previewform.html" %}
+    </div>
+</div>
 
 {% if syntaxerror %}
-    <h2> Error: {{ syntaxerror }} </h2>
-    <pre>{{ marked }}</pre>
+    <div class="row">
+        <div class="span2">
+            <h3>Error:</h3>
+        </div>
+        <div class="span10">
+            <p style="color: #ff0000">{{ syntaxerror }}</p>
+            <pre>{{ marked }}</pre>
+        </div>
+    </div>
 {% elif error %}
-    <p style="color: #ff0000">{{ error }}</p>
+    <div class="row">
+        <div class="span2">
+            <h3>Error:</h3>
+        </div>
+        <div class="span10">
+            <p style="color: #ff0000">{{ error }}</p>
+        </div>
+    </div>
 {% else %}
-    <h2>Spec:</h2>
-
-    <pre>{{ spec }}</pre>
-
-    <h2>Request:</h2>
+    <div class="row">
+        <div class="span2">
+            <h3>Request:</h3>
+        </div>
+        <div class="span10">
+            <pre>{{ output }}</pre>
+            {% if pauses %}
+                <p>Note: pauses are skipped when generating previews!</p>
+            {% endif %}  
+        </div>
+    </div>
+{% endif %}  
 
-    <pre>{{ output }}</pre>
+{% endblock %}  
 
-    {% if pauses %}
-        <p>Note: pauses are skipped when generating previews!</p>
-    {% endif %}  
 
-{% endif %}  
-{% include "request_previewform.html" %}
-{% endblock %}  
diff --git a/libpathod/templates/request_previewform.html b/libpathod/templates/request_previewform.html
index 08cb2161..f38758ea 100644
--- a/libpathod/templates/request_previewform.html
+++ b/libpathod/templates/request_previewform.html
@@ -1,4 +1,4 @@
-<form class="form-inline" method="GET" action="/request_preview">
+<form style="margin-bottom: 0" class="form-inline" method="GET" action="/request_preview">
     <input 
         style="width: 20em"
         id="spec"
@@ -10,7 +10,7 @@
     <input type="submit" class="btn" value="preview">
 </form>
 
-<a data-toggle="collapse" data-target="#requestexamples">Examples...</a>
+<a class="innerlink" data-toggle="collapse" data-target="#requestexamples">examples</a>
 
 <div id="requestexamples" class="collapse">
     <p>Check out the <a href="/docs/language">complete language docs</a>. Here
diff --git a/libpathod/templates/response_preview.html b/libpathod/templates/response_preview.html
index dd05e021..c725bcf8 100644
--- a/libpathod/templates/response_preview.html
+++ b/libpathod/templates/response_preview.html
@@ -1,26 +1,50 @@
 {% extends "frame.html" %}
 {% block body %}  
 
-<h1>Preview</h1>
+<div class="page-header">
+    <h1>pathod preview</h1>
+</div>
+
+<div style="margin-bottom: 20px" class="row">
+    <div class="span2">
+        <h3>Specification:</h3>
+    </div>
+    <div class="span10">
+        {% include "response_previewform.html" %}
+    </div>
+</div>
 
 {% if syntaxerror %}
-    <h2> Error: {{ syntaxerror }} </h2>
-    <pre>{{ marked }}</pre>
+    <div class="row">
+        <div class="span2">
+            <h3>Error:</h3>
+        </div>
+        <div class="span10">
+            <p style="color: #ff0000">{{ syntaxerror }}</p>
+            <pre>{{ marked }}</pre>
+        </div>
+    </div>
 {% elif error %}
-    <p style="color: #ff0000">{{ error }}</p>
+    <div class="row">
+        <div class="span2">
+            <h3>Error:</h3>
+        </div>
+        <div class="span10">
+            <p style="color: #ff0000">{{ error }}</p>
+        </div>
+    </div>
 {% else %}
-    <h2>Spec:</h2>
-
-    <pre>{{ spec }}</pre>
-
-    <h2>Response:</h2>
-
-    <pre>{{ output }}</pre>
-
-    {% if pauses %}
-        <p>Note: pauses are skipped when generating previews!</p>
-    {% endif %}  
-
+    <div class="row">
+        <div class="span2">
+            <h3>Response:</h3>
+        </div>
+        <div class="span10">
+            <pre>{{ output }}</pre>
+            {% if pauses %}
+                <p>Note: pauses are skipped when generating previews!</p>
+            {% endif %}  
+        </div>
+    </div>
 {% endif %}  
-{% include "response_previewform.html" %}
+
 {% endblock %}  
diff --git a/libpathod/templates/response_previewform.html b/libpathod/templates/response_previewform.html
index 9934fbf7..19e28d08 100644
--- a/libpathod/templates/response_previewform.html
+++ b/libpathod/templates/response_previewform.html
@@ -1,4 +1,4 @@
-<form class="form-inline" method="GET" action="/response_preview">
+<form style="margin-bottom: 0" class="form-inline" method="GET" action="/response_preview">
     <input 
         style="width: 20em"
         id="spec"
@@ -13,7 +13,7 @@
     {% endif %}
 </form>
 
-<a data-toggle="collapse" data-target="#responseexamples">Examples...</a>
+<a class="innerlink" data-toggle="collapse" data-target="#responseexamples">examples</a>
 
 <div id="responseexamples" class="collapse">
     <p>Check out the <a href="/docs/language">complete language docs</a>. Here
-- 
cgit v1.2.3