Snipt history.
Nick Sergeant
parent
c4bf1562db
commit
b6ab20f200
File diff suppressed because one or more lines are too long
|
|
@ -816,6 +816,233 @@ section.main-edit {
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
section.code {
|
||||
height: 230px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 49;
|
||||
|
||||
table.highlighttable {
|
||||
background: #F7F7F7;
|
||||
height: 100%;
|
||||
}
|
||||
td {
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
|
||||
&.linenos {
|
||||
border-right: 1px solid #DDDDDD;
|
||||
min-width: 28px;
|
||||
|
||||
div.linenodiv {
|
||||
pre {
|
||||
background: #F7F7F7;
|
||||
border: 0;
|
||||
line-height: 16px;
|
||||
margin: 0;
|
||||
padding: 4px 3px 0 0;
|
||||
white-space: normal;
|
||||
@include border-radius(0);
|
||||
|
||||
a, span {
|
||||
color: #999;
|
||||
display: block;
|
||||
font: normal 12px/16px $Consolas;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.code {
|
||||
background: #FFFFFF;
|
||||
|
||||
div.highlight {
|
||||
pre {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font: normal 12px/16px $Consolas;
|
||||
margin: 0;
|
||||
min-height: 220px;
|
||||
min-width: 589px;
|
||||
overflow-x: auto;
|
||||
padding: 4px 0 4px 0;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
@include border-radius(0);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background: #F7F7F7;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border: 4px solid #F7F7F7;
|
||||
border-radius: 16px;
|
||||
background-color: #C7C7C7;
|
||||
}
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
a.expand, a.view-full {
|
||||
background: #FFF url('../img/expand.png') 15px 18px no-repeat;
|
||||
border-top: 1px solid #F1F1EE;
|
||||
bottom: 0;
|
||||
color: #999999;
|
||||
display: block;
|
||||
font: bold 12px $Helvetica;
|
||||
padding: 15px 40px 15px 40px;
|
||||
position: absolute;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
@include box-shadow(0, -25px, 25px, #FFF);
|
||||
|
||||
span.collapse {
|
||||
display: none;
|
||||
}
|
||||
span.lines {
|
||||
font: normal 10px $Helvetica;
|
||||
margin-left: 5px;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
&:hover {
|
||||
color: #3BAAF3;
|
||||
font-weight: bold;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
a.view-full {
|
||||
background: #FFF url('../img/view-full.png') 15px 17px no-repeat;
|
||||
}
|
||||
textarea.raw, textarea.description {
|
||||
display: none;
|
||||
}
|
||||
div.markdown {
|
||||
margin: 0 15px;
|
||||
min-height: 173px;
|
||||
padding: 13px 0 4px 0;
|
||||
|
||||
pre {
|
||||
min-height: 0;
|
||||
margin: 20px 0 !important;
|
||||
}
|
||||
iframe.twitter-tweet {
|
||||
margin: 20px 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
footer.snipt-attrs {
|
||||
clear: both;
|
||||
padding-bottom: 20px;
|
||||
|
||||
ul.attrs {
|
||||
margin: 14px 0 0 15px;
|
||||
|
||||
li {
|
||||
background: transparent url('../img/calendar-icon.png') top left no-repeat;
|
||||
color: #999;
|
||||
display: inline;
|
||||
font: normal 12px $Helvetica;
|
||||
margin-right: 15px;
|
||||
padding: 1px 0 0 24px;
|
||||
|
||||
a {
|
||||
color: #999;
|
||||
font: normal 12px $Helvetica;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&.author {
|
||||
background-image: none;
|
||||
padding-left: 0;
|
||||
|
||||
span.avatar {
|
||||
background-color: transparent;
|
||||
background-position: top left;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
height: 15px;
|
||||
margin-right: 7px;
|
||||
vertical-align: -3px;
|
||||
width: 15px;
|
||||
@include border-radius(3px);
|
||||
}
|
||||
span.pro {
|
||||
a {
|
||||
color: #3299B7;
|
||||
font: italic bold 10px $Helvetica;
|
||||
margin-left: 5px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
span.gittip {
|
||||
a {
|
||||
background: #DFF0D8;
|
||||
border: 1px solid #CBDDBB;
|
||||
color: #468847;
|
||||
font: bold 10px $Helvetica;
|
||||
margin-left: 5px;
|
||||
padding: 0 3px;
|
||||
text-transform: uppercase;
|
||||
@include border-radius(3px);
|
||||
|
||||
span {
|
||||
font-family: $Consolas;
|
||||
}
|
||||
&:hover {
|
||||
background: #E6F7DF;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.comments {
|
||||
background: transparent url('../img/comments-icon.png') 0 2px no-repeat;
|
||||
}
|
||||
&.raw {
|
||||
background-image: none;
|
||||
float: right;
|
||||
margin-right: 15%;
|
||||
}
|
||||
&.tweet {
|
||||
background: none;
|
||||
margin: -1px 0 0 0;
|
||||
padding: 0;
|
||||
vertical-align: -6px;
|
||||
|
||||
a {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
article.snipt {
|
||||
margin: 30px 0;
|
||||
position: relative;
|
||||
|
|
@ -889,140 +1116,6 @@ article.snipt {
|
|||
padding: 3px 8px 2px 8px;
|
||||
}
|
||||
}
|
||||
section.code {
|
||||
height: 230px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 49;
|
||||
|
||||
table.highlighttable {
|
||||
background: #F7F7F7;
|
||||
height: 100%;
|
||||
}
|
||||
td {
|
||||
padding: 0;
|
||||
vertical-align: top;
|
||||
|
||||
&.linenos {
|
||||
border-right: 1px solid #DDDDDD;
|
||||
min-width: 28px;
|
||||
|
||||
div.linenodiv {
|
||||
pre {
|
||||
background: #F7F7F7;
|
||||
border: 0;
|
||||
line-height: 16px;
|
||||
margin: 0;
|
||||
padding: 4px 3px 0 0;
|
||||
white-space: normal;
|
||||
@include border-radius(0);
|
||||
|
||||
a, span {
|
||||
color: #999;
|
||||
display: block;
|
||||
font: normal 12px/16px $Consolas;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-align: right;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.code {
|
||||
background: #FFFFFF;
|
||||
|
||||
div.highlight {
|
||||
pre {
|
||||
background: transparent;
|
||||
border: none;
|
||||
font: normal 12px/16px $Consolas;
|
||||
margin: 0;
|
||||
min-height: 220px;
|
||||
min-width: 589px;
|
||||
overflow-x: auto;
|
||||
padding: 4px 0 4px 0;
|
||||
white-space: pre;
|
||||
word-wrap: normal;
|
||||
@include border-radius(0);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
background: #F7F7F7;
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
&::-webkit-scrollbar-thumb {
|
||||
border: 4px solid #F7F7F7;
|
||||
border-radius: 16px;
|
||||
background-color: #C7C7C7;
|
||||
}
|
||||
|
||||
> span {
|
||||
display: block;
|
||||
padding: 0 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
a.expand, a.view-full {
|
||||
background: #FFF url('../img/expand.png') 15px 18px no-repeat;
|
||||
border-top: 1px solid #F1F1EE;
|
||||
bottom: 0;
|
||||
color: #999999;
|
||||
display: block;
|
||||
font: bold 12px $Helvetica;
|
||||
padding: 15px 40px 15px 40px;
|
||||
position: absolute;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
width: 100%;
|
||||
@include box-shadow(0, -25px, 25px, #FFF);
|
||||
|
||||
span.collapse {
|
||||
display: none;
|
||||
}
|
||||
span.lines {
|
||||
font: normal 10px $Helvetica;
|
||||
margin-left: 5px;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
&:hover {
|
||||
color: #3BAAF3;
|
||||
font-weight: bold;
|
||||
}
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
a.view-full {
|
||||
background: #FFF url('../img/view-full.png') 15px 17px no-repeat;
|
||||
}
|
||||
textarea.raw, textarea.description {
|
||||
display: none;
|
||||
}
|
||||
div.markdown {
|
||||
margin: 0 15px;
|
||||
min-height: 173px;
|
||||
padding: 13px 0 4px 0;
|
||||
|
||||
pre {
|
||||
min-height: 0;
|
||||
margin: 20px 0 !important;
|
||||
}
|
||||
iframe.twitter-tweet {
|
||||
margin: 20px 0 !important;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
section.emacs, section.default {
|
||||
a.expand {
|
||||
@include box-shadow(0, -25px, 25px, #F8F8F8);
|
||||
|
|
@ -1160,6 +1253,9 @@ article.snipt {
|
|||
&.download {
|
||||
background-image: url('../img/download-icon.png');
|
||||
}
|
||||
&.history {
|
||||
background-image: url('../img/copy-icon.png');
|
||||
}
|
||||
&.embed {
|
||||
background-image: url('../img/embed-icon.png');
|
||||
}
|
||||
|
|
@ -1212,99 +1308,6 @@ article.snipt {
|
|||
}
|
||||
}
|
||||
}
|
||||
footer {
|
||||
clear: both;
|
||||
padding-bottom: 20px;
|
||||
|
||||
ul.attrs {
|
||||
margin: 14px 0 0 15px;
|
||||
|
||||
li {
|
||||
background: transparent url('../img/calendar-icon.png') top left no-repeat;
|
||||
color: #999;
|
||||
display: inline;
|
||||
font: normal 12px $Helvetica;
|
||||
margin-right: 15px;
|
||||
padding: 1px 0 0 24px;
|
||||
|
||||
a {
|
||||
color: #999;
|
||||
font: normal 12px $Helvetica;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
&.author {
|
||||
background-image: none;
|
||||
padding-left: 0;
|
||||
|
||||
span.avatar {
|
||||
background-color: transparent;
|
||||
background-position: top left;
|
||||
background-repeat: no-repeat;
|
||||
display: inline-block;
|
||||
height: 15px;
|
||||
margin-right: 7px;
|
||||
vertical-align: -3px;
|
||||
width: 15px;
|
||||
@include border-radius(3px);
|
||||
}
|
||||
span.pro {
|
||||
a {
|
||||
color: #3299B7;
|
||||
font: italic bold 10px $Helvetica;
|
||||
margin-left: 5px;
|
||||
text-transform: uppercase;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
span.gittip {
|
||||
a {
|
||||
background: #DFF0D8;
|
||||
border: 1px solid #CBDDBB;
|
||||
color: #468847;
|
||||
font: bold 10px $Helvetica;
|
||||
margin-left: 5px;
|
||||
padding: 0 3px;
|
||||
text-transform: uppercase;
|
||||
@include border-radius(3px);
|
||||
|
||||
span {
|
||||
font-family: $Consolas;
|
||||
}
|
||||
&:hover {
|
||||
background: #E6F7DF;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&.comments {
|
||||
background: transparent url('../img/comments-icon.png') 0 2px no-repeat;
|
||||
}
|
||||
&.raw {
|
||||
background-image: none;
|
||||
float: right;
|
||||
margin-right: 15%;
|
||||
}
|
||||
&.tweet {
|
||||
background: none;
|
||||
margin: -1px 0 0 0;
|
||||
padding: 0;
|
||||
vertical-align: -6px;
|
||||
|
||||
a {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
section.description {
|
||||
padding: 10px 20px 20px 20px;
|
||||
position: relative;
|
||||
|
|
@ -3197,3 +3200,15 @@ video {
|
|||
max-width: 100%;
|
||||
width: 1056px;
|
||||
}
|
||||
|
||||
div.snipt-log {
|
||||
background: #E9E9E9;
|
||||
display: none;
|
||||
padding: 40px;
|
||||
margin-bottom: 50px;
|
||||
|
||||
section.code {
|
||||
border: 1px solid #DDDDDD;
|
||||
margin-top: 10px
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@
|
|||
},
|
||||
events: {
|
||||
'click a.copy': 'copyFromClick',
|
||||
'click a.history': 'toggleHistory',
|
||||
'click a.edit': 'edit',
|
||||
'click a.favorite': 'favoriteToggle',
|
||||
'click a.embed': 'embedFromClick',
|
||||
|
|
@ -594,6 +595,9 @@
|
|||
if (isFullScreen(cm)) setFullScreen(cm, false);
|
||||
}
|
||||
});
|
||||
},
|
||||
toggleHistory: function() {
|
||||
$('div.snipt-log').toggle();
|
||||
}
|
||||
});
|
||||
Snipt.SniptListView = Backbone.View.extend({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% load humanize pygmentize snipt_tags %}
|
||||
|
||||
{% block add-snipt %}
|
||||
{% include 'add-snipt.html' %}
|
||||
{% endblock %}
|
||||
|
|
@ -51,6 +53,22 @@
|
|||
{% with 'true' as detail %}
|
||||
{% include "snipts/snipt-list.html" %}
|
||||
{% endwith %}
|
||||
<div class="snipt-log" id="history">
|
||||
{% for log_entry in snipt.sniptlogentry_set.all|dictsortreversed:"created" %}
|
||||
<section class="code autumn">
|
||||
{{ log_entry.diff|pygmentize|safe }}
|
||||
</section>
|
||||
<footer class="snipt-attrs">
|
||||
<ul class="attrs">
|
||||
<li class="author">
|
||||
<span class="avatar" style="background-image: url('https://secure.gravatar.com/avatar/{{ log_entry.user.email|md5 }}?s=15&d=https://snipt.s3.amazonaws.com/img/author-icon.png');"></span>
|
||||
<a href="{{ log_entry.user.get_absolute_url }}">{{ log_entry.user.username }}</a>
|
||||
</li>
|
||||
<li class="created" title="{{ log_entry.created|date:"Y-m-d\TH:i:s" }}">{{ log_entry.created|naturaltime }}</li>
|
||||
</ul>
|
||||
</footer>
|
||||
{% endfor %}
|
||||
</div>
|
||||
<div id="disqus_thread">
|
||||
{% if snipt.public %}
|
||||
<script type="text/javascript">
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
</section>
|
||||
</aside>
|
||||
</div>
|
||||
<footer>
|
||||
<footer class="snipt-attrs">
|
||||
<ul class="attrs">
|
||||
<li class="author">
|
||||
<span class="avatar" style="background-image: url('https://secure.gravatar.com/avatar/<%= snipt.user.email_md5 %>?s=15&d=https://snipt.s3.amazonaws.com/img/author-icon.png');"></span>
|
||||
|
|
|
|||
|
|
@ -145,6 +145,9 @@
|
|||
<li>
|
||||
<a class="download" href="{{ snipt.get_download_url }}">Download</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="history" href="#history">History</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
{% if snipt.tags.all %}
|
||||
|
|
@ -172,7 +175,7 @@
|
|||
</aside>
|
||||
{% endblock %}
|
||||
</div>
|
||||
<footer ng-show="!account || account.list_view == 'N'">
|
||||
<footer class="snipt-attrs" ng-show="!account || account.list_view == 'N'">
|
||||
<ul class="attrs">
|
||||
{% block author %}
|
||||
<li class="author">
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/highlightjs-themes/tomorrow.css" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/blog-themes/default/style.css" />
|
||||
{% else %}
|
||||
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/snipt.css?121" />
|
||||
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/snipt.css?122" />
|
||||
{% endif %}
|
||||
|
||||
{% if has_snipts and not detail %}
|
||||
|
|
@ -426,7 +426,7 @@
|
|||
<script type="text/javascript" src="{{ STATIC_URL }}js/src/account.js"></script>
|
||||
<script type="text/javascript" src="{{ STATIC_URL }}js/src/snipts.js"></script>
|
||||
{% else %}
|
||||
<script type="text/javascript" src="{{ STATIC_URL }}js/snipt-all.min.js?76"></script>
|
||||
<script type="text/javascript" src="{{ STATIC_URL }}js/snipt-all.min.js?77"></script>
|
||||
{% endif %}
|
||||
|
||||
{% if has_snipts and detail %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
from django import template
|
||||
from pygments import highlight
|
||||
from pygments.formatters import HtmlFormatter
|
||||
from pygments.lexers import get_lexer_by_name
|
||||
|
||||
register = template.Library()
|
||||
|
||||
|
||||
@register.filter
|
||||
def pygmentize(text):
|
||||
return highlight(text,
|
||||
get_lexer_by_name('diff',
|
||||
encoding='UTF-8'),
|
||||
HtmlFormatter(linenos='table',
|
||||
anchorlinenos=True,
|
||||
lineanchors='L',
|
||||
linespans='L',
|
||||
))
|
||||
Loading…
Reference in New Issue