--- 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 -->