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

Compact view option for snipts.

master
Nick Sergeant 2013-06-27 20:52:04 -04:00
parent 0c9b9d3db3
commit 08eb5023c1
12 changed files with 121 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
media/css/snipt.css
View File

File diff suppressed because one or more lines are too long

2
media/css/style.css
View File

File diff suppressed because one or more lines are too long

74
media/css/style.scss
View File

@ -394,6 +394,26 @@ header.sub {
text-decoration: underline;
}
}
&.compact {
float: right;
a {
background: transparent url('../img/compact-icon.png') left 1px no-repeat;
display: inline-block;
margin-right: 15px;
padding-left: 15px;
}
}
&.normal {
float: right;
a {
background: transparent url('../img/normal-icon.png') left 1px no-repeat;
display: inline-block;
margin-right: 15px;
padding-left: 15px;
}
}
&.rss {
float: right;
@ -1337,6 +1357,50 @@ article.snipt {
}
}
}
&.compact {
margin: 0;
div.container {
border-bottom: 0;
width: 100%;
div.bottom-x {
display: none;
}
header {
border-color: #FFFBF3;
min-height: 0;
}
&:after {
display: none;
-webkit-box-shadow: 0 0 20px #85D2DD;
-moz-box-shadow: 0 0 20px #85D2DD;
box-shadow: 0 0 20px #85D2DD;
&:after {
display: none;
}
}
}
&.selected {
div.container {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
&:after {
display: none;
}
}
}
&:last-of-type {
margin-bottom: 50px;
div.container {
border-bottom: 1px solid #DDDDDD;
}
}
}
}
article.private-snipt {
div.container {
@ -1765,6 +1829,16 @@ body.is-pro {
article.snipt {
margin-bottom: 0;
margin-top: 30px;
&.compact {
margin: 0;
}
&:first-of-type {
margin-top: 30px;
}
&:last-of-type {
margin-bottom: 50px;
}
}
}
}

BIN
media/img/compact-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1018 B

BIN
media/img/normal-icon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

1
media/js/src/account.js
View File

@ -1,4 +1,3 @@
// Angular app init.
(function() {
if (typeof angular !== 'undefined') {

20
media/js/src/snipts.js Normal file
View File

@ -0,0 +1,20 @@
(function() {
if (typeof angular !== 'undefined') {
var root = this;
var $ = root.jQuery;
var controllers = {};
var app = root.app;
// Controllers.
controllers.SniptListController = function($scope) {
$scope.section = 'Billing';
};
// Assign the controllers.
app.controller(controllers);
}
}).call(this);

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

@ -8,6 +8,14 @@
<li class="rss">
<a href="{{ request.path }}?rss">RSS</a>
</li>
{% if snipts %}
<li class="compact">
<a ng-click="compactView=true" href>Compact</a>
</li>
<li class="normal">
<a ng-click="compactView=false" href>Normal</a>
</li>
{% endif %}
{% endblock %}
{% block aside-top %}

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

@ -9,8 +9,16 @@
<li><span class="prompt">/</span> <a href="/{{ user.username }}/favorites/">Favorited snipts</a></li>
{% endif %}
<li class="rss">
<a href="{{ request.path }}?rss{% if not public %}&api_key={{ request.user.api_key.key }}{% endif %}">RSS</a>
<a href="{{ request.path }}?rss">RSS</a>
</li>
{% if snipts %}
<li class="compact">
<a ng-click="compactView=true" href>Compact</a>
</li>
<li class="normal">
<a ng-click="compactView=false" href>Normal</a>
</li>
{% endif %}
{% endblock %}
{% block aside-top %}

4
snipts/templates/snipts/list.html
View File

@ -12,11 +12,11 @@
{% endblock %}
{% block content %}
<section class="snipts" id="snipts">
<section class="snipts" id="snipts" ng-controller="SniptListController">
{% if not request.user.profile.is_pro %}
{% include 'go-pro.html' %}
{% endif %}
{% autopaginate snipts 10 %}
{% autopaginate snipts 20 %}
{% for snipt in snipts %}
{% include "snipts/snipt-list.html" %}
{% empty %}

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

@ -22,18 +22,18 @@
favorited" data-favorite-id="{{ is_favorited }}"
{% else %}
"
{% endif %}>
{% endif %} ng-class="{compact: compactView}">
<div class="number">#{{ snipt.pk }}</div>
<div class="group">
<div class="container {% if snipt.description %}with-description{% endif %}">
<header>
{% block lexer %}
<h2>{{ snipt.lexer_name }}</h2>
<h2 ng-show="!compactView">{{ snipt.lexer_name }}</h2>
{% endblock %}
<h1><a href="{{ snipt.get_absolute_url }}">{% if snipt.title %}{{ snipt.title }}{% else %}Untitled{% endif %}</a></h1>
{% block extra-snipt-header %}{% endblock %}
</header>
<section class="code {% if request.GET.style %}{{ request.GET.style }}{% else %}autumn{% endif %}">
<section ng-show="!compactView" class="code {% if request.GET.style %}{{ request.GET.style }}{% else %}autumn{% endif %}">
{% if snipt.lexer == 'markdown' %}
<div class="markdown">
{% if snipt.line_count > 300 and not detail %}
@ -99,7 +99,7 @@
<div class="ruler bottom-x"></div>
</div>
{% block aside %}
<aside>
<aside ng-show="!compactView">
<ul class="options">
{% if snipt.user == request.user %}
<li>
@ -156,7 +156,7 @@
</aside>
{% endblock %}
</div>
<footer>
<footer ng-show="!compactView">
<ul class="attrs">
{% block author %}
<li class="author">

1
templates/base.html
View File

@ -383,6 +383,7 @@
<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>
<script type="text/javascript" src="{{ STATIC_URL }}js/src/account.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/src/snipts.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/src/search.js"></script>
{% else %}
<script type="text/javascript" src="{{ STATIC_URL }}js/snipt-all.min.js?55"></script>