Working on list view
Nick Sergeant
parent
c3c01cfc10
commit
5216f954f4
|
|
@ -197,12 +197,16 @@ section.main {
|
|||
width: 1px;
|
||||
z-index: 48;
|
||||
}
|
||||
div.left-y {
|
||||
margin-left: 0;
|
||||
}
|
||||
div.right-y {
|
||||
margin-left: 750px;
|
||||
}
|
||||
div.inner {
|
||||
float: left;
|
||||
width: 750px;
|
||||
margin-left: 1px;
|
||||
width: 749px;
|
||||
}
|
||||
aside.main {
|
||||
float: right;
|
||||
|
|
@ -297,40 +301,113 @@ section.main {
|
|||
}
|
||||
article.snipt {
|
||||
margin: 30px 0;
|
||||
position: relative;
|
||||
|
||||
div.number {
|
||||
color: #CCC;
|
||||
font: normal 12px @Helvetica;
|
||||
left: -115px;
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
top: 4px;
|
||||
width: 100px;
|
||||
}
|
||||
div.container {
|
||||
background: #FFF;
|
||||
border: 1px solid #DDD;
|
||||
border-left: 0;
|
||||
float: left;
|
||||
position: relative;
|
||||
width: 618px;
|
||||
|
||||
div.ruler {
|
||||
background: #DDD;
|
||||
height: 1px;
|
||||
left: -3000px;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
width: 3000px;
|
||||
}
|
||||
div.top-x {
|
||||
top: -1px;
|
||||
}
|
||||
div.bottom-x {
|
||||
bottom: -1px;
|
||||
}
|
||||
header {
|
||||
border-bottom: 1px solid #F1F1EE;
|
||||
.inset-box-shadow(0, -1px, 0, #FFF);
|
||||
.vertical-gradient(#FFF, #FFFAF2);
|
||||
|
||||
h1 {
|
||||
color: #666;
|
||||
clear: left;
|
||||
float: left;
|
||||
font: bold 16px/20px @Helvetica;
|
||||
margin: 8px 15px 10px 15px;
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
-webkit-transition: color .08s linear;
|
||||
-moz-transition: color .08s linear;
|
||||
-o-transition: color .08s linear;
|
||||
transition: color .08s linear;
|
||||
|
||||
&:hover {
|
||||
color: #3BAAF3;
|
||||
}
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
border: 1px solid #E9E9E9;
|
||||
border-top: 0;
|
||||
color: #73BBC5;
|
||||
float: left;
|
||||
display: inline-block;
|
||||
font: normal 12px @Helvetica;
|
||||
margin-left: 15px;
|
||||
padding: 3px 8px 2px 8px;
|
||||
}
|
||||
}
|
||||
section.code {
|
||||
max-height: 200px;
|
||||
margin: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
aside {
|
||||
float: right;
|
||||
width: 130px;
|
||||
}
|
||||
footer {
|
||||
clear: both;
|
||||
padding-bottom: 20px;
|
||||
|
||||
ul.attrs {
|
||||
margin: 15px 0 0 15px;
|
||||
|
||||
li {
|
||||
background: transparent url('/media/images/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;
|
||||
}
|
||||
}
|
||||
&.comments {
|
||||
background: transparent url('/media/images/comments-icon.png') 0 2px no-repeat;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Utils
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 369 B |
Binary file not shown.
|
After Width: | Height: | Size: 295 B |
Binary file not shown.
|
After Width: | Height: | Size: 420 B |
Binary file not shown.
|
After Width: | Height: | Size: 467 B |
|
|
@ -46,6 +46,7 @@ class Snipt(models.Model):
|
|||
def get_absolute_url(self):
|
||||
return "/%s/%s/" % (self.user.username, self.slug)
|
||||
|
||||
#TODO This needs to be deprecated - render stylized version on save
|
||||
def get_stylized(self):
|
||||
if self.stylized == '':
|
||||
self.stylized = highlight(self.code,
|
||||
|
|
@ -62,6 +63,10 @@ class Snipt(models.Model):
|
|||
site.domain,
|
||||
self.key)
|
||||
|
||||
@property
|
||||
def lexer_name(self):
|
||||
return get_lexer_by_name(self.lexer).name
|
||||
|
||||
class Comment(models.Model):
|
||||
"""A comment on a Snipt"""
|
||||
|
||||
|
|
|
|||
|
|
@ -1,17 +1,23 @@
|
|||
<article class="snipt group">
|
||||
<div class="container">
|
||||
<header class="group">
|
||||
<h2>{{ snipt.lexer }}</h2>
|
||||
<h1>{{ snipt.title }}</h1>
|
||||
</header>
|
||||
<section class="code">
|
||||
<br /><br /><br /><br /><br /><br /><br /><br />
|
||||
</section>
|
||||
{% load humanize %}
|
||||
|
||||
<article class="snipt">
|
||||
<div class="number">#{{ snipt.id }}</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>
|
||||
<section class="code">{{ snipt.get_stylized|safe }}</section>
|
||||
<div class="ruler top-x"></div>
|
||||
<div class="ruler bottom-x"></div>
|
||||
</div>
|
||||
<aside></aside>
|
||||
</div>
|
||||
<aside>
|
||||
|
||||
</aside>
|
||||
<footer>
|
||||
|
||||
<ul class="attrs">
|
||||
<li class="created">{{ snipt.created|naturalday }}</li>
|
||||
<li class="comments"><a href="{{ snipt.get_absolute_url }}#comments">Comments ({{ snipt.comment_set.all|length }})</a></li>
|
||||
</ul>
|
||||
</footer>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -83,8 +83,6 @@
|
|||
<div class="inner">
|
||||
{% block content %}{% endblock %}
|
||||
</div>
|
||||
<div class="left-y ruler"></div>
|
||||
<div class="right-y ruler"></div>
|
||||
<aside class="main">
|
||||
<section class="ad">
|
||||
<div class="asset"></div>
|
||||
|
|
@ -110,6 +108,8 @@
|
|||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<div class="left-y ruler"></div>
|
||||
<div class="right-y ruler"></div>
|
||||
</section>
|
||||
|
||||
{% if not debug %}
|
||||
|
|
|
|||
Loading…
Reference in New Issue