changeset 48:329a9d17be88

Implement/fix js for snippets and make whiteboxes all same width
author Jordi Gutiérrez Hermoso <jordigh@gmail.com>
date Mon, 02 Aug 2010 23:44:23 -0500
parents 139e4b8ffb17
children e5939f7d837b
files static/djangodocs.css templates/index.djhtml templates/snippet/base.djhtml templates/snippet/snippet_details.djhtml templates/snippet/snippet_details.js templates/snippet/snippet_diff.djhtml
diffstat 6 files changed, 170 insertions(+), 130 deletions(-) [+]
line wrap: on
line diff
--- a/static/djangodocs.css
+++ b/static/djangodocs.css
@@ -71,6 +71,7 @@
     padding: 10px;
     margin-top: 1em;
     margin-bottom: 1em;
+    width: 90%;
 }
 
 #copyright {margin-left: 1em;}
--- a/templates/index.djhtml
+++ b/templates/index.djhtml
@@ -2,17 +2,17 @@
 
 {% block content %}
 <div class="info">
-<h3>
-  Welcome
-</h3>
-<div class="whitebox">
-  <p>
-    Agora Octave is a place dedicated for rapid collaboration related
-    to <a href="http://octave.org">GNU Octave</a>. You
-    can <a href="/latest">browse our code submissions</a>
-    or <a href="accounts/login">contribute your own</a>.
-  </p>
-</div>
+  <h3>
+    Welcome
+  </h3>
+  <div class="whitebox">
+    <p>
+      Agora Octave is a place dedicated for rapid collaboration related
+      to <a href="http://octave.org">GNU Octave</a>. You
+      can <a href="/latest">browse our code submissions</a>
+      or <a href="accounts/login">contribute your own</a>.
+    </p>
+  </div>
 </div>
 <div class="info">
   <h3>
--- a/templates/snippet/base.djhtml
+++ b/templates/snippet/base.djhtml
@@ -1,1 +1,1 @@
-{% extends "base.djhtml" %}
+{% extends "whitebox.djhtml" %}
--- a/templates/snippet/snippet_details.djhtml
+++ b/templates/snippet/snippet_details.djhtml
@@ -42,124 +42,159 @@
 {% load snippet_tags %}
 
 {% block content %}
-<div id="diff" style="display:none;">
-  diff
-</div>
+
+<h2>Snippet view</h2>
+
+<div class="accordion">
+  <div class="info">
+
+    <div id="diff" style="display:none;">
+      diff
+    </div>
+
+    <h3>
+      {% if snippet.title %}
+      {{ snippet.title }}
+      {% else %}
+      {% trans "Snippet" %} #{{ snippet.id}}
+      {% endif %}
+      <span>
+        {% if snippet.author %}
+        {% blocktrans with snippet.author as author %}
+        by {{ author }}
+        {% endblocktrans %}
+        {% endif %}
+      </span>
+    </h3>
+
+    <div class="whitebox">
 
-<div class="whitebox">
-  <div class="snippet-options">
-    <abbr title="{% trans "Time to life" %}"
-          >TTL:
-    </abbr> 
-    {{ snippet.expires|timeuntil  }}
-    &mdash;
-    {% if snippet.pk|in_list:request.session.snippet_list %}
-    <a onclick="return confirm('{% trans "Really delete this snippet?" %}')" 
-       href="{% url snippet_delete snippet.secret_id %}">
-      Delete now!
-    </a>
-    &mdash;
-    {% endif %}
-    <a id="toggleWordwrap" href="#">{% trans "Wordwrap" %}</a>
-  </div>
-  <h2>
-    {% if snippet.title %}
-    {{ snippet.title }}
-    {% else %} 
-    {% trans "Snippet" %} #{{ snippet.id}}
-    {% endif %}
-    <span>
-      {% if snippet.author %}
-      {% blocktrans with snippet.author as author %}
-      by {{ author }}
-      {% endblocktrans %}
-      {% endif %}
-    </span>
-  </h2>
+      <div class="snippet-options">
+        <abbr title="{% trans "Time to life" %}"
+              >TTL:
+        </abbr>
+        {{ snippet.expires|timeuntil  }}
+        &mdash;
+        {% if snippet.pk|in_list:request.session.snippet_list %}
+        <a onclick="return confirm('{% trans "Really delete this snippet?" %}')" 
+           href="{% url snippet_delete snippet.secret_id %}">
+          Delete now!
+        </a>
+        &mdash;
+        {% endif %}
+        <a id="toggleWordwrap" href="#">{% trans "Wordwrap" %}</a>
+      </div>
+
+      <br />
 
-  <div class="container">
-    <div class="snippet">
-      <table>
-        <tr>
-          <th>
-            {# this has to look like this due to the pre tags #}
-            <pre class="code">{% for l in lines %}<a href="#l{{ forloop.counter }}" id="l{{ forloop.counter }}">{{ forloop.counter }}</a> 
+      <div class="snippet">
+        <table>
+          <tr>
+            <th>
+              {# this has to look like this due to the pre tags #}
+              <pre class="code">{% for l in lines %}<a href="#l{{ forloop.counter }}" id="l{{ forloop.counter }}">{{ forloop.counter }}</a> 
+{% endfor %}</pre>
+            </th>
+            <td>
+              {# this has to look like this due to the pre tags #}
+              <pre class="code">{% for line in snippet.content_splitted %}<span class="line" id="l{{ forloop.counter }}">{% if line %}{{ line|safe }}{% else %}&nbsp;{% endif %}</span>
 {% endfor %}</pre>
-          </th>
-          <td>
-            {# this has to look like this due to the pre tags #}
-            <pre class="code">{% for line in snippet.content_splitted %}<span class="line" id="l{{ forloop.counter }}">{% if line %}{{ line|safe }}{% else %}&nbsp;{% endif %}</span>
-{% endfor %}</pre>
-          </td>
-        </tr>
-      </table>
+            </td>
+          </tr>
+        </table>
+      </div>
+
+    </div> {#whitebox#}
+
+  </div> {# info #}
+
+  <div class="info">
+    <h3>{% trans "Write an answer" %} &rarr;</h3>
+    <div class="accordion" style="display: none;">
+      <div class="whitebox">
+        {% include "snippet/snippet_form.djhtml" %}
+      </div>
     </div>
   </div>
-
-  <h2>{% trans "Write an answer" %} &rarr;</h2>
-  <div class="accordion" style="display: none;">
-    {% include "snippet/snippet_form.djhtml" %}
-  </div>
 </div>
 {% endblock %}
 
 
 
-{% block sidebar %}
-<h2>{% trans "History" %}</h2>
+{% block content-related %}
+<div class="info">
+
+  <h3>{% trans "History" %}</h3>
+
+  <div class="whitebox">
 
-<form method="get" id="diffform" action="{% url snippet_diff %}">
-  <div class="tree">
-    {% for tree_item,structure in tree|tree_info %}
-    {% if structure.new_level %}
-    <ul>
-      <li>
-    {% else %}
-      </li>
-      <li>
-    {% endif %}
-        <div>
-          <span class="diff">
-            <input type="radio" name="a" 
-                   value="{{ tree_item.id }}" 
-                   {% ifequal tree_item.id snippet.parent_id %}
-                   checked="checked"
-                   {% endifequal %}/>
-            <input type="radio" 
-                   name="b" 
-                   value="{{ tree_item.id }}" 
-                   {% ifequal snippet tree_item %}
-                   checked="checked"
-                   {% endifequal %}/>
-          </span>
-          {% ifequal snippet tree_item %}
-          <strong>
-            {% trans "Snippet" %} #{{ tree_item.id }}
-          </strong>
-          {% else %}
-          <a href="{{ tree_item.get_absolute_url }}">
-            {% trans "Snippet" %} #{{ tree_item.id }}
-          </a>
-          {% endifequal %}
+    <form method="get" id="diffform" action="{% url snippet_diff %}">
+      <div class="tree">
+        {% for tree_item,structure in tree|tree_info %}
+        {% if structure.new_level %}
+        <ul>
+          <li>
+            {% else %}
+          </li>
+          <li>
+            {% endif %}
+            <div>
+              <span class="diff">
+                <input type="radio" name="a"
+                       value="{{ tree_item.id }}"
+                       {% ifequal tree_item.id snippet.parent_id %}
+                       checked="checked"
+                       {% endifequal %}/>
+                <input type="radio"
+                       name="b"
+                       value="{{ tree_item.id }}"
+                       {% ifequal snippet tree_item %}
+                       checked="checked"
+                       {% endifequal %}/>
+              </span>
+              {% ifequal snippet tree_item %}
+              <strong>
+                {% if tree_item.title %}
+                {{ tree_item.title }}
+                {% else %}
+                {% trans "Snippet" %} #{{ tree_item.id }}
+                {% endif %}
+              </strong>
+              {% else %}
+              <a href="{{ tree_item.get_absolute_url }}">
+                {% if tree_item.title %}
+                {{ tree_item.title }}
+                {% else %}
+                {% trans "Snippet" %} #{{ tree_item.id }}
+                {% endif %}
+              </a>
+              {% endifequal %}
+            </div>
+            {% for level in structure.closed_levels %}
+          </li>
+        </ul>
+        {% endfor %}
+        {% endfor %}
+        <div class="submit">
+          <input type="submit" value="{% trans "Compare" %}"/>
         </div>
-    {% for level in structure.closed_levels %}
-      </li>
-    </ul>
-    {% endfor %}
-    {% endfor %}
-    <div class="submit">
-      <input type="submit" value="{% trans "Compare" %}"/>
-    </div>
-  </div>
-</form>
+      </div>
+    </form>
+
+  </div> {# whitebox #}
+
+</div> {# info #}
 
-<h2>{% trans "Options" %}</h2>
-<p>
-  <a href="{% url snippet_details_raw snippet.secret_id %}">
-    {% trans "View raw" %}
-  </a>
-</p>
-{% endblock sidebar %}
+<div class="info">
+  <h3>{% trans "Options" %}</h3>
+  <div class="whitebox">
+       <p>
+         <a href="{% url snippet_details_raw snippet.secret_id %}">
+           {% trans "View raw" %}
+         </a>
+       </p>
+</div>
+{% endblock content-related %}
 
 {% block script_footer %}
 <script src="/static/jquery.min.js"></script>
--- a/templates/snippet/snippet_details.js
+++ b/templates/snippet/snippet_details.js
@@ -8,9 +8,9 @@
 
     $("div.accordion").accordion({
        autoHeight: false,
-       header: 'h2',
+       header: 'h3',
        animation: 'bounceslide',
-       duration: 2000,
+       duration: 2000
     });
 
     /**
@@ -21,7 +21,7 @@
             a: $("input[name=a]:checked").val(),
             b: $("input[name=b]:checked").val()
         }, function(data){
-            $('#diff').djhtml(data).slideDown('fast');
+            $('#diff').html(data).slideDown('fast');
         });
         return false;
     });
--- a/templates/snippet/snippet_diff.djhtml
+++ b/templates/snippet/snippet_diff.djhtml
@@ -1,13 +1,17 @@
 {% load i18n %}
 
-<h2>
-    <span style="float:right;">(<a href="#" onclick="$('#diff').slideUp('fast'); return false;">{% trans "Close" %}</a>)</span>
-    {% blocktrans with fileA.get_absolute_url as filea_url and fileB.get_absolute_url as fileb_url and fileA.id as filea_id and fileB.id as fileb_id %}
-    Diff between
-    <a href="{{ filea_url }}">Snippet #{{ filea_id }}</a>
-    and
-    <a href="{{ fileb_url }}">Snippet #{{ fileb_id }}</a>
-    {% endblocktrans %}
-</h2>
+<div class="info">
+  <div class="whitebox">
+    <h3>
+      <span style="float:right;">(<a href="#" onclick="$('#diff').slideUp('fast'); return false;">{% trans "Close" %}</a>)</span>
+      {% blocktrans with fileA.get_absolute_url as filea_url and fileB.get_absolute_url as fileb_url and fileA.id as filea_id and fileB.id as fileb_id %}
+      Diff between
+      <a href="{{ filea_url }}">Snippet #{{ filea_id }}</a>
+      and
+      <a href="{{ fileb_url }}">Snippet #{{ fileb_id }}</a>
+      {% endblocktrans %}
+    </h3>
 
-<pre class="code">{{ difftext|safe }}</pre>
+    <pre class="code">{{ difftext|safe }}</pre>
+  </div>
+</div>