Compact view option for snipts.
parent
0c9b9d3db3
commit
08eb5023c1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -394,6 +394,26 @@ header.sub {
|
||||||
text-decoration: underline;
|
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 {
|
&.rss {
|
||||||
float: right;
|
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 {
|
article.private-snipt {
|
||||||
div.container {
|
div.container {
|
||||||
|
@ -1765,6 +1829,16 @@ body.is-pro {
|
||||||
article.snipt {
|
article.snipt {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
margin-top: 30px;
|
margin-top: 30px;
|
||||||
|
|
||||||
|
&.compact {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
&:first-of-type {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
&:last-of-type {
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Binary file not shown.
After Width: | Height: | Size: 1018 B |
Binary file not shown.
After Width: | Height: | Size: 1.0 KiB |
|
@ -1,4 +1,3 @@
|
||||||
// Angular app init.
|
|
||||||
(function() {
|
(function() {
|
||||||
|
|
||||||
if (typeof angular !== 'undefined') {
|
if (typeof angular !== 'undefined') {
|
||||||
|
|
|
@ -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,6 +8,14 @@
|
||||||
<li class="rss">
|
<li class="rss">
|
||||||
<a href="{{ request.path }}?rss">RSS</a>
|
<a href="{{ request.path }}?rss">RSS</a>
|
||||||
</li>
|
</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 %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block aside-top %}
|
{% block aside-top %}
|
||||||
|
|
|
@ -9,8 +9,16 @@
|
||||||
<li><span class="prompt">/</span> <a href="/{{ user.username }}/favorites/">Favorited snipts</a></li>
|
<li><span class="prompt">/</span> <a href="/{{ user.username }}/favorites/">Favorited snipts</a></li>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<li class="rss">
|
<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>
|
</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 %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block aside-top %}
|
{% block aside-top %}
|
||||||
|
|
|
@ -12,11 +12,11 @@
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block content %}
|
{% block content %}
|
||||||
<section class="snipts" id="snipts">
|
<section class="snipts" id="snipts" ng-controller="SniptListController">
|
||||||
{% if not request.user.profile.is_pro %}
|
{% if not request.user.profile.is_pro %}
|
||||||
{% include 'go-pro.html' %}
|
{% include 'go-pro.html' %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% autopaginate snipts 10 %}
|
{% autopaginate snipts 20 %}
|
||||||
{% for snipt in snipts %}
|
{% for snipt in snipts %}
|
||||||
{% include "snipts/snipt-list.html" %}
|
{% include "snipts/snipt-list.html" %}
|
||||||
{% empty %}
|
{% empty %}
|
||||||
|
|
|
@ -22,18 +22,18 @@
|
||||||
favorited" data-favorite-id="{{ is_favorited }}"
|
favorited" data-favorite-id="{{ is_favorited }}"
|
||||||
{% else %}
|
{% else %}
|
||||||
"
|
"
|
||||||
{% endif %}>
|
{% endif %} ng-class="{compact: compactView}">
|
||||||
<div class="number">#{{ snipt.pk }}</div>
|
<div class="number">#{{ snipt.pk }}</div>
|
||||||
<div class="group">
|
<div class="group">
|
||||||
<div class="container {% if snipt.description %}with-description{% endif %}">
|
<div class="container {% if snipt.description %}with-description{% endif %}">
|
||||||
<header>
|
<header>
|
||||||
{% block lexer %}
|
{% block lexer %}
|
||||||
<h2>{{ snipt.lexer_name }}</h2>
|
<h2 ng-show="!compactView">{{ snipt.lexer_name }}</h2>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
<h1><a href="{{ snipt.get_absolute_url }}">{% if snipt.title %}{{ snipt.title }}{% else %}Untitled{% endif %}</a></h1>
|
<h1><a href="{{ snipt.get_absolute_url }}">{% if snipt.title %}{{ snipt.title }}{% else %}Untitled{% endif %}</a></h1>
|
||||||
{% block extra-snipt-header %}{% endblock %}
|
{% block extra-snipt-header %}{% endblock %}
|
||||||
</header>
|
</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' %}
|
{% if snipt.lexer == 'markdown' %}
|
||||||
<div class="markdown">
|
<div class="markdown">
|
||||||
{% if snipt.line_count > 300 and not detail %}
|
{% if snipt.line_count > 300 and not detail %}
|
||||||
|
@ -99,7 +99,7 @@
|
||||||
<div class="ruler bottom-x"></div>
|
<div class="ruler bottom-x"></div>
|
||||||
</div>
|
</div>
|
||||||
{% block aside %}
|
{% block aside %}
|
||||||
<aside>
|
<aside ng-show="!compactView">
|
||||||
<ul class="options">
|
<ul class="options">
|
||||||
{% if snipt.user == request.user %}
|
{% if snipt.user == request.user %}
|
||||||
<li>
|
<li>
|
||||||
|
@ -156,7 +156,7 @@
|
||||||
</aside>
|
</aside>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</div>
|
</div>
|
||||||
<footer>
|
<footer ng-show="!compactView">
|
||||||
<ul class="attrs">
|
<ul class="attrs">
|
||||||
{% block author %}
|
{% block author %}
|
||||||
<li class="author">
|
<li class="author">
|
||||||
|
|
|
@ -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/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/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/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>
|
<script type="text/javascript" src="{{ STATIC_URL }}js/src/search.js"></script>
|
||||||
{% else %}
|
{% else %}
|
||||||
<script type="text/javascript" src="{{ STATIC_URL }}js/snipt-all.min.js?55"></script>
|
<script type="text/javascript" src="{{ STATIC_URL }}js/snipt-all.min.js?55"></script>
|
||||||
|
|
Loading…
Reference in New Issue