--- a/integration/article.html Tue Oct 09 16:31:25 2012 +0200
+++ b/integration/article.html Wed Oct 10 15:16:59 2012 +0200
@@ -26,9 +26,10 @@
<h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
<form action="#">
<p >
+ <a href="#" class="photo"></a>
<input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
<input type="submit" value="" class="recherche-submit"/>
- <a class="plus-button" href="#"><img src="img/plus-button.jpg" alt=""/> </a>
+ <a class="plus-button" href="#"> </a>
</p>
</form>
</div>
@@ -191,11 +192,11 @@
<form action="#" class="filtre-date">
<p>
<label for="">De :</label>
- <input type="text" />
+ <input type="text" name="dateBegin" class="dateBegin" />
</p>
<p>
<label for="">à :</label>
- <input type="text" />
+ <input type="text" name="dateEnd" class="dateEnd" />
</p>
</form>
<h4>Catégories :</h4>
@@ -435,6 +436,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/css/style.css Tue Oct 09 16:31:25 2012 +0200
+++ b/integration/css/style.css Wed Oct 10 15:16:59 2012 +0200
@@ -24,6 +24,7 @@
background: url(../img/header-bg.jpg) no-repeat 0 0 #FFF;
margin-bottom: 1px;
}
+ /*recherche-wrap*/
div.recherche-wrap{
position: absolute;
left: 324px;
@@ -34,14 +35,27 @@
}
div.recherche-wrap input.input-recherche{
- width: 238px;
+ width: 218px;
height: 24px;
- padding: 0 6px;
+ padding: 0 30px 0 6px;
border: 1px solid black;
margin-right: 2px;
}
div.recherche-wrap form p input, div.recherche-wrap form p a{
float: left;
+
+}
+div.recherche-wrap form p{
+ position: relative;
+}
+div.recherche-wrap form p a.photo{
+ position: absolute;
+ width: 18px;
+ height: 18px;
+ background: url(../img/photo.jpg) no-repeat 2px 4px;
+ left: 230px;
+ top: 2px;
+ z-index: 2;
}
div.recherche-wrap input.recherche-submit{
width: 54px;
@@ -49,8 +63,24 @@
cursor: pointer;
border: none;
margin-right: 6px;
- background: url(../img/zoom-button.jpg) no-repeat 0 0;
+ background-color: #000;
+ background-image: url(../img/zoom-button.png);
+ background-repeat: no-repeat;
+ background-position: 20px 6px;
}
+div.recherche-wrap p a.plus-button{
+ width: 30px;
+ height: 26px;
+ display: block;
+ background-color: #000;
+ background-image: url(../img/plus-button.png);
+ background-repeat: no-repeat;
+ background-position: 8px 6px;
+}
+div.recherche-wrap p a.plus-button:hover, div.recherche-wrap input.recherche-submit:hover{
+ background-color: #333;
+}
+
ul.header-menu{
position: absolute;
height: 34px;
@@ -109,6 +139,9 @@
text-decoration: none;
font-size: 10px;
}
+p.password-lost a:hover{
+ text-decoration: underline;
+}
/*dossier documentaire*/
div.dossier-documentaire{
@@ -687,7 +720,7 @@
width: 204px;
}
div.dossier-similaire div.widget{
-
+ margin-bottom: 10px;
}
div.dossier-similaire div.widget h3{
border-bottom: 1px solid #007dad;
--- a/integration/documentaire.html Tue Oct 09 16:31:25 2012 +0200
+++ b/integration/documentaire.html Wed Oct 10 15:16:59 2012 +0200
@@ -26,9 +26,10 @@
<h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
<form action="#">
<p >
+ <a href="#" class="photo"></a>
<input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
<input type="submit" value="" class="recherche-submit"/>
- <a class="plus-button" href="#"><img src="img/plus-button.jpg" alt=""/> </a>
+ <a class="plus-button" href="#"> </a>
</p>
</form>
</div>
@@ -167,11 +168,11 @@
<form action="#" class="filtre-date">
<p>
<label for="">De :</label>
- <input type="text" />
+ <input type="text" name="dateBegin" class="dateBegin" />
</p>
<p>
<label for="">à :</label>
- <input type="text" />
+ <input type="text" name="dateEnd" class="dateEnd" />
</p>
</form>
<h4>Catégories :</h4>
@@ -193,7 +194,12 @@
<ul>
<li class="item-dossier clearfix">
<div class="dossier-col-left">
- <h2><a href="#">L'affaire Sarkozy »</a></h2>
+ <div class="header-dossier">
+ <h2>
+ <a href="#">L'affaire Sarkozy »</a>
+ </h2>
+ </div>
+
<div class="dossier-content">
<img src="img/visuel-article.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
@@ -318,7 +324,17 @@
<li><a href="#">« Election 2012 »</a> par TomeJ</li>
</ul>
</div>
- </div>
+ </div><!-- widget -->
+ <div class="widget">
+ <h3><a href="#">TOUTES MES ANNOTATIONS</a></h3>
+ <div class="widget-inner">
+ <ul>
+ <li><a href="#">« Election 2012 »</a> par TomeJ</li>
+ <li><a href="#">« Election 2012 »</a> par TomeJ</li>
+ <li><a href="#">« Election 2012 »</a> par TomeJ</li>
+ </ul>
+ </div>
+ </div><!-- widget -->
</div><!-- dossier-similaire -->
</div><!-- content-right -->
</div>
@@ -364,6 +380,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/gabarit.html Tue Oct 09 16:31:25 2012 +0200
+++ b/integration/gabarit.html Wed Oct 10 15:16:59 2012 +0200
@@ -25,9 +25,10 @@
<h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
<form action="#">
<p >
+ <a href="#" class="photo"></a>
<input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
<input type="submit" value="" class="recherche-submit"/>
- <a class="plus-button" href="#"><img src="img/plus-button.jpg" alt=""/> </a>
+ <a class="plus-button" href="#"> </a>
</p>
</form>
</div>
@@ -137,38 +138,7 @@
<div class="content-left">
<div class="widget-wrap">
- <div class="widget filtre">
- <h3><a href="">FILTRES</a></h3>
- <div class="widget-inner">
- <form action="#" class="filtre-date">
- <p>
- <label for="">De :</label>
- <input type="text" />
- </p>
- <p>
- <label for="">à :</label>
- <input type="text" />
- </p>
- </form>
- <h4>Catégories :</h4>
- <form action="#" class="filtre-categorie">
- <p><input type="checkbox"> <label for="">International</label> </p>
- <p><input type="checkbox"> <label for="">International</label> </p>
- <p><input type="checkbox"> <label for="">International</label> </p>
- </form>
- </div>
- </div><!-- filtre -->
- <div class="widget links">
- <h3><a href="">DOSSIER ASSOCIES</a></h3>
- <div class="widget-inner">
- <ul>
- <li><a href="#">« Corruption »</a></li>
- <li><a href="#">« Corruption »</a></li>
- <li><a href="#">« Corruption »</a></li>
- <li><a href="#">« Corruption »</a></li>
- </ul>
- </div>
- </div><!-- links -->
+
<div class="widget affichage">
<h3><a href="">AFFICHAGE</a></h3>
<div class="widget-inner">
--- a/integration/home.html Tue Oct 09 16:31:25 2012 +0200
+++ b/integration/home.html Wed Oct 10 15:16:59 2012 +0200
@@ -25,9 +25,10 @@
<h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
<form action="#">
<p >
+ <a href="#" class="photo"></a>
<input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
<input type="submit" value="" class="recherche-submit"/>
- <a class="plus-button" href="#"><img src="img/plus-button.jpg" alt=""/> </a>
+
</p>
</form>
</div>
@@ -129,30 +130,7 @@
<div class="frise">
</div>
- <div class="cluster-wrap">
- <a href="#" class="cluster-arrow arrow-left"></a>
- <a href="#" class="cluster-arrow arrow-right"></a>
- <div class="cluster-containment">
- <div class="cluster-visible">
-
- <ul class="cluster">
- <li><a href="#">Début</a></li>
- <li><a href="#">affaire de Karachi</a></li>
- <li><a href="#">Syrie</a></li>
- <li><a href="#">affaire de Karachi</a></li>
- <li><a href="#">Syrie</a></li>
- <li><a href="#">affaire de Karachi</a></li>
- <li><a href="#">Syrie</a></li>
- <li><a href="#">affaire de Karachi</a></li>
- <li><a href="#">Syrie</a></li>
- <li><a href="#">affaire de Karachi</a></li>
- <li><a href="#">Syrie</a></li>
- <li><a href="#">Fin</a></li>
- </ul>
- </div>
- </div>
-
- </div>
+
<div class="content clearfix">
@@ -160,38 +138,7 @@
<div class="content-left">
<div class="widget-wrap">
- <div class="widget filtre">
- <h3><a href="">FILTRES</a></h3>
- <div class="widget-inner">
- <form action="#" class="filtre-date">
- <p>
- <label for="">De :</label>
- <input type="text" />
- </p>
- <p>
- <label for="">à :</label>
- <input type="text" />
- </p>
- </form>
- <h4>Catégories :</h4>
- <form action="#" class="filtre-categorie">
- <p><input type="checkbox"> <label for="">International</label> </p>
- <p><input type="checkbox"> <label for="">International</label> </p>
- <p><input type="checkbox"> <label for="">International</label> </p>
- </form>
- </div>
- </div><!-- filtre -->
- <div class="widget links">
- <h3><a href="">DOSSIER ASSOCIES</a></h3>
- <div class="widget-inner">
- <ul>
- <li><a href="#">« Corruption »</a></li>
- <li><a href="#">« Corruption »</a></li>
- <li><a href="#">« Corruption »</a></li>
- <li><a href="#">« Corruption »</a></li>
- </ul>
- </div>
- </div><!-- links -->
+
<div class="widget affichage">
<h3><a href="">AFFICHAGE</a></h3>
<div class="widget-inner">
Binary file integration/img/photo.jpg has changed
Binary file integration/img/plus-button.png has changed
Binary file integration/img/zoom-button.png has changed
--- a/integration/js/main.js Tue Oct 09 16:31:25 2012 +0200
+++ b/integration/js/main.js Wed Oct 10 15:16:59 2012 +0200
@@ -75,6 +75,17 @@
$(this).addClass('active');
}
});
+ //DATE PICKER
+ $(".dateBegin").datepicker({
+ onSelect: function( selectedDate ) {
+ $( ".dateEnd" ).datepicker( "option", "minDate", selectedDate );
+ }
+ });
+ $(".dateEnd").datepicker({
+ onSelect: function( selectedDate ) {
+ $( ".dateBegin" ).datepicker( "option", "maxDate", selectedDate );
+ }
+ });
//VOLET DOCUMENTAIRE
$("div.dossier-documentaire").hide();
$("div.header a.dossier-button").bind("click",function(e){
@@ -94,22 +105,33 @@
//FRISE
//valeurs init du slider à définir
var valSlider1 = 75;
- var valSlider2 = 500;
+ var valSlider2 = 300;
+ var diffSlide = valSlider2-valSlider1;
var widthFrise = $('.frise').width();
- $( "#slider-range" ).slider({
+
+ $( "#slider-range" ).dragslider({
range: true,
+ rangeDrag: true,
min: 0,
max: widthFrise,
values: [ valSlider1, valSlider2 ],
create: function(event, ui){
-
$(".voile-left").width(valSlider1);
$(".voile-right").width(widthFrise-valSlider2);
},
slide: function( event, ui ) {
+ //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")
}
});
+
+
+
});//jQuery
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/js/vendor/dragslider.js Wed Oct 10 15:16:59 2012 +0200
@@ -0,0 +1,104 @@
+//this code solves this problem: http://stackoverflow.com/questions/5955343/
+
+(function( $, undefined ) {
+
+$.widget("ui.dragslider", $.ui.slider, {
+
+ options: $.extend({},$.ui.slider.prototype.options,{rangeDrag:false}),
+
+ _create: function() {
+ $.ui.slider.prototype._create.apply(this,arguments);
+ this._rangeCapture = false;
+ },
+
+ _mouseCapture: function( event ) {
+ var o = this.options;
+
+ if ( o.disabled ) return false;
+
+ if(event.target == this.range.get(0) && o.rangeDrag == true && o.range == true) {
+ this._rangeCapture = true;
+ this._rangeStart = null;
+ }
+ else {
+ this._rangeCapture = false;
+ }
+
+ $.ui.slider.prototype._mouseCapture.apply(this,arguments);
+
+ if(this._rangeCapture == true) {
+ this.handles.removeClass("ui-state-active").blur();
+ }
+
+ return true;
+ },
+
+ _mouseStop: function( event ) {
+ this._rangeStart = null;
+ return $.ui.slider.prototype._mouseStop.apply(this,arguments);
+ },
+
+ _slide: function( event, index, newVal ) {
+ if(!this._rangeCapture) {
+ return $.ui.slider.prototype._slide.apply(this,arguments);
+ }
+
+ if(this._rangeStart == null) {
+ this._rangeStart = newVal;
+ }
+
+ var oldValLeft = this.options.values[0],
+ oldValRight = this.options.values[1],
+ slideDist = newVal - this._rangeStart,
+ newValueLeft = oldValLeft + slideDist,
+ newValueRight = oldValRight + slideDist,
+ allowed;
+
+ if ( this.options.values && this.options.values.length ) {
+ if(newValueRight > this._valueMax() && slideDist > 0) {
+ slideDist -= (newValueRight-this._valueMax());
+ newValueLeft = oldValLeft + slideDist;
+ newValueRight = oldValRight + slideDist;
+ }
+
+ if(newValueLeft < this._valueMin()) {
+ slideDist += (this._valueMin()-newValueLeft);
+ newValueLeft = oldValLeft + slideDist;
+ newValueRight = oldValRight + slideDist;
+ }
+
+ if ( slideDist != 0 ) {
+ newValues = this.values();
+ newValues[ 0 ] = newValueLeft;
+ newValues[ 1 ] = newValueRight;
+
+ // A slide can be canceled by returning false from the slide callback
+ allowed = this._trigger( "slide", event, {
+ handle: this.handles[ index ],
+ value: slideDist,
+ values: newValues
+ } );
+
+ if ( allowed !== false ) {
+ this.values( 0, newValueLeft, true );
+ this.values( 1, newValueRight, true );
+ }
+ this._rangeStart = newVal;
+ }
+ }
+
+
+
+ },
+
+
+ /*
+ //only for testing purpose
+ value: function(input) {
+ console.log("this is working!");
+ $.ui.slider.prototype.value.apply(this,arguments);
+ }
+ */
+});
+
+})(jQuery);
\ No newline at end of file
--- a/integration/mediapart/une.html Tue Oct 09 16:31:25 2012 +0200
+++ b/integration/mediapart/une.html Wed Oct 10 15:16:59 2012 +0200
@@ -31,9 +31,10 @@
<form action="#">
<p >
+ <a href="#" class="photo"></a>
<input name="recherche" placeholder="Rechercher" class="input-recherche" type="text" />
<input type="submit" value="" class="recherche-submit"/>
- <a class="plus-button" href="#"><img src="une_files/header/plus-button.jpg" alt=""/> </a>
+ <a class="plus-button" href="#"> </a>
</p>
</form>
</div>
Binary file integration/mediapart/une_files/header/photo.jpg has changed
Binary file integration/mediapart/une_files/header/plus-button.png has changed
--- a/integration/mediapart/une_files/header/style.css Tue Oct 09 16:31:25 2012 +0200
+++ b/integration/mediapart/une_files/header/style.css Wed Oct 10 15:16:59 2012 +0200
@@ -49,20 +49,74 @@
ul.navigation-dossier{
position: absolute;
right: 0;
- top: 0;
+ top: 9px;
+}
+ul.navigation-dossier li{
+ float: left;
+
+
+
+}
+ul.navigation-dossier li a{
+ -webkit-border-radius: 2px;
+ -moz-border-radius: 2px;
+ border-radius: 2px;
+ border: 1px solid #197caa;
+ height: 24px;
+ display: block;
+}
+ul.navigation-dossier li a:hover{
+ border: 1px solid #000;
}
+ul.navigation-dossier li a.file {
+ font-size: 18px;
+ font-weight: bold;
+ color: #197caa;
+ padding: 0 4px 0 20px;
+ line-height: 24px;
+}
+ul.navigation-dossier li a.prev, ul.navigation-dossier li a.top, ul.navigation-dossier li a.next{
+ width: 26px;
+ height: 24px;
+ background-position: 5px 4px;
+ background-repeat: no-repeat;
+}
+ul.navigation-dossier li a.prev{
+ background-image: url(header-left-arrow.jpg);
+}
+ul.navigation-dossier li a.next{
+ background-image: url(header-right-arrow.jpg);
+}
+ul.navigation-dossier li a.top{
+ background-position: 9px 4px;
+ background-image: url(header-top-arrow.jpg);
+}
+
+div.recherche-wrap form p{
+ margin: 0;
+ position: relative;
+}
+
div.recherche-wrap input.input-recherche{
- width: 238px;
+ width: 218px;
height: 24px;
- padding: 0 6px;
+ padding: 0 30px 0 6px;
border: 1px solid black;
margin-right: 2px;
}
-div.recherche-wrap form p{
- margin: 0;
-}
div.recherche-wrap form p input, div.recherche-wrap form p a{
float: left;
+
+}
+
+div.recherche-wrap form p a.photo{
+ position: absolute;
+ width: 18px;
+ height: 18px;
+ background: url(photo.jpg) no-repeat 2px 4px;
+ left: 230px;
+ top: 2px;
+ z-index: 2;
}
div.recherche-wrap input.recherche-submit{
width: 54px;
@@ -70,7 +124,22 @@
cursor: pointer;
border: none;
margin-right: 6px;
- background: url(zoom-button.jpg) no-repeat 0 0;
+ background-color: #000;
+ background-image: url(zoom-button.png);
+ background-repeat: no-repeat;
+ background-position: 20px 6px;
+}
+div.recherche-wrap p a.plus-button{
+ width: 30px;
+ height: 26px;
+ display: block;
+ background-color: #000;
+ background-image: url(plus-button.png);
+ background-repeat: no-repeat;
+ background-position: 8px 6px;
+}
+div.recherche-wrap p a.plus-button:hover, div.recherche-wrap input.recherche-submit:hover{
+ background-color: #333;
}
div.header div.nav{
Binary file integration/mediapart/une_files/header/zoom-button.png has changed
