# HG changeset patch
# User Anthony Ly <anthonyly.com@gmail.com>
# Date 1351506114 -3600
# Node ID 5229a85e53e7796f6062d8c88921c226f2f045be
# Parent  fab11ecbceb16b04ce32cd5ea5c658283dbfc210
maj des bouttons/segments annotations articles

diff -r fab11ecbceb1 -r 5229a85e53e7 crea/icons_periplus.psd
Binary file crea/icons_periplus.psd has changed
diff -r fab11ecbceb1 -r 5229a85e53e7 integration/css/style.css
--- a/integration/css/style.css	Tue Oct 23 16:15:42 2012 +0200
+++ b/integration/css/style.css	Mon Oct 29 11:21:54 2012 +0100
@@ -1,4 +1,3 @@
-
 body{
 	background-color: #e9ecf0;
 	height: 100%;
@@ -140,7 +139,8 @@
 	position: absolute;
 	left: 727px;
 }
-div.login-wrap form p, div.login-wrap h2{
+div.login-wrap form p, 
+div.login-wrap h2{
 	margin-bottom: 4px;
 }
 div.login-wrap form input{
@@ -582,8 +582,8 @@
   border-right: none;
 }
 div.articles div.article h2{
-	font-size: 22px;
-	margin-bottom: 6px;
+	font-size: 20px;
+	margin-bottom: 2px;
 }
 div.articles div.article h2 a{
 	text-decoration: none;
@@ -597,16 +597,23 @@
 	line-height: 10px;
 	margin-bottom: 10px;
 }
-div.articles div.article p.number-article{
-	margin-bottom: 10px;
+p.number-article{
+	font-size: 10px;
+	overflow: hidden;
 }
-div.articles div.article p.author a:hover, div.articles div.article p.number-article a:hover{
+p.author a:hover, 
+p.number-article a:hover{
 	text-decoration: none;
 }
-div.articles div.article p.author, div.articles div.article p.author a,
-div.articles div.article p.number-article, div.articles div.article p.number-article a{
+p.author, 
+p.author a,
+p.number-article, 
+p.number-article a{
 	color: #c51810;
 }
+p.number-article{
+	line-height: 22px;
+}
 div.article div.article-content{
 	width: 168px;
 	min-height: 105px;
@@ -633,7 +640,43 @@
 div.article div.article-content p.resume{
 
 }
-	/* annotations */
+.article-annotations{
+	width: 160px;
+	height: 4px;
+	border:1px solid #edebed;
+	background-color: #898989;
+	margin-bottom: 6px;
+}
+.article-annotations a{
+	float: left;
+	display: block;
+	width: 100%;
+	height: 4px;
+	background-image: url(../img/border-right-annotation-value.png);
+	background-repeat: repeat-y;
+	background-position: right top;
+}
+.article-annotations a.blue{
+	background-color: #429dd4;
+}
+.article-annotations a.green{
+	background-color: #73c263;
+}
+.article-annotations a.red{
+	background-color: #d64752;
+}
+.add-annotation{
+	width: 22px;
+	height: 17px;
+	display: block;
+	background: url(../img/article-annotations-add-comment-sprite.png) no-repeat 0 0;
+	float: right;
+	margin-right: 14px;
+}
+.add-annotation:hover{
+	background-position: -22px 0;
+}
+	/* annotations 
 div.article div.article-content ul.annotations{
 	margin-top: 10px;
 }
@@ -723,7 +766,7 @@
 div.article div.article-content ul.annotations li a.value.unknow span.inner-signe{
 	background-position: -27px 3px;
 }
-
+*/
 
 /*pagination*/
 div.pagination{
diff -r fab11ecbceb1 -r 5229a85e53e7 integration/gabarit.html
--- a/integration/gabarit.html	Tue Oct 23 16:15:42 2012 +0200
+++ b/integration/gabarit.html	Mon Oct 29 11:21:54 2012 +0100
@@ -168,55 +168,15 @@
                                 <div class="inner-article clearfix">
                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="number-article">
-                                        <a href="#">48 articles</a>
+                                        <a href="#">48 articles | 320 annotations </a>
+                                        <a class="add-annotation" href="#"></a>
                                     </p>
-                                    <div class="article-content">
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                       
-                                        </p>
 
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                       
-                                            <ul class="annotations clearfix">
-                                               <li>
-                                                    <a title="xx annotations sur ce cluster" class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a title="Ajouter une annotations sur ce cluster" class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
+                                    <div class="article-annotations">
+                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
+                                        <a title="title" class="green" href="#" style="width:20%;"></a>
+                                        <a title="title" class="red" href="#" style="width:60%;"></a>
                                     </div>
-                                </div>
-                            </div><!--article -->
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
-                                    <p class="number-article">
-                                        <a href="#">48 articles</a>
-                                    </p>
                                     <div class="article-content">
                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                                     tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
@@ -230,78 +190,6 @@
                                                 <li><a href="#">Karachi crise</a></li>
                                             </ul>
                                         </ul>
-                                       
-                                            <ul class="annotations clearfix">
-                                               <li>
-                                                    <a title="xx annotations sur ce cluster" class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a title="Ajouter une annotations sur ce cluster" class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
-                                    </div>
-                                </div>
-                            </div><!--article -->
-                            <div class="article">
-                                <div class="inner-article clearfix">
-                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
-                                    <p class="number-article">
-                                        <a href="#">48 articles</a>
-                                    </p>
-                                    <div class="article-content">
-                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
-                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
-                       
-                                        </p>
-
-                                        <ul class="links">
-                                            <ul>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                                <li><a href="#">Karachi crise</a></li>
-                                            </ul>
-                                        </ul>
-                                       
-                                            <ul class="annotations clearfix">
-                                               <li>
-                                                    <a title="xx annotations sur ce cluster" class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a title="Ajouter une annotations sur ce cluster" class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
-                                            </ul>
                                     </div>
                                 </div>
                             </div><!--article -->
@@ -310,8 +198,15 @@
                                 <div class="inner-article clearfix">
                                     <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
                                     <p class="number-article">
-                                        <a href="#">48 articles</a>
+                                        <a href="#">48 articles | 320 annotations </a>
+                                        <a class="add-annotation" href="#"></a>
                                     </p>
+
+                                    <div class="article-annotations">
+                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
+                                        <a title="title" class="green" href="#" style="width:20%;"></a>
+                                        <a title="title" class="red" href="#" style="width:60%;"></a>
+                                    </div>
                                     <div class="article-content">
                                         <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
                                         <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -326,32 +221,126 @@
                                                 <li><a href="#">Karachi crise</a></li>
                                             </ul>
                                         </ul>
-                                       
-                                       <ul class="annotations clearfix">
-                                               <li>
-                                                    <a title="xx annotations sur ce cluster" class="comment number" href="#"> 
-                                                        <span class="number-value">354</span>
-                                                    </a>
-                                                </li>
-                                               <li><a title="Ajouter une annotations sur ce cluster" class="comment add" href="#"></a></li>
-                                               <li><a class="value plus" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:20%;"></span>
-                                                </a></li>
-                                                <li><a class="value moins" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:40%;"></span>
-                                                </a></li>
-                                                <li><a class="value egal" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:70%;"></span>
-                                                </a></li>
-                                                <li><a class="value unknow" href="#">
-                                                    <span class="inner-signe"></span>
-                                                    <span class="inner-value" style="height:100%;"></span>
-                                                </a></li>
+                                    </div>
+                                </div>
+                            </div><!--article -->
+                            <div class="article">
+                                <div class="inner-article clearfix">
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+                                    <p class="number-article">
+                                        <a href="#">48 articles | 320 annotations </a>
+                                        <a class="add-annotation" href="#"></a>
+                                    </p>
+
+                                    <div class="article-annotations">
+                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
+                                        <a title="title" class="green" href="#" style="width:20%;"></a>
+                                        <a title="title" class="red" href="#" style="width:60%;"></a>
+                                    </div>
+                                    <div class="article-content">
+                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                       
+                                        </p>
+
+                                        <ul class="links">
+                                            <ul>
+                                                <li><a href="#">Karachi crise</a></li>
+                                                <li><a href="#">Karachi crise</a></li>
+                                                <li><a href="#">Karachi crise</a></li>
+                                            </ul>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div><!--article -->
+
+                            <div class="article">
+                                <div class="inner-article clearfix">
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+                                    <p class="number-article">
+                                        <a href="#">48 articles | 320 annotations </a>
+                                        <a class="add-annotation" href="#"></a>
+                                    </p>
+
+                                    <div class="article-annotations">
+                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
+                                        <a title="title" class="green" href="#" style="width:20%;"></a>
+                                        <a title="title" class="red" href="#" style="width:40%;"></a>
+                                    </div>
+                                    <div class="article-content">
+                                        <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                                    tempor incididunt ut labore et dolore magna aliqua. 
+                       
+                                        </p>
+
+                                        <ul class="links">
+                                            <ul>
+                                                <li><a href="#">Karachi crise</a></li>
+                                                <li><a href="#">Karachi crise</a></li>
+                                                <li><a href="#">Karachi crise</a></li>
                                             </ul>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div><!--article -->
+                            <div class="article">
+                                <div class="inner-article clearfix">
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+                                    <p class="number-article">
+                                        <a href="#">48 articles | 320 annotations </a>
+                                        <a class="add-annotation" href="#"></a>
+                                    </p>
 
+                                    <div class="article-annotations">
+                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
+                                        <a title="title" class="green" href="#" style="width:20%;"></a>
+                                        <a title="title" class="red" href="#" style="width:60%;"></a>
+                                    </div>
+                                    <div class="article-content">
+                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+                       
+                                        </p>
+
+                                        <ul class="links">
+                                            <ul>
+                                                <li><a href="#">Karachi crise</a></li>
+                                                <li><a href="#">Karachi crise</a></li>
+                                                <li><a href="#">Karachi crise</a></li>
+                                            </ul>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div><!--article -->
+
+                            <div class="article">
+                                <div class="inner-article clearfix">
+                                    <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
+                                    <p class="number-article">
+                                        <a href="#">48 articles | 320 annotations </a>
+                                        <a class="add-annotation" href="#"></a>
+                                    </p>
+
+                                    <div class="article-annotations">
+                                        <a title="title" class="blue" href="#" style="width:20%;"></a>
+                                        <a title="title" class="green" href="#" style="width:20%;"></a>
+                                        <a title="title" class="red" href="#" style="width:60%;"></a>
+                                    </div>
+                                    <div class="article-content">
+                                        <div class="article-visuel-wrap"><img class="article-visuel" src="img/visuel-article.jpg" alt="" /></div>
+                                        <p class="resume">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+                                    tempor incididunt ut labore et dolore magna aliqua. 
+                       
+                                        </p>
+
+                                        <ul class="links">
+                                            <ul>
+                                                <li><a href="#">Karachi crise</a></li>
+                                                <li><a href="#">Karachi crise</a></li>
+                                                <li><a href="#">Karachi crise</a></li>
+                                            </ul>
+                                        </ul>
                                     </div>
                                 </div>
                             </div><!--article -->
diff -r fab11ecbceb1 -r 5229a85e53e7 integration/img/article-annotations-add-comment-sprite.png
Binary file integration/img/article-annotations-add-comment-sprite.png has changed
diff -r fab11ecbceb1 -r 5229a85e53e7 integration/img/border-right-annotation-value.png
Binary file integration/img/border-right-annotation-value.png has changed