snipt/templates/base.html

375 lines
16 KiB
HTML
Raw Normal View History

2012-03-05 13:38:37 -08:00
{% load compress verbatim %}
2012-02-15 15:25:13 -08:00
2011-06-01 21:50:18 -07:00
<!DOCTYPE html>
<html lang="en" class="{% block html-class %}{% endblock %}">
<head>
2011-10-23 19:44:37 -07:00
2011-06-01 21:50:18 -07:00
<title>{% block page-title %}Snipt{% endblock %}</title>
<meta charset="utf-8" />
<meta name="description" content="Long-term memory for coders. Share and store code snippets." />
2012-02-14 09:39:44 -08:00
<link rel="icon" href="{{ STATIC_URL }}images/favicon.ico">
2011-10-23 21:01:44 -07:00
2012-03-05 13:38:37 -08:00
{% compress css %}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/bootstrap.css" />
<link rel="stylesheet" type="text/scss" href="{{ STATIC_URL }}css/style.css" />
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/themes.css" />
{% endcompress %}
{% compress js %}
2012-02-26 15:59:15 -08:00
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/underscore.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/jquery.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/json2.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/backbone.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/bootstrap.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/plugins/jquery.infieldlabel.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/plugins/jquery.hotkeys.js"></script>
2011-11-09 08:20:45 -08:00
<script type="text/javascript" src="{{ STATIC_URL }}js/plugins/jquery.ui.js"></script>
2012-02-26 15:59:15 -08:00
<script type="text/javascript" src="{{ STATIC_URL }}js/src/application.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/src/modules/site.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/src/modules/snipt.js"></script>
2012-03-05 13:38:37 -08:00
{% endcompress %}
2012-03-05 13:38:37 -08:00
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/ace/ace.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/ace/theme-tomorrow.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/libs/ace/mode-javascript.js"></script>
<script type="text/javascript">{% block js %}window.user = '{{ request.user.username }}';
2012-02-18 11:42:30 -08:00
window.pub = {{ public|lower }};{% endblock %} </script>
2011-06-01 21:50:18 -07:00
<!--[if IE]>
<style type="text/css">
.group {
display: block;
zoom: 1;
}
</style>
<![endif]-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="{% block body-class %}{% endblock %}">
2011-10-12 11:49:51 -07:00
<header class="main">
2011-10-06 13:58:46 -07:00
<div class="inner">
2011-10-10 20:30:56 -07:00
<div class="shadey"></div>
2011-10-06 13:58:46 -07:00
<h1><a href="/">Snipt</a></h1>
2012-02-14 08:39:45 -08:00
<form class="search" action="" method="get">
2011-10-10 20:30:56 -07:00
<fieldset>
<div class="fields infield">
<label for="search-query">Search public snipts</label>
<input type="text" id="search-query" name="q" value="" />
</div>
</fieldset>
</form>
<nav class="public">
<ul>
{% if not request.user.is_authenticated %}
2012-02-12 21:42:25 -08:00
<li>
<a href="/public/" {% if '/public/' in request.path or public %} class="active"{% endif %}>Public snipts</a>
</li>
2011-10-10 20:30:56 -07:00
<li>
2012-02-12 18:13:13 -08:00
<a href="/login/" {% if '/login/' in request.path %} class="active"{% endif %}>Log in</a>
2011-10-10 20:30:56 -07:00
</li>
<li>
2012-02-12 18:13:13 -08:00
<a href="/signup/" {% if '/signup/' in request.path %} class="active"{% endif %}>Sign up</a>
2011-10-10 20:30:56 -07:00
</li>
2011-10-12 13:34:01 -07:00
{% else %}
<li>
<a href="/" {% if request.user.username in request.path %} class="active"{% endif %}>My snipts</a>
2011-10-12 13:34:01 -07:00
</li>
2012-02-12 21:42:25 -08:00
<li>
<a href="/public/" {% if '/public/' in request.path or public %} class="active"{% endif %}>Public snipts</a>
</li>
<li>
<a href="/logout/">Log out</a>
</li>
2011-10-10 20:30:56 -07:00
{% endif %}
</ul>
</nav>
<aside class="nav"></aside>
2011-10-06 13:58:46 -07:00
</div>
</header>
2012-02-12 18:13:13 -08:00
{% block sub-header %}
<header class="sub">
<div class="inner group">
<ul class="bcrumb">
<li class="prompt">/</li>
{% block breadcrumb %}{% endblock %}
</ul>
<div class="shortcuts">
2012-02-12 21:42:25 -08:00
Type "h" for KB shortcuts
2012-02-12 18:13:13 -08:00
</div>
2012-01-25 06:49:36 -08:00
</div>
2012-02-12 18:13:13 -08:00
</header>
{% endblock %}
<section class="main group" id="main">
2011-10-10 20:30:56 -07:00
<div class="inner">
{% block content %}{% endblock %}
2012-02-20 09:10:48 -08:00
<div class="rochester-made">
<a href="http://rochestermade.com/" title="Rochester Made">
<img src="{{ STATIC_URL }}images/rochester-made.png" alt="" />
</a>
</div>
2011-10-10 20:30:56 -07:00
</div>
2012-01-16 15:47:09 -08:00
{% block aside %}
<aside class="main">
2012-02-27 06:42:29 -08:00
<section class="ad coffee">
<script type="text/javascript" src="http://adsbycoffee.appspot.com/partner.js?publisher=ag1zfmFkc2J5Y29mZmVlchALEglQdWJsaXNoZXIY-VUM"></script>
2012-01-16 21:30:32 -08:00
</section>
2012-01-16 15:47:09 -08:00
{% block tags %}{% endblock %}
<nav class="footer">
<ul>
<li class="api">
<a href="/api/">API</a>
</li>
<li class="twitter">
<a href="https://twitter.com/#!/snipt">@snipt</a>
</li>
<li class="twitter">
<a href="https://twitter.com/#!/nicksergeant">@nicksergeant</a>
</li>
</ul>
</nav>
</aside>
{% endblock %}
2011-10-13 10:30:44 -07:00
<div class="left-y ruler"></div>
<div class="right-y ruler"></div>
2011-10-06 13:58:46 -07:00
</section>
{% if has_snipts %}
<section class="main group hidden" id="main-edit"></section>
{% endif %}
2012-01-25 06:49:36 -08:00
<div class="modal hide" id="keyboard-shortcuts">
<div class="modal-header">
2012-01-25 16:39:38 -08:00
<a href="#" class="close">×</a>
<h3>Keyboard shortcuts</h3>
2012-01-25 06:49:36 -08:00
</div>
<div class="modal-body">
2012-01-25 16:39:38 -08:00
<table class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
2012-02-12 21:42:25 -08:00
<td>h</td>
2012-01-25 16:39:38 -08:00
<td>Show keyboard shortcuts</td>
</tr>
<tr>
<td>/</td>
<td>Focus search field</td>
</tr>
<tr>
<td>esc</td>
<td>Unfocus search field / deselect snipt</td>
</tr>
<tr>
<td>g</td>
<td>Scroll to top of page</td>
</tr>
<tr>
<td>G</td>
<td>Scroll to bottom of page</td>
</tr>
2012-02-14 21:49:55 -08:00
<tr>
<td>&lt;ctrl-h&gt;</td>
<td>Back</td>
</tr>
<tr>
<td>&lt;ctrl-l&gt;</td>
<td>Forward</td>
</tr>
<tr>
<td>t</td>
<td>Open new window/tab</td>
</tr>
<tr>
<td>r</td>
<td>Refresh page</td>
</tr>
2012-01-25 16:39:38 -08:00
<tr>
<td>n</td>
<td>Next page</td>
</tr>
<tr>
<td>p</td>
<td>Previous page</td>
</tr>
<tr>
<td>j</td>
<td>Next snipt</td>
</tr>
<tr>
<td>k</td>
<td>Previous snipt</td>
</tr>
<tr>
<td>o / return</td>
<td>Go to snipt</td>
</tr>
<tr>
2012-02-17 10:14:57 -08:00
<td>e</td>
2012-01-25 16:39:38 -08:00
<td>Expand / collapse snipt</td>
</tr>
<tr>
<td>v</td>
<td>Embed snipt</td>
</tr>
<tr>
<td>c</td>
<td>Copy snipt</td>
</tr>
2012-02-15 20:06:11 -08:00
<tr>
2012-02-17 10:14:57 -08:00
<td>&lt;ctrl-e&gt;</td>
2012-02-15 20:06:11 -08:00
<td>Edit snipt</td>
</tr>
2012-01-25 16:39:38 -08:00
</tbody>
</table>
2012-01-25 06:49:36 -08:00
</div>
</div>
{% if has_snipts %}
2012-02-15 15:25:13 -08:00
{% verbatim %}
2012-02-15 20:06:11 -08:00
<div class="hidden" id="templates">
2012-02-18 11:42:30 -08:00
<script id="snipt" type="text/html">
<div class="number">#<%= snipt.pk %></div>
2012-02-15 20:06:11 -08:00
<div class="group">
<div class="container">
<header>
2012-02-18 11:42:30 -08:00
<h2><%= snipt.lexer_name %></h2>
<h1><a href="<%= snipt.get_absolute_url %>"><%= snipt.title %></a></h1>
2012-02-15 20:06:11 -08:00
</header>
<section class="code autumn">
2012-02-18 11:42:30 -08:00
<%= snipt.stylized %>
<% if (snipt.line_count > 8 && !window.detail) { %>
<a href="#" class="expand">
<span class="expand">Expand</span>
<span class="collapse">Collapse</span>
<span class="lines">(<%= snipt.line_count %> lines)</span>
</a>
<% } %>
<div class="raw"><%= snipt.code %></div>
2012-02-15 20:06:11 -08:00
</section>
<div class="ruler top-x"></div>
<div class="ruler bottom-x"></div>
</div>
2012-02-18 11:42:30 -08:00
<aside>
<ul class="options">
<% if (snipt.user.username === window.user) { %>
<li>
<a class="edit" href="#">Edit</a>
</li>
<% } %>
<li>
<a class="embed" href="#">Embed</a>
</li>
<li>
<a class="copy" href="#"><span class="do">Copy</span></a>
</li>
</ul>
<section class="tags">
<h2><%= snipt.tags.length %> tag<% if ((snipt.tags.length > 1) || (snipt.tags.length === 0)) { print('s'); } %></h2>
<ul>
<% for (var i=0; i < snipt.tags.length; i++) { %>
<li <% if (i > 2 && !window.detail) { %>class="hidden"<% } %>>
<a href="<%= snipt.tags[i].absolute_url %>"><%= snipt.tags[i].name %></a>
</li>
<% } %>
</ul>
</section>
</aside>
2012-02-15 15:25:13 -08:00
</div>
2012-02-18 11:42:30 -08:00
<footer>
<ul class="attrs">
<li class="author"><a href="<%= snipt.user.get_absolute_url %>"><%= snipt.user.username %></a></li>
<li class="created" title="<%= snipt.created %>"><%= snipt.created_formatted %></li>
<li class="comments"><a href="<%= snipt.get_absolute_url %>#disqus_thread" data-disqus-identifier="<%= snipt.pk %>"></a></li>
</ul>
</footer>
<div class="modal hide copy-modal">
<div class="modal-header">
<a href="#" class="close">×</a>
<h3>Copy snipt <span>&ldquo;<%= snipt.title %>&rdquo;</span></h3>
<h4>(Text is selected. <span></span>+c to copy.)</h4>
</div>
<div class="modal-body"></div>
</div>
<div class="modal hide embed-modal">
<div class="modal-header">
<a href="#" class="close">×</a>
<h3>Embed snipt <span>&ldquo;<%= snipt.title %>&rdquo;</span></h3>
</div>
<div class="modal-body">
<textarea><script type="text/javascript"><%= snipt.get_embed_url %></script></textarea>
</div>
</div>
</script>
<script id="edit" type="text/html">
2012-03-08 06:37:24 -08:00
<header class="fixed-save">
<div class="inner group">
2012-03-08 06:41:07 -08:00
<button class="delete btn btn-secondary">Delete</button>
2012-03-08 06:37:24 -08:00
<button class="save btn btn-success">Save</button>
<button class="cancel btn btn-secondary">Cancel</button>
</div>
</header>
<div class="inner">
2012-02-23 12:01:06 -08:00
<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>
2012-02-26 11:28:58 -08:00
<section class="code">
<div id="editor"><%= snipt.code %></div>
</section>
2012-02-23 12:01:06 -08:00
<div class="ruler top-x"></div>
<div class="ruler bottom-x"></div>
</div>
2012-03-08 06:37:24 -08:00
<aside>
<div class="inner">
<label>
Public
<input type="checkbox" name="" value="" />
</label>
<textarea>Tags</textarea>
</div>
</aside>
2012-02-23 12:01:06 -08:00
</div>
</article>
</section>
</div>
2012-02-23 12:01:06 -08:00
<div class="left-y ruler"></div>
<div class="right-y ruler"></div>
2012-02-18 11:42:30 -08:00
</script>
2012-02-15 20:06:11 -08:00
</div>
2012-02-15 15:25:13 -08:00
{% endverbatim %}
{% endif %}
2011-06-01 21:50:18 -07:00
{% if not debug %}
2012-02-29 15:49:05 -08:00
<script type="text/javascript">
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4ed65ee7f5a1f530f1000001');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
2012-02-14 13:40:15 -08:00
{% else %}
2012-02-29 15:49:05 -08:00
<script type="text/javascript">
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')
</script>
2011-06-01 21:50:18 -07:00
{% endif %}
</body>
</html>