New thubmnails layout in category based on the "girafe" pages by yoDan

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

2 files changed, 65 insertions, 67 deletions

diff --git a/template/cclear/category.tpl b/template/cclear/category.tpl
index bb218f9be..96744606d 100644
--- a/template/cclear/category.tpl
+++ b/template/cclear/category.tpl
@@ -111,28 +111,26 @@
 <ul class="thumbnails">
   <!-- BEGIN line -->
   <!-- BEGIN thumbnail -->
-  <li class="thumbnails">
-    <div>
+  <li>
+    <span>
+      <span><span class="wrap">
         <a href="{thumbnails.line.thumbnail.U_IMG_LINK}">
           <img class="thumbnail" src="{thumbnails.line.thumbnail.IMAGE}"
 	  alt="{thumbnails.line.thumbnail.IMAGE_ALT}"
 	  title="{thumbnails.line.thumbnail.IMAGE_TITLE}">
         </a>
-      <ul>
-      <li>
-	<!-- BEGIN element_name -->
-	{thumbnails.line.thumbnail.element_name.NAME}
-	<!-- END element_name -->
-	<!-- BEGIN category_name -->
-	[{thumbnails.line.thumbnail.category_name.NAME}]
-	<!-- END category_name -->
-	{thumbnails.line.thumbnail.IMAGE_TS}
-      </li>
+      </span></span>
+      <!-- BEGIN element_name -->
+      {thumbnails.line.thumbnail.element_name.NAME}
+      <!-- END element_name -->
+      <!-- BEGIN category_name -->
+      [{thumbnails.line.thumbnail.category_name.NAME}]
+      <!-- END category_name -->
+      {thumbnails.line.thumbnail.IMAGE_TS}
       <!-- BEGIN nb_comments -->
-      <li>{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {L_COMMENT} </li>
+      <br />{thumbnails.line.thumbnail.nb_comments.NB_COMMENTS} {L_COMMENT}
       <!-- END nb_comments -->
-      </ul>
-     </div>
+     </span>
   </li>
   <!-- END thumbnail -->
   <!-- END line -->
diff --git a/template/cclear/content.css b/template/cclear/content.css
index 8589c4520..c29cf99f6 100644
--- a/template/cclear/content.css
+++ b/template/cclear/content.css
@@ -28,58 +28,58 @@ BODY#theNotificationPage #content
 }
 
 #content UL.thumbnails {
-    margin: 0; padding: 0;
-    list-style-type: none;
-    text-align: center;  /*eventuellement */
-}
-
-#content LI.thumbnails {
-	display: inline;
-	padding: 0; text-indent: 0;
-	margin: 0 10px 10px 10px;
-}
-#content UL.thumbnails UL {
-	margin: 0; padding: 0; text-indent: 0;
-	list-style-type: none;
-}
-#content UL.thumbnails UL LI {
-	text-align: center; 
-}
-#content UL.thumbnails div {
-	margin: 0;
-    	vertical-align: top;   /*geko doesn't eat that :-(*/
-	text-align: center; 
-    	width: 128px;
-}
-/* IE block level element inline-block hack */
-* html #content UL.thumbnails div {display:inline-block;}
-* html #content UL.thumbnails div {display:inline;}
-/* end of IE hack*/
-/* for non-IE */
-#content UL.thumbnails li>div {display:table-cell;display:inline-table;}
-
-/* Geko hack to get thumbnails top aligned*/
-/* not proud of that still looking for a better one */
-#content UL.thumbnails li>div {height:150px;}
-/* endof Geko hack*/
-
-/* align top with geko */
-/*#content UL.thumbnails li>div>div {
-	display: block;
-	position: relative;
-	height:128px;
-}
-#content UL.thumbnails li>div>div>a { position: absolute; top: 0; }
-#content UL.thumbnails li>div img.thumbnail { position: relative; left: -50%; }
-#content UL.thumbnails li>div ul {position: absolute; bottom: 0;}
-doesn't work :-((*/
-
-/*#content UL.thumbnails LI>SPAN { vertical-align: baseline; }*/
-#content UL.thumbnails LI IMG.thumbnail { margin-bottom: .4ex; }
-
-#content UL.thumbnails IMG.thumbnail { border: 1px solid #000000; }
-
-/*#content UL.thumbnails SPAN A:first-child { border: none }*/
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  text-align: center;	/* to center the whole collection in #content */
+}
+#content UL.thumbnails LI { display: inline }
+
+#content UL.thumbnails SPAN {
+  margin: 0 5px 5px 5px;
+  /*width: 130px;		 128px + 2 * 1px if the SPAN has a border of 1px */
+  width: 128px;			/* we can use the same size as well */
+  display: table-cell; display: inline-table; display: inline-block;
+  vertical-align: top;		/* OK with Opera and IE6 not Geko */
+  text-align: center;		/* to center the thumbnail and legend in Geko/Opera */
+}
+#content UL.thumbnails SPAN SPAN {
+  margin: 0;			/* important reset the margins */
+  border: 1px solid #aaaaaa;
+  width: 128px;			/* fixed size again */
+  height: 128px;		/* fixed size again */
+  display: table-cell;		/* block prevents vertical-align here */
+  vertical-align: middle;	/* Ok with Opera and Geko not IE6 */
+}
+#content UL.thumbnails SPAN.wrap {
+  border: none;
+  height: auto;		/* important for vertical centering */
+  display: block;	/* important */
+  overflow: hidden;	/* everridden by specific IE6 rule below */
+  margin-top: auto;	/* to make vertical-align work in Geko and Opera */
+  margin-bottom: auto;	/* to make vertical-align work in Geko and Opera */
+}
+#content UL.thumbnails IMG {
+  margin-bottom: -4px;  /* why ??? something wrong with Geko and Opera ignored by IE6*/
+}
+
+/* fix IE with another layout */
+* html #content UL.thumbnails SPAN {
+  overflow: hidden;	/* keep it there: not needed by Geko, buggy with Opera */
+}
+* html #content UL.thumbnails SPAN SPAN {
+  position: relative;
+}
+* html #content UL.thumbnails SPAN.wrap {
+  overflow: visible;
+  position: absolute;
+  top: 50%;
+  left: 0px;		/* same as "#content UL.thumbnails SPAN SPAN { padding:" if any*/
+}
+* html #content UL.thumbnails IMG {
+  position: relative;
+  top: -50%;
+}
 
 
 #content .navigationBar, #content .additional_info {