add integration modifs
authorcavaliet
Wed, 19 Jun 2013 16:19:01 +0200
changeset 126 b844bdfb8bc2
parent 125 211680696ab7
child 127 6d975009b57a
add integration modifs
src/egonomy/static/egonomy/css/slideshow.css
src/egonomy/static/egonomy/css/style.css
src/egonomy/static/egonomy/img/border-bar-tools.png
src/egonomy/static/egonomy/img/icon-arrow-enter.png
src/egonomy/static/egonomy/img/icon-cut-15.png
src/egonomy/static/egonomy/img/icon-mosaic.png
src/egonomy/static/egonomy/img/icon-plus-15.png
src/egonomy/static/egonomy/img/tools-sprite.png
src/egonomy/static/egonomy/js/slideshow.js
src/egonomy/templates/egonomy_all_fragments.html
src/egonomy/templates/egonomy_all_pictures.html
src/egonomy/templates/egonomy_newbase.html
src/egonomy/templates/partial/all_pictures_pagination.html
src/egonomy/templates/partial/fragment_in_list.html
src/egonomy/templates/partial/image_in_list.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/egonomy/static/egonomy/css/slideshow.css	Wed Jun 19 16:19:01 2013 +0200
@@ -0,0 +1,59 @@
+.slideshow-wrap, .imagezone {
+    position: absolute; left: 0; top: 0; width: 100%; height: 100%;
+}
+
+.caption-wrap {
+    position: absolute; left: 50px; right: 50px; bottom: 50px;
+}
+
+.caption {
+    font-family: "Lato"; width: 480px; max-width: 100%;
+    background: #ffffff;
+    padding: 16px 0; margin: 0;
+}
+
+.caption h2 {
+    font-size: 18px; font-weight: bold; margin: 0; padding: 0 20px 5px;
+}
+
+.caption h3 {
+    font-size: 18px; font-style: italic; margin: 0; border-bottom: 1px solid #cccccc; padding: 0 20px 5px;
+}
+
+.caption p {
+    margin: 10px 20px 0; padding: 0; font-size: 16px; font-style: italic;
+}
+
+.arrow-wrap {
+    box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75); width: 78px; height: 78px;
+    position: absolute; top: 50%; margin-top: -39px;
+    background: #fff; cursor: pointer; border-radius: 39px; display: none;
+}
+
+.left-arrow {
+    left: 20px;
+}
+
+.right-arrow {
+    right: 20px;
+}
+
+.arrow-wrap:hover {
+    background: #e0e0e0;
+}
+
+.arrow-wrap:active {
+    background: #666666;
+}
+
+.arrow {
+    width: 78px; height: 78px; display: block; background: url(../img/home-arrow.png) center 30px no-repeat;
+}
+
+.left-arrow .arrow {
+    transform: rotate(90deg); -webkit-transform: rotate(90deg);
+}
+
+.right-arrow .arrow {
+    transform: rotate(-90deg); -webkit-transform: rotate(-90deg);
+}
\ No newline at end of file
--- a/src/egonomy/static/egonomy/css/style.css	Wed Jun 19 15:15:05 2013 +0200
+++ b/src/egonomy/static/egonomy/css/style.css	Wed Jun 19 16:19:01 2013 +0200
@@ -13,7 +13,7 @@
 h1{text-transform: uppercase; display:inline-block;padding: 64px 0 0 16px; font-family : 'josefin_sans'; font-weight : 600; font-size:34px;}
 .head-login{padding-top: 10px; margin-bottom: 40px; display: inline-block;}
 .head-login, .head-login a{font-size: 12px; font-family: 'Lato'; color: #626364;}
-.head-login input{width:140px;background: url(../img/icon-search.png) 150px center no-repeat;font-family: 'Lato'; font-weight : bold; font-style : italic; font-size: 12px; border: 1px solid #D0D0D0; height: 25px; line-height: 25px; padding: 0 26px 0 4px;}
+.head-login input, .search-form{ vertical-align: middle; width:140px;background: url(../img/icon-search.png) 150px center no-repeat;font-family: 'Lato'; font-weight : bold; font-style : italic; font-size: 12px; border: 1px solid #D0D0D0; height: 25px; line-height: 25px; padding: 0 26px 0 4px;}
 .hello-user{margin-left: 12px;}
 .head-login select{ vertical-align: middle;}
 .head-login li{float: left; line-height: 27px;}
@@ -21,11 +21,11 @@
 .dot-10{ vertical-align:middle; width: 10px; height: 10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #A1A1A1; display: inline-block; margin: 0 12px;}
 nav{height: 70px;}
 nav li{height:100%; float:left; }
-.nav{margin-bottom: 14px; height: 18px; display: block;}
-.sub-nav{float: right; display: block;}
+.nav{margin-bottom: 14px; height: 18px; display: block;float: right;}
+.sub-nav{float: right; display: block;clear: both; }
 .sub-nav a{font-size: 14px; font-family: 'Lato'; font-weight: 300; display:inline-block;}
 .sub-nav a:first-letter {text-transform: uppercase;}
-.sub-nav a.active, .sub-nav a:hover{font-family: 'Lato';}
+.sub-nav a.active, .sub-nav a:hover{font-family: 'Lato'; font-weight: bold;}
 .nav a{font-family: 'josefin_sans'; font-size: 18px; text-transform : uppercase;}
 
 .title-page{margin: 30px 0; position: relative; min-height: 30px;}
@@ -34,18 +34,29 @@
 .title-menu{ position: absolute; bottom: 0; right: 0;}
 .title-menu li{float: left;}
 
-.bar-tools{margin-bottom: 26px; line-height: 26px; font-family: 'Lato'; font-weight: 300; display:block;padding: 10px 0; background-image: url(../img/border-dot-bar.png), url(../img/border-dot-bar.png); background-position: top center, bottom center; background-repeat: no-repeat, no-repeat;}
+.bar-tools{margin-bottom: 12px; line-height: 35px; padding-bottom: 1px; font-family: 'Lato'; font-weight: 300; display:block;background-image: url(../img/border-bar-tools.png), url(../img/border-bar-tools.png); background-position: top center, bottom center; background-repeat: repeat-x;}
 .bar-tools h3{ font-size: 18px;  display: inline-block; text-transform: uppercase;}
 .bar-tools ul{float: right;}
+.bar-tools ul.left{float: left;}
+.bar-tools ul.left li{margin-left: 0; margin-right: 10px;}
+.bar-tools ul.left a{width: 40px; padding: 0; vertical-align: middle;}
+.go-to{background-repeat: no-repeat;background-position: 4px center, 20px center;}
+.go-to.mosaic{background-image: url(../img/icon-mosaic.png), url(../img/icon-arrow-enter.png);}
+.go-to.search{background-image: url(../img/icon-search.png), url(../img/icon-arrow-enter.png);}
 .bar-tools li{float: left; margin-left: 10px;}
-.bar-tools li a{display: inline-block; font-size: 12px; height: 24px; line-height: 24px; padding: 0 7px; background-color: #DDD;}
+.bar-tools li a{display: inline-block; font-size: 12px; height: 25px; line-height: 25px; padding: 0 7px; background-color: #DDD;}
+.bar-tools li a:hover{background-color: #eee;}
 .bar-tools li a:first-letter {text-transform: uppercase;}
-.bar-tools a.save{padding-left: 30px;background-image: url(../img/icon-save-15.png); background-repeat: no-repeat; background-position: 9px center;}
+.bar-tools a.icon{padding-left: 30px;background-repeat: no-repeat; background-position: 8px center;}
+a.icon.save{background-image: url(../img/icon-save-15.png);}
+a.icon.cut{background-image: url(../img/icon-cut-15.png) ;}
+a.icon.plus{background-image: url(../img/icon-plus-15.png);}
+
 /* Home */
 .w650{width: 650px;}
 .our-images{margin-bottom: 38px; text-align: center; font-size: 12px; font-family: 'Lato'; font-weight : bold; font-style : italic; color: #58595A;}
 .home-images{position: relative; margin-bottom: 24px;}
-a.home-arrow{ -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);-moz-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);background: url(../img/home-arrow.png) no-repeat center center #fff;cursor: pointer;display: block;height: 78px;left: 436px;position: absolute;top: -25px;width: 78px;z-index: 10;-webkit-border-radius: 39px;-moz-border-radius: 39px;border-radius: 39px;}
+.arrow-wrap.home-arrow{display: block; top:0; margin-top: -26px; left: 50%; margin-left: -39px;}
 .home-images .col-left{float: left;}
 .home-images .col-left img{width: 667px;}
 .home-images .col-right{float: right;}
@@ -80,7 +91,7 @@
 li .toggle{display: none;}
 li:hover .toggle{ display:block; }
 
-.tools{  text-align:right; width:100%; position:absolute; bottom:0; left:0;  background: rgba(255, 255, 255, .8);}
+.tools{  text-align:right; width:100%; position:absolute; bottom:0; left:0;  background: rgba(255, 255, 255, .9);}
 .tools ul{ display: inline-block;padding: 6px 10px 6px 0;}
 .tools a{display: inline-block; width: 25px; height: 25px; line-height: 25px; text-align: center;}
 .tools li{float: left; margin-left: 6px;}
@@ -112,15 +123,22 @@
 .tools-2 a img{vertical-align: middle;}
 .tools-2 li{ float: left; margin-right: 6px;}
 
-.tools-sprite{display:inline-block; width:25px; height: 25px; background-image: url(../img/tools-sprite.png); background-repeat: no-repeat;}
-.tools-sprite.twitter:hover{background-position: 0 0;}
-.tools-sprite.twitter{background-position: 0 -25px;}
-.tools-sprite.facebook{background-position: -30px -25px;}
-.tools-sprite.facebook:hover{background-position: -30px 0;}
-.tools-sprite.plus{background-position: -60px -25px;}
-.tools-sprite.plus:hover{background-position: -60px 0;}
-.tools-sprite.cut{background-position: -90px -25px;}
-.tools-sprite.cut:hover{background-position: -90px 0;}
+.pagination{ margin-bottom: 12px;}
+.pagination li{float: left; font-size: 14px;font-family: 'Lato'; margin-right: 14px;}
+.pagination li.curent, .pagination li:hover{font-weight: bold;}
+.tool{display:inline-block; width:25px; height: 25px; background-image: url(../img/tools-sprite.png); background-repeat: no-repeat; vertical-align: middle;}
+.tool.twitter:hover{background-position: 0 0;}
+.tool.twitter{background-position: 0 -25px;}
+.tool.facebook{background-position: -30px -25px;}
+.tool.facebook:hover{background-position: -30px 0;}
+.tool.plus{background-position: -60px -25px;}
+.tool.plus:hover{background-position: -60px 0;}
+.tool.cut{background-position: -90px -25px;}
+.tool.cut:hover{background-position: -90px 0;}
+.tool.save{background-position: -115px -25px;}
+.tool.save:hover{background-position: -115px 0;}
+.tool.trash{background-position: -140px -25px;}
+.tool.trash:hover{background-position: -140px 0;}
 
 .box-shadow{ -webkit-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);-moz-box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);box-shadow: 1px 1px 5px rgba(50, 50, 50, 0.75);}
 .popin-wrap{width: 100%; height: 100%; position: fixed; z-index: 100; background-color:rgba(255,255,255,.7);}
@@ -139,6 +157,22 @@
 .block{display: block;}
 .popin-wrap, .popin{display: none;}
 
+.edition{background-color: #eee; padding: 0 28px; margin-bottom: 64px;}
+.edition .slideshow{ min-height: 80px; position:relative; padding: 24px 0;  text-align: center;}
+.slideshow .arrow-wrap{display: block;}
+.slideshow .left-arrow{left: 0;}
+.slideshow .right-arrow{right: 0;}
+.slideshow .share{position: absolute; bottom: 24px; right: 0;}
+.slideshow .share li{float: left; margin-left: 8px;}
+.image-wrap{display: inline-block;}
+.info{font-family: 'Lato'; font-size: 14px; text-align: left;}
+.info th{color: #777; min-width: 140px; }
+.info td{color: #000; line-height: 16px;}
+.info table{border-collapse:separate;border-spacing:0 5px;}
+.box-edition{padding: 16px 0; border-bottom: 1px solid #CCC;}
+.box-edition h3{color: #777;font-family: 'Lato'; font-size: 14px; margin-bottom: 6px;}
+.list-key-search a{display: inline-block;}
+
 /* imported */
 .center-image {
     text-align: center;
Binary file src/egonomy/static/egonomy/img/border-bar-tools.png has changed
Binary file src/egonomy/static/egonomy/img/icon-arrow-enter.png has changed
Binary file src/egonomy/static/egonomy/img/icon-cut-15.png has changed
Binary file src/egonomy/static/egonomy/img/icon-mosaic.png has changed
Binary file src/egonomy/static/egonomy/img/icon-plus-15.png has changed
Binary file src/egonomy/static/egonomy/img/tools-sprite.png has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src/egonomy/static/egonomy/js/slideshow.js	Wed Jun 19 16:19:01 2013 +0200
@@ -0,0 +1,102 @@
+$(function() {
+    
+    var currentSlide = 0, jqwin = $(window), jqcanvas = $(".imagezone"), jqcaption = $(".caption"), margin = 50;
+    
+    function showSlide() {
+        var slide = slides[currentSlide];
+        
+        jqcaption.find("h2").text(slide.title);
+        jqcaption.find("h3").text(slide.author);
+        jqcaption.find("p").text(slide.description);
+        
+        if (slide.image && slide.image.width) {
+            var ww = jqwin.width(),
+                wh = jqwin.height(),
+                cw = jqcaption.outerWidth(),
+                ch = jqcaption.outerHeight(),
+                wi = slide.image.width,
+                hi = slide.image.height,    
+                w1 = ww - 2 * margin, w2 = w1 - cw
+                h1 = wh - 2 * margin, h2 = h1 - ch,
+                ra = Math.max(
+                    Math.min((h1 / hi), (w2 / wi)),
+                    Math.min((h2 / hi), (w1 / wi))
+                ),
+                wa = wi * ra, ha = hi * ra,
+                xa = ww - margin - wa,
+                rb = Math.max(ww / wi, wh / hi),
+                wb = wi * rb, hb = hi * rb,
+                xb = (ww - wb) / 2, yb = (wh - hb) / 2;
+            jqcanvas.attr({
+                width: ww,
+                height: wh
+            });
+                            
+            var ctx = jqcanvas[0].getContext('2d');
+            
+            ctx.drawImage(slide.image, xb, yb, wb, hb);
+            
+            ctx.fillStyle = 'rgba(255,255,255,.65)';
+            ctx.fillRect(0,0,ww,wh);
+            
+            ctx.fillStyle = 'rgba(0,0,0,.3)';
+            ctx.fillRect(margin + 4, wh - margin - ch + 4, cw, ch);
+            ctx.fillRect(xa + 4, margin + 4, wa, ha);
+            
+            ctx.drawImage(slide.image, xa, margin, wa, ha);
+            
+        }
+    }
+    
+    function nextSlide() {
+        currentSlide = (currentSlide + 1) % slides.length;
+        showSlide();
+        return false;
+    }
+    
+    function prevSlide() {
+        currentSlide = (currentSlide > 0 ? currentSlide - 1 : slides.length - 1);
+        showSlide();
+        return false;
+    }
+    
+    var hideTO, isInArrow = false, jqArrows = $(".arrow-wrap");
+    function resetTO() {
+        clearTimeout(hideTO);
+        if (!isInArrow) {
+            hideTO = setTimeout(function() {
+                jqArrows.hide();
+            }, 1000);
+        }
+    }
+    $("body").mousemove(function() {
+        jqArrows.show();
+        resetTO();
+        return false;
+    });
+    jqArrows.hover(function() {
+        isInArrow = true;
+        resetTO();
+    }, function() {
+        isInArrow = false;
+        resetTO();
+    });
+    
+    $(".left-arrow").click(prevSlide);
+    $(".right-arrow").click(nextSlide);
+    
+    slides.forEach(function(slide, k) {
+        slide.image = new Image();
+        slide.image.onload = function() {
+            if (k === currentSlide) {
+                showSlide();
+            }
+        };
+        slide.image.src = imgurlbase + slide.url;
+    });
+    
+    showSlide();
+    
+    jqwin.resize(showSlide);
+    
+});
\ No newline at end of file
--- a/src/egonomy/templates/egonomy_all_fragments.html	Wed Jun 19 15:15:05 2013 +0200
+++ b/src/egonomy/templates/egonomy_all_fragments.html	Wed Jun 19 16:19:01 2013 +0200
@@ -27,7 +27,7 @@
                 </ul>
                 {% endif %}
             </div>
-            {% if nb_pages > 1 %}<p>{% build_pagination nb_pages cur_page_nb url_pagination "clickable" %}</p>{% endif %}
+            {% if nb_pages > 1 %}{% build_pagination nb_pages cur_page_nb url_pagination "" %}{% endif %}
             <ul class="list-projets-4 clearfix">
               {% for frg in results %}
                 <li class="subcol-fourth {% if user_fragments and username = user.username %}options_on_hover{% endif %}">
--- a/src/egonomy/templates/egonomy_all_pictures.html	Wed Jun 19 15:15:05 2013 +0200
+++ b/src/egonomy/templates/egonomy_all_pictures.html	Wed Jun 19 16:19:01 2013 +0200
@@ -25,7 +25,7 @@
                 </ul>
                 {% endif %}
             </div>
-            {% if nb_pages > 1 %}<p>{% build_pagination nb_pages cur_page_nb url_pagination "clickable" %}</p>{% endif %}
+            {% if nb_pages > 1 %}{% build_pagination nb_pages cur_page_nb url_pagination "clickable" %}{% endif %}
             <ul class="list-projets-4 clearfix">
               {% for img in results %}
                 <li class="subcol-fourth">
--- a/src/egonomy/templates/egonomy_newbase.html	Wed Jun 19 15:15:05 2013 +0200
+++ b/src/egonomy/templates/egonomy_newbase.html	Wed Jun 19 16:19:01 2013 +0200
@@ -27,7 +27,7 @@
             <div class="col-right">
                 <ul class="head-login clearfix">
                     <li>
-                        <form class="search-form column column-third" action="{% if search_fragment %}{% url 'all_fragments' %}{% else %}{% url 'all_pictures' %}{% endif %}" method="GET">
+                        <form action="{% if search_fragment %}{% url 'all_fragments' %}{% else %}{% url 'all_pictures' %}{% endif %}" method="GET">
                             <p>
 			                    <input class="search-field" type="search" placeholder="{% trans 'Search' %}" id="id_search" name="search"/>
 			                    <select class="search-type">
@@ -48,7 +48,7 @@
                 </ul>
                 <nav>
                     <ul class="nav clearfix">
-                        <li><a href="{% url 'home' %}">explorer</a></li>
+                        <li><a href="{% url 'all_pictures' %}">explorer</a></li>
                         <li><span class="dot-10"></span></li>
                         <li><a href="#">collectionner</a></li>
                         <!--li><span class="dot-10"></span></li>
@@ -58,9 +58,9 @@
                     </ul>
                   {% if user.is_authenticated %}
                     <ul class="sub-nav clearfix">
-                        <li><a href="#" class="active">mes collections</a></li>
+                        <li><a href="#" {% if user_collections %}class="active"{% endif %}>mes collections</a></li>
                         <li><span class="dot-6"></span></li>
-                        <li><a href="{% url 'user_fragments' username=user %}">mes fragments</a></li>
+                        <li><a href="{% url 'user_fragments' username=user %}" {% if user_fragments %}class="active"{% endif %}>mes fragments</a></li>
                         <!--li><span class="dot-6"></span></li>
                         <li><a href="#">mon profil</a></li-->
                     </ul>
--- a/src/egonomy/templates/partial/all_pictures_pagination.html	Wed Jun 19 15:15:05 2013 +0200
+++ b/src/egonomy/templates/partial/all_pictures_pagination.html	Wed Jun 19 16:19:01 2013 +0200
@@ -1,21 +1,23 @@
 {% if nb_pages %}
-	{% comment %}alors ? : {{begin}} - {{middle}} - {{end}} - nb_pages = {{nb_pages}}<br/>
-	alors ? : nb_pages = {{nb_pages}} - range = {{nb_pages}} - cur_page_nb = {{cur_page_nb}}<br/>{% endcomment %}
-	{% if 1 < cur_page_nb %}<a class="{{a_class}}" alt="prev" href="{{ url_pagination }}&page={{cur_page_nb|add:'-1'}}">&lt;&lt;</a>&nbsp;{% endif %}
-	{% for i in begin %}
-	  {% if i == cur_page_nb %}{{i}}{% else %}<a class="{{a_class}}" alt="{{i}}" href="{{ url_pagination }}&page={{i}}">{{i}}</a>{% endif %}&nbsp;
-	{% endfor %}
-	{% if middle %}
-	...
-	{% for i in middle %}
-	  {% if i == cur_page_nb %}{{i}}{% else %}<a class="{{a_class}}" alt="{{i}}" href="{{ url_pagination }}&page={{i}}">{{i}}</a>{% endif %}&nbsp;
-	{% endfor %}
-	{% endif %}
-	{% if end %}
-    ...
-    {% for i in end %}
-      {% if i == cur_page_nb %}{{i}}{% else %}<a class="{{a_class}}" alt="{{i}}" href="{{ url_pagination }}&page={{i}}">{{i}}</a>{% endif %}&nbsp;
+    {% comment %}alors ? : {{begin}} - {{middle}} - {{end}} - nb_pages = {{nb_pages}}<br/>
+    alors ? : nb_pages = {{nb_pages}} - range = {{nb_pages}} - cur_page_nb = {{cur_page_nb}}<br/>{% endcomment %}
+    <ul class="pagination clearfix">
+    {% if 1 < cur_page_nb %}<li><a class="{{a_class}}" alt="prev" href="{{ url_pagination }}&page={{cur_page_nb|add:'-1'}}">&lt;</a></li>{% endif %}
+    {% for i in begin %}
+      {% if i == cur_page_nb %}<li class="curent">{{i}}</li>{% else %}<li><a class="{{a_class}}" alt="{{i}}" href="{{ url_pagination }}&page={{i}}">{{i}}</a></li>{% endif %}
+    {% endfor %}
+    {% if middle %}
+    <li>...</li>
+    {% for i in middle %}
+      {% if i == cur_page_nb %}<li class="curent">{{i}}</li>{% else %}<li><a class="{{a_class}}" alt="{{i}}" href="{{ url_pagination }}&page={{i}}">{{i}}</a></li>{% endif %}
     {% endfor %}
     {% endif %}
-	{% if cur_page_nb < nb_pages %}<a class="{{a_class}}" alt="next" href="{{ url_pagination }}&page={{cur_page_nb|add:'1'}}">&gt;&gt;</a>{% endif %}
+    {% if end %}
+    <li>...</li>
+    {% for i in end %}
+      {% if i == cur_page_nb %}<li class="curent">{{i}}</li>{% else %}<li><a class="{{a_class}}" alt="{{i}}" href="{{ url_pagination }}&page={{i}}">{{i}}</a></li>{% endif %}
+    {% endfor %}
+    {% endif %}
+    {% if cur_page_nb < nb_pages %}<li><a class="{{a_class}}" alt="next" href="{{ url_pagination }}&page={{cur_page_nb|add:'1'}}">&gt;</a>{% endif %}
+    </ul>
 {% endif %}
\ No newline at end of file
--- a/src/egonomy/templates/partial/fragment_in_list.html	Wed Jun 19 15:15:05 2013 +0200
+++ b/src/egonomy/templates/partial/fragment_in_list.html	Wed Jun 19 16:19:01 2013 +0200
@@ -1,28 +1,28 @@
 {% load i18n %}
 {# we suppose here that "frg" has been defined #}
+{% with fragment=frg.object|default:frg %}{# frg.object in search case, frg otherwise #}
 <a href="{% url 'view_fragment' fragment_pk=frg.pk %}">
 <div class="center-image">
     <div class="image-and-fragment square-fragment-225">
-        {% with fragment=frg.object|default:frg %}{# frg.object in search case, frg otherwise #}
         {% with image=fragment.image.info.image_file %}
         {% include "partial/fragment_only.html" %}
         {% endwith %}
-        {% endwith %}
     </div>
 </div>
 </a>
 <div class="content">
     <a href="{% url 'view_fragment' fragment_pk=frg.pk %}"><h3>{{ frg.highlighted.title|first|safe|default:frg.title }}</h3></a>
-    <p>{% trans "Fragment from" %} {% with fragment=frg.object|default:frg %}<a href="{% url 'annotate_picture' image_id=fragment.image.id %}">{{ fragment.image.metadata.titre|default:_("No title") }}{% endwith %}</a>
+    <p>{% trans "Fragment from" %} <a href="{% url 'annotate_picture' image_id=fragment.image.id %}">{{ fragment.image.metadata.titre|default:_("No title") }}</a>
     <br/>{% trans "Annotated by" %} <strong><a href="{% url 'user_fragments' username=frg.author %}">{{ frg.author }}</a></strong></p>
 </div>
 <div class="tools-2">
     <ul class="clearfix">
-        <li><a class="tools-sprite twitter" href="#"></a></li>
-        <li><a class="tools-sprite facebook" href="#"></a></li>
-        <li><a class="tools-sprite plus" href="#"></a></li>
-        <li><a class="tools-sprite cut" href="#"></a></li>
+        <li><a class="tool twitter" href="#" title="{% trans 'Share on Twitter'%}"></a></li>
+        <li><a class="tool facebook" href="#" title="{% trans 'Share on Facebook'%}"></a></li>
+        <li><a class="tool plus" href="#" title="+"></a></li>
+        <li><a class="tool cut" href="{% url 'create_fragment' image_id=fragment.image.id %}" title="{% trans 'Create a fragment'%}"></a></li>
     </ul>
 </div>
 {# en attendant la poubelle #}
-{% if user_fragments and username = user.username %}<a href="{% url 'delete_fragment' %}?fragment_pk={{ frg.pk }}&next={% url 'user_fragments' user.username %}%3Fpage%3D{{ cur_page_nb }}" onclick="return confirm('{% trans "Do you really want to delete this fragment ? Warning : this action est irreversible." %}')" title="{% trans "Delete this fragment" %}"><div class="top_right_options"></div></a>{% endif %}
\ No newline at end of file
+{% if user_fragments and username = user.username %}<a href="{% url 'delete_fragment' %}?fragment_pk={{ frg.pk }}&next={% url 'user_fragments' user.username %}%3Fpage%3D{{ cur_page_nb }}" onclick="return confirm('{% trans "Do you really want to delete this fragment ? Warning : this action est irreversible." %}')" title="{% trans "Delete this fragment" %}"><div class="top_right_options"></div></a>{% endif %}
+{% endwith %}
\ No newline at end of file
--- a/src/egonomy/templates/partial/image_in_list.html	Wed Jun 19 15:15:05 2013 +0200
+++ b/src/egonomy/templates/partial/image_in_list.html	Wed Jun 19 16:19:01 2013 +0200
@@ -31,9 +31,9 @@
 </a>
 <div class="tools-2">
     <ul class="clearfix">
-        <li><a class="tools-sprite twitter" href="#"></a></li>
-        <li><a class="tools-sprite facebook" href="#"></a></li>
-        <li><a class="tools-sprite plus" href="#"></a></li>
-        <li><a class="tools-sprite cut" href="{% url 'create_fragment' image_id=img.id %}"></a></li>
+        <li><a class="tool twitter" href="#" title="{% trans 'Share on Twitter'%}"></a></li>
+        <li><a class="tool facebook" href="#" title="{% trans 'Share on Facebook'%}"></a></li>
+        <li><a class="tool plus" href="#" title="+"></a></li>
+        <li><a class="tool cut" href="{% url 'create_fragment' image_id=img.id %}" title="{% trans 'Create a fragment'%}"></a></li>
     </ul>
 </div>
\ No newline at end of file