Binary file crea/boutons-periplus-al.psd has changed
--- a/integration/article.html Wed Oct 10 15:16:59 2012 +0200
+++ b/integration/article.html Wed Oct 10 18:18:39 2012 +0200
@@ -133,7 +133,7 @@
<div class="voile-left"></div>
<div class="voile-right"></div>
</div>
- </div>
+ </div><!-- frise -->
<div class="cluster-wrap">
<a href="#" class="cluster-arrow arrow-left"></a>
<a href="#" class="cluster-arrow arrow-right"></a>
--- a/integration/css/style.css Wed Oct 10 15:16:59 2012 +0200
+++ b/integration/css/style.css Wed Oct 10 18:18:39 2012 +0200
@@ -506,7 +506,7 @@
width: 177px;
padding-left: 12px;
border-right: 1px solid #e0dde0;
- min-height: 200px;
+ min-height: 250px;
}
div.article:nth-child(4n+4) div.inner-article{
border-right: none;
@@ -556,6 +556,98 @@
div.article div.article-content p.resume{
}
+ /* annotations */
+div.article div.article-content ul.annotations{
+ margin-top: 10px;
+}
+div.article div.article-content ul.annotations li{
+ float: left;
+ margin-right: 4px;
+}
+div.article div.article-content ul.annotations li a{
+ display: block;
+ text-decoration: none;
+}
+div.article div.article-content ul.annotations li a.comment{
+ width: 24px;
+ height: 20px;
+ background-image: url(../img/article-annotations-comment-sprite.png);
+ background-repeat: no-repeat;
+}
+div.article div.article-content ul.annotations li a.comment.number{
+ position: relative;
+ background-position: 0 0;
+}
+div.article div.article-content ul.annotations li a.comment.number:hover{
+ position: relative;
+ background-position: 0 -20px;
+}
+div.article div.article-content ul.annotations li a.comment.number span.number-value{
+ color: #FFF;
+ font-size: 9px;
+ position: absolute;
+ width: 18px;
+ height: 11px;
+ line-height: 11px;
+ text-align: center;
+ top: 0;
+ right: 0;
+}
+div.article div.article-content ul.annotations li a.comment.add{
+ position: relative;
+ background-position: -25px 0;
+}
+div.article div.article-content ul.annotations li a.comment.add:hover{
+ position: relative;
+ background-position: -25px -20px;
+}
+div.article div.article-content ul.annotations li a.value{
+ position: relative;
+ width: 9px;
+ height: 20px;
+ display: block;
+}
+div.article div.article-content ul.annotations li a.value span.inner-value,
+div.article div.article-content ul.annotations li a.value span.inner-signe{
+ position: absolute;
+ background-image: url(../img/article-annotations-value-sprite.png);
+ background-repeat: no-repeat;
+ display: block;
+ width: 9px;
+ height: 100%;
+ bottom: 0;
+ left: 0;
+}
+div.article div.article-content ul.annotations li a.value span.inner-signe{
+ background-position: 0 3px;
+ z-index: 2;
+}
+div.article div.article-content ul.annotations li a.value.plus span.inner-value{
+ background-position: 0 -17px;
+}
+div.article div.article-content ul.annotations li a.value.plus span.inner-signe{
+ background-position: 0 3px;
+}
+div.article div.article-content ul.annotations li a.value.moins span.inner-value{
+ background-position: -9px -17px;
+}
+div.article div.article-content ul.annotations li a.value.moins span.inner-signe{
+ background-position: -9px 3px;
+}
+div.article div.article-content ul.annotations li a.value.egal span.inner-value{
+ background-position: -18px -17px;
+}
+div.article div.article-content ul.annotations li a.value.egal span.inner-signe{
+ background-position: -18px 3px;
+}
+div.article div.article-content ul.annotations li a.value.unknow span.inner-value{
+ background-position: -27px -17px;
+}
+div.article div.article-content ul.annotations li a.value.unknow span.inner-signe{
+ background-position: -27px 3px;
+}
+
+
/*pagination*/
div.pagination{
height: 35px;
@@ -656,7 +748,32 @@
bottom: 0;
right: 0;
}
-
+div.actu div.links ul li{
+ float: left;
+ margin: 0 0 1px 1px;
+}
+div.actu div.links ul li a{
+ display: block;
+ width: 25px;
+ height: 25px;
+ background-color: #007dad;
+ background-repeat: no-repeat;
+}
+div.actu div.links ul li a:hover{
+ background-color: #4FA3C4;
+}
+div.actu div.links ul li a.trash{
+ background-image: url(../img/home-button-trash.png);
+ background-position: 6px 4px;
+}
+div.actu div.links ul li a.file{
+ background-image: url(../img/home-button-file.png);
+ background-position: 4px 6px;
+}
+div.actu div.links ul li a.comment{
+ background-image: url(../img/home-button-comment.png);
+ background-position: 2px 5px;
+}
/* FRISE */
div.frise{
--- a/integration/gabarit.html Wed Oct 10 15:16:59 2012 +0200
+++ b/integration/gabarit.html Wed Oct 10 18:18:39 2012 +0200
@@ -12,6 +12,7 @@
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
+ <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.24.custom.css">
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
</head>
<body>
@@ -128,8 +129,11 @@
<div class="content-wrap clearfix">
<div class="frise">
-
- </div>
+ <div id="slider-range">
+ <div class="voile-left"></div>
+ <div class="voile-right"></div>
+ </div>
+ </div><!-- frise -->
<div class="content clearfix">
@@ -175,6 +179,30 @@
</ul>
</ul>
+ <ul class="annotations clearfix">
+ <li>
+ <a class="comment number" href="#">
+ <span class="number-value">354</span>
+ </a>
+ </li>
+ <li><a 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 -->
@@ -188,7 +216,7 @@
<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. Ut enim ad minim veniam,
+ tempor incididunt ut labore et dolore magna aliqua.
</p>
@@ -200,6 +228,31 @@
</ul>
</ul>
+ <ul class="annotations clearfix">
+ <li>
+ <a class="comment number" href="#">
+ <span class="number-value">354</span>
+ </a>
+ </li>
+ <li><a 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 -->
@@ -223,6 +276,30 @@
</ul>
</ul>
+ <ul class="annotations clearfix">
+ <li>
+ <a class="comment number" href="#">
+ <span class="number-value">354</span>
+ </a>
+ </li>
+ <li><a 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 -->
@@ -236,7 +313,7 @@
<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. Ut enim ad minim veniam,
+ tempor incididunt ut labore et dolore magna aliqua.
</p>
@@ -248,6 +325,31 @@
</ul>
</ul>
+ <ul class="annotations clearfix">
+ <li>
+ <a class="comment number" href="#">
+ <span class="number-value">354</span>
+ </a>
+ </li>
+ <li><a 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 -->
@@ -271,6 +373,30 @@
</ul>
</ul>
+ <ul class="annotations clearfix">
+ <li>
+ <a class="comment number" href="#">
+ <span class="number-value">354</span>
+ </a>
+ </li>
+ <li><a 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 -->
@@ -284,7 +410,7 @@
<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. Ut enim ad minim veniam,
+ tempor incididunt ut labore et dolore magna aliqua.
</p>
@@ -296,6 +422,31 @@
</ul>
</ul>
+ <ul class="annotations clearfix">
+ <li>
+ <a class="comment number" href="#">
+ <span class="number-value">354</span>
+ </a>
+ </li>
+ <li><a 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 -->
@@ -319,6 +470,30 @@
</ul>
</ul>
+ <ul class="annotations clearfix">
+ <li>
+ <a class="comment number" href="#">
+ <span class="number-value">354</span>
+ </a>
+ </li>
+ <li><a 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 -->
@@ -332,7 +507,7 @@
<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. Ut enim ad minim veniam,
+ tempor incididunt ut labore et dolore magna aliqua.
</p>
@@ -344,9 +519,35 @@
</ul>
</ul>
+ <ul class="annotations clearfix">
+ <li>
+ <a class="comment number" href="#">
+ <span class="number-value">354</span>
+ </a>
+ </li>
+ <li><a 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><!-- articles -->
@@ -398,6 +599,7 @@
<!-- JavaScript -->
<script src="js/vendor/jquery-1.8.0.min.js"></script>
<script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
+ <script src="js/vendor/dragslider.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
--- a/integration/home.html Wed Oct 10 15:16:59 2012 +0200
+++ b/integration/home.html Wed Oct 10 18:18:39 2012 +0200
@@ -12,6 +12,7 @@
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
+ <link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.24.custom.css">
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
</head>
<body>
@@ -128,8 +129,11 @@
<div class="content-wrap clearfix">
<div class="frise">
-
- </div>
+ <div id="slider-range">
+ <div class="voile-left"></div>
+ <div class="voile-right"></div>
+ </div>
+ </div><!-- frise -->
<div class="content clearfix">
@@ -161,7 +165,11 @@
<div class="inner-actu">
<h2> <a href="#">Affaires Bettecourt</a></h2>
<div class="links">
- <a href="#"><img src="img/icon-rep.jpg" alt=""/> </a>
+ <ul>
+ <li><a href="#" class="trash"></a></li>
+ <li><a href="#" class="file"></a></li>
+ <li><a href="#" class="comment"></a></li>
+ </ul>
</div>
</div>
</div><!-- actu -->
@@ -172,7 +180,11 @@
<div class="inner-actu">
<h2> <a href="#">Affaires Bettecourt</a></h2>
<div class="links">
- <a href="#"><img src="img/icon-rep.jpg" alt=""/> </a>
+ <ul>
+ <li><a href="#" class="trash"></a></li>
+ <li><a href="#" class="file"></a></li>
+ <li><a href="#" class="comment"></a></li>
+ </ul>
</div>
</div>
</div><!-- actu -->
@@ -184,7 +196,11 @@
<div class="inner-actu">
<h2> <a href="#">Affaires Bettecourt</a></h2>
<div class="links">
- <a href="#"><img src="img/icon-rep.jpg" alt=""/> </a>
+ <ul>
+ <li><a href="#" class="trash"></a></li>
+ <li><a href="#" class="file"></a></li>
+ <li><a href="#" class="comment"></a></li>
+ </ul>
</div>
</div>
</div><!-- actu -->
@@ -195,7 +211,11 @@
<div class="inner-actu">
<h2> <a href="#">Affaires Bettecourt</a></h2>
<div class="links">
- <a href="#"><img src="img/icon-rep.jpg" alt=""/> </a>
+ <ul>
+ <li><a href="#" class="trash"></a></li>
+ <li><a href="#" class="file"></a></li>
+ <li><a href="#" class="comment"></a></li>
+ </ul>
</div>
</div>
</div><!-- actu -->
@@ -206,7 +226,11 @@
<div class="inner-actu">
<h2> <a href="#">Affaires Bettecourt</a></h2>
<div class="links">
- <a href="#"><img src="img/icon-rep.jpg" alt=""/> </a>
+ <ul>
+ <li><a href="#" class="trash"></a></li>
+ <li><a href="#" class="file"></a></li>
+ <li><a href="#" class="comment"></a></li>
+ </ul>
</div>
</div>
</div><!-- actu -->
@@ -217,7 +241,11 @@
<div class="inner-actu">
<h2> <a href="#">Affaires Bettecourt</a></h2>
<div class="links">
- <a href="#"><img src="img/icon-rep.jpg" alt=""/> </a>
+ <ul>
+ <li><a href="#" class="trash"></a></li>
+ <li><a href="#" class="file"></a></li>
+ <li><a href="#" class="comment"></a></li>
+ </ul>
</div>
</div>
</div><!-- actu -->
@@ -268,6 +296,7 @@
<!-- JavaScript -->
<script src="js/vendor/jquery-1.8.0.min.js"></script>
<script src="js/vendor/jquery-ui-1.8.24.custom.min.js"></script>
+ <script src="js/vendor/dragslider.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
Binary file integration/img/article-annotations-comment-sprite.png has changed
Binary file integration/img/article-annotations-value-sprite.png has changed
Binary file integration/img/home-button-comment.png has changed
Binary file integration/img/home-button-file.png has changed
Binary file integration/img/home-button-trash.png has changed
--- a/integration/js/main.js Wed Oct 10 15:16:59 2012 +0200
+++ b/integration/js/main.js Wed Oct 10 18:18:39 2012 +0200
@@ -120,15 +120,19 @@
$(".voile-right").width(widthFrise-valSlider2);
},
slide: function( event, ui ) {
- //if(ui.values[1]-ui.values[ 0 ]!= diffSlide){
- // return false;
-
- //}
+
+ /*//bloquer les curseur
+ if(ui.values[1]-ui.values[ 0 ]!= diffSlide){
+ return false;
+ }
+ */
$(".voile-left").width(ui.values[ 0 ]);
$(".voile-right").width(widthFrise-ui.values[ 1 ]);
},
change: function( event, ui ){
- //console.log("change")
+ //ici on récup les valeurs après un slide
+ var value1 = ui.values[ 0 ];
+ var value2 = ui.values[ 1 ];
}
});
