Added SVG fragments and V1 versions
authorveltr
Wed, 23 Jan 2013 12:56:13 +0100
changeset 3 3c62d8c7fb39
parent 2 4354d94c6d85
child 4 0587d6556969
Added SVG fragments and V1 versions
integration/css/egonomy.css
integration/home-v1.html
integration/home.html
integration/image-v1.html
integration/image.html
integration/img/empty.gif
integration/search-results-v1.html
--- a/integration/css/egonomy.css	Fri Jan 18 18:27:32 2013 +0100
+++ b/integration/css/egonomy.css	Wed Jan 23 12:56:13 2013 +0100
@@ -174,7 +174,7 @@
 }
 
 .column-third:nth-child(3n+1) {
-    margin-left: 0;
+    margin-left: 0; clear: left;
 }
 
 .subcol-third-third {
@@ -182,11 +182,7 @@
 }
 
 .subcol-third-third:nth-child(3n+1) {
-    margin-left: 0;
-}
-
-.img-ninth {
-    width: 96px; height: 72px;
+    margin-left: 0; clear: left;
 }
 
 .column-half {
@@ -194,19 +190,51 @@
 }
 
 .column-half:nth-child(2n+1) {
-    margin-left: 0;
+    margin-left: 0; clear: left;
 }
 
 .subcol-half-fourth {
     width: 110px;
 }
 
-.img-eighth {
-    width: 110px; height: 82px;
+.subcol-half-fourth:nth-child(4n+1) {
+    margin-left: 0; clear: left;
+}
+
+.column-full {
+    margin-left: 0; width: 968px;
+}
+
+.subcol-eighth {
+    width: 110px;
+}
+
+.subcol-eighth:nth-child(even) {
+    margin-left: 13px;
 }
 
-.subcol-half-fourth:nth-child(4n+1) {
-    margin-left: 0;
+.subcol-eighth:nth-child(8n+1) {
+    margin-left: 0; clear: left;
+}
+
+.center-image {
+    text-align: center;
+}
+
+.image-and-fragment {
+    position: relative; margin: 0 auto; display: inline-block;
+}
+
+.center-image img {
+    display: inline-block;
+}
+/*
+.image-and-fragment img:after {
+    content: "."; display: block; clear: both; width: 0; line-height: 0; visibility: hidden;
+}
+*/
+.image-and-fragment svg {
+    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
 }
 
 /* STYLES SPECIFIQUES A home.html */
@@ -226,13 +254,22 @@
 }
 
 .image-metadata th {
-    font-weight: bold; width: 152px; text-align: left; padding: 4px 10px 4px 0;
+    font-weight: bold; width: 152px; text-align: left; padding: 4px 10px 4px 0; vertical-align: top;
 }
 
 .image-metadata td {
     width: 314px; padding: 4px 0;
 }
 
+.image-metadata textarea {
+    box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    width: 100%; border: 1px solid #6699FF; background: none;
+    padding: 2px; margin: 3px 0; height: 120px;
+    font-size: 13px;
+}
+
 .image-keywords {
     width: 100%; margin: 10px 0 0;
 }
@@ -263,3 +300,7 @@
     margin-left: 0;
 }
 
+.highlight {
+    background: #ffff80;
+}
+
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/home-v1.html	Wed Jan 23 12:56:13 2013 +0100
@@ -0,0 +1,135 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <title>eGonomy &raquo; Accueil</title>
+        
+        <link rel="stylesheet" type="text/css" href="css/egonomy.css" />
+    </head>
+
+    <body>
+        <div class="header-wrap fullwidth">
+            <header>
+                <h1 class="column column-third">TagItAll by eGonomy</h1>
+                <form class="column column-third">
+                    <input class="search-field" type="search" placeholder="Rechercher" />
+                </form>
+                <nav class="column column-third">
+                    <a href="#">Se connecter</a>
+                </nav>
+            </header>
+        </div>
+        <div class="main-wrap fullwidth">
+
+            <div class="main">
+                <div class="fullwidth">
+                    
+                    <!-- Liste des dernières images annotées -->
+                    
+                    <div class="column column-half">
+                        <h2>Dernières images annotées</h2>
+                        <ul class="fullwidth">
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                </div>
+                                <h3>Titre de l'image</h3>
+                                <p>Annotée par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="82" height="110" class="placeholder" />
+                                </div>
+                                <h3>Titre de l'image</h3>
+                                <p>Annotée par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                </div>
+                                <h3>Titre de l'image</h3>
+                                <p>Annotée par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="110" height="110" class="placeholder" />
+                                </div>
+                                <h3>Titre de l'image</h3>
+                                <p>Annotée par <strong>Julien75</strong></p>
+                            </li>
+                        </ul>
+                    </div>
+                    
+                    <!-- Liste des derniers fragments modifiés -->
+                    
+                    <div class="column column-half">
+                        <h2>Derniers fragments modifiés</h2>
+                        <ul class="fullwidth">
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M 0 .5 L .5 0 L 1 .5 L .5 1 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <h3>Titre du fragment</h3>
+                                <h4>Fragment de Titre de l'image</h4>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="82" height="110" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M .2 .5 L .7 .2 L .8 .7 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <h3>Titre du fragment</h3>
+                                <h4>Fragment de Titre de l'image</h4>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M .2 .5 L .7 .2 L .8 .7 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <h3>Titre du fragment</h3>
+                                <h4>Fragment de Titre de l'image</h4>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="110" height="110" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M 0 .5 L .5 0 L 1 .5 L .5 1 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <h3>Titre du fragment</h3>
+                                <h4>Fragment de Titre de l'image</h4>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                
+                <footer class="fullwidth">
+                    <ul class="footer-list">
+                        <li>&copy; IRI 2013</li>
+                    </ul>
+                </footer>
+            
+            </div>
+
+        </div>
+    </body>
+</html>
--- a/integration/home.html	Fri Jan 18 18:27:32 2013 +0100
+++ b/integration/home.html	Wed Jan 23 12:56:13 2013 +0100
@@ -32,65 +32,98 @@
                 <div class="fullwidth">
                     <div class="column column-third">
                         <h2>Dernières images annotées</h2>
-                        <div class="fullwidth">
-                            <div class="subcol subcol-third-third">
-                                <div class="img-ninth placeholder"></div>
+                        <ul class="fullwidth">
+                            <li class="subcol subcol-third-third">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="75" height="75" class="placeholder" />
+                                </div>
                                 <h3>Titre de l'image</h3>
                                 <p>Annotée par <strong>Julien75</strong></p>
-                            </div>
-                            <div class="subcol subcol-third-third">
-                                <div class="img-ninth placeholder"></div>
+                            </li>
+                            <li class="subcol subcol-third-third">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="75" height="96" class="placeholder" />
+                                </div>
                                 <h3>Titre de l'image</h3>
                                 <p>Annotée par <strong>Julien75</strong></p>
-                            </div>
-                            <div class="subcol subcol-third-third">
-                                <div class="img-ninth placeholder"></div>
+                            </li>
+                            <li class="subcol subcol-third-third">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="96" height="75" class="placeholder" />
+                                </div>
                                 <h3>Titre de l'image</h3>
                                 <p>Annotée par <strong>Julien75</strong></p>
-                            </div>
-                        </div>
+                            </li>
+                        </ul>
                     </div>
                     <div class="column column-third">
                         <h2>Derniers fragments annotés</h2>
-                        <div class="fullwidth">
-                            <div class="subcol subcol-third-third">
-                                <div class="img-ninth placeholder"></div>
+                        <ul class="fullwidth">
+                            <li class="subcol subcol-third-third">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="75" height="75" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M 0 .5 L .5 0 L 1 .5 L .5 1 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
                                 <h3>Titre du fragment</h3>
                                 <h4>Fragment de Titre de l'image</h4>
                                 <p>Annoté par <strong>Julien75</strong></p>
-                            </div>
-                            <div class="subcol subcol-third-third">
-                                <div class="img-ninth placeholder"></div>
+                            </li>
+                            <li class="subcol subcol-third-third">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="75" height="96" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M 0 .5 L .5 0 L 1 .5 L .5 1 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
                                 <h3>Titre du fragment</h3>
                                 <h4>Fragment de Titre de l'image</h4>
                                 <p>Annoté par <strong>Julien75</strong></p>
-                            </div>
-                            <div class="subcol subcol-third-third">
-                                <div class="img-ninth placeholder"></div>
+                            </li>
+                            <li class="subcol subcol-third-third">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="96" height="75" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M 0 .5 L .5 0 L 1 .5 L .5 1 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
                                 <h3>Titre du fragment</h3>
                                 <h4>Fragment de Titre de l'image</h4>
                                 <p>Annoté par <strong>Julien75</strong></p>
-                            </div>
-                        </div>
+                            </li>
+                        </ul>
                     </div>
                     <div class="column column-third">
                         <h2>Derniers renkans créés</h2>
-                        <div class="fullwidth">
-                            <div class="subcol subcol-third-third">
-                                <div class="img-ninth placeholder"></div>
+                        <ul class="fullwidth">
+                            <li class="subcol subcol-third-third">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="96" height="40" class="placeholder" />
+                                </div>
                                 <h3>Titre du Renkan</h3>
                                 <p>Créé par <strong>Julien75</strong></p>
-                            </div>
-                            <div class="subcol subcol-third-third">
-                                <div class="img-ninth placeholder"></div>
+                            </li>
+                            <li class="subcol subcol-third-third">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="75" height="75" class="placeholder" />
+                                </div>
                                 <h3>Titre du Renkan</h3>
                                 <p>Créé par <strong>Julien75</strong></p>
-                            </div>
-                            <div class="subcol subcol-third-third">
-                                <div class="img-ninth placeholder"></div>
+                            </li>
+                            <li class="subcol subcol-third-third">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="96" height="75" class="placeholder" />
+                                </div>
                                 <h3>Titre du Renkan</h3>
                                 <p>Créé par <strong>Julien75</strong></p>
-                            </div>
+                            </li>
                         </div>
                     </div>
                 </div>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/image-v1.html	Wed Jan 23 12:56:13 2013 +0100
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <title>eGonomy &raquo; Image</title>
+        
+        <link rel="stylesheet" type="text/css" href="css/egonomy.css" />
+    </head>
+
+    <body>
+        <div class="header-wrap fullwidth">
+            <header>
+                <h1 class="column column-third">TagItAll by eGonomy</h1>
+                <form class="column column-third">
+                    <input class="search-field" type="search" placeholder="Rechercher" />
+                </form>
+                <nav class="column column-third">
+                    <a href="#">Se connecter</a>
+                </nav>
+            </header>
+        </div>
+        <div class="main-wrap fullwidth">
+
+            <div class="main">
+                <div class="fullwidth">
+                    <div class="column column-half">
+                        <h2>Titre de l'image</h2>
+                        <div class="fullphoto placeholder">
+                            Photo à annoter
+                        </div>
+                    </div>
+                    <div class="column column-half">
+                        <form action="#">
+                        <table class="image-metadata">
+                            <tr>
+                                <th>Description&nbsp;:</th>
+                                <td>Lorem Ipsum, Ceci est la description de l'&oelig;uvre représentée dans l'image.</td>
+                            </tr>
+                            <tr>
+                                <th>Auteur&nbsp;:</th>
+                                <td>Marcel Duchamp</td>
+                            </tr>
+                            <tr>
+                                <th>Période&nbsp;:</th>
+                                <td>XXème siècle</td>
+                            </tr>
+                            <tr>
+                                <th>Site de Production&nbsp;:</th>
+                                <td>Paris, France</td>
+                            </tr>
+                            <tr>
+                                <th>Localisation&nbsp;:</th>
+                                <td>Musée du Louvre, Paris.</td>
+                            </tr>
+                            <tr>
+                                <th>Mots-clés RMN&nbsp;:</th>
+                                <td>Art contemporain, Art conceptuel, Cyclisme</td>
+                            </tr>
+                            <tr>
+                                <th>Mots-clés Utilisateurs</th>
+                                <td><textarea class="user-keywords">Modernité, Ready-made</textarea></td>
+                            </tr>
+                            <tr>
+                                <th> </th>
+                                <td><input class="user-submit" type="submit" value="Enregistrer les mots-clés" /></td>
+                            </tr>
+                            <tr>
+                                <th>Dernière modification&nbsp;:</th>
+                                <td>le 23 janvier 2013 par Utilisateur17</td>
+                            </tr>
+                        </table>
+                        </form>
+                        <div class="fullwidth">
+                            <a href="#" class="big-button">Créer un fragment</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="fullwidth">
+                    <div class="column column-full">
+                        <h2>Fragments de cette image</h2>
+                        <ul class="fullwidth">
+                            <li class="subcol subcol-eighth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M 0 .5 L .5 0 L 1 .5 L .5 1 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <h3>Titre du fragment</h3>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-eighth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M .2 .5 L .7 .2 L .8 .7 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <h3>Titre du fragment</h3>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-eighth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M .3 .1 L .55 .15 L .6 .6 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <h3>Titre du fragment</h3>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-eighth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M .2 .5 L .7 .2 L .8 .7 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <h3>Titre du fragment</h3>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-eighth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M .2 .5 L .7 .2 L .8 .7 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <h3>Titre du fragment</h3>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                
+                <footer class="fullwidth">
+                    <ul class="footer-list">
+                        <li>&copy; IRI 2013</li>
+                    </ul>
+                </footer>
+            
+            </div>
+
+        </div>
+    </body>
+</html>
--- a/integration/image.html	Fri Jan 18 18:27:32 2013 +0100
+++ b/integration/image.html	Wed Jan 23 12:56:13 2013 +0100
@@ -85,53 +85,89 @@
                 <div class="fullwidth">
                     <div class="column column-half">
                         <h2>Fragments de cette image</h2>
-                        <div class="fullwidth">
-                            <div class="subcol subcol-half-fourth">
-                                <div class="img-eighth placeholder"></div>
+                        <ul class="fullwidth">
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M 0 .5 L .5 0 L 1 .5 L .5 1 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
                                 <h3>Titre du fragment</h3>
                                 <p>Annoté par <strong>Julien75</strong></p>
-                            </div>
-                            <div class="subcol subcol-half-fourth">
-                                <div class="img-eighth placeholder"></div>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M .2 .5 L .7 .2 L .8 .7 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
                                 <h3>Titre du fragment</h3>
                                 <p>Annoté par <strong>Julien75</strong></p>
-                            </div>
-                            <div class="subcol subcol-half-fourth">
-                                <div class="img-eighth placeholder"></div>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M .3 .1 L .55 .15 L .6 .6 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
                                 <h3>Titre du fragment</h3>
                                 <p>Annoté par <strong>Julien75</strong></p>
-                            </div>
-                            <div class="subcol subcol-half-fourth">
-                                <div class="img-eighth placeholder"></div>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M .2 .5 L .7 .2 L .8 .7 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
                                 <h3>Titre du fragment</h3>
                                 <p>Annoté par <strong>Julien75</strong></p>
-                            </div>
-                        </div>
+                            </li>
+                        </ul>
                     </div>
                     <div class="column column-half">
                         <h2>Renkans utilisant cette image</h2>
-                        <div class="fullwidth">
-                            <div class="subcol subcol-half-fourth">
-                                <div class="img-eighth placeholder"></div>
+                        <ul class="fullwidth">
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                </div>
                                 <h3>Titre du Renkan</h3>
                                 <p>Créé par <strong>Julien75</strong></p>
-                            </div>
-                            <div class="subcol subcol-half-fourth">
-                                <div class="img-eighth placeholder"></div>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                </div>
                                 <h3>Titre du Renkan</h3>
                                 <p>Créé par <strong>Julien75</strong></p>
-                            </div>
-                            <div class="subcol subcol-half-fourth">
-                                <div class="img-eighth placeholder"></div>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                </div>
                                 <h3>Titre du Renkan</h3>
                                 <p>Créé par <strong>Julien75</strong></p>
-                            </div>
-                            <div class="subcol subcol-half-fourth">
-                                <div class="img-eighth placeholder"></div>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                </div>
                                 <h3>Titre du Renkan</h3>
                                 <p>Créé par <strong>Julien75</strong></p>
-                            </div>
-                        </div>
+                            </li>
+                        </ul>
                     </div>
                 </div>
                 
Binary file integration/img/empty.gif has changed
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/integration/search-results-v1.html	Wed Jan 23 12:56:13 2013 +0100
@@ -0,0 +1,166 @@
+<!DOCTYPE html>
+<html lang="fr">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
+        <title>eGonomy &raquo; Accueil</title>
+        
+        <link rel="stylesheet" type="text/css" href="css/egonomy.css" />
+    </head>
+
+    <body>
+        <div class="header-wrap fullwidth">
+            <header>
+                <h1 class="column column-third">TagItAll by eGonomy</h1>
+                <form class="column column-third">
+                    <input class="search-field" type="search" placeholder="Rechercher" />
+                </form>
+                <nav class="column column-third">
+                    <a href="#">Se connecter</a>
+                </nav>
+            </header>
+        </div>
+        <div class="main-wrap fullwidth">
+
+            <div class="main">
+                <div class="fullwidth">
+                    <h2>Résultats de Recherche pour &laquo;&nbsp;Titre&nbsp;&raquo;</h2>
+                </div>
+                <div class="fullwidth">
+                    
+                    <!-- Liste des images trouvées -->
+                    
+                    <div class="column column-half">
+                        <h2>Images correspondantes</h2>
+                        <ul class="fullwidth">
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                </div>
+                                <h3><span class="highlight">Titre</span> de l'image</h3>
+                                <p>Annotée par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="82" height="110" class="placeholder" />
+                                </div>
+                                <h3><span class="highlight">Titre</span> de l'image</h3>
+                                <p>Annotée par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="110" height="55" class="placeholder" />
+                                </div>
+                                <h3><span class="highlight">Titre</span> de l'image</h3>
+                                <p>Annotée par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="110" height="110" class="placeholder" />
+                                </div>
+                                <h3><span class="highlight">Titre</span> de l'image</h3>
+                                <p>Annotée par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="82" height="110" class="placeholder" />
+                                </div>
+                                <h3><span class="highlight">Titre</span> de l'image</h3>
+                                <p>Annotée par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="55" height="110" class="placeholder" />
+                                </div>
+                                <h3><span class="highlight">Titre</span> de l'image</h3>
+                                <p>Annotée par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="110" height="110" class="placeholder" />
+                                </div>
+                                <h3><span class="highlight">Titre</span> de l'image</h3>
+                                <p>Annotée par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                </div>
+                                <h3><span class="highlight">Titre</span> de l'image</h3>
+                                <p>Annotée par <strong>Julien75</strong></p>
+                            </li>
+                        </ul>
+                    </div>
+                    
+                    <!-- Liste des derniers fragments modifiés -->
+                    
+                    <div class="column column-half">
+                        <h2>Fragments correspondants</h2>
+                        <ul class="fullwidth">
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M 0 .5 L .5 0 L 1 .5 L .5 1 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <h3><span class="highlight">Titre</span> du fragment</h3>
+                                <h4>Fragment de <span class="highlight">Titre</span> de l'image</h4>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="82" height="110" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M 0 .5 L .5 0 L 1 .5 L .5 1 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <h3><span class="highlight">Titre</span> du fragment</h3>
+                                <h4>Fragment de <span class="highlight">Titre</span> de l'image</h4>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="110" height="110" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M .2 .5 L .7 .2 L .8 .7 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <h3><span class="highlight">Titre</span> du fragment</h3>
+                                <h4>Fragment de <span class="highlight">Titre</span> de l'image</h4>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </li>
+                            <li class="subcol subcol-half-fourth">
+                                <div class="center-image">
+                                    <div class="image-and-fragment">
+                                        <img src="img/empty.gif" width="110" height="82" class="placeholder" />
+                                        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1 1" preserveAspectRatio="none">
+                                            <path d="M .2 .5 L .7 .2 L .8 .7 Z" stroke="red" stroke-width=".02" fill="red" fill-opacity=".3" />
+                                        </svg>
+                                    </div>
+                                </div>
+                                <h3><span class="highlight">Titre</span> du fragment</h3>
+                                <h4>Fragment de <span class="highlight">Titre</span> de l'image</h4>
+                                <p>Annoté par <strong>Julien75</strong></p>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                
+                <footer class="fullwidth">
+                    <ul class="footer-list">
+                        <li>&copy; IRI 2013</li>
+                    </ul>
+                </footer>
+            
+            </div>
+
+        </div>
+    </body>
+</html>