Binary file crea/icons_periplus.psd has changed
--- 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{
--- 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 -->
Binary file integration/img/article-annotations-add-comment-sprite.png has changed
Binary file integration/img/border-right-annotation-value.png has changed
