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;
|
||||
}
|
||||
}
|
||||
&.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
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() {
|
||||
|
||||
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">
|
||||
<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 %}
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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 %}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue