[extensions-web] Add some copytext and instructions to the ugly "Upload" page.

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

commit a1c51ec3d587350dc931322d10c5329f47a5f82b
Author: Jasper St. Pierre <jstpierre mecheye net>
Date:   Tue Sep 27 15:30:33 2011 -0400

    Add some copytext and instructions to the ugly "Upload" page.

 .../extensions/templates/extensions/upload.html    |   25 ++++++++++---
 sweettooth/static/css/sweettooth.css               |   38 +++++++++++++++++++-
 2 files changed, 56 insertions(+), 7 deletions(-)
---
diff --git a/sweettooth/extensions/templates/extensions/upload.html b/sweettooth/extensions/templates/extensions/upload.html
index 3fe2f09..ca1e8cb 100644
--- a/sweettooth/extensions/templates/extensions/upload.html
+++ b/sweettooth/extensions/templates/extensions/upload.html
@@ -1,12 +1,25 @@
 {% extends "base.html" %}
 {% block body %}
-<form enctype="multipart/form-data" action=""
-      method="POST">
-  {% csrf_token %}
+<div class="step upload">
+  <h2 class="steptitle">Step <span>1</span></h2>
+  <p>
+    Make your extension. It should be a zip file containing at least the two files <code class="file required">metadata.json</code> and <code class="file required">extension.js</code>
+  </p>
 
-  {{ form }}
-  <input type="submit" value="Upload extension">
-</form>
+  <p>
+    <span class="warning">These files need to be in the root directory of the zip file.</span>
+    Use <code>zip -j</code> when making your zipfile to ensure this. Other files like <code class="file">stylesheet.css</code> are optional.
+  </p>
+
+  <form enctype="multipart/form-data" action=""
+        method="POST">
+    {% csrf_token %}
+
+    {{ form.source }}
+    <input type="submit" value="Upload extension">
+  </form>
+
+</div>
 {% endblock %}
 
 {% block navclass %}upload{% endblock %}
diff --git a/sweettooth/static/css/sweettooth.css b/sweettooth/static/css/sweettooth.css
index ac99c99..98ebcaa 100644
--- a/sweettooth/static/css/sweettooth.css
+++ b/sweettooth/static/css/sweettooth.css
@@ -494,4 +494,40 @@ input[type=submit], button {
     font-size: larger;
     font-weight: bold;
     text-align: center;
-}
\ No newline at end of file
+}
+
+
+/* Instruction steps */
+/* ==================================================================== */
+
+.step {
+    background-color: #EEEEEC;
+    border: 1px solid #aaa;
+    padding: 1em;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.5);
+}
+
+.step .steptitle {
+    color: #666;
+    margin: 0;
+}
+
+.step .steptitle span {
+    display: inline-block;
+
+    border-radius: 0.7em;
+    width: 1.4em;
+    height: 1.4em;
+    line-height: 1.4em;
+
+    color: #fff;
+    background-color: #666;
+    text-shadow: 1px 1px 0 #333;
+    text-align: center;
+    box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
+}
+
+.step .warning {
+    color: #cc0000;
+    font-weight: bold;
+}