--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/v2/18-19-20-21-collection_vue_mosaique.html Mon Jun 24 15:59:04 2013 +0200
@@ -0,0 +1,411 @@
+<!DOCTYPE html>
+<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
+<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
+<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
+<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
+<head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <meta name="description" content="eGonomy">
+ <title>eGonomy : Collectionner (non connecté)</title>
+
+ <link rel="stylesheet" href="css/reset.css">
+ <link rel="stylesheet" href="css/fonts.css">
+ <link rel="stylesheet" href="css/style.css">
+ <script src="js/vendor/modernizr-2.6.2.min.js"></script>
+</head>
+<body>
+
+ <div class="popin-wrap">
+ <div id="collection-parameters" class="popin big-popin box-shadow">
+ <header>
+ <h2>PARAMÈTRES DE LA COLLECTION</h2>
+ <a href="#" class="close-popin"></a>
+ </header>
+ <section>
+ <form action="#">
+ <div class="col-left">
+ <table>
+ <tbody>
+ <tr>
+ <th>Vignette :</th>
+ <td>
+ <label class="styled-select">
+ <select>
+ <option selected value="">Mosaïque</option>
+ <option value="/egonomy/allfragments/">Fragments</option>
+ </select>
+ </label>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="buttons">
+ <a href="#" class="btn close-popin">Annuler</a>
+ <input class="btn" type="submit" value="Valider">
+ </div>
+ </form>
+ </section>
+ </div>
+ </div>
+
+
+ <div class="wrap">
+ <header class="clearfix">
+ <h1><a href="#">egonomy</a></h1>
+ <div class="col-right">
+ <ul class="head-login clearfix">
+ <li>
+ <form method="GET" action="/egonomy/allpictures/">
+ <p class="clearfix">
+ <input id="id_search" type="text" placeholder="Rechercher dans le site">
+ <label class="styled-select">
+ <select>
+ <option selected="" value="/egonomy/allpictures/">Images</option>
+ <option value="/egonomy/allfragments/">Fragments</option>
+ </select>
+ </label>
+ </p>
+ <input type="hidden" name="field" value="all">
+ </form>
+ </li>
+ <li class="hello-user">Bonjour Anthony Ly</li>
+ <li><span class="dot-6"></span></li>
+ <li><a class="login" href="#">Déconnexion</a></li>
+ </ul>
+ <nav>
+ <ul class="nav clearfix">
+ <li><a href="#" title="home"><img src="img/icon-home.png" alt="home"></a></li>
+ <li><span class="dot-10"></span></li>
+ <li><a href="#">explorer</a></li>
+ <li><span class="dot-10"></span></li>
+ <li><a href="#">collectionner</a></li>
+ <li><span class="dot-10"></span></li>
+ <li><a href="#">créer</a></li>
+ <li><span class="dot-10"></span></li>
+ <li><a href="#">mon profil</a></li>
+ </ul>
+ </nav>
+ </div>
+ </header>
+ <section>
+ <div class="title-page">
+ <h2>Romantisme noir</span></h2>
+ <ul class="sub-nav title-menu clearfix">
+ <li><a href="#">argumentaire</a></li>
+ <li><span class="dot-6"></span></li>
+ <li><a href="#" class="active">mosaïque</a></li>
+ <li><span class="dot-6"></span></li>
+ <li><a href="#">géographique</a></li>
+ <li><span class="dot-6"></span></li>
+ <li><a href="#">envoyer vers collage</a></li>
+ </ul>
+ </div>
+ <div class="bar-tools clearfix">
+ <ul class="clearfix">
+ <li><a class="toggle-comment" href="#">
+ <span class="show-comment">Afficher</span>
+ <span class="hide-comment">Masquer</span> les commentaires
+ </a></li>
+ <li><a href="#">imprimer la vue en PDF</a></li>
+ <li><a class="icon save" href="#">enregistrer sous</a></li>
+ <li><a class="open-popin" href="#collection-parameters">paramètres de la collection</a></li>
+ </ul>
+ </div>
+ <div class="clearfix">
+ <div class="filters-wrap float-left">
+ <ul class="filters">
+ <li class="box-shadow-2"><a class="display-keyword" data-keyword="azerty" href="#">
+ Paris, musée Victor Hugo <a title="close" class="icon-action cross" href="#"></a>
+ </a></li>
+ <li class="box-shadow-2"><a class="display-keyword" data-keyword="lorem" href="#">
+ Bonjour hello world lorem ipsum dolor <a title="circle" class="icon-action circle" href="#"></a>
+ </a></li>
+ <li class="box-shadow-2 disabled"><a href="#">
+ Paris, musée Victor Hugo <a title="close" class="icon-action cross" href="#"></a>
+ </a></li>
+ <li class="box-shadow-2 disabled"><a href="#">
+ Paris, musée Victor Hugo <a title="circle" class="icon-action circle" href="#"></a>
+ </a></li>
+ </ul>
+ </div>
+
+ <ul class="list-projets-5 mosaic float-left clearfix masonry-177">
+ <li class="item-masonry keyword-azerty">
+ <div class="curtain"></div>
+ <div class="visuel-project">
+ <img src="img/177x224.png" alt="">
+ <div class="tools toggle">
+ <div class="title-project">
+ <h3>Sapho</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="content-project">
+ <div class="title-project">
+ <h3>Sapho</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aut nostrum omnis cumque maxime delectus numquam natus sapiente enim reiciendis nulla animi praesentium odio cupiditate temporibus! Nisi alias eius animi.</p>
+ </div>
+ </li>
+ <li class="item-masonry keyword-lorem">
+ <div class="curtain"></div>
+ <div class="visuel-project">
+ <img src="img/177x264.png" alt="">
+ <div class="tools toggle">
+ <div class="title-project">
+ <h3>Dolores ipsum des dolores</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="content-project">
+ <div class="title-project">
+ <h3>Dolores ipsum des dolores</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>Lorem ipsum dolor</p>
+ </div>
+ </li>
+ <li class="item-masonry keyword-azerty">
+ <div class="curtain"></div>
+ <div class="visuel-project">
+ <img src="img/177x232.png" alt="">
+ <div class="tools toggle">
+ <div class="title-project">
+ <h3>azerty qwerty allo hello</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="content-project">
+ <div class="title-project">
+ <h3>azerty qwerty allo hello</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>azerty qwerty allo hello azerty qwerty allo hello</p>
+ </div>
+ </li>
+ <li class="item-masonry keyword-lorem">
+ <div class="curtain"></div>
+ <div class="visuel-project">
+ <img src="img/177x224.png" alt="">
+ <div class="tools toggle">
+ <div class="title-project">
+ <h3>Sapho</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="content-project">
+ <div class="title-project">
+ <h3>Sapho</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aut nostrum omnis cumque maxime delectus numquam natus sapiente enim reiciendis nulla animi praesentium odio cupiditate temporibus! Nisi alias eius animi.</p>
+ </div>
+ </li>
+ <li class="item-masonry keyword-azerty">
+ <div class="curtain"></div>
+ <div class="visuel-project">
+ <img src="img/177x264.png" alt="">
+ <div class="tools toggle">
+ <div class="title-project">
+ <h3>Dolores ipsum des dolores</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="content-project">
+ <div class="title-project">
+ <h3>Dolores ipsum des dolores</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>Lorem ipsum dolor</p>
+ </div>
+ </li>
+ <li class="item-masonry keyword-lorem">
+ <div class="curtain"></div>
+ <div class="visuel-project">
+ <img src="img/177x232.png" alt="">
+ <div class="tools toggle">
+ <div class="title-project">
+ <h3>azerty qwerty allo hello</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="content-project">
+ <div class="title-project">
+ <h3>azerty qwerty allo hello</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>azerty qwerty allo hello azerty qwerty allo hello</p>
+ </div>
+ </li>
+ <li class="item-masonry keyword-azerty">
+ <div class="curtain"></div>
+ <div class="visuel-project">
+ <img src="img/177x232.png" alt="">
+ <div class="tools toggle">
+ <div class="title-project">
+ <h3>azerty qwerty allo hello</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="content-project">
+ <div class="title-project">
+ <h3>azerty qwerty allo hello</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>azerty qwerty allo hello azerty qwerty allo hello</p>
+ </div>
+ </li>
+ <li class="item-masonry keyword-lorem">
+ <div class="curtain"></div>
+ <div class="visuel-project">
+ <img src="img/177x224.png" alt="">
+ <div class="tools toggle">
+ <div class="title-project">
+ <h3>Sapho</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="content-project">
+ <div class="title-project">
+ <h3>Sapho</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aut nostrum omnis cumque maxime delectus numquam natus sapiente enim reiciendis nulla animi praesentium odio cupiditate temporibus! Nisi alias eius animi.</p>
+ </div>
+ </li>
+ <li class="item-masonry keyword-azerty">
+ <div class="curtain"></div>
+ <div class="visuel-project">
+ <img src="img/177x264.png" alt="">
+ <div class="tools toggle">
+ <div class="title-project">
+ <h3>Dolores ipsum des dolores</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="content-project">
+ <div class="title-project">
+ <h3>Dolores ipsum des dolores</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>Lorem ipsum dolor</p>
+ </div>
+ </li>
+ <li class="item-masonry keyword-lorem">
+ <div class="curtain"></div>
+ <div class="visuel-project">
+ <img src="img/177x232.png" alt="">
+ <div class="tools toggle">
+ <div class="title-project">
+ <h3>azerty qwerty allo hello</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <ul class="clearfix">
+ <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
+ <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
+ <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
+ <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
+ <li><a title="Supprimer" class="tool trash" href="#"></a></li>
+ </ul>
+ </div>
+ </div>
+ <div class="content-project">
+ <div class="title-project">
+ <h3>azerty qwerty allo hello</h3>
+ <h4>Théodore Chasseriau</h4>
+ </div>
+ <p>azerty qwerty allo hello azerty qwerty allo hello</p>
+ </div>
+ </li>
+ </ul>
+ </div>
+
+
+ </section>
+ <footer class="clearfix">
+ <h6>EGONOMY est un projet de l’IRI et de la réunion des Musées Nationaux</h6>
+ <p>Mai 2013</p>
+ </footer>
+ </div><!-- /.wrap -->
+
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+ <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
+ <script src="js/masonry.min.js"></script>
+ <script src="js/main.js"></script>
+</body>
+</html>
--- a/integration/v2/18-collection_vue_mosaique.html Fri Jun 21 17:31:18 2013 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,133 +0,0 @@
-<!DOCTYPE html>
-<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
-<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
-<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
-<head>
- <meta charset="utf-8">
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
- <meta name="description" content="eGonomy">
- <title>eGonomy : Collectionner (non connecté)</title>
-
- <link rel="stylesheet" href="css/reset.css">
- <link rel="stylesheet" href="css/fonts.css">
- <link rel="stylesheet" href="css/style.css">
- <script src="js/vendor/modernizr-2.6.2.min.js"></script>
-</head>
-<body>
-
- <div class="wrap">
- <header class="clearfix">
- <h1><a href="#">egonomy</a></h1>
- <div class="col-right">
- <ul class="head-login clearfix">
- <li>
- <form method="GET" action="/egonomy/allpictures/">
- <p class="clearfix">
- <input id="id_search" type="text" placeholder="Rechercher dans le site">
- <label class="styled-select">
- <select>
- <option selected="" value="/egonomy/allpictures/">Images</option>
- <option value="/egonomy/allfragments/">Fragments</option>
- </select>
- </label>
- </p>
- <input type="hidden" name="field" value="all">
- </form>
- </li>
- <li class="hello-user">Bonjour Anthony Ly</li>
- <li><span class="dot-6"></span></li>
- <li><a class="login" href="#">Déconnexion</a></li>
- </ul>
- <nav>
- <ul class="nav clearfix">
- <li><a href="#" title="home"><img src="img/icon-home.png" alt="home"></a></li>
- <li><span class="dot-10"></span></li>
- <li><a href="#">explorer</a></li>
- <li><span class="dot-10"></span></li>
- <li><a href="#">collectionner</a></li>
- <li><span class="dot-10"></span></li>
- <li><a href="#">créer</a></li>
- <li><span class="dot-10"></span></li>
- <li><a href="#">mon profil</a></li>
- </ul>
- </nav>
- </div>
- </header>
- <section>
- <div class="title-page">
- <h2>Romantisme noir</span></h2>
- <ul class="sub-nav title-menu clearfix">
- <li><a href="#" class="active">argumentaire</a></li>
- <li><span class="dot-6"></span></li>
- <li><a href="#">mosaïque</a></li>
- <li><span class="dot-6"></span></li>
- <li><a href="#">géographique</a></li>
- <li><span class="dot-6"></span></li>
- <li><a href="#">envoyer vers collage</a></li>
- </ul>
- </div>
- <div class="bar-tools clearfix">
- <ul class="clearfix">
- <li><a href="#">Afficher les commentaires</a></li>
- <li><a href="#">imprimer la vue en PDF</a></li>
- <li><a class="icon save" href="#">enregistrer sous</a></li>
- <li><a href="#">paramètres de la collection</a></li>
- </ul>
- </div>
- <div class="clearfix">
- <div class="filters-wrap float-left">
- <ul class="filters">
- <li class="box-shadow-2"><a href="#">
- Paris, musée Victor Hugo <a title="close" class="icon-action cross" href="#"></a>
- </a></li>
- <li class="box-shadow-2"><a href="#">
- Bonjour hello world lorem ipsum dolor <a title="circle" class="icon-action circle" href="#"></a>
- </a></li>
- <li class="box-shadow-2 disabled"><a href="#">
- Paris, musée Victor Hugo <a title="close" class="icon-action cross" href="#"></a>
- </a></li>
- <li class="box-shadow-2 disabled"><a href="#">
- Paris, musée Victor Hugo <a title="circle" class="icon-action circle" href="#"></a>
- </a></li>
- </ul>
- </div>
-
- <ul class="list-projets-5 float-left clearfix">
- <li>
- <div class="visuel-project">
- <img src="img/177x224.png" alt="">
- <div class="tools toggle">
- <div class="title-project"></div>
- <h3>Sapho</h3>
- <h4>Théodore Chasseriau</h4>
- <ul class="clearfix">
- <li><a title="Partager sur Twitter" class="tool twitter" href="#"></a></li>
- <li><a title="Partager sur Facebook" class="tool facebook" href="#"></a></li>
- <li><a title="Ajouter à ma collection" class="tool plus" href="#"></a></li>
- <li><a title="Créer un fragment" class="tool cut" href="#"></a></li>
- <li><a title="Supprimer" class="tool trash" href="#"></a></li>
- </ul>
- </div>
- </div>
- <div class="content-project">
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus aut nostrum omnis cumque maxime delectus numquam natus sapiente enim reiciendis nulla animi praesentium odio cupiditate temporibus! Nisi alias eius animi.</p>
- </div>
- </li>
- </ul>
- </div>
-
-
- </section>
- <footer class="clearfix">
- <h6>EGONOMY est un projet de l’IRI et de la réunion des Musées Nationaux</h6>
- <p>Mai 2013</p>
- </footer>
- </div><!-- /.wrap -->
-
- <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
- <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
- <script src="js/masonry.min.js"></script>
- <script src="js/main.js"></script>
-</body>
-</html>
--- a/integration/v2/css/style.css Fri Jun 21 17:31:18 2013 +0200
+++ b/integration/v2/css/style.css Mon Jun 24 15:59:04 2013 +0200
@@ -15,34 +15,13 @@
.head-login, .head-login a{font-size: 12px; font-family: 'Lato'; color: #626364;}
.head-login input, .search-form{ vertical-align: middle; width:140px;background: url(../img/icon-search.png) 150px center no-repeat;font-family: 'Lato'; font-weight : bold; font-style : italic; font-size: 12px; border: 1px solid #D0D0D0; height: 25px; line-height: 25px; padding: 0 26px 0 4px;}
.hello-user{margin-left: 12px;}
-@media screen and (-webkit-min-device-pixel-ratio:0) {
- select {padding-right:18px !important;}
-}
+@media screen and (-webkit-min-device-pixel-ratio:0) {select {padding-right:18px !important;}}
.head-login li{float: left; line-height: 27px;}
.head-login input, .head-login .styled-select{float: left;}
.head-login input{margin-right: 10px;}
-select{
-outline:none; display: inline-block;
-border:0;font-size: 16px;font-family: 'Lato'; color: #7F7F7F;
-font-size: 12px;padding: 0 3px 0 4px;
--webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;-webkit-appearance:none;-moz-appearance:none;
-appearance:none;}
-.styled-select{
- line-height: 25px;
- vertical-align: middle;
- border: 1px solid #CACACA;
- height: 25px;
- display: inline-block;
- position: relative;
-}
-.styled-select:after{
- content: '';
- background: url(../img/arrow-select.png) no-repeat right 4px center #FFF;
- width: 20px; height: 25px;
- right: 0; top: 0;
- position: absolute;
- pointer-events:none;
-}
+select{outline:none; display: inline-block;border:0;font-size: 16px;font-family: 'Lato'; color: #7F7F7F;font-size: 12px;padding: 0 3px 0 4px;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
+.styled-select{line-height: 25px;vertical-align: middle;border: 1px solid #CACACA;height: 25px;display: inline-block;position: relative;}
+.styled-select:after{content: '';background: url(../img/arrow-select.png) no-repeat right 4px center #FFF;width: 20px; height: 25px;right: 0; top: 0;position: absolute;pointer-events:none;}
.dot-6{vertical-align:middle; width: 6px; height: 6px; -webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;background-color: #616364; display: inline-block; margin: 0 7px;}
.dot-10{ vertical-align:middle; width: 10px; height: 10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #A1A1A1; display: inline-block; margin: 0 12px;}
nav{height: 70px;}
@@ -116,10 +95,10 @@
.list-projets-2 .bot p{color: #333; background-color: #fff; font-family: 'Lato'; font-weight: 300; font-style: italic; padding: 8px 14px 0 14px; font-size: 14px; height: 104px; border-bottom: 1px solid #000; border-left: 1px solid #BBB; border-right: 1px solid #BBB;}
.list-projets-2 .bot{height: 113px; overflow: hidden;}
-li .toggle{display: block;}
+li .toggle{display: none;}
li:hover .toggle{ display:block; }
-.tools{ text-align:right; width:100%; position:absolute; bottom:0; left:0; background: rgba(255, 255, 255, .9);}
+.tools{ text-align:right; width:100%; position:absolute; bottom:0; left:0; background: rgba(255, 255, 255, .85);}
.tools ul{ display: inline-block;padding: 6px 10px 6px 0;}
.tools a{display: inline-block; width: 25px; height: 25px; line-height: 25px; text-align: center;}
.tools li{float: left; margin-left: 6px;}
@@ -129,7 +108,7 @@
.list-projets-3{margin-bottom: 50px;}
.list-projets-3>li{width: 465px; background-color: #eee; margin-bottom: 20px;}
.list-projets-3 .col-left{position: relative;}
-.list-projets-3 li img{max-width: 465px;}
+.list-projets-3 li img{max-width: 465px; display: inherit;}
.list-projets-3 li.horizontal .col-left{ width: 225px;}
.list-projets-3 li.horizontal .col-right{height:100%; width: 240px; }
.list-projets-3 .project-title{position:relative; padding-left: 14px; font-size: 18px;height: 60px; border-bottom: 1px solid #CCC;}
@@ -186,7 +165,7 @@
.btn{cursor:pointer; border: none; vertical-align:middle; display: inline-block; color: #FFF; font-size: 12px; font-family: 'Lato'; height: 25px; line-height: 25px; padding: 0 12px; background-color: #666;}
.block{display: block;}
.popin-wrap, .popin{display: none;}
-
+.big-popin{width: 572px; margin-left: -286px;}
.edition{background-color: #eee; padding: 0 28px; margin-bottom: 64px;}
.edition .slideshow{ min-height: 80px; position:relative; padding: 24px 0; text-align: center;}
@@ -242,10 +221,20 @@
.float-left{float: left;}
.filters-wrap{width: 225px; background-color: #EEE; margin-right: 17px;}
-.list-projets-5{}
-.visuel-project{font-family: 'Lato'; }
-.visuel-project h3{ padding-left: 6px; text-align: left;font-weight: bold; font-size: 18px;}
-.visuel-project h4{ border-bottom: 1px solid #555; padding-left: 6px;text-align: left;font-weight: 300;
- font-style: italic; font-size: 18px;}
-.visuel-project{position: relative;}
+.list-projets-5{width: 708px;}
+.curtain{display:none;z-index:10;position: absolute; width: 100%; height: 100%; background-color:rgba(0,0,0,.7);}
+.list-projets-5 .item-masonry{margin-bottom: 0;}
+.mosaic .content-project{display: none;}
+.mosaic .visuel-project .title-project{display: block;}
+.mosaic-comment .content-project{display: block;}
+.mosaic-comment .content-project{display: block;}
+.hide-comment{display: none;}
+.mosaic-comment .visuel-project .title-project{display: none;}
+.title-project{padding: 10px 0 6px 0; font-family: 'Lato';padding-left: 6px;border-bottom: 1px solid #555;text-align: left;}
+.title-project h3{ margin-bottom: 6px; font-weight: bold; font-size: 18px;}
+.title-project h4{ font-weight: 300;font-style: italic; font-size: 18px;}
+.visuel-project{position: relative; }
+.visuel-project img{display: inherit;}
.list-projets-5>li{width: 177px; float: left; position: relative;}
+.content-project{background-color: #eee;}
+.content-project p{font-family: 'Lato'; font-size: 13px; font-weight: 300; line-height: 15px; padding: 10px;}
Binary file integration/v2/img/177x232.png has changed
Binary file integration/v2/img/177x264.png has changed
--- a/integration/v2/js/main.js Fri Jun 21 17:31:18 2013 +0200
+++ b/integration/v2/js/main.js Mon Jun 24 15:59:04 2013 +0200
@@ -20,6 +20,15 @@
itemSelector: '.item-masonry',
gutter : 16
});
+
+ function masonry177(){
+ var masonry177 = $('.masonry-177');
+ masonry177.masonry({
+ columnWidth: 177,
+ itemSelector: '.item-masonry'
+ });
+ }
+ masonry177();
//popin
$('.open-popin').bind('click', function(e){
e.preventDefault();
@@ -51,6 +60,32 @@
keywordsTagIt.tagit("createTag", tag);
});
}
+//mosaic
+ $('.toggle-comment').bind('click', function(e){
+ e.preventDefault();
+ $('.show-comment, .hide-comment').hide();
+ if($('.mosaic').length){
+ $('.mosaic').removeClass('mosaic').addClass('mosaic-comment');
+ $('.hide-comment').show();
+ }else{
+ $('.mosaic-comment').removeClass('mosaic-comment').addClass('mosaic');
+ $('.show-comment').show();
+ }
+ masonry177();
+ });
+ $('.display-keyword').bind('click', function(e){
+ e.preventDefault();
+ var li = $(this).parents('li'),
+ keyword = $(this).attr('data-keyword');
+ if(li.hasClass('disabled')){
+ $('li.keyword-'+keyword).find('.curtain').hide();
+ li.removeClass('disabled');
+ }else{
+ $('li.keyword-'+keyword).find('.curtain').show();
+ li.addClass('disabled');
+ }
+
+ });
});//ready
