Setup edit UI

snipt/media/cache/snipt.css

@@ -1176,6 +1176,12 @@ div.pagination {
     background: #FFF; }
     div.pagination ul li a {
       color: #3BAAF3; }
+    div.pagination ul li.next a {
+      line-height: 33px;
+      padding-bottom: 1px; }
+    div.pagination ul li.prev a {
+      line-height: 33px;
+      padding-bottom: 1px; }
 
 div.modal .modal-header .close {
   line-height: 20px;
@@ -1233,6 +1239,8 @@ body.detail section.main div.inner {
         height: 23px; }
     body.detail section.main div.inner section.snipts article.snipt aside {
       margin-right: 0; }
+  body.detail section.main div.inner section.snipts article.editing div.container {
+    width: 100%; }
 body.detail div.rochester-made {
   width: 840px; }
 

snipt/media/cache/snipt.js

@@ -1088,9 +1088,13 @@ jQuery(function($) {
         edit: function() {
             if (!$('section.main-edit:visible').length) {
                 this.select();
-                var editPane = this.editTemplate(this.model.toJSON());
+                var editPane = this.editTemplate({
+                    snipt: this.model.toJSON()
+                });
                 $('section#main').hide();
+                $('body').addClass('detail');
                 $('section#main-edit').html(editPane).show();
+                window.scrollTo(0, 0);
             }
             return false;
         },
@@ -1312,6 +1316,9 @@ jQuery(function($) {
             });
             $document.bind('keydown', 'esc', function() {
                 if ($('section#main-edit:visible').length) {
+                    if (!$('html').hasClass('detail')) {
+                        $('body').removeClass('detail');
+                    }
                     $('section#main-edit').hide();
                     $('section#main').show();
                     if (SniptList.$snipts.index($selected) === 0) {

snipt/media/css/style.scss

@@ -904,6 +904,11 @@ body.detail {
                         margin-right: 0;
                     }
                 }
+                article.editing {
+                    div.container {
+                        width: 100%;
+                    }
+                }
             }
         }
     }

snipt/media/js/src/modules/snipt.js

@@ -62,9 +62,13 @@
         edit: function() {
             if (!$('section.main-edit:visible').length) {
                 this.select();
-                var editPane = this.editTemplate(this.model.toJSON());
+                var editPane = this.editTemplate({
+                    snipt: this.model.toJSON()
+                });
                 $('section#main').hide();
+                $('body').addClass('detail');
                 $('section#main-edit').html(editPane).show();
+                window.scrollTo(0, 0);
             }
             return false;
         },
@@ -286,6 +290,9 @@
             });
             $document.bind('keydown', 'esc', function() {
                 if ($('section#main-edit:visible').length) {
+                    if (!$('html').hasClass('detail')) {
+                        $('body').removeClass('detail');
+                    }
                     $('section#main-edit').hide();
                     $('section#main').show();
                     if (SniptList.$snipts.index($selected) === 0) {

snipt/snipts/templates/snipts/detail.html

@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 
 {% block page-title %}/ {{ snipt.title }} / {{ user.username }} - {{ block.super }}{% endblock %}
+{% block html-class %}detail{% endblock %}
 {% block body-class %}detail{% endblock %}
 
 {% block js %}

snipt/templates/base.html

@@ -310,7 +310,28 @@
                 </script>
                 <script id="edit" type="text/html">
                     <div class="inner">
+                        <section class="snipts" id="snipts">
+                            <article id="snipt-<%= snipt.pk %>" class="snipt editing">
+                                <div class="number">#<%= snipt.pk %></div>
+                                <div class="group">
+                                    <div class="container">
+                                        <header>
+                                            <h2><%= snipt.lexer_name %></h2>
+                                            <h1><a href="<%= snipt.get_absolute_url %>"><%= snipt.title %></a></h1>
+                                        </header>
+                                        <section class="code autumn">
+                                            <%= snipt.stylized %>
+                                            <div class="raw"><%= snipt.code %></div>
+                                        </section>
+                                        <div class="ruler top-x"></div>
+                                        <div class="ruler bottom-x"></div>
+                                    </div>
+                                </div>
+                            </article>
+                        </section>
                     </div>
+                    <div class="left-y ruler"></div>
+                    <div class="right-y ruler"></div>
                 </script>
             </div>
         {% endverbatim %}