UI Improvements (cf. B Sajus .odp)
--- a/web/hdalab/static/hdalab/css/cattree.css Sat Aug 18 08:43:04 2012 +0200
+++ b/web/hdalab/static/hdalab/css/cattree.css Mon Aug 27 17:27:27 2012 +0200
@@ -23,14 +23,6 @@
margin-top: 30px;
}
-.tag-results {
- color: #c00000;
-}
-
-.category-results {
- color: #008000;
-}
-
.content-results {
color: #000060;
}
@@ -43,28 +35,40 @@
margin: 10px 0 0 320px;
}
-.cattree p.category {
- color: #008000;
+.cattree p.theme {
+ color: #000080;
}
-.cattree p.category:before {
- content: "Catégorie ";
- font-style: italic;
+.cattree .content p.title {
+ font-weight: bold; cursor: pointer;
+}
+
+.cattree .content p.title:before {
font-weight: normal;
}
-.cattree p.tag {
- color: #c00000;
+.cattree .score_0, .cattree .score_1 {
+ color: #80d080;
+}
+
+.cattree .score_2, .cattree .score_3, .cattree .score_4 {
+ color: #409840;
}
-.cattree p.tag:before {
- content: "Tag ";
- font-style: italic;
- font-weight: normal;
+.cattree .score_5, .cattree .score_6, .cattree .score_7 {
+ color: #006000;
}
-.cattree .content p.title {
- color: #000060; font-weight: bold; cursor: pointer;
+.cattree .score_0:before, .cattree .score_1:before {
+ content: "★☆☆ ";
+}
+
+.cattree .score_2:before, .cattree .score_3:before, .cattree .score_4:before {
+ content: "★★☆ ";
+}
+
+.cattree .score_5:before, .cattree .score_6:before, .cattree .score_7:before {
+ content: "★★★ ";
}
.cattree .img-container {
@@ -79,28 +83,36 @@
margin: 4px 0 4px 64px; font-size: 12px; min-height: 50px;
}
-.cattree li, .cattree p.category, .cattree p.tag {
+.cattree li, .cattree p.theme {
margin: 4px 0; font-size: 13px; position: relative;
}
-.cattree p.tag, .cattree p.category {
+.cattree p.theme {
font-weight: bold; cursor: pointer;
}
-.cattree p.tag:after, .cattree p.category:after, .cattree .content p.title:after {
+.cattree p.theme:after, .cattree .content p.title:after {
content: " [-]"
}
-.cattree .folded p.tag:after, .cattree .folded p.category:after, .cattree .content.folded p.title:after {
+.cattree .folded p.theme:after, .cattree .content.folded p.title:after {
content: " [+]"
}
.cattree ul {
- list-style: none; position: relative; overflow: hidden; padding: 0; margin: 0;
+ list-style: none; position: relative; padding: 0; margin: 0;
+}
+
+.cattree .folded ul {
+ display: none;
}
-.cattree .folded ul, .cattree .folded p.description, .cattree .folded .img-container {
- display: none;
+.cattree .foldedcontent {
+ height: 0px; overflow: hidden;
+}
+
+.cattree .show_more {
+ color: #800000; font-style: italic; cursor: pointer;
}
.cattree li {
@@ -108,15 +120,15 @@
}
.cattree ul li {
- margin-left: 50px;
+ margin-left: 38px;
}
.cattree ul li:after {
- content: ""; position: absolute; left: -40px; top: 10px; width: 30px; bottom: 0; border-style: solid none none solid; border-width: 1px; border-color: #333;
+ content: ""; position: absolute; left: -50px; top: 9px; width: 40px; bottom: 0; border-style: solid none none solid; border-width: 1px; border-color: #333;
}
.cattree ul li:before {
- content: ""; position: absolute; left: -40px; top: -5px; height: 15px; width: 1px; background: #333;
+ content: ""; position: absolute; left: -50px; top: -10px; height: 19px; width: 1px; background: #333;
}
.cattree ul li:last-child:after {
@@ -125,4 +137,12 @@
.cattree .eltype {
font-style: italic; display: none;
-}
\ No newline at end of file
+}
+
+li.themeli {
+ list-style: square;
+}
+
+li.content {
+ list-style: disc;
+}
--- a/web/hdalab/static/hdalab/js/cattree.js Sat Aug 18 08:43:04 2012 +0200
+++ b/web/hdalab/static/hdalab/js/cattree.js Mon Aug 27 17:27:27 2012 +0200
@@ -5,16 +5,21 @@
_data.contents_count = (typeof _data.contents == "object" && typeof _data.contents.slice == "function" ? _data.contents.length : 0);
_data.level = !!_level;
_(_data.tags).each(function(_tag) {
- _(_tag.contents).each(function(_content) {
+ _(_tag.contents).each(function(_content, _key) {
_content.trimmed_description = _content.description.trim().replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{150,200})[\s].+$/m,'$1…');
+ _content.hidden = (_key >= 5);
});
+ _tag.show_more = _tag.contents && _tag.contents.length > 5 ? _tag.contents.length - 5 : 0;
});
- _(_data.contents).each(function(_content) {
+ _(_data.contents).each(function(_content, _key) {
_content.trimmed_description = _content.description.trim().replace(/(\n|\r|\r\n)/mg,' ').replace(/(^.{150,200})[\s].+$/m,'$1…');
+ _content.hidden = (_key >= 5);
});
- var _prefix = '<li {{#level}}class="folded"{{/level}}><p class="category">{{category}} — {{theme_count}} thème(s), {{contents_count}} ressource(s)</p><ul>',
- _contents = '{{#contents}}<li class="content folded" id="content_{{id}}"><p class="title">{{title}}</p><div class="img-container"><img src="http://www.histoiredesarts.culture.fr/images/cached/images/{{hda_id}}.jpg" /></div><p class="description"><a href="{{url}}" target="_blank" class="content">{{trimmed_description}}</a></p></li>{{/contents}}',
- _suffix = '{{#tags}}<li class="folded"><p class="tag">{{label}} — {{contents.length}} ressource(s)</p><ul>'
+ _data.show_more = _data.contents && _data.contents.length > 5 ? _data.contents.length - 5 : 0;
+ var _prefix = '<li class="themeli {{#level}}folded {{/level}}"><p class="theme">{{category}} — {{#theme_count}}{{theme_count}} thème(s){{#contents_count}}, {{/contents_count}}{{/theme_count}}{{#contents_count}}{{contents_count}} ressource(s){{/contents_count}}</p><ul>',
+ _contents = '{{#contents}}<li class="content{{#hidden}} hidden{{/hidden}}" id="content_{{id}}"><p class="title score_{{score}}">{{title}}</p><div class="foldedcontent"><div class="img-container"><img src="http://www.histoiredesarts.culture.fr/images/cached/images/{{hda_id}}.jpg" />'
+ + '</div><p class="description">Source: {{organization}}<br /><a href="{{url}}" target="_blank" class="content">{{trimmed_description}}</a></p></div></li>{{/contents}}{{#show_more}}<li class="show_more">Plus de contenus (<span class="show_more_count">{{show_more}}</span>)…</li>{{/show_more}}',
+ _suffix = '{{#tags}}<li class="themeli folded"><p class="theme">{{label}} — {{contents.length}} ressource(s)</p><ul>'
+ _contents
+ '</ul></li>{{/tags}}'
+ _contents
@@ -41,10 +46,33 @@
$(".label-name").html(_label);
if (_data) {
$("#tree").html(render(_data, 0));
- $(".cattree p.category, .cattree p.tag, .cattree p.title").click(function() {
- $(this).parent().toggleClass("folded");
+ $(".cattree p.theme").click(function() {
+ $(this).parent().toggleClass("folded")
return false;
});
+ $("li.content").mouseenter(function() {
+ $(this).find(".foldedcontent")
+ .dequeue()
+ .animate({
+ height: $(this).find("p.description").outerHeight()
+ },
+ 500);
+ }).mouseleave(function() {
+ $(this).find(".foldedcontent")
+ .dequeue()
+ .animate({
+ height: "0"
+ },
+ 500);
+ });
+ $(".show_more").click(function() {
+ $(this).siblings(".hidden:lt(5)").removeClass("hidden");
+ var _l = $(this).siblings(".hidden").length;
+ $(this).find(".show_more_count").html(_l);
+ if (!_l) {
+ $(this).detach();
+ }
+ })
$(".results").show();
$(".content-count").html($(".cattree a.content").length);
$(".category-count").html(Math.max(0, $("p.category").length - 1));
@@ -83,4 +111,5 @@
+ "</a>" )
.appendTo( ul )
};
+ gettree("peinture");
});
\ No newline at end of file
--- a/web/hdalab/views/ajax.py Sat Aug 18 08:43:04 2012 +0200
+++ b/web/hdalab/views/ajax.py Mon Aug 27 17:27:27 2012 +0200
@@ -129,8 +129,8 @@
def cattree(request):
# Gets the category tree from a label
- ROOT_MAX_TAG_ORDER = 5
- MAX_TAG_ORDER = 5
+ ROOT_MAX_TAG_ORDER = 8
+ MAX_TAG_ORDER = 8
MAX_LEVEL = 3
LEVEL_COEFF = 5
label = request.GET.get('label', None)
@@ -146,7 +146,7 @@
# if len(tag_list):
contents = []
# datasheets = Datasheet.objects.filter(validated = True, taggedsheet__tag__label__in = tag_list, taggedsheet__order__lte = MAX_TAG_ORDER).distinct()
- datasheets = Datasheet.objects.filter(validated = True, taggedsheet__tag__label__iexact = label, taggedsheet__order__lte = ROOT_MAX_TAG_ORDER).distinct()
+ datasheets = Datasheet.objects.filter(validated = True, taggedsheet__tag__label__iexact = label, taggedsheet__order__lte = ROOT_MAX_TAG_ORDER).select_related('organisation').distinct()
for datasheet in datasheets:
# Calculating where we add the datasheet in the tree
maintag = None
@@ -170,7 +170,8 @@
'url': datasheet.url,
'description': datasheet.description,
'hda_id': datasheet.hda_id,
- 'score': (dsscore + rootscore)
+ 'organization': datasheet.organisation.name,
+ 'score': max(dsscore, rootscore)
})
cleantags(resobj)