[extensions-web] Use "Step" setup instead of message for the metadata editor.

[Jasper St. Pierre <jstpierre src gnome org>]

commit f73dccb5cb21f5f210667956129e27f2277f5617
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Tue Sep 27 16:59:58 2011 -0400

    Use "Step" setup instead of message for the metadata editor.

 .../extensions/templates/extensions/detail.html    |    3 ++
 .../templates/extensions/detail_edit.html          |   31 +++++++++++++++----
 sweettooth/static/css/sweettooth.css               |   14 +++++++++
 3 files changed, 41 insertions(+), 7 deletions(-)
---
diff --git a/sweettooth/extensions/templates/extensions/detail.html b/sweettooth/extensions/templates/extensions/detail.html
index 2c15a40..14108a0 100644
--- a/sweettooth/extensions/templates/extensions/detail.html
+++ b/sweettooth/extensions/templates/extensions/detail.html
@@ -19,6 +19,9 @@
 {% endblock %}
 
 {% block body %}
+{% block extra-body-header %}
+{% endblock %}
+
 {% with extension=version.extension %}
     <div class="extension"
          data-uuid="{{ extension.uuid }}"
diff --git a/sweettooth/extensions/templates/extensions/detail_edit.html b/sweettooth/extensions/templates/extensions/detail_edit.html
index 338a5b7..717c205 100644
--- a/sweettooth/extensions/templates/extensions/detail_edit.html
+++ b/sweettooth/extensions/templates/extensions/detail_edit.html
@@ -1,12 +1,20 @@
 {% extends "extensions/detail.html" %}
 
-{% block extra-messages %}
+{% block extra-body-header %}
   {{ block.super }}
   {% if is_preview %}
-    <p class="message info">
-      This is a preview of how your extension's page will look.
-      You can edit any of the things marked in yellow by clicking on them.
+  <div class="step edit">
+    <h2 class="steptitle">Step <span>2</span></h2>
+    <p>
+      We extracted this metadata from the file you uploaded.
+      Edit anything in yellow clicking on it.
     </p>
+
+    <p>
+      Give your extension some personality by uploading a screenshot
+      and icon. Make them identifiable!
+    </p>
+  </div>
   {% endif %}
 {% endblock %}
 
@@ -20,9 +28,18 @@
 
 {% block extra %}
   {% if is_preview %}
-    <button id="submit-ajax" data-url="{% url extensions-ajax-submit pk=version.pk %}">
-      Submit the extension for review.
-    </button>
+  <div class="step lock">
+    <h2 class="steptitle">Step <span>3</span></h2>
+    <p>
+      After you're satisfied with how your extension looks, submit the extension for review.
+      A reviewer will review the extension you submitted to make sure there's nothing too
+      dangerous. You'll be emailed the result of the review.
+
+      <button id="submit-ajax" data-url="{% url extensions-ajax-submit pk=version.pk %}">
+        Submit the extension for review.
+      </button>
+    </p>
+  </div>
   {% endif %}
 
   {% if request.user == version.extension.creator and not is_preview %}
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index 98ebcaa..2c0a374 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -396,6 +396,10 @@ p.message.warning {
     border-bottom: 1px solid #D1C466;
 }
 
+#message_container {
+    margin-bottom: 1em;
+}
+
 .editable {
     background-color: rgba(255, 255, 200, 0.4);
 }
@@ -507,6 +511,11 @@ input[type=submit], button {
     box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
 }
 
+.step p {
+    text-indent: 1em;
+    line-height: 1.8em;
+}
+
 .step .steptitle {
     color: #666;
     margin: 0;
@@ -531,3 +540,8 @@ input[type=submit], button {
     color: #cc0000;
     font-weight: bold;
 }
+
+.step.lock button {
+    display: block;
+    margin: 10px auto 0;
+}