ADD Images (img)

ADD Recherche de titre (js)
MOD Amélioration du css

git-svn-id: svn://euphorik.ch/pompage@12 02bbb61a-6d21-0410-aba0-cb053bdfd66a

diff --git a/css/yopyop.css b/css/yopyop.css
index 07ebd42..6f9e440 100644 (file)
--- a/css/yopyop.css
+++ b/css/yopyop.css
@@ -1,13 +1,38 @@
 * {\r
-    margin: 0;\r
-    padding: 0;\r
-    border-width: 0;\r
-    font: normal 12pt Arial, Verdana, Helvetica, sans-serif;\r
-    color: #000000;\r
+   margin: 0;\r
+   padding: 0;\r
+   border-width: 0;\r
+}\r
+\r
+html {\r
+       background-color: #8DDD83;\r
+   height: auto;\r
+   font: normal 12pt Arial, Verdana, Helvetica, sans-serif;\r
+}\r
+\r
+a {\r
+   text-decoration: none;\r
+}\r
+a:link {\r
+   color: #51874A;\r
+}\r
+a:visited {\r
+   color: #51874A;\r
+}\r
+a:hover {\r
+   color: #5DDF4C;\r
+}\r
+a:active {\r
+   color: #5DDF4C;\r
 }\r
 \r
 body {\r
-       background-color: #DDDDDD;\r
+   width: 90%;\r
+   height: auto;\r
+   margin-left: auto;\r
+   margin-right: auto;\r
+   margin-top: 0px;\r
+   text-align: left;\r
 }\r
 \r
 h1 {\r
@@ -26,14 +51,72 @@ td {
        vertical-align:top;\r
 }\r
 \r
+div.entete {\r
+   width: 90%;\r
+       position: fixed;\r
+   background-color: #65A35D;\r
+   height: 50px;\r
+   color: #8DDD83;\r
+   -moz-border-radius: 0px 0px 20px 20px;\r
+}\r
+\r
+div.entete img {\r
+   position: absolute;\r
+   left: 180px;\r
+   top: -3px;\r
+}\r
+\r
+div.entete h1 {\r
+       float: left;     \r
+   margin-top: 10px;\r
+}\r
+\r
+div.pied {\r
+   position: fixed;\r
+   bottom: 0px;\r
+   height: 50px;\r
+   width: 90%;\r
+   background-image: url(../img/collines.png)\r
+}\r
+\r
+div form {\r
+       float: right;\r
+   padding-right: 10px;\r
+   padding-top: 5px;\r
+}\r
+\r
+div form input {\r
+   font-size: 16pt;\r
+   background-color: #B1F1A9;\r
+}\r
+\r
+div form button {\r
+   position: relative;\r
+   top: -5px;\r
+   height: 25px;\r
+   width: 25px;\r
+   margin: 2px;\r
+   background-color: #B1F1A9;\r
+   border: 0px;\r
+   background-image: url(../img/clear.png);\r
+   background-position: center;\r
+   background-repeat: no-repeat;\r
+}\r
+\r
+div.contenu {\r
+   padding-top: 50px;\r
+}\r
+\r
 table#liste {\r
        width: 100%;\r
        border-spacing: 0px 0px;\r
+   margin-bottom:50px;\r
 }\r
 \r
 table#liste th {\r
-    background-color: #9999DD; \r
+   background-color: #8DDD83;\r
        padding: 3px;\r
+   font-size: 13pt;\r
 }\r
 \r
 table#liste th.titre {\r
@@ -42,22 +125,27 @@ table#liste th.titre {
 \r
 table#liste th.annee {\r
        width: 50px;\r
+       text-align: center;\r
 }\r
 \r
 table#liste th.duree {\r
        width: 80px;\r
+       text-align: center;\r
 }\r
 \r
 table#liste th.lien {\r
        width: 50px;\r
+       text-align: center;\r
 }\r
 \r
 table#liste th.fichier {\r
        width: 50px;\r
+       text-align: center;\r
 }\r
 \r
 table#liste td {\r
-    background-color: #BBBBEE; \r
+   background-color: #7BC671;  \r
+   color: #20531A;\r
        padding: 3px;\r
 }\r
 \r
@@ -82,24 +170,24 @@ table#liste td.fichier {
 }\r
 \r
 table#liste td.titre:hover {\r
-    background-color: #CCCCFF; \r
+    background-color: #B1F1A9; \r
        padding: 3px;\r
 }\r
 \r
 table#liste td.detail {\r
-    background-color: #FFFFFF; \r
+   background-color: #8DDD83;  \r
        padding: 0px 0px 0px 0px;\r
 }\r
 \r
 table#liste table.detail {\r
-       visibility:hidden;\r
-       position:absolute;\r
+       display:none;\r
+   padding-bottom: 10px;\r
        border-spacing: 0px 0px;\r
 }\r
 \r
 table#liste table.detail td {\r
        padding: 3px;   \r
-    background-color: #DDDDFF;\r
+   background-color: #B1F1A9;\r
 }\r
 \r
 table#liste table.detail td.titreDetail {\r

diff --git a/js/yopyop.js b/js/yopyop.js
index 3b489ee..7232cc9 100644 (file)
--- a/js/yopyop.js
+++ b/js/yopyop.js
@@ -11,32 +11,40 @@ function detailFilm(id)
 {\r
    var detail = document.getElementById("detail"+id)\r
    \r
-   if (detail.style.visibility == "visible")\r
-   {\r
-      detail.style.visibility = "hidden"\r
-      detail.style.position = "absolute"\r
-   }\r
+   if (detail.style.display == "table")\r
+      detail.style.display = "none"\r
    else\r
-   {\r
-      detail.style.visibility = "visible"\r
-      detail.style.position = "relative"   \r
-   }\r
+      detail.style.display = "table"\r
 }\r
 \r
+\r
 /**\r
   * Effectue une recherche, n'affiche que les films qui contiennent le motif recherché.\r
   */\r
 function doRecherche()\r
 {\r
    var motif = document.getElementById("recherche").value\r
+   var rechercheRegExp = new RegExp(".*" + motif + ".*", "i")\r
 \r
    var liste = document.getElementById("liste")\r
    var lignes = liste.childNodes\r
-   for(i = 0; i < lignes.length; i++)\r
+   for(i = 1; i < lignes.length; i += 2)\r
    {\r
-      var titre = lignes[i].getElements\r
-      \r
-      \r
-      alert(tr[i].id)\r
+      var titre = lignes[i].firstChild.innerHTML\r
+      if (rechercheRegExp.exec(titre) == null)      \r
+      {\r
+         lignes[i].style.display = "none"\r
+         lignes[i+1].firstChild.firstChild.style.display = "none"\r
+      }\r
+      else\r
+      {\r
+         lignes[i].style.display = "table-row"   \r
+      }\r
    }\r
+}\r
+\r
+function viderRecherche()\r
+{\r
+   document.getElementById("recherche").value = ""\r
+   doRecherche()\r
 }
\ No newline at end of file

diff --git a/mise_en_prod.rb b/mise_en_prod.rb
index 8830586..473156b 100644 (file)
--- a/mise_en_prod.rb
+++ b/mise_en_prod.rb
@@ -1,12 +1,14 @@
-if $*.length < 1\r
-   puts 'Usage: mise_en_prod.rb destination'\r
-   exit 1\r
-end\r
+dest = "Z:\\var\\www\\divx"\r
 \r
-dest = $*[0]\r
+#if $*.length < 1\r
+#   puts 'Usage: mise_en_prod.rb destination'\r
+#   exit 1\r
+#end\r
+\r
+dest = $*[0] if $*.length > 1\r
 \r
 # pour windows\r
-['xml', 'xsl', 'js', 'css'].each{|rep|\r
+['xml', 'xsl', 'js', 'css', 'img'].each{|rep|\r
    `mkdir #{dest}\\#{rep}`\r
    `xcopy /Y #{rep} #{dest}\\#{rep}`\r
 }
\ No newline at end of file

diff --git a/xsl/yopyop.xsl b/xsl/yopyop.xsl
index d77bbbd..7e46785 100644 (file)
--- a/xsl/yopyop.xsl
+++ b/xsl/yopyop.xsl
@@ -7,40 +7,50 @@
     <link rel="stylesheet" href="../css/yopyop.css" type="text/css" />\r
     <script type="text/javascript" src="../js/yopyop.js" ></script>
    </head>
-   <body>
-    <h1>DivX</h1><form><input type="text" onkeyup="doRecherche()" id="recherche" /></form>
-    <table id="liste">
-     <tr>
-      <th class="titre">Titre</th>
-      <th class="annee">Année</th>\r
-      <th class="duree">Durée</th>\r
-      <th class="lien">Lien</th>\r
-      <th class="fichier">Fichier</th>
-     </tr>\r
-     
-     <xsl:for-each select="film">
-      <xsl:sort select="annee" order="descending" />\r
-      <xsl:sort select="titre" />
-      <tr id="ligne{@id}">
-       <td onclick="detailFilm('{@id}')" class="titre" id="titre{@id}"><xsl:value-of select="titre"/></td>
-       <td class="annee"><xsl:value-of select="annee"/></td>\r
-       <td class="duree"><xsl:value-of select="duree"/> min</td>\r
-       <td class="lien"><a href="{url}">GO</a></td>\r
-       <td class="fichier"><a href="divx:///{fichier}">GO</a></td>
+   <body>\r
+    <div class="entete">
+     <h1>DivX - TV</h1>\r
+     <img src="../img/logo.png" />\r
+     <form>\r
+      <input type="text" onkeyup="doRecherche()" id="recherche" />\r
+      <button onclick="viderRecherche()" ></button>\r
+     </form>\r
+    </div>\r
+    <div class="contenu">
+     <table id="liste">
+      <tr>
+       <th class="titre">Titre</th>
+       <th class="annee">Année</th>\r
+       <th class="duree">Durée</th>\r
+       <th class="lien">Lien</th>\r
+       <th class="fichier">Fichier</th>
       </tr>\r
-      <tr>\r
-       <td colspan="5" class="detail">\r
-        <table class="detail" id="detail{@id}">\r
-         <tr><td class="titreDetail">Genre<xsl:if test="count(genres/genre) > 1">s</xsl:if></td><td><xsl:for-each select="genres/genre"><xsl:value-of select="."/><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td></tr>\r
-         <tr><td class="titreDetail">Réalisateur<xsl:if test="count(realisateurs/realisateur) > 1">s</xsl:if></td><td><xsl:for-each select="realisateurs/realisateur"><xsl:value-of select="."/><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td></tr>\r
-         <tr><td class="titreDetail">Acteur<xsl:if test="count(acteurs/acteur) > 1">s</xsl:if></td><td><xsl:for-each select="acteurs/acteur"><xsl:value-of select="."/><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td></tr>\r
-         <tr><td class="titreDetail">Pays</td><td><xsl:for-each select="lespays/pays"><xsl:value-of select="."/><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td></tr>\r
-         <tr><td class="titreDetail">Synopsis</td><td><xsl:value-of select="synopsis"/></td></tr>\r
-        </table>\r
-       </td>\r
-      </tr>
-     </xsl:for-each>
-    </table>
+      
+      <xsl:for-each select="film">
+       <xsl:sort select="annee" order="descending" />\r
+       <xsl:sort select="titre" />
+       <tr id="ligne{@id}">
+        <td onclick="detailFilm('{@id}')" class="titre" id="titre{@id}"><xsl:value-of select="titre"/></td>
+        <td class="annee"><xsl:value-of select="annee"/></td>\r
+        <td class="duree"><xsl:value-of select="duree"/> min</td>\r
+        <td class="lien"><a href="{url}">GO</a></td>\r
+        <td class="fichier"><a href="divx:///{fichier}">GO</a></td>
+       </tr>\r
+       <tr>\r
+        <td colspan="5" class="detail">\r
+         <table class="detail" id="detail{@id}">\r
+          <tr><td class="titreDetail">Genre<xsl:if test="count(genres/genre) > 1">s</xsl:if></td><td><xsl:for-each select="genres/genre"><xsl:value-of select="."/><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td></tr>\r
+          <tr><td class="titreDetail">Réalisateur<xsl:if test="count(realisateurs/realisateur) > 1">s</xsl:if></td><td><xsl:for-each select="realisateurs/realisateur"><xsl:value-of select="."/><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td></tr>\r
+          <tr><td class="titreDetail">Acteur<xsl:if test="count(acteurs/acteur) > 1">s</xsl:if></td><td><xsl:for-each select="acteurs/acteur"><xsl:value-of select="."/><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td></tr>\r
+          <tr><td class="titreDetail">Pays</td><td><xsl:for-each select="lespays/pays"><xsl:value-of select="."/><xsl:if test="not(position() = last())">, </xsl:if></xsl:for-each></td></tr>\r
+          <tr><td class="titreDetail">Synopsis</td><td><xsl:value-of select="synopsis"/></td></tr>\r
+         </table>\r
+        </td>\r
+       </tr>
+      </xsl:for-each>
+     </table>\r
+    </div>\r
+    <div class="pied"></div>
    </body>
   </html>
  </xsl:template>