diff static/tpl/edit-page.html @ 91:315c32a4ce58

Modified edit page to support side-by-side preview.
author Ludovic Chabant <ludovic@chabant.com>
date Tue, 09 Apr 2013 22:12:27 -0700
parents b03f083c3a29
children 6d962a238c03
line wrap: on
line diff
--- a/static/tpl/edit-page.html	Sun Apr 07 13:31:20 2013 -0700
+++ b/static/tpl/edit-page.html	Tue Apr 09 22:12:27 2013 -0700
@@ -2,20 +2,22 @@
     <header>
         <h1>{{meta.title}} <span class="decorator">Editing</span></h1>
     </header>
-    <section>
-        <form id="page-edit">
-            <section id="wmd-button-bar">
+    <form id="page-edit" class="row">
+        <div id="wmd-form-wrapper" class="span12">
+            <section id="wmd-button-bar-wrapper">
+                <div id="wmd-button-bar"></div>
+                <div id="wmd-extra-bar">
+                    <ul class="wmd-button-row">
+                        <li class="wmd-button" id="wmd-preview-button" title="Toggle Preview"><span></span></li>
+                    </ul>
+                </div>
             </section>
             <section id="wmd-input-wrapper">
                 <textarea id="wmd-input" name="text" placeholder="Your page's contents go here...">{{content}}</textarea>
                 <div id="wmd-input-grip"></div>
             </section>
-            <section id="wmd-preview-wrapper">
-                <h3><a class="btn"><i class="icon-minus"></i></a> Preview</h3>
-                <div id="wmd-preview"></div>
-            </section>
-            <section>
-                <div class="controls commit-meta">
+            <section id="wmd-meta-wrapper">
+                <div id="wmd-meta" class="controls commit-meta">
                     <div class="control-group input-prepend">
                         <label for="author" class="control-label add-on">Author: </label>
                         <input type="text" name="author" class="" placeholder="{{commit_meta.author}}"></input>
@@ -26,12 +28,18 @@
                     </div>
                 </div>
             </section>
-            <section>
-                <button type="submit" class="btn btn-primary"><i class="icon-ok icon-white"></i> Save</button>
-                <a href="{{url_read}}" class="btn">Cancel</a>
+            <section id="wmd-commit-wrapper" class="row">
+                <div id="wmd-commit">
+                    <button type="submit" class="btn btn-primary"><i class="icon-ok icon-white"></i> Save</button>
+                    <a href="{{url_read}}" class="btn">Cancel</a>
+                </div>
             </section>
-        </form>
-    <section>
+        </div>
+        <div id="wmd-preview-wrapper">
+            <h3>Preview</h3>
+            <div id="wmd-preview"></div>
+        </div>
+    </form>
 </article>
 <script type="text/javascript" src="/js/pagedown/Markdown.Converter.js"></script>
 <script type="text/javascript" src="/js/pagedown/Markdown.Sanitizer.js"></script>