# HG changeset patch
# User veltr
# Date 1327576673 -3600
# Node ID 0ca8b95b54fb4a4e0f15557ce4fb37d6fb54d9bc
# Parent  1bec286c88aaabd8090b9b955c24335f9d33f50b
Added polemic volumes to all medias

diff -r 1bec286c88aa -r 0ca8b95b54fb src/ldt/ldt/ldt_utils/templates/front/front_all_contents.html
--- 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>
diff -r 1bec286c88aa -r 0ca8b95b54fb src/ldt/ldt/ldt_utils/templates/front/front_home.html
--- 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>
diff -r 1bec286c88aa -r 0ca8b95b54fb src/ldt/ldt/static/ldt/css/front_common.css
--- 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;
 }
 
diff -r 1bec286c88aa -r 0ca8b95b54fb src/ldt/ldt/static/ldt/css/front_home.css
--- 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 */
 
diff -r 1bec286c88aa -r 0ca8b95b54fb src/ldt/ldt/static/ldt/js/Ldt_front_sparkline.js
--- /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