view templates/snippet/snippet_details.djhtml @ 104:7d753658dc0e

Add line-number alignment for snippet display Now, the line number lines up with the line itself, even if the line is longer than the width of the box and even if you zoom in. Since this change removes the need for the toggle-wordwrap feature, that has been removed. Also, the line numbers are now right-aligned, and the pre tags have been removed, allowing for neater indentation in the template file. (The useful attributes of <pre> are now being applied via CSS.) There is one minor cosmetic issue: the corners of the snippet display box look a bit fuzzy when the background of the box is dark. Not quite sure how to fix it at the moment.
author dellsystem <ilostwaldo@gmail.com>
date Tue, 11 Sep 2012 17:42:32 -0400
parents f872c643b056
children 3cd28df6f85b
line wrap: on
line source

{% extends "snippet/base.djhtml" %}
{% load mptt_tags %}
{% load i18n %}

{% block extrahead %}
{% if request.session.userprefs %}
<style type="text/css" media="all">
  .highlight {
  {# FIXME: Thats stupid #}
  {% ifnotequal request.session.userprefs.font_family "None" %}
  font-family: {{ request.session.userprefs.font_family }} !important;
  {% endifnotequal %}
  {% ifnotequal request.session.userprefs.font_size "None" %}
  font-size: {{ request.session.userprefs.font_size }}px !important;
  {% endifnotequal %}
  {% ifnotequal request.session.userprefs.line_height "None" %}
  line-height: {{ request.session.userprefs.line_height }}px !important;
  {% endifnotequal %}
  }
</style>
{% endif %}
{% endblock %}

{% block title %}
Viewing snippet — {{ snippet.get_title }}
{% endblock title %}

{% block headline %}
<h1>
  {% trans "Snippet" %} #{{ snippet.pk }}
  {% if snippet.parent_id %}
  {% blocktrans with snippet.parent.get_absolute_url as parent_url and snippet.parent.id as parent_id %}
  (Copy of <a href="{{ parent_url }}">snippet #{{ parent_id }}</a>)
  {% endblocktrans %}
  {% endif %}
  <span class="date">
    {{ snippet.published|date:_("DATETIME_FORMAT") }} ({% trans "UTC" %})
  </span>
</h1>
{% endblock headline %}

{% load snippet_tags %}

{% block content %}
<div id="non-sidebar">
    <div id="diff">
    </div>

    <h1>{{ snippet.get_title }}</h1>
    <div class="snippet-options">
        <abbr title="{% trans "Time to live" %}"
              >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 this snippet
        </a>
        &mdash;
        {% endif %}
        Syntax highlighting style:
        <select id="change-highlighting"
                data-default="{{ default_style }}">
            {% for pygments_style in pygments_styles %}
            <option name="{{ pygments_style }}">
                {{ pygments_style }}
                {% if pygments_style == default_style %}
                (default)
                {% endif %}
            </option>
            {% endfor %}
        </select>
        <div>
            Author:
            {% if snippet.author %}
            <a href="{% url agora.apps.profile.views.showprofile snippet.author %}">
            {{ snippet.author }}
            </a>
            {% else %}
            anonymous
            {% endif %}
            &mdash;
            Language: {{language}}
        </div>
    </div>
    <br />
    <div class="snippet {{ default_style }}">
        <table>
            {% for line in snippet.content_splitted %}
            <tr>
                <td class="line-number">
                    <a name="l{{ forloop.counter }}" href="#l{{ forloop.counter }}">
                        {{ forloop.counter }}
                    </a>
                </td>
                <td class="highlight">{% if line %}{{ line|safe }}{% else %}&nbsp;{% endif %}</td>
            </tr>
            {% endfor %}
        </table>
    </div>

    <br />

    <h2 id="revise">{% trans "Revise this snippet" %}</h2>

    {% include "snippet/snippet_form.djhtml" %}
</div><div id="sidebar">
    <h2>{% trans "History" %}</h2>
    {% if no_descendants %}
        <p>{% trans "This snippet has no children!" %}</p>
        <p>
            <a href="#revise">
            {% trans "Make one" %} &raquo;
            </a>
        </p>
    {% else %}
    <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>{{ tree_item.get_title }}</strong>
              {% else %}
                <a href="{{ tree_item.get_absolute_url }}">
                    {{ tree_item.get_title }}
                </a>
              {% endifequal %}
            </div>
            {% for level in structure.closed_levels %}
          </li>
        </ul>
        {% endfor %}
        {% endfor %}
        <div class="submit">
          <input type="submit" value="{% trans "Compare" %}"/>
        </div>
      </div>
    </form>
    {% endif %}
    <br />
    <h2>{% trans "Options" %}</h2>
    <a href="{% url snippet_details_raw snippet.secret_id %}">
       {% trans "View raw" %}
     </a>
</div>
</div>
{% endblock %}

{% block script_footer %}
<script type="text/javascript">
{%include "snippet/snippet_details.js" %}
</script>
{% endblock script_footer %}