- improve : caddie display : now like the thumbails in category page. Valid HTML (still an Opera issue)

git-svn-id: http://piwigo.org/svn/trunk@1263 68402e56-0260-453c-a942-63ccdbb3a9ee

3 files changed, 28 insertions, 24 deletions

diff --git a/template/yoga/admin/element_set_global.tpl b/template/yoga/admin/element_set_global.tpl
index 1706646b9..d92fc9ba0 100644
--- a/template/yoga/admin/element_set_global.tpl
+++ b/template/yoga/admin/element_set_global.tpl
@@ -34,7 +34,7 @@
 <fieldset>
 
   <legend>{lang:Display options}</legend>
-
+<!--
   <p>{lang:elements per line}:
       <a href="{U_COLS}&amp;cols=4">4</a>
     | <a href="{U_COLS}&amp;cols=5">5</a>
@@ -44,7 +44,7 @@
     | <a href="{U_COLS}&amp;cols=9">9</a>
     | <a href="{U_COLS}&amp;cols=10">10</a>
   </p>
-
+-->
   <p>{lang:elements per page}:
       <a href="{U_DISPLAY}&amp;display=20">20</a>
     | <a href="{U_DISPLAY}&amp;display=50">50</a>
@@ -157,24 +157,21 @@
   <div class="navigationBar">{NAV_BAR}</div>
 
   <!-- BEGIN thumbnails -->
-  <!--table valign="top" align="center" class="thumbnail"-->
-  <table class="thumbnail">
+  <ul class="thumbnails">
     <!-- BEGIN line -->
-    <tr>
       <!-- BEGIN thumbnail -->
-      <td class="thumbnail">
+      <li><span class="wrap1"><span class="wrap2">
         <label>
         <img src="{thumbnails.line.thumbnail.SRC}"
              alt="{thumbnails.line.thumbnail.ALT}"
              title="{thumbnails.line.thumbnail.TITLE}"
-             class="thumbLink" />
+             class="thumbnail" />
         <input type="checkbox" name="selection[]" value="{thumbnails.line.thumbnail.ID}" />
         </label>
-      </td>
+      </span></span></li>
       <!-- END thumbnail -->
-    </tr>
     <!-- END line -->
-  </table>
+  </ul>
   <!-- END thumbnails -->
 
 </fieldset>
diff --git a/template/yoga/content.css b/template/yoga/content.css
index 1d2c7c930..2f17de8ff 100644
--- a/template/yoga/content.css
+++ b/template/yoga/content.css
@@ -56,7 +56,8 @@ BODY#theNBMPage #content
   display: table-cell;		/* block prevents vertical-align here */
   vertical-align: middle;	/* Ok with Opera and Geko not IE6 */
 }
-#content UL.thumbnails SPAN.wrap2 A {
+#content UL.thumbnails SPAN.wrap2 A,
+#content UL.thumbnails SPAN.wrap2 LABEL {
   display: block;
   border-bottom: none;
 }
@@ -64,13 +65,24 @@ BODY#theNBMPage #content
   margin-bottom: -4px;  /* why ??? something wrong with Geko and Opera ignored by IE6*/
 }
 
+/* label and input used for caddie in admin section */
+#content UL.thumbnails SPAN.wrap2 LABEL {
+  position: relative;
+}
+:root #content UL.thumbnails SPAN.wrap2 INPUT { /* hide from Opera */
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
 /* fix IE with another layout */
 * html #content UL.thumbnails SPAN.wrap2 {
   display: block;
   position: relative;
   text-align: left;
 }
-* html #content UL.thumbnails SPAN.wrap2 A {
+* html #content UL.thumbnails SPAN.wrap2 A,
+* html #content UL.thumbnails SPAN.wrap2 LABEL {
   overflow: visible;
   position: absolute;
   top: 50%;
@@ -83,6 +95,11 @@ BODY#theNBMPage #content
     margin-top: -40%;
   /**/
 }
+* html #content UL.thumbnails SPAN.wrap2 input {
+  position: absolute;
+  left: 0;
+  top: -50%;  /* same as other browsers but not so pretty */
+}
 
 #content .navigationBar, #content .additional_info {
     margin: 10px 0;
@@ -188,17 +205,6 @@ SPAN.filename:after {
   content: "]";
 }
 
-TD.thumbnail label {
-  position: relative;
-}
-TD.thumbnail input {
-  position: absolute;
-  left: 0;
-  top: 0;
-  background: transparent;
-  border: none;
-}
-
 /* begin chronology/calendar elements*/
 #content DIV.calendarViews {
   display: block;
diff --git a/template/yoga/fix-ie5-ie6.css b/template/yoga/fix-ie5-ie6.css
index 7f9d7c312..b50763967 100644
--- a/template/yoga/fix-ie5-ie6.css
+++ b/template/yoga/fix-ie5-ie6.css
@@ -10,7 +10,8 @@ H1, #theHeader {
 }
 
 /* to get less hugly checkboxes at least in tagSelection */
-UL.tagSelection LI INPUT {
+UL.tagSelection LI INPUT,
+#content UL.thumbnails SPAN.wrap2 input {
   border: none;
   background-color: transparent;
 }