marrub
/
snipt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Working on search

master
Nick Sergeant 2012-04-22 21:47:49 -04:00
parent 22d6a3d2cd
commit 62ffd25a3e
9 changed files with 233 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

179
media/css/style.css
View File

@ -90,9 +90,8 @@ header.main div.inner form.search div.infield input {
font: normal 12px "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
height: auto;
margin: 0;
padding: 7px;
text-indent: 21px;
width: 175px;
padding: 7px 7px 7px 28px;
width: 154px;
-webkit-background-clip: padding-box;
-webkit-border-radius: 3px;
-moz-background-clip: padding-box;
@ -125,7 +124,7 @@ header.main div.inner nav.public ul li a {
font: 500 14px "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
padding: 7px;
padding-bottom: 4px;
margin-right: 20px;
margin-right: 16px;
text-decoration: none;
-webkit-transition: border .08s linear;
-moz-transition: border .08s linear;
@ -138,6 +137,13 @@ header.main div.inner nav.public ul li a:hover {
header.main div.inner nav.public ul li a.active {
border-bottom: 2px solid #85D2DD;
}
header.main div.inner nav.public ul li button#add-snipt {
margin-top: -3px;
padding: 9px 12px;
}
header.main div.inner nav.public ul li button#add-snipt i {
margin-left: 5px;
}
header.main div.inner aside.nav {
border-left: 1px solid rgba(229, 229, 229, 0.25);
float: right;
@ -151,12 +157,6 @@ header.main div.inner aside.nav ul {
header.main div.inner aside.nav ul li {
list-style-type: none;
}
header.main div.inner aside.nav ul li button#add-snipt {
margin: 14px 0 0 14px;
}
header.main div.inner aside.nav ul li button#add-snipt i {
margin-left: 5px;
}
header.sub {
background: #7f7f7f;
@ -180,8 +180,8 @@ header.sub div.inner ul.bcrumb {
}
header.sub div.inner ul.bcrumb li {
display: inline-block;
max-width: 490px;
line-height: normal;
max-width: 490px;
overflow: hidden;
padding: 2px 0 4px 0;
text-overflow: ellipsis;
@ -196,12 +196,24 @@ header.sub div.inner ul.bcrumb li a {
header.sub div.inner ul.bcrumb li a:hover {
text-decoration: underline;
}
header.sub div.inner ul.bcrumb li.prompt {
header.sub div.inner ul.bcrumb li.rss {
float: right;
}
header.sub div.inner ul.bcrumb li.rss a {
background: transparent url("/static/images/rss-icon.png") center left no-repeat;
display: inline-block;
margin-right: 15px;
padding-left: 15px;
}
header.sub div.inner ul.bcrumb .prompt {
color: #999999;
font: bold 12px Consolas, Menlo, "Courier New", monospace;
margin-right: 3px;
text-shadow: 0 1px 0 #FFF;
}
header.sub div.inner ul.bcrumb span.prompt {
margin-left: 3px;
}
header.sub div.inner div.shortcuts {
color: #999999;
float: right;
@ -289,6 +301,8 @@ section.main aside.main section.ad.coffee {
margin-bottom: 27px;
}
section.main aside.main section.ad.coffee p {
display: block !important;
height: auto !important;
margin: 7px 0 0 0;
}
section.main aside.main section.ad.coffee > div {
@ -304,7 +318,7 @@ section.main aside.main section.ad.coffee > div div:nth-child(2) {
margin: 0 !important;
}
section.main aside.main section.tags {
margin: 0 15px 45px 15px;
margin: 0 0 45px 15px;
}
section.main aside.main section.tags h1 {
background: transparent url("/static/images/tags-icon.png") 0 0 no-repeat;
@ -545,20 +559,15 @@ article.snipt div.container section.tango a.expand {
box-shadow: 0 -25px 25px #f8f8f8;
}
article.snipt div.container:after {
bottom: 8px;
background: transparent url("/static/images/snipt-drop-shadow.png") top left no-repeat;
bottom: -15px;
content: "";
height: 20px;
display: block;
height: 15px;
position: absolute;
right: 3px;
width: 50%;
z-index: 48;
-webkit-box-shadow: 0 6px 12px rgba(184, 184, 184, 0.6);
-moz-box-shadow: 0 6px 12px rgba(184, 184, 184, 0.6);
box-shadow: 0 6px 12px rgba(184, 184, 184, 0.6);
-webkit-transform: rotate(3deg);
-moz-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
right: 0px;
width: 318px;
z-index: 51;
}
article.snipt aside {
float: right;
@ -588,7 +597,7 @@ article.snipt aside ul.options li a:hover, article.snipt aside ul.options li a.h
text-decoration: none;
}
article.snipt aside ul.options li a.edit:after {
background: #f5f2f3 url("/static/images/bg.gif") top left repeat;
background: #F5F2F3;
content: "";
height: 20px;
position: absolute;
@ -604,8 +613,8 @@ article.snipt aside ul.options li a.embed {
article.snipt aside ul.options li a.copy {
background-image: url("/static/images/copy-icon.png");
}
article.snipt aside ul.options li a.copy span.done {
display: none;
article.snipt aside ul.options li a.favorite {
background-image: url("/static/images/favorite-icon.png");
}
article.snipt aside section.tags {
padding-top: 15px;
@ -665,7 +674,24 @@ article.snipt footer ul.attrs li a:hover {
text-decoration: underline;
}
article.snipt footer ul.attrs li.author {
background: transparent url("/static/images/author-icon.png") 0 1px no-repeat;
background-image: none;
padding-left: 0;
}
article.snipt footer ul.attrs li.author span {
background-color: transparent;
background-position: top left;
background-repeat: no-repeat;
display: inline-block;
height: 15px;
margin-right: 7px;
vertical-align: -3px;
width: 15px;
-webkit-background-clip: padding-box;
-webkit-border-radius: 3px;
-moz-background-clip: padding-box;
-moz-border-radius: 3px;
border-radius: 3px;
background-clip: padding-box;
}
article.snipt footer ul.attrs li.comments {
background: transparent url("/static/images/comments-icon.png") 0 2px no-repeat;
@ -691,6 +717,12 @@ article.snipt div.expanded section.code a.expand span.collapse {
article.snipt div.expanded section.code a.expand span.lines {
display: none;
}
article.snipt div.modal textarea {
font: normal 12px/16px Consolas, Menlo, "Courier New", monospace;
height: 200px;
margin: 0;
width: 520px;
}
article.snipt.selected div.container {
-webkit-box-shadow: 0 0 20px #85D2DD;
-moz-box-shadow: 0 0 20px #85D2DD;
@ -699,11 +731,14 @@ article.snipt.selected div.container {
article.snipt.selected div.container:after {
display: none;
}
article.snipt div.modal textarea {
font: normal 12px/16px Consolas, Menlo, "Courier New", monospace;
height: 200px;
margin: 0;
width: 520px;
article.snipt.favorited div.container header {
background: #7f7f7f url("/static/images/favorited-icon.png") top right no-repeat;
background: url("/static/images/favorited-icon.png") top right no-repeat, -webkit-gradient(linear, left top, left bottom, from(white), to(#fffaf2));
background: url("/static/images/favorited-icon.png") top right no-repeat, -moz-linear-gradient(center top, white 0%, #fffaf2 100%);
background: url("/static/images/favorited-icon.png") top right no-repeat, -moz-gradient(center top, white 0%, #fffaf2 100%);
}
article.snipt.favorited div.container header h1 a {
padding-right: 25px;
}
article.private-snipt div.container header {
@ -791,6 +826,65 @@ div.modal div.modal-body {
max-height: 514px;
}
div.profile {
background: rgba(128, 128, 128, 0.08);
margin: 0 0 30px 15px;
padding: 10px;
-webkit-background-clip: padding-box;
-webkit-border-radius: 8px;
-moz-background-clip: padding-box;
-moz-border-radius: 8px;
border-radius: 8px;
background-clip: padding-box;
}
div.profile span.avatar {
background-color: transparent;
background-position: top left;
background-repeat: no-repeat;
display: block;
float: left;
height: 50px;
width: 50px;
-webkit-background-clip: padding-box;
-webkit-border-radius: 5px;
-moz-background-clip: padding-box;
-moz-border-radius: 5px;
border-radius: 5px;
background-clip: padding-box;
}
div.profile div.meta {
display: block;
float: left;
font: bold 14px "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
margin: 0 0 0 10px;
}
div.profile div.meta div.username {
max-width: 95px;
overflow: hidden;
text-overflow: ellipsis;
}
div.profile div.meta div.member-since {
color: #909090;
font: bold 10px "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
margin-top: 6px;
text-transform: uppercase;
}
div.empty-snipts {
background: rgba(128, 128, 128, 0.08);
font: bold 18px "Helvetica Neue", Helvetica, Arial, "Liberation Sans", FreeSans, sans-serif;
margin: 30px 15px 0 15px;
padding: 10px;
text-align: center;
text-shadow: 0 1px 1px #FFF;
-webkit-background-clip: padding-box;
-webkit-border-radius: 8px;
-moz-background-clip: padding-box;
-moz-border-radius: 8px;
border-radius: 8px;
background-clip: padding-box;
}
body.detail div.right-y {
display: none;
}
@ -809,10 +903,6 @@ body.detail section.main div.inner section.snipts article.snipt div.container he
body.detail section.main div.inner section.snipts article.snipt div.container section.code {
height: auto;
}
body.detail section.main div.inner section.snipts article.snipt div.container:after {
bottom: 11px;
height: 23px;
}
body.detail section.main div.inner section.snipts article.snipt aside {
margin-right: 0;
}
@ -966,9 +1056,6 @@ body.editing section.main div.inner section.snipts article.editing div.container
body.editing section.main div.inner section.snipts article.editing div.container header h2 {
border: none;
}
body.editing section.main div.inner section.snipts article.editing div.container:after {
display: none;
}
body.editing section.main div.inner section.snipts article.editing aside {
margin-top: 0;
width: 243px;
@ -1038,3 +1125,13 @@ body.error section.main div.inner {
body.error div.rochester-made {
margin-top: 54px;
}
body.search div.empty-snipts {
margin-top: 20px;
}
body.search div.static-box form {
margin-bottom: 0;
}
body.search div.static-box form input.search-query {
width: 571px;
}

34
media/css/style.scss
View File

@ -149,9 +149,8 @@ header.main {
font: normal 12px $Helvetica;
height: auto;
margin: 0;
padding: 7px;
text-indent: 21px;
width: 175px;
padding: 7px 7px 7px 28px;
width: 154px;
@include border-radius(3px);
@include inset-box-shadow(0, 1px, 0px, #1D4249);
@ -259,12 +258,6 @@ header.sub {
text-decoration: underline;
}
}
&.prompt {
color: #999999;
font: bold 12px $Consolas;
margin-right: 3px;
text-shadow: 0 1px 0 #FFF;
}
&.rss {
float: right;
@ -276,6 +269,15 @@ header.sub {
}
}
}
.prompt {
color: #999999;
font: bold 12px $Consolas;
margin-right: 3px;
text-shadow: 0 1px 0 #FFF;
}
span.prompt {
margin-left: 3px;
}
}
div.shortcuts {
color: #999999;
@ -1269,3 +1271,17 @@ body.error {
margin-top: 54px;
}
}
body.search {
div.empty-snipts {
margin-top: 20px;
}
div.static-box {
form {
margin-bottom: 0;
input.search-query {
width: 571px;
}
}
}
}

20
media/js/src/modules/site.js
View File

@ -43,6 +43,8 @@
this.$html_body = this.$body.add(this.$html);
this.$search_form = $('form.search', this.$body);
this.$search_query = $('input#search-query', this.$body);
this.$search_page_query = $('input.search-query', this.$body);
this.$search_queries = this.$search_query.add(this.$search_page_query);
this.$snipts = $('section#snipts article.snipt', this.$body);
this.$modals = $('div.modal', this.$snipts);
this.$main_edit = $('section#main-edit');
@ -63,16 +65,12 @@
}
});
$search_query = this.$search_query;
$search_query.focus(function() {
$search_queries = this.$search_queries;
$search_queries.focus(function() {
if (window.$selected) {
$selected.trigger('deselect');
}
});
this.$search_form.submit(function() {
window.location = 'https://www.google.com/search?q=' + $search_query.val() + ' site:snipt.net%20';
return false;
});
this.$body.on('click', 'a.close', function() {
$(this).parent().parent().modal('hide');
@ -89,13 +87,19 @@
keyboardShortcuts: function() {
var $body = this.$body;
$search_queries = this.$search_queries;
$search_page_query = this.$search_page_query;
$search_query = this.$search_query;
$document = $(document);
$document.bind('keydown', '/', function(e) {
if (!window.ui_halted) {
e.preventDefault();
$search_query.focus();
if ($body.hasClass('search')) {
$search_page_query.focus();
} else {
$search_query.focus();
}
}
});
$document.bind('keydown', 'h', function(e) {
@ -123,7 +127,7 @@
history.go(1);
}
});
this.$search_query.bind('keydown', 'esc', function(e) {
this.$search_queries.bind('keydown', 'esc', function(e) {
if (!window.ui_halted) {
e.preventDefault();
this.blur();

2
snipts/templates/snipts/detail.html
View File

@ -11,7 +11,7 @@
{% block breadcrumb %}
<li><a href="/{{ user.username }}/">{{ user.username }}</a></li>
<li>/ <a href="{{ snipt.get_absolute_url }}">{{ snipt.title }}</a></li>
<li><span class="prompt">/</span> <a href="{{ snipt.get_absolute_url }}">{{ snipt.title }}</a></li>
{% endblock %}
{% block aside %}{% endblock %}

2
snipts/templates/snipts/list-public.html
View File

@ -3,7 +3,7 @@
{% block breadcrumb %}
<li><a href="/public/">public</a></li>
{% if tag %}
<li>/ <a href="/public/tag/{{ tag.slug }}/">{{ tag.name }}</a></li>
<li><span class="prompt">/</span> <a href="/public/tag/{{ tag.slug }}/">{{ tag.name }}</a></li>
{% endif %}
<li class="rss">
<a href="{{ request.path }}?rss">RSS</a>

2
snipts/templates/snipts/list-user.html
View File

@ -5,7 +5,7 @@
{% block breadcrumb %}
<li><a href="/{{ user.username }}/">{{ user.username }}</a></li>
{% if tag %}
<li>/ <a href="/{{ user.username }}/tag/{{ tag.slug }}/">{{ tag.name }}</a></li>
<li><span class="prompt">/</span> <a href="/{{ user.username }}/tag/{{ tag.slug }}/">{{ tag.name }}</a></li>
{% endif %}
<li class="rss">
<a href="{{ request.path }}?rss{% if not public %}&api_key={{ request.user.api_key.key }}{% endif %}">RSS</a>

2
snipts/templates/snipts/snipt-list.html
View File

@ -106,4 +106,4 @@
<div class="hide slug">{{ snipt.slug }}</div>
<div class="hide stylized">{{ snipt.stylized }}</div>
<div class="hide tags-list">{{ snipt.tags_list }}</div>
</article>
/article>

4
templates/base.html
View File

@ -65,11 +65,11 @@
<div class="inner">
<div class="shadey"></div>
<h1><a href="{% if request.user.is_authenticated %}/{{ request.user.username }}/{% else %}/{% endif %}">Snipt</a></h1>
<form class="search" action="" method="get">
<form class="search" action="/search/" method="get">
<fieldset>
<div class="fields infield">
<label for="search-query">Search public snipts</label>
<input type="text" id="search-query" name="q" value="" />
<input type="text" id="search-query" name="q" value="{{ query }}" />
</div>
</fieldset>
</form>

87
templates/search/search.html
View File

@ -1,39 +1,56 @@
{% extends 'base.html' %}
{% extends "base.html" %}
{% block page-title %}/ search {% if query %}/ {{ query }}{% endif %}{% endblock %}
{% block html-class %}search{% endblock %}
{% block body-class %}search static{% endblock %}
{% block breadcrumb %}
<li><a href="/search/">search</a></li>
{% if query %}
<li><span class="prompt">/</span> <a href="/search?q={{ query|urlencode }}">{{ query }}</a></li>
{% endif %}
{% endblock %}
{% block content %}
<h2>Search</h2>
<form method="get" action=".">
<table>
{{ form.as_table }}
<tr>
<td>&nbsp;</td>
<td>
<input type="submit" value="Search">
</td>
</tr>
</table>
{% if query %}
<h3>Results</h3>
{% for result in page.object_list %}
<p>
<a href="{{ result.object.get_absolute_url }}">{{ result.object.title }}</a>
</p>
{% empty %}
<p>No results found.</p>
{% endfor %}
{% if page.has_previous or page.has_next %}
<div>
{% if page.has_previous %}<a href="?q={{ query }}&amp;page={{ page.previous_page_number }}">{% endif %}&laquo; Previous{% if page.has_previous %}</a>{% endif %}
|
{% if page.has_next %}<a href="?q={{ query }}&amp;page={{ page.next_page_number }}">{% endif %}Next &raquo;{% if page.has_next %}</a>{% endif %}
</div>
{% endif %}
{% else %}
{# Show some example queries to run, maybe query syntax, something else? #}
<div class="static-box">
<form method="get" class="form-search" action=".">
<input type="text" class="search-query" name="q" value="{{ form.q.data }}" id="id_q">
<button type="submit" class="btn">Search</button>
</form>
</div>
{% if query %}
{% for result in page.object_list %}
<a href="{{ result.object.get_absolute_url }}">{{ result.object.title }}</a><br />
{% empty %}
<div class="empty-snipts">
No snipts found for &ldquo;{{ query }}&rdquo;.
</div>
{% endfor %}
{% if page.has_previous or page.has_next %}
<div class="pagination">
<ul>
{% if page.has_previous %}
<li class="prev">
<a id="prev-page" href="?q={{ query }}&amp;page={{ page.previous_page_number }}">&larr;</a>
</li>
{% else %}
<li class="disabled prev">
<a href="#">&larr;</a>
</li>
{% endif %}
{% if page.has_next %}
<li class="next">
<a id="next-page" href="?q={{ query }}&amp;page={{ page.next_page_number }}">&rarr;</a>
</li>
{% else %}
<li class="disabled next">
<a href="#">&rarr;</a>
</li>
{% endif %}
</ul>
</div>
{% endif %}
</form>
{% else %}
{# Show some example queries to run, maybe query syntax, something else? #}
{% endif %}
{% endblock %}