--- a/src/ldt/ldt/ldt_utils/templates/front/front_all_contents.html Thu Jan 26 11:36:20 2012 +0100
+++ b/src/ldt/ldt/ldt_utils/templates/front/front_all_contents.html Thu Jan 26 12:17:53 2012 +0100
@@ -9,6 +9,7 @@
{{block.super}}
<script src="{{LDT_MEDIA_PREFIX}}js/jquery.min.js" type="text/javascript"/></script>
<script src="{{LDT_MEDIA_PREFIX}}js/raphael.js" type="text/javascript"/></script>
+<script src="{{LDT_MEDIA_PREFIX}}js/Ldt_front_sparkline.js" type="text/javascript"/></script>
{% endblock %}
{% block css_import %}
@@ -16,50 +17,6 @@
<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/front_home.css" type="text/css"/>
{% endblock %}
-{% block js_declaration %}
-{{block.super}}
-<script type="text/javascript">
- var _width = 293,
- _height = 20;
- var _medias = [ {% for content in content_list %}
- {
- "iri_id" : '{{ content.iri_id }}',
- "stats" : [{{ content.stat_annotation }}],
- },{% endfor %}
- ];
- $(document).ready(function () {
- $('.graph_annotation').each(function(_i) {
- var _values = _medias[_i].stats,
- _nb = _values.length,
- _max = _values.reduce(function(_a,_b) {
- return Math.max(_a,_b);
- }, 1),
- _x = function(_p) {
- return _p * _width / _nb;
- },
- _y = function(_p) {
- return _height * ( 1 - _p / _max );
- },
- _d = _values.map(function(_v,_k) {
- return ( _k == 0 ?
- "M" + _x(_k) + " " + _y(_v) :
- "C" + _x(_k-.5) + " " + _y(_values[_k - 1])
- + " " + + _x(_k-.5) + " " + _y(_v)
- + " " + + _x(_k) + " " + _y(_v)
- ) ;
- }).join("") + "L" + _width + " " + _height + "L0 " + _height;
- this.innerHTML = '';
- var _paper = new Raphael(this,_width,_height);
- _paper.path(_d).attr({
- "fill" : "#adadad",
- "stroke" : "#808080"
- });
- });
- });
-</script>
-
-{% endblock %}
-
{% block body %}
{{block.super}}
<!-- Last annotated contents -->
@@ -71,8 +28,18 @@
</li>
{% for content in content_list %}
<li class="li_media">
- <a href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}">{% thumbnail content.image "294x165" format="PNG" crop="center" as im %}<img src="{{ im.url }}" class="img_media" width="{{ im.width }}" height="{{ im.height }}" alt="{% trans 'open this media' %}" title="{% trans 'open this media' %}">{% endthumbnail %}
- <span class="graph_annotation"></span></a>
+ <a class="img_and_overlay" href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}">
+ {% thumbnail content.image "294x165" format="PNG" crop="center" as im %}<img src="{{ im.url }}" class="img_media" width="{{ im.width }}" height="{{ im.height }}" alt="{% trans 'open this media' %}" title="{% trans 'open this media' %}">{% endthumbnail %}
+ <div class="overlay">
+ <ul class="polemics">
+ <li class="pol-negative" style="width:0%">0%</li>
+ <li class="pol-positive" style="width:0%">0%</li>
+ <li class="pol-reference" style="width:0%">0%</li>
+ <li class="pol-question" style="width:0%">0%</li>
+ </ul>
+ <span class="graph_annotation" id="sp_{{ content.iri_id }}">{{ content.stat_annotation }}</span>
+ </div>
+ </a>
<div class="bulle_annot" title="{% blocktrans count nb=content.nb_annotation %}{{nb}} annotation on this media{% plural %}{{nb}} annotations on this media{% endblocktrans %}">{{ content.nb_annotation }}</div>
<p><a href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}"><b>{% if content.title|length > 69 %}{{content.title|slice:":69"}}...{% else %}{{content.title}}{% endif %}</b></a></p>
<p>{% trans 'by' %} IRI | {{content.duration|str_duration:"h"}}</p>
--- a/src/ldt/ldt/ldt_utils/templates/front/front_home.html Thu Jan 26 11:36:20 2012 +0100
+++ b/src/ldt/ldt/ldt_utils/templates/front/front_home.html Thu Jan 26 12:17:53 2012 +0100
@@ -6,6 +6,13 @@
{% block title %}{% trans "front.home" %}{% endblock %}
+{% block js_import %}
+{{block.super}}
+<script src="{{LDT_MEDIA_PREFIX}}js/jquery.min.js" type="text/javascript"/></script>
+<script src="{{LDT_MEDIA_PREFIX}}js/raphael.js" type="text/javascript"/></script>
+<script src="{{LDT_MEDIA_PREFIX}}js/Ldt_front_sparkline.js" type="text/javascript"/></script>
+{% endblock %}
+
{% block css_import %}
{{block.super}}
<link rel="stylesheet" href="{{LDT_MEDIA_PREFIX}}css/front_home.css" type="text/css"/>
@@ -26,7 +33,17 @@
</li>
{% for content in last_contents %}
<li class="li_media">
- <a href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}">{% thumbnail content.image "294x165" format="PNG" crop="center" as im %}<img src="{{ im.url }}" class="img_media" width="{{ im.width }}" height="{{ im.height }}" alt="{% trans 'open this media' %}" title="{% trans 'open this media' %}">{% endthumbnail %}</a>
+ <a class="img_and_overlay" href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}">{% thumbnail content.image "294x165" format="PNG" crop="center" as im %}<img src="{{ im.url }}" class="img_media" width="{{ im.width }}" height="{{ im.height }}" alt="{% trans 'open this media' %}" title="{% trans 'open this media' %}">{% endthumbnail %}
+ <div class="overlay">
+ <ul class="polemics">
+ <li class="pol-negative" style="width:0%">0%</li>
+ <li class="pol-positive" style="width:0%">0%</li>
+ <li class="pol-reference" style="width:0%">0%</li>
+ <li class="pol-question" style="width:0%">0%</li>
+ </ul>
+ <span class="graph_annotation" id="sp_{{ content.iri_id }}">{{ content.stat_annotation }}</span>
+ </div>
+ </a>
<div class="bulle_annot" title="{% blocktrans count nb=content.nb_annotation %}{{nb}} annotation on this media{% plural %}{{nb}} annotations on this media{% endblocktrans %}">{{ content.nb_annotation }}</div>
<p><a href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}" title="{% trans 'open this media' %}"><b>{{content.title}}</b></a></p>
<p>{% trans 'by' %} IRI | {{content.duration|str_duration:"h"}}</p>
@@ -46,14 +63,16 @@
</li>
{% for content in most_contents %}
<li class="li_media">
- <a class="img_and_polemic" href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}">
+ <a class="img_and_overlay" href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}">
{% thumbnail content.image "134x75" format="PNG" crop="center" as im %}<img src="{{ im.url }}" class="img_media" width="{{ im.width }}" height="{{ im.height }}" alt="{% trans 'open this media' %}" title="{% trans 'open this media' %}">{% endthumbnail %}
- <ul class="polemics">
- <li class="pol-negative" style="width:0%">0%</li>
- <li class="pol-positive" style="width:0%">0%</li>
- <li class="pol-reference" style="width:0%">0%</li>
- <li class="pol-question" style="width:0%">0%</li>
- </ul>
+ <div class="overlay">
+ <ul class="polemics">
+ <li class="pol-negative" style="width:0%">0%</li>
+ <li class="pol-positive" style="width:0%">0%</li>
+ <li class="pol-reference" style="width:0%">0%</li>
+ <li class="pol-question" style="width:0%">0%</li>
+ </ul>
+ </div>
</a>
<div class="bulle_annot" title="{% blocktrans count nb=content.nb_annotation %}{{nb}} annotation on this media{% plural %}{{nb}} annotations on this media{% endblocktrans %}">{{ content.nb_annotation }}</div>
<p><a href="{% url ldt.ldt_utils.views.front.annot_content content.iri_id %}" title="{% trans 'open this media' %}"><b>{% if content.title|length > 69 %}{{content.title|slice:":69"}}...{% else %}{{content.title}}{% endif %}</b></a></p>
--- a/src/ldt/ldt/static/ldt/css/front_common.css Thu Jan 26 11:36:20 2012 +0100
+++ b/src/ldt/ldt/static/ldt/css/front_common.css Thu Jan 26 12:17:53 2012 +0100
@@ -132,17 +132,25 @@
.img_media {
background: #000000; border: 2px solid #ffffff; padding: 1px;
}
-.img_and_polemic {
+.img_and_overlay {
float: left; position: relative;
}
+.overlay {
+ position: absolute; bottom: 0; width: 100%;
+}
+
+.graph_annotation {
+ float: left; height: 20px; margin: 0 4px 6px 4px;
+}
+
.polemics {
- position: absolute; bottom: 8px; list-style: none; z-index: 2;
+ float: left; margin-bottom: 8px; list-style: none; z-index: 2;
width: 95%; font-size: 9px; color: #ffffff;
}
.polemics li {
- text-align: left; overflow: hidden; padding: 0 0 0 3px; margin: 2px 0; clear: both;
+ float: left; text-align: left; overflow: hidden; padding: 0 0 0 3px; margin: 2px 0; clear: both;
width: 100%; box-shadow: 2px 2px 2px #000000;
}
--- a/src/ldt/ldt/static/ldt/css/front_home.css Thu Jan 26 11:36:20 2012 +0100
+++ b/src/ldt/ldt/static/ldt/css/front_home.css Thu Jan 26 12:17:53 2012 +0100
@@ -22,10 +22,6 @@
.title_ul {
list-style: none;
}
-.graph_annotation {
- background: url(./imgs/whitealpha.png); position:absolute;
- z-index: 2; width: 294px; height: 20px; left: 3px; top: 148px;
-}
/* Plus annotés */
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/ldt/ldt/static/ldt/js/Ldt_front_sparkline.js Thu Jan 26 12:17:53 2012 +0100
@@ -0,0 +1,36 @@
+$(document).ready(function () {
+ $('.graph_annotation').each(function(_i) {
+ var _values = this.innerHTML.split(','),
+ _nb = _values.length,
+ _width = $(this).parent().parent().parent().width() - 8,
+ _height = $(this).height(),
+ _max = _values.reduce(function(_a,_b) {
+ return Math.max(_a,_b);
+ }, 1),
+ _x = function(_p) {
+ return _p * _width / _nb;
+ },
+ _y = function(_p) {
+ return _height * ( 1 - _p / _max );
+ },
+ _d = _values.map(function(_v,_k) {
+ return ( _k == 0 ?
+ "M" + _x(_k) + " " + _y(_v) :
+ "C" + _x(_k-.5) + " " + _y(_values[_k - 1])
+ + " " + + _x(_k-.5) + " " + _y(_v)
+ + " " + + _x(_k) + " " + _y(_v)
+ ) ;
+ }).join("") + "L" + _width + " " + _height + "L0 " + _height;
+ this.innerHTML = '';
+ var _paper = new Raphael(this,_width,_height);
+ _paper.rect(0,0,_width,_height).attr({
+ "stroke" : "none",
+ "fill" : "#ffffff",
+ "opacity" : .8,
+ });
+ _paper.path(_d).attr({
+ "fill" : "#adadad",
+ "stroke" : "#808080"
+ });
+ });
+});
\ No newline at end of file