--- a/integration/article.html Mon Oct 15 16:40:39 2012 +0200
+++ b/integration/article.html Tue Oct 16 14:23:59 2012 +0200
@@ -8,7 +8,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Article</title>
-
+
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/style.css" />
@@ -28,8 +28,8 @@
<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="#"> </a>
+ <input type="submit" title="Rechercher" value="" class="recherche-submit"/>
+ <a class="plus-button" title="Annoter" href="#"> </a>
</p>
</form>
</div>
@@ -63,7 +63,7 @@
<h2>MES DOSSIERS</h2>
<ul>
<li class="clearfix">
- <a href="#">
+ <a title="Voir le dossier" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
@@ -72,7 +72,7 @@
</a>
</li>
<li class="clearfix">
- <a href="#">
+ <a title="Voir le dossier" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
@@ -81,7 +81,7 @@
</a>
</li>
<li class="clearfix">
- <a href="#">
+ <a title="Voir le dossier" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
@@ -90,7 +90,7 @@
</a>
</li>
<li class="clearfix">
- <a href="#">
+ <a title="Nouveau dossier documentaire" href="#">
<img src="img/documentaire-nouveau-dossier.jpg" alt="" />
<span class="documentaire-texte">
<h3>NOUVEAU DOSSIER</h3>
@@ -100,11 +100,11 @@
</li>
</ul>
- <a class="documentaire-lien" href="#"></a>
+ <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
<h2></h2>
<ul>
<li class="clearfix">
- <a href="#">
+ <atitle="Voir le dossier" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
@@ -113,7 +113,7 @@
</a>
</li>
<li class="clearfix">
- <a href="#">
+ <a title="Voir le dossier" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
@@ -122,17 +122,15 @@
</a>
</li>
</ul>
- <a class="documentaire-lien" href="#"></a>
+ <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
</div>
</div><!--dossier-documentaire-->
</div><!-- header -->
<div class="content-wrap clearfix">
<div class="frise">
- <div id="slider-range">
- <div class="voile-left"></div>
- <div class="voile-right"></div>
- </div>
+ <div class="streamgraph"></div>
+ <div id="slider-range"></div>
</div><!-- frise -->
<div class="cluster-wrap">
<a href="#" class="cluster-arrow arrow-left"></a>
@@ -141,18 +139,18 @@
<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>
+ <li><a title="Afficher le cluster" href="#">Début</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">affaire de Karachi</a></li>
+ <li><a title="Afficher le cluster" href="#">Syrie</a></li>
+ <li><a title="Afficher le cluster" href="#">Fin</a></li>
</ul>
</div>
</div>
@@ -171,7 +169,7 @@
<form action="#" method="">
<p class="clearfix">
<input type="text" name="" placeholder="Rechercher" />
- <input type="submit" value="" />
+ <input type="submit" title="Rechercher" value="" />
</p>
</form>
</div>
@@ -223,8 +221,8 @@
<div class="widget-inner">
<ul class="clearfix">
- <li><a class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
- <li><a class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
+ <li><a title="Passer en vue Treemap" class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
+ <li><a title="Passer en vue Liste" class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
</ul>
</div>
</div><!-- affichage -->
@@ -237,7 +235,7 @@
<div class="article">
<div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
@@ -253,7 +251,7 @@
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
@@ -268,7 +266,7 @@
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
@@ -284,7 +282,7 @@
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
@@ -299,7 +297,7 @@
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
@@ -315,7 +313,7 @@
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
@@ -330,7 +328,7 @@
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
@@ -346,7 +344,7 @@
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
@@ -361,7 +359,7 @@
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
@@ -377,7 +375,7 @@
</div><!--article -->
<div class="article">
<div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="author">
<a href="#">23 JANVIER 2024</a><br/>
by <a href="#">Jean Dujardin</a>
@@ -437,8 +435,11 @@
<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/lib/raphael-min.js"></script>
+ <script src="js/lib/underscore-min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
+ <script src="js/streamgraph.js"></script>
</body>
</html>
--- a/integration/css/style.css Mon Oct 15 16:40:39 2012 +0200
+++ b/integration/css/style.css Tue Oct 16 14:23:59 2012 +0200
@@ -291,6 +291,18 @@
right: 0;
background: url(../img/cluster-arrows.jpg) no-repeat -19px 0;
}
+a.cluster-arrow.arrow-right:hover{
+ background-position: -19px -22px;
+}
+a.cluster-arrow.arrow-right:active{
+ background-position: -19px -44px;
+}
+a.cluster-arrow.arrow-left:hover{
+ background-position: 0 -22px;
+}
+a.cluster-arrow.arrow-left:active{
+ background-position: 0 -44px;
+}
/*content*/
div.content{
height: 100%;
@@ -300,6 +312,7 @@
padding: 1px 0;
}
+
div.content-left,div.content-right{
float: left;
}
@@ -754,8 +767,8 @@
}
div.actu div.links ul li a{
display: block;
- width: 25px;
- height: 25px;
+ width: 28px;
+ height: 28px;
background-color: #007dad;
background-repeat: no-repeat;
}
@@ -764,15 +777,27 @@
}
div.actu div.links ul li a.trash{
background-image: url(../img/home-button-trash.png);
- background-position: 6px 4px;
+ background-position: 8px 5px;
}
div.actu div.links ul li a.file{
background-image: url(../img/home-button-file.png);
- background-position: 4px 6px;
+ background-position: 2px 6px;
+ text-decoration: none;
+ position: relative;
+}
+div.actu div.links ul li a.file span{
+ color: #0F85B2;
+ display: block;
+ font-size: 11px;
+ left: 8px;
+ position: absolute;
+ text-align: center;
+ top: 6px;
+ width: 18px;
}
div.actu div.links ul li a.comment{
background-image: url(../img/home-button-comment.png);
- background-position: 2px 5px;
+ background-position: 4px 6px;
}
/* FRISE */
@@ -945,4 +970,8 @@
}
li.item-dossier div.dossier-col-right ul.annotations li a.edit:hover{
background-position: -37px -60px;
+}
+/*datepicker*/
+.ui-datepicker.ui-widget.ui-widget-content.ui-helper-clearfix.ui-corner-all{
+ font-size: 13px;
}
\ No newline at end of file
--- a/integration/documentaire.html Mon Oct 15 16:40:39 2012 +0200
+++ b/integration/documentaire.html Tue Oct 16 14:23:59 2012 +0200
@@ -28,8 +28,8 @@
<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="#"> </a>
+ <input type="submit" title="Rechercher" value="" class="recherche-submit"/>
+ <a class="plus-button" title="Annoter" href="#"> </a>
</p>
</form>
</div>
@@ -63,7 +63,7 @@
<h2>MES DOSSIERS</h2>
<ul>
<li class="clearfix">
- <a href="#">
+ <a title="Voir le dossier" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
@@ -72,7 +72,7 @@
</a>
</li>
<li class="clearfix">
- <a href="#">
+ <a title="Voir le dossier" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
@@ -81,7 +81,7 @@
</a>
</li>
<li class="clearfix">
- <a href="#">
+ <a title="Voir le dossier" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
@@ -90,7 +90,7 @@
</a>
</li>
<li class="clearfix">
- <a href="#">
+ <a title="Nouveau dossier documentaire" href="#">
<img src="img/documentaire-nouveau-dossier.jpg" alt="" />
<span class="documentaire-texte">
<h3>NOUVEAU DOSSIER</h3>
@@ -100,11 +100,11 @@
</li>
</ul>
- <a class="documentaire-lien" href="#"></a>
+ <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
<h2></h2>
<ul>
<li class="clearfix">
- <a href="#">
+ <atitle="Voir le dossier" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
@@ -113,7 +113,7 @@
</a>
</li>
<li class="clearfix">
- <a href="#">
+ <a title="Voir le dossier" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
@@ -122,7 +122,7 @@
</a>
</li>
</ul>
- <a class="documentaire-lien" href="#"></a>
+ <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
</div>
</div><!--dossier-documentaire-->
</div><!-- header -->
@@ -147,7 +147,7 @@
<form action="#" method="">
<p class="clearfix">
<input type="text" name="" placeholder="Rechercher" />
- <input type="submit" value="" />
+ <input title="Rechercher" type="submit" value="" />
</p>
</form>
</div>
@@ -196,7 +196,7 @@
<div class="dossier-col-left">
<div class="header-dossier">
<h2>
- <a href="#">L'affaire Sarkozy »</a>
+ <a title="Lire l'article" href="#">L'affaire Sarkozy »</a>
</h2>
</div>
@@ -227,7 +227,7 @@
</li><!-- item-dossier -->
<li class="item-dossier clearfix">
<div class="dossier-col-left">
- <h2><a href="#">L'affaire Sarkozy »</a></h2>
+ <h2><a title="Lire l'article" href="#">L'affaire Sarkozy »</a></h2>
<div class="dossier-content">
<img src="img/visuel-article.jpg" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
--- a/integration/gabarit.html Mon Oct 15 16:40:39 2012 +0200
+++ b/integration/gabarit.html Tue Oct 16 14:23:59 2012 +0200
@@ -25,11 +25,11 @@
<div class="recherche-wrap">
<h1><img src="img/mediapart-by-periplus.jpg" alt="" /></h1>
<form action="#">
- <p>
+ <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="#"> </a>
+ <input type="submit" title="Rechercher" value="" class="recherche-submit"/>
+ <a class="plus-button" title="Annoter" href="#"> </a>
</p>
</form>
</div>
@@ -63,7 +63,7 @@
<h2>MES DOSSIERS</h2>
<ul>
<li class="clearfix">
- <a href="#">
+ <a title="Voir le dossier" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
@@ -72,7 +72,7 @@
</a>
</li>
<li class="clearfix">
- <a href="#">
+ <a title="Voir le dossier" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
@@ -81,7 +81,7 @@
</a>
</li>
<li class="clearfix">
- <a href="#">
+ <a title="Voir le dossier" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
@@ -90,7 +90,7 @@
</a>
</li>
<li class="clearfix">
- <a href="#">
+ <a title="Nouveau dossier documentaire" href="#">
<img src="img/documentaire-nouveau-dossier.jpg" alt="" />
<span class="documentaire-texte">
<h3>NOUVEAU DOSSIER</h3>
@@ -100,11 +100,11 @@
</li>
</ul>
- <a class="documentaire-lien" href="#"></a>
+ <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
<h2></h2>
<ul>
<li class="clearfix">
- <a href="#">
+ <atitle="Voir le dossier" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
@@ -113,7 +113,7 @@
</a>
</li>
<li class="clearfix">
- <a href="#">
+ <a title="Voir le dossier" href="#">
<img src="img/documentaire-visuel.jpg" alt="" />
<span class="documentaire-texte">
<h3>Terrorisme</h3>
@@ -122,17 +122,15 @@
</a>
</li>
</ul>
- <a class="documentaire-lien" href="#"></a>
+ <a class="documentaire-lien" title="Voir les dossiers" href="#"></a>
</div>
</div><!--dossier-documentaire-->
</div><!-- header -->
<div class="content-wrap clearfix">
<div class="frise">
- <div id="slider-range">
- <div class="voile-left"></div>
- <div class="voile-right"></div>
- </div>
+ <div class="streamgraph"></div>
+ <div id="slider-range"></div>
</div><!-- frise -->
@@ -144,12 +142,12 @@
<div class="widget-wrap">
<div class="widget affichage">
- <h3><a href="">AFFICHAGE</a></h3>
+ <h3><a href="#">AFFICHAGE</a></h3>
<div class="widget-inner">
<ul class="clearfix">
- <li><a class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
- <li><a class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
+ <li><a title="Passer en vue Treemap" class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
+ <li><a title="Passer en vue Liste" class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
</ul>
</div>
</div><!-- affichage -->
@@ -161,7 +159,7 @@
<div class="articles">
<div class="article">
<div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="author">
48 articles
</p>
@@ -181,11 +179,11 @@
<ul class="annotations clearfix">
<li>
- <a class="comment number" href="#">
+ <a title="xx annotations sur ce cluster" class="comment number" href="#">
<span class="number-value">354</span>
</a>
</li>
- <li><a class="comment add" href="#"></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>
@@ -209,7 +207,7 @@
<div class="article">
<div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
+ <h2><a title="Lire l'article" href="#"> Affaire Lorem »</a></h2>
<p class="author">
48 articles
</p>
@@ -230,108 +228,11 @@
<ul class="annotations clearfix">
<li>
- <a class="comment number" href="#">
+ <a title="xx annotations sur ce cluster" 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 class="article">
- <div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
- <p class="author">
- 48 articles
- </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 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 class="article">
- <div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
- <p class="author">
- 48 articles
- </p>
- <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>
-
- <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 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>
@@ -353,200 +254,7 @@
</div>
</div>
</div><!--article -->
- <div class="article">
- <div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
- <p class="author">
- 48 articles
- </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 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 class="article">
- <div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
- <p class="author">
- 48 articles
- </p>
- <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>
-
- <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 class="article">
- <div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
- <p class="author">
- 48 articles
- </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 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 class="article">
- <div class="inner-article clearfix">
- <h2><a href="#"> Affaire Lorem »</a></h2>
- <p class="author">
- 48 articles
- </p>
- <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>
-
- <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 -->
@@ -600,8 +308,11 @@
<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/lib/raphael-min.js"></script>
+ <script src="js/lib/underscore-min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
+ <script src="js/streamgraph.js"></script>
</body>
</html>
--- a/integration/home.html Mon Oct 15 16:40:39 2012 +0200
+++ b/integration/home.html Tue Oct 16 14:23:59 2012 +0200
@@ -142,12 +142,12 @@
<div class="widget-wrap">
<div class="widget affichage">
- <h3><a href="">AFFICHAGE</a></h3>
+ <h3><a href="#">AFFICHAGE</a></h3>
<div class="widget-inner">
<ul class="clearfix">
- <li><a class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
- <li><a class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
+ <li><a title="Passer en vue Treemap" class="treemap active" href="#"><span class="visuel"></span><span class="fonction">Treemap</span> </a></li>
+ <li><a title="Passer en vue Liste" class="liste" href="#"><span class="visuel"></span><span class="fonction">Liste</span> </a></li>
</ul>
</div>
</div><!-- affichage -->
@@ -164,9 +164,9 @@
<h2> <a href="#">Affaires Bettecourt</a></h2>
<div class="links">
<ul>
- <li><a href="#" class="trash"></a></li>
- <li><a href="#" class="file"></a></li>
- <li><a href="#" class="comment"></a></li>
+ <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
+ <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
+ <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
</ul>
</div>
</div>
@@ -179,9 +179,9 @@
<h2> <a href="#">Affaires Bettecourt</a></h2>
<div class="links">
<ul>
- <li><a href="#" class="trash"></a></li>
- <li><a href="#" class="file"></a></li>
- <li><a href="#" class="comment"></a></li>
+ <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
+ <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
+ <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
</ul>
</div>
</div>
@@ -195,9 +195,9 @@
<h2> <a href="#">Affaires Bettecourt</a></h2>
<div class="links">
<ul>
- <li><a href="#" class="trash"></a></li>
- <li><a href="#" class="file"></a></li>
- <li><a href="#" class="comment"></a></li>
+ <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
+ <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
+ <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
</ul>
</div>
</div>
@@ -210,9 +210,9 @@
<h2> <a href="#">Affaires Bettecourt</a></h2>
<div class="links">
<ul>
- <li><a href="#" class="trash"></a></li>
- <li><a href="#" class="file"></a></li>
- <li><a href="#" class="comment"></a></li>
+ <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
+ <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
+ <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
</ul>
</div>
</div>
@@ -225,9 +225,9 @@
<h2> <a href="#">Affaires Bettecourt</a></h2>
<div class="links">
<ul>
- <li><a href="#" class="trash"></a></li>
- <li><a href="#" class="file"></a></li>
- <li><a href="#" class="comment"></a></li>
+ <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
+ <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
+ <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
</ul>
</div>
</div>
@@ -240,9 +240,9 @@
<h2> <a href="#">Affaires Bettecourt</a></h2>
<div class="links">
<ul>
- <li><a href="#" class="trash"></a></li>
- <li><a href="#" class="file"></a></li>
- <li><a href="#" class="comment"></a></li>
+ <li><a href="#" title="Supprimer le cluster" class="trash"></a></li>
+ <li><a href="#" title="317 Annotations sur ce cluster" class="file"><span>317</span></a></li>
+ <li><a href="#" title="Ajouter une annotation au cluster" class="comment"></a></li>
</ul>
</div>
</div>
Binary file integration/img/cluster-arrows.jpg has changed
Binary file integration/img/home-button-file.png has changed
--- a/integration/js/main.js Mon Oct 15 16:40:39 2012 +0200
+++ b/integration/js/main.js Tue Oct 16 14:23:59 2012 +0200
@@ -12,13 +12,13 @@
});
$(".cluster-visible").css({"left": (clusterWidth-912+clusterVisibleLeft)});
$("a.cluster-arrow").bind("click",function(e){
- console.log("click")
+
e.preventDefault();
var clusterContainmentLeft = parseInt($(".cluster-containment").css("left"));
var clusterContainmentRight = parseInt($(".cluster-containment").css("left")) + $(".cluster-containment").width();
var clusterLeft = parseInt($(".cluster").css("left"));
var clusterRight = parseInt($(".cluster").css("left"))+$(".cluster").width();
- if ($(this).hasClass("arrow-left")) {
+ if ($(this).hasClass("arrow-right")) {
if (clusterLeft-40>clusterContainmentLeft) {
$(".cluster").css({
"left":"-="+40
@@ -29,7 +29,7 @@
});
}
- }else if($(this).hasClass("arrow-right")){
+ }else if($(this).hasClass("arrow-left")){
if (clusterRight+40<clusterContainmentRight) {
$(".cluster").css({
@@ -47,6 +47,14 @@
$(".cluster").draggable({ axis: "x",containment: ".cluster-containment" });
};
//WIDGET
+ //HEIGHT
+ var contentRightHeight = $(".content-right").height();
+ var contentLeftHeight = $(".content-left").height();
+ if(contentRightHeight>contentLeftHeight){
+ $(".content-left .widget-wrap").css({
+ "height":"+="+(contentRightHeight-contentLeftHeight)
+ });
+ }
//VOLET
//Tout fermer par défaut
//$("div.content-left div.widget-wrap div.widget div.widget-inner").hide().removeClass("open");
@@ -88,6 +96,7 @@
});
//VOLET DOCUMENTAIRE
$("div.dossier-documentaire").hide();
+ /*
$("div.header a.dossier-button").bind("click",function(e){
e.preventDefault();
$("div.dossier-documentaire").stop()
@@ -97,6 +106,16 @@
$("div.dossier-documentaire").slideDown();
}
});
+*/
+ $("div.header a.dossier-button").bind("click",function(e){e.preventDefault();});
+ $("div.header a.dossier-button, div.header div.dossier-documentaire").hover(
+ function(){
+ $("div.dossier-documentaire").stop().slideDown();
+ },
+ function(){
+ $("div.dossier-documentaire").stop().slideUp();
+ }
+ );
//ARTICLES
$(".article-visuel-wrap").each(function(){
var contentHeight = $(this).parents(".article-content").height();
