Adds a partial view for cards and removes fieldset legend when list is empty.

This commit is contained in:
Fred Pauchet 2012-11-24 23:19:25 +01:00
parent 8639662831
commit 3fee772269
13 changed files with 198 additions and 335 deletions

View File

@ -7,5 +7,9 @@ register = template.Library()
def nav_menu():
countries = Country.objects.all().order_by('label')
return { 'countries' : countries }
def cards_list_partial(cardslist):
return { 'cards_list': cardslist }
register.inclusion_tag('nav_menu.html')(nav_menu)
register.inclusion_tag('cards_list.html')(cards_list_partial)

View File

@ -17,7 +17,7 @@ def index(request):
nbr_of_cards = Card.objects.count()
tags_list = Tag.objects.annotate(occurence=Count('tags'))
tags_list = Tag.objects.order_by('?').annotate(occurences=Count('tags'))[:15]
cards_list = Card.objects.order_by('-created_at')[:25]
@ -25,6 +25,18 @@ def index(request):
return render_to_response('cards/index.html', RequestContext(request, context))
def about(request):
return render_to_response('cards/about.html', RequestContext(request, {}))
def tags(request):
from django.db.models import Count
tags_list = Tag.objects.annotate(occurences=Count('tags'))
context = { 'tags_list' : tags_list }
return render_to_response('cards/tags.html', RequestContext(request, context))
def details(request, card_id):
a = get_object_or_404(Card, pk=card_id)
@ -41,22 +53,6 @@ def charts(request):
return render_to_response('cards/charts.html', RequestContext(request, context))
def pagination(cards_list, request):
paginator = Paginator(cards_list, 20)
page = request.GET.get('page')
try:
cards = paginator.page(page)
except PageNotAnInteger:
cards = paginator.page(1)
except EmptyPage:
cards = paginator.page(paginator.num_pages)
except:
cards = paginator.page(1)
return cards
def query(request):
if request.method == "POST":
@ -79,7 +75,7 @@ def query(request):
cards_list = Card.objects.filter(q)
cards = pagination(cards_list, request)
cards = cards_list
context = { 'tags_list': tags_list, 'cards' : cards, 'title' : 'Recherche sur les termes : ' + terms }
@ -132,7 +128,7 @@ def advanced_query(request):
def search_by_country(request, country_id):
country = get_object_or_404(Country, pk=country_id)
cards = pagination(country.card_set.all(), request)
cards = country.card_set.all()
context = { 'cards' : cards, 'title' : country.label }
@ -143,31 +139,9 @@ def search_by_tag(request, tag_id):
cards_list = tag.tags.all()
cards = pagination(cards_list, request)
cards = cards_list
context = { 'cards' : cards, 'title' : tag.label }
return render_to_response('cards/list.html', RequestContext(request, context))
def search_by_category(request, category_id):
category = get_object_or_404(Category, pk=category_id)
cards_list = list()
for subcat in category.subcategory_set.all():
cards_list.extend(subcat.card_set.all())
cards = pagination(cards_list, request)
context = { 'cards' : cards, 'title' : category.label }
return render_to_response('cards/list.html', RequestContext(request, context))
def search_by_subcategory(request, subcategory_id):
subcategory = get_object_or_404(SubCategory, pk=subcategory_id)
cards = pagination(subcategory.card_set.all(), request)
context = { 'cards' : cards, 'title' : subcategory.label }
return render_to_response('cards/list.html', RequestContext(request, context))

BIN
static/img/header_pic.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 74 KiB

View File

@ -18,9 +18,9 @@
<!--<a href="/"><img src="{{STATIC_URL}}img/header.png" alt="Ma collection de télécartes" /></a>-->
</div>
<div>
<ul class="nav nav-pills">
<ul class="nav nav-pills menu">
<li class="active">
<a href="{% url index %}">Télécartes</a>
<a id="navlink_main" href="{% url index %}">Télécartes</a>
</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Pays<b class="caret"></b></a>
@ -28,9 +28,9 @@
{% nav_menu %}
</ul>
</li>
<li><a href="#">Tags</a>
<li><a href="{% url charts %}">Graphiques</a></li>
<li><a href="#">A propos</a></li>
<li><a id="navlink_tags" href="{% url tags %}">Tags</a>
<li><a id="navlink_charts" href="{% url charts %}">Graphiques</a></li>
<li><a id="navlink_about" href="{% url about %}">A propos</a></li>
<li><a href="/admin">Admin</a></li>
<li class="pull-right">
<form action="/query/" method="POST">
@ -42,9 +42,8 @@
</div>
</header>
<div class="row">
{% block main_container %}{% endblock %}
</div>
{% block main_container %}{% endblock %}
</div>
</body>
</html>

View File

@ -1,139 +0,0 @@
{% extends 'base.html' %}
{% load image_tags %}
{% block main_container %}
<script type="text/javascript" src="{{ STATIC_URL }}js/highcharts.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
var chart;
var barChat;
$(document).ready(function() {
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Nombre de cartes par pays'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
}
}
}
},
series: [{
type: 'pie',
name: 'Browser share',
data: [
{% for country in countries %}
['{{country.label}}', {{country.num_cards}}],
{% endfor %}
]
}]
});
barChart = new HighCharts.Chart({
renderTo: 'barContainer',
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
return ''+
this.series.name +': '+ this.y +' millions';
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -100,
y: 100,
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF',
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [107, 31, 635, 203, 2]
}, {
name: 'Year 1900',
data: [133, 156, 947, 408, 6]
}, {
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
});
});
});
</script>
<h2>Stats, tout ça</h2>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
<div id="barContainer" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
{% endblock %}

View File

@ -0,0 +1,18 @@
{% extends 'base.html' %}
{% load image_tags %}
{% block main_container %}
<script type="text/javascript">
$(function () {
$('.menu li').removeClass('active');
$('#navlink_about').parent().addClass('active');
});
</script>
<h2>A propos</h2>
<p>Bon bah faut ajouter du texte ici hein :)</p>
{% endblock %}

View File

@ -8,59 +8,19 @@
<script type="text/javascript" src="{{ STATIC_URL }}js/modules/exporting.js"></script>
<script type="text/javascript">
$(function () {
var chart;
$(function () {
var barChart;
$(document).ready(function() {
$('.menu li').removeClass('active');
$('#navlink_charts').parent().addClass('active');
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: 'Nombre de cartes par pays'
},
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage}%</b>',
percentageDecimals: 1
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
color: '#000000',
connectorColor: '#000000',
formatter: function() {
return '<b>'+ this.point.name +'</b>: '+ this.percentage.toFixed(2) +' %';
}
}
}
},
credits: {
enabled: false
},
series: [{
type: 'pie',
name: 'CardsCountry',
data: [
{% for country in countries %}
['{{country.label}}', {{country.num_cards}}],
{% endfor %}
]
}]
});
barchart = new Highcharts.Chart({
chart: {
renderTo: 'barcontainer',
@ -119,13 +79,9 @@
});
</script>
<h2>Stats, tout ça</h2>
<h2></h2>
<div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
</div>
<div id="barcontainer" style="min-width: 400px; height: 400px; margin: 0 auto">
<div id="barcontainer" style="min-width: 400px; height: 85%; margin: 0 auto">
</div>

View File

@ -1,5 +1,17 @@
{% load image_tags %}
<script>
$(function() {
$('#next_card').click(function() {
// do something
});
$('#previous_card').click(function() {
// do something
};
});
</script>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>{{ card.label }} (<a href="{% url list-by-country card.country.id %}">{{card.country}}</a>)</h3>
@ -43,9 +55,13 @@
</td>
</tr>
</table>
<!--<p>
<span class="pull-left">Dernière mise-à-jour: {{card.updated_at}}</span>
</p>-->
</div>
<div class="modal-footer">
<p class="pull-left"></p>
<p class="pull-right"></p>
<p class="pull-left">Dernière mise-à-jour: {{card.updated_at}}</p><a href="/admin/cards/card/{{card.id}}/" target="_blank" class="btn btn-primary" >Modification</a>
<span class="pull-right"><a href="/admin/cards/card/{{card.id}}/" target="_blank" class="btn" >Modification</a> </span>
<!--<a id="previous_card" class="btn btn-primary pull-left" href="#"><i class="icon icon-arrow-left" /> Précédente</a>
<a id="next_card" class="btn btn-primary" href="#">Suivante <i class="icon icon-arrow-right" /></a>-->
</div>

View File

@ -1,6 +1,7 @@
{% extends 'base.html' %}
{% load image_tags %}
{% load inclusion_tags %}
{% block main_container %}
@ -13,7 +14,7 @@
*/
var word_array = [
{% for tag in tags_list %}
{text: "{{ tag.label }}", weight: {{ tag.occurence }}, link: "{% url list-by-tag tag.id %}"},
{text: "{{ tag.label }}", weight: {{ tag.occurences }}, link: "{% url list-by-tag tag.id %}"},
{% endfor %}
];
@ -23,22 +24,21 @@
});
</script>
<h2>Nuage de tags</h2>
<div class="container">
<div id="tagCloud" style="width: 550px; height: 350px;"></div>
<div class="row">
<div class="span4">
<img style="vertical-align: middle;" src="{{ STATIC_URL }}/img/header_pic.png" alt="" />
</div>
<div class="span8">
<div id="tagCloud" style="width: 550px; height: 350px;"></div>
</div>
</div>
</div>
<h2>Derniers ajouts</h2>
<ul class="thumbnails">
{% for card in cards_list %}
<li class="span2">
<a href="{% url card-details card.id %}" class="thumbnail">
{% if card.image %}
<img src="{{card|crop}}" title="{{card.label}}" />
{% endif %}
</a>
</li>
{% endfor %}
</ul>
{% cards_list_partial cards_list %}
{% endblock %}

View File

@ -1,46 +1,14 @@
{% extends 'base.html' %}
{% load image_tags %}
{% load inclusion_tags %}
{% load filter_tags %}
{% block main_container %}
<script>
$(function() {
// When DOM is ready, select the container element and call the jQCloud method, passing the array of words as the first argument.
$("a.thumbnail").click(function(e) {
e.preventDefault();
$('#modalDisplay').modal();
var request = $.ajax({
url: $(this).attr('href'),
type: 'GET',
dataType: 'html'
});
request.done(function(result) {
$('#modalDisplay').html(result);
});
request.fail(function(jqxhr, textStatus) {
$('#modalDisplay').html('La requête a foiré: ' + textStatus);
});
});
$('legend').click(function(){
$(this).parent().find('.content').slideToggle("slow");
});
});
</script>
<div id="modalDisplay" class="modal large hide fade">
</div>
<h2>{{ title }}</h2>
{% if tags_list %}
<fieldset>
<legend>Tags</legend>
@ -50,51 +18,13 @@
{% endfor %}
</ul>
</fieldset>
{% endif %}
{% if cards %}
<fieldset>
<legend>Cartes</legend>
<ul class="thumbnails content">
{% for card in cards.object_list %}
<li class="span2">
<a href="{% url card-details card.id %}" class="thumbnail">
{% if card.image %}
<img src="{{card|crop}}" title="{{card.label}}" />
{% endif %}
</a>
</li>
{% endfor %}
</ul>
{% cards_list_partial cards %}
</fieldset>
<div class="pagination" style="margin: 0 auto; display: inline-block; text-align: center;">
<span class="step-links">
{% if cards.has_previous %}
<a href="?page={{ cards.previous_page_number }}">«</a>
{% else %}
<span class="disabled">
<a href="?page={{ cards.previous_page_number }}">«</a>
</span>
{% endif %}
{% for page_num in cards.paginator.num_pages|get_range %}
{% if page_num == cards.number %}
<span class="active">
<a class="active" href="?page={{ page_num }}">{{ page_num }}</a>
</span>
{% else %}
<a href="?page={{ page_num }}">{{ page_num }}</a>
{% endif %}
{% endfor %}
{% if cards.has_next %}
<a href="?page={{ cards.next_page_number }}">»</a>
{% else %}
<span class="disabled">
<a href="?page={{ cards.next_page_number }}">»</a>
</span>
{% endif %}
</span>
</div>
{% endif %}
{% endblock %}

57
templates/cards/tags.html Normal file
View File

@ -0,0 +1,57 @@
{% extends 'base.html' %}
{% block main_container %}
<style type="text/css">
.cloud_link
{
margin: 1.2em 1.2em 1.2em 1.2em;
}
</style>
<script>
$().ready(function() {
var catContainer = $('div#categories');
var categories = catContainer.find('ul li');
var cloudMarkup = '';
var maxPercent = 350, minPercent = 100;
var max = 1, min = 999, count = 0;
categories.each(function(i) {
count = parseInt($(this).find('span').text());
max = (count > max ? count : max);
min = (min > count ? count : min);
});
var total, link, size;
var multiplier = (maxPercent-minPercent)/(max-min);
categories.each(function(i) {
count = parseInt($(this).find('span').text());
link = $(this).find('a');
size = minPercent + ((max-(max-(count-min)))*multiplier) + '%';
cloudMarkup += '<a class="cloud_link" style="font-size:' + size + '" href="' + link.attr('href') + '">' + link.text() + '</a> ';
});
// replace the html content of the parent container with the new tag cloud
catContainer.html(cloudMarkup);
$('.menu li').removeClass('active');
$('#navlink_tags').parent().addClass('active');
});
</script>
<div id="categories" style="min-width: 400px; height: 400px; margin: 0 auto">
<ul>
{% for tag in tags_list %}
<li><a href={% url list-by-tag tag.id %}>{{tag.label}}</a><span dir="ltr">{{tag.occurences}}</span></li>
{% endfor %}
</ul>
</div>
{% endblock %}

48
templates/cards_list.html Normal file
View File

@ -0,0 +1,48 @@
{% load image_tags %}
<script>
$(function() {
// When DOM is ready, select the container element and call the jQCloud method, passing the array of words as the first argument.
$("a.thumbnail").click(function(e) {
e.preventDefault();
$('#modalDisplay').modal();
var request = $.ajax({
url: $(this).attr('href'),
type: 'GET',
dataType: 'html'
});
request.done(function(result) {
$('#modalDisplay').html(result);
});
request.fail(function(jqxhr, textStatus) {
$('#modalDisplay').html('La requête a foiré: ' + textStatus);
});
});
$('legend').click(function(){
$(this).parent().find('.content').slideToggle("slow");
});
});
</script>
<div id="modalDisplay" class="modal large hide fade">
</div>
<ul class="thumbnails">
{% for card in cards_list %}
<li class="span2">
<a href="{% url card-details card.id %}" class="thumbnail">
{% if card.image %}
<img src="{{card|crop}}" title="{{card.label}}" />
{% endif %}
</a>
</li>
{% endfor %}
</ul>

View File

@ -14,10 +14,10 @@ urlpatterns = patterns('cards.views',
url(r'^query/$', 'query'),
url(r'^advanced-query/$', 'advanced_query', name='advanced-query'),
url(r'^list/country/(?P<country_id>\d+)/$', 'search_by_country', name='list-by-country'),
url(r'^list/category/(?P<category_id>\d+)/$', 'search_by_category', name='list-by-category'),
url(r'^list/subcategory/(?P<subcategory_id>\d+)/$', 'search_by_subcategory', name='list-by-subcategory'),
url(r'^list/tag/(?P<tag_id>\d+)/$', 'search_by_tag', name='list-by-tag'),
url(r'^charts/$', 'charts', name='charts'),
url(r'^tags/$', 'tags', name='tags'),
url(r'^about/$', 'about', name='about'),
url(r'^$', 'index', name='index'),
)